Bug fixes

package.json

@@ -32,7 +32,7 @@
     "framer-motion": "^11.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "recharts": "^2.12.7"
+    "recharts": "^2.13.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/components/App.tsx

@@ -44,9 +44,23 @@ import {
 import type { ScatterPointItem } from 'recharts/types/cartesian/Scatter'
 import type { ChunkDirection, Direction, Sample, Solution } from '../types'
 
-const vanillaCoords = /tp @s (-?\d+\.\d+) (-?\d+\.\d+) (-?\d+\.\d+)/
+const vanillaCoords =
+  /tp @s (-?\d+\.\d+) (-?\d+\.\d+) (-?\d+\.\d+) (-?\d+\.\d+)/
 const lunarClientCoords = /X: (-?\d+) Y: (-?\d+) Z: (-?\d+)/
 
+function getDirectionFromRotation(
+  rotation?: number
+): ChunkDirection | undefined {
+  if (typeof rotation !== 'number') return undefined
+  const angleInRadians = rotation * (Math.PI / 180)
+  const x = -Math.sin(angleInRadians)
+  const z = Math.cos(angleInRadians)
+  return {
+    x: Math.abs(x) > 0.5 ? (x > 0 ? 1 : -1) : 0,
+    z: Math.abs(z) > 0.5 ? (z > 0 ? 1 : -1) : 0,
+  }
+}
+
 function getDirectionArrow(direction?: ChunkDirection) {
   if (!direction) return ''
   switch (direction.z) {
@@ -70,10 +84,10 @@ const ScatterArrow = (
       {direction ? (
         <g transform={`translate(${cx},${cy})`}>
           <text
-            alignment-baseline="middle"
+            alignmentBaseline="middle"
             fill={fill}
-            font-weight="bold"
-            text-anchor="middle"
+            fontWeight="bold"
+            textAnchor="middle"
           >
             {getDirectionArrow(direction)}
           </text>
@@ -91,10 +105,10 @@ const ScatterStar = (props: ScatterPointItem & { fill?: string }) => {
     <g>
       <g transform={`translate(${cx},${cy})`}>
         <text
-          alignment-baseline="middle"
+          alignmentBaseline="middle"
           fill={fill}
-          font-weight="bold"
-          text-anchor="middle"
+          fontWeight="bold"
+          textAnchor="middle"
         >
           {'★'}
         </text>
@@ -123,7 +137,10 @@ function App() {
 
   useEffect(() => {
     window.api.onClipboardTextUpdated((text: string) => {
+      let rotation: number | undefined
       let match = text.match(vanillaCoords)
+      if (match) rotation = parseFloat(match[4])
+
       if (!match) match = text.match(lunarClientCoords)
       if (!match) return
 
@@ -134,12 +151,13 @@ function App() {
       const sample: Sample = {
         chunk: { x: Math.floor(x / 16), z: Math.floor(z / 16) },
         position: { x, y, z },
+        direction: getDirectionFromRotation(rotation),
       }
 
       setSamples((samples) => {
         for (const currentSample of samples) {
-          const xDirection = currentSample.position.x - sample.position.x
-          const zDirection = currentSample.position.z - sample.position.z
+          const xDirection = sample.position.x - currentSample.position.x
+          const zDirection = sample.position.z - currentSample.position.z
           if (Math.abs(xDirection) <= 1 && Math.abs(zDirection) <= 1) {
             log.info(
               `Updated direction: ${currentSample.position.x}, ${currentSample.position.z} -> ${x}, ${z}`
@@ -317,6 +335,7 @@ function App() {
         <Legend />
         {samples.map((x, i) => (
           <Scatter
+            key={i}
             name={`Corner ${i + 1}`}
             data={[{ ...x.chunk, direction: x.direction }]}
             fill={green500}
@@ -360,7 +379,7 @@ function App() {
               </Tr>
             )}
             {samples.map((corner, i) => (
-              <Tr _hover={{ backgroundColor: 'blue.50' }}>
+              <Tr key={i} _hover={{ backgroundColor: 'blue.50' }}>
                 <Td>
                   <Icon as={CheckIcon} color="green.500" marginX="5px" />
                 </Td>

yarn.lock

@@ -6581,11 +6581,16 @@ react-focus-lock@^2.9.4:
     use-callback-ref "^1.3.2"
     use-sidecar "^1.1.2"
 
-react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-remove-scroll-bar@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
@@ -6700,15 +6705,15 @@ recharts-scale@^0.4.4:
   dependencies:
     decimal.js-light "^2.4.1"
 
-recharts@^2.12.7:
-  version "2.12.7"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.12.7.tgz#c7f42f473a257ff88b43d88a92530930b5f9e773"
-  integrity sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==
+recharts@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.13.0.tgz#a293322ea357491393cc7ad6fcbb1e5f8e99bc93"
+  integrity sha512-sbfxjWQ+oLWSZEWmvbq/DFVdeRLqqA6d0CDjKx2PkxVVdoXo16jvENCE+u/x7HxOO+/fwx//nYRwb8p8X6s/lQ==
   dependencies:
     clsx "^2.0.0"
     eventemitter3 "^4.0.1"
     lodash "^4.17.21"
-    react-is "^16.10.2"
+    react-is "^18.3.1"
     react-smooth "^4.0.0"
     recharts-scale "^0.4.4"
     tiny-invariant "^1.3.1"