Minor fixes

src/data/HexGrid.vue

@@ -4,13 +4,12 @@
             <div
                 v-for="(color, colIndex) in row"
                 :key="`${rowIndex}-${colIndex}-${color}`"
-                class="hexagon-wrapper"
-                :style="{ '--color': color }"
+                :class="{ 'hexagon-wrapper': true, [color]: true }"
                 @click="updateColor(rowIndex, colIndex)"
                 @mouseover="setHoveredCell(rowIndex, colIndex)"
                 @mouseout="resetHoveredCell"
             >
-                <div class="hexagon" :style="{ backgroundColor: color }"></div>
+                <div class="hexagon"></div>
                 <transition name="fade">
                     <div
                         v-if="
@@ -18,10 +17,9 @@
                             hoveredCell?.col === colIndex &&
                             color !== selectedColor
                         "
-                        class="hexagon-overlay"
-                        :style="{ '--color': selectedColor }"
+                        :class="{ 'hexagon-overlay': true, [selectedColor]: true }"
                     >
-                        <div class="hexagon" :style="{ backgroundColor: selectedColor }"></div>
+                        <div class="hexagon"></div>
                     </div>
                 </transition>
             </div>
@@ -111,6 +109,7 @@ function resetHoveredCell() {
     height: 100%;
     backdrop-filter: blur(3px);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+    background-color: var(--color);
 }
 
 .hexagon-overlay {
@@ -138,4 +137,20 @@ function resetHoveredCell() {
         transform: translateY(-7.5px);
     }
 }
+
+.gray {
+    --color: rgba(64, 64, 64, 0.6);
+}
+
+.red {
+    --color: rgba(255, 0, 0, 0.86);
+}
+
+.green {
+    --color: rgba(0, 255, 0, 0.6);
+}
+
+.blue {
+    --color: rgba(0, 0, 255, 0.6);
+}
 </style>

src/data/hexutils.ts

@@ -0,0 +1,43 @@
+export const hexOffsets = [
+    // even rows
+    [
+        [+1, 0],
+        [+1, -1],
+        [0, -1],
+        [-1, 0],
+        [0, +1],
+        [+1, +1]
+    ],
+    // odd rows
+    [
+        [+1, 0],
+        [0, -1],
+        [-1, -1],
+        [-1, 0],
+        [-1, +1],
+        [0, +1]
+    ]
+] as const;
+
+export function forEachNeighbor(
+    grid: string[][],
+    row: number,
+    col: number,
+    cb: (cell: string | undefined, row: number, col: number) => void
+) {
+    const parity = row & 1;
+    for (let i = 0; i < 6; i++) {
+        const [xOffset, yOffset] = hexOffsets[parity][i];
+        const neighborRow = row + yOffset;
+        const neighborCol = col + xOffset;
+        const neighborCell = grid[neighborRow]?.[neighborCol];
+        cb(neighborCell, neighborRow, neighborCol);
+    }
+}
+
+export function getNeighbors(grid: string[][], row: number, col: number) {
+    const parity = row & 1;
+    return hexOffsets[parity]
+        .map(([xOffset, yOffset]) => grid[row + yOffset]?.[col + xOffset])
+        .filter(cell => cell != null);
+}

src/data/projEntry.tsx

@@ -9,10 +9,10 @@ import { persistent } from "game/persistence";
 import "./main.css";
 
 const tiles = {
-    gray: "rgba(64, 64, 64, 0.6)",
-    red: "rgba(255, 0, 0, 0.86)",
-    green: "rgba(0, 255, 0, 0.6)",
-    blue: "rgba(0, 0, 255, 0.6)"
+    gray: "gray",
+    red: "red",
+    green: "green",
+    blue: "blue"
 };
 
 /**
@@ -21,7 +21,7 @@ const tiles = {
 export const main = createLayer("main", function (this: BaseLayer) {
     const grid = persistent([
         [tiles.gray, tiles.gray],
-        [tiles.gray, tiles.gray, tiles.gray],
+        [tiles.red, tiles.green, tiles.blue],
         [tiles.gray, tiles.gray]
     ]);
     return {
@@ -44,7 +44,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
  */
 export const getInitialLayers = (
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-    player: Partial<PlayerData>
+    player: Partial<Player>
 ): Array<GenericLayer> => [main];
 
 /**