Add scatter chart

package.json

@@ -3,7 +3,11 @@
   "productName": "PieRayHelper",
   "version": "1.0.0",
   "description": "Anti/PieRay Helper",
-  "keywords": ["minecraft", "piechart", "pieray"],
+  "keywords": [
+    "minecraft",
+    "piechart",
+    "pieray"
+  ],
   "author": {
     "name": "GreenAppers",
     "email": "[email protected]"
@@ -21,7 +25,8 @@
     "electron-is-dev": "^3.0.1",
     "electron-squirrel-startup": "^1.0.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "recharts": "^2.12.7"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/App.tsx

@@ -1,7 +1,18 @@
 import React, { useEffect, useState } from 'react'
+import {
+  ScatterChart,
+  CartesianGrid,
+  Legend,
+  Scatter,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import type { Corner } from './types'
 
 function App() {
-  const [corners, setCorners] = useState([])
+  const [corners, setCorners] = useState([] as Corner[])
+
   useEffect(() => {
     window.api.onClipboardTextUpdated((text: string) => {
       const match = text.match(/X: (-?\d+) Y: (-?\d+) Z: (-?\d+)/)
@@ -11,21 +22,75 @@ function App() {
       const y = parseInt(match[2])
       const z = parseInt(match[3])
 
-      const corner = `${x}, ${y}, ${z}`
+      const corner: Corner = {
+        chunk: { x: Math.floor(x / 16), z: Math.floor(z / 16) },
+        position: { x, y, z },
+      }
+
       setCorners((corners) => [...corners, corner])
     })
     return () => window.api.removeClipboardTextUpdatedListener()
   }, [])
 
+  let minX, maxX, minZ, maxZ
+  for (const corner of corners) {
+    if (minX === undefined || corner.chunk.x < minX) minX = corner.chunk.x
+    if (maxX === undefined || corner.chunk.x > maxX) maxX = corner.chunk.x
+    if (minZ === undefined || corner.chunk.z < minZ) minZ = corner.chunk.z
+    if (maxZ === undefined || corner.chunk.z > maxZ) maxZ = corner.chunk.z
+  }
+
   return (
     <div>
       <h1>🥧📡 Anti/PieRay Helper</h1>
-      <p>Corners:</p>
-      <>
-        {corners.map((x) => (
-          <p>{x}</p>
+      <p>
+        Setup bind for <a href="https://www.lunarclient.com/">Lunar Client</a> mod{' '}
+        <a href="https://lunarclient.dev/apollo/developers/mods/coordinates">
+          Coordinates
+        </a>{' '}
+        to "Copy Coords to Clipboard".
+      </p>
+      <ScatterChart
+        width={730}
+        height={250}
+        margin={{
+          top: 20,
+          right: 20,
+          bottom: 10,
+          left: 10,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="x"
+          type="number"
+          name="x"
+          domain={[minX - 1, maxX + 1]}
+          allowDecimals={false}
+        />
+        <YAxis
+          dataKey="z"
+          type="number"
+          name="z"
+          domain={[minZ - 1, maxZ + 1]}
+          allowDecimals={false}
+        />
+        <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+        <Legend />
+        <Scatter
+          name="Corners"
+          data={corners.map((x) => x.chunk)}
+          fill="#8884d8"
+        />
+      </ScatterChart>
+      <ul>
+        {corners.map((c) => (
+          <li>
+            Position: {c.position.x}, {c.position.z}, Chunk: {c.chunk.x},{' '}
+            {c.chunk.z}
+          </li>
         ))}
-      </>
+      </ul>
     </div>
   )
 }

src/index.css

@@ -1,7 +1,4 @@
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif;
-  margin: auto;
-  max-width: 38rem;
-  padding: 2rem;
 }

src/types.d.ts

@@ -1,5 +1,26 @@
 import { api } from './preload'
 
+interface Chunk {
+  x: number
+  z: number
+}
+
+interface ChunkDirection {
+  x: 1 | -1
+  z: 1 | -1
+}
+
+interface Vector3 {
+  x: number
+  y: number
+  z: number
+}
+
+interface Corner {
+  chunk: Chunk
+  position: Vector3
+}
+
 declare global {
   interface Window {
     api: typeof api