Added a simple hexgrid class. Not sure if we need it tbh

packages/snips/src/uprp/stampy.ts

@@ -218,14 +218,36 @@ export class StampySnip extends BaseSnip {
             this.height / 2,
             (this.volume.diameter / 2) * s,
             {
-                stroke: "black",
+                stroke: "#000",
                 fill: "red",
-                fill_alpha: 0.5,
+                fill_alpha: 0.2,
             },
         );
 
         // Render scale
         this.drawScale(ctx, s);
+
+        // Render grid points
+        const grid = new HexagonalGrid(
+            0,
+            0,
+            0,
+            50,
+            this.width / 2,
+            this.height / 2,
+        );
+
+        for (let i = -1; i < 2; i++) {
+            for (let j = -1; j < 2; j++) {
+                const { x, y } = grid.axialToPixel(i, j);
+                this.drawCircle(ctx, x, y, 2, {
+                    stroke: "#000",
+                    fill: "#000",
+                });
+                const txt = `${i}, ${j}`;
+                ctx.fillText(txt, x + 5, y + 5);
+            }
+        }
     }
 
     private drawCircle(
@@ -247,25 +269,33 @@ export class StampySnip extends BaseSnip {
             style.stroke_alpha = 1;
         }
 
-        // Draw fill if fill color is defined
-        if (style.fill) {
-            ctx.save();
-            ctx.beginPath();
-            ctx.globalAlpha = style.fill_alpha;
-            ctx.fillStyle = style.fill;
-            ctx.arc(x, y, radius, 0, 2 * Math.PI);
-            ctx.fill();
-            ctx.restore();
-        }
+        // Draw center point
+        ctx.save();
+        ctx.fillStyle = "#000";
+        ctx.beginPath();
+        ctx.arc(x, y, 3, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fill();
 
         // Draw stroke
-        ctx.save();
         ctx.globalAlpha = style.stroke_alpha;
         ctx.strokeStyle = style.stroke;
+        ctx.lineWidth = 2;
         ctx.beginPath();
         ctx.arc(x, y, radius, 0, 2 * Math.PI);
         ctx.closePath();
         ctx.stroke();
+
+        // Draw fill if fill color is defined
+        if (style.fill) {
+            ctx.globalAlpha = style.fill_alpha;
+            ctx.fillStyle = style.fill;
+
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.fill();
+        }
         ctx.restore();
     }
 
@@ -397,3 +427,96 @@ class Hexagon {
         );
     }
 }
+
+class HexagonalGrid extends Hexagon {
+    private centerX: number;
+    private centerY: number;
+    private size: number;
+
+    /**
+     * Creates a new HexagonalGrid instance.
+     * @param q - The q coordinate of the hexagon.
+     * @param r - The r coordinate of the hexagon.
+     * @param s - The s coordinate of the hexagon.
+     * @param size - The size of each hexagon in the grid.
+     */
+    constructor(
+        q: number,
+        r: number,
+        s: number,
+        size: number,
+        centerX = 0,
+        centerY = 0,
+    ) {
+        super(q, r, s);
+        this.size = size;
+        this.centerX = centerX;
+        this.centerY = centerY;
+    }
+
+    /**
+     * Converts axial coordinates (q, r) to pixel coordinates.
+     * @param q - The q coordinate.
+     * @param r - The r coordinate.
+     * @returns An object containing the x and y pixel coordinates.
+     */
+    axialToPixel(q: number, r: number): { x: number; y: number } {
+        const x =
+            this.size * (Math.sqrt(3) * q + (Math.sqrt(3) / 2) * r) +
+            this.centerX;
+        const y = this.size * (3 / 2) * r + this.centerY;
+        return { x, y };
+    }
+
+    /**
+     * Converts pixel coordinates to axial coordinates, adjusted for the grid's center.
+     * @param x - The x pixel coordinate.
+     * @param y - The y pixel coordinate.
+     * @returns An object containing the q and r axial coordinates.
+     */
+    pixelToAxial(x: number, y: number): { q: number; r: number } {
+        const adjustedX = x - this.centerX;
+        const adjustedY = y - this.centerY;
+        const q = ((adjustedX * Math.sqrt(3)) / 3 - adjustedY / 3) / this.size;
+        const r = (adjustedY * 2) / 3 / this.size;
+        return { q, r };
+    }
+
+    /**
+     * Rounds fractional axial coordinates to the nearest hexagon.
+     * @param q - The q coordinate.
+     * @param r - The r coordinate.
+     * @returns A new Hexagon instance representing the nearest hexagon.
+     */
+    roundToNearestHexagon(q: number, r: number): Hexagon {
+        const s = -q - r;
+        let roundedQ = Math.round(q);
+        let roundedR = Math.round(r);
+        let roundedS = Math.round(s);
+
+        const deltaQ = Math.abs(roundedQ - q);
+        const deltaR = Math.abs(roundedR - r);
+        const deltaS = Math.abs(roundedS - s);
+
+        if (deltaQ > deltaR && deltaQ > deltaS) {
+            roundedQ = -roundedR - roundedS;
+        } else if (deltaR > deltaS) {
+            roundedR = -roundedQ - roundedS;
+        } else {
+            roundedS = -roundedQ - roundedR;
+        }
+
+        return new Hexagon(roundedQ, roundedR, roundedS);
+    }
+
+    /**
+     * Snaps a point in pixel coordinates to the nearest hexagon in the grid.
+     * @param x - The x pixel coordinate.
+     * @param y - The y pixel coordinate.
+     * @returns A new Hexagon instance representing the nearest hexagon.
+     */
+    snapToGrid(x: number, y: number): Hexagon {
+        const { q, r } = this.pixelToAxial(x, y);
+        return this.roundToNearestHexagon(q, r);
+    }
+}