add grid markings

src/blockpuzzle/components/Game.tsx

@@ -1,28 +1,26 @@
 import { forwardRef, useEffect } from "react";
 import { useGameStore } from "../store";
 import UnitBlock from "./UnitBlock";
-import {
-  acceptedKeys,
-  idleInput,
-} from "../constants";
+import { acceptedKeys, idleInput } from "../constants";
 import Status from "./Status";
+import GridBlock from "./GridBlock";
 
 interface GameProps {
   width: number;
   height: number;
-  blockSize: number
+  blockSize: number;
 }
 
 const Game = forwardRef<HTMLDivElement, GameProps>(function Game(props, ref) {
-  const { width, height, blockSize } = props;  
+  const { width, height, blockSize } = props;
 
   const grid = useGameStore((state) => state.grid);
 
   const input = useGameStore((state) => state.input);
   const current = useGameStore((state) => state.current);
   const currentPieceId = useGameStore((state) => state.currentPieceId);
-  
-  const isReady = useGameStore(state => state.status !== "loading")
+
+  const isReady = useGameStore((state) => state.status !== "loading");
 
   useEffect(() => {
     const keyboardHandler = (event: KeyboardEvent) => {
@@ -90,24 +88,31 @@ const Game = forwardRef<HTMLDivElement, GameProps>(function Game(props, ref) {
             {grid.map(
               (row, y) =>
                 y > 1 &&
-                row.map(
-                  (col, x) =>
-                    col && (
+                row.map((col, x) => (
+                  <>
+                    <GridBlock
+                      key={`g${x}${y}`}
+                      x={x}
+                      y={y - 2}
+                      size={blockSize}
+                    />
+                    {col && (
                       <UnitBlock
                         key={`${y}${x}`}
                         x={x}
                         y={y - 2}
                         size={blockSize}
                         color={col}
                       />
-                    )
-                )
+                    )}
+                  </>
+                ))
             )}
           </div>
         )}
       </div>
     </div>
   );
-})
+});
 
 export default Game;

src/blockpuzzle/components/GridBlock.tsx

@@ -0,0 +1,26 @@
+import classNames from "classnames";
+import { Block } from "../types";
+
+type GridBlockProps = Omit<Block, "color">;
+
+function GridBlock(props: GridBlockProps) {
+  const { x, y, size } = props;
+
+  const classes = classNames(
+    "bg-transparent aspect-square border-[1px] border-white absolute z-0 opacity-10",
+  );
+
+  return (
+    <div
+      style={{
+        left: x * size,
+        top: y * size,
+        width: size,
+        height: size,
+      }}
+      className={classes}
+    />
+  );
+}
+
+export default GridBlock;

src/blockpuzzle/components/UnitBlock.tsx

@@ -17,7 +17,7 @@ function UnitBlock(props: Block) {
   const { x, y, size, color } = props;
 
   const classes = classNames(
-    "bg-white rounded aspect-square border-[4px] absolute unit-block",
+    "bg-white rounded aspect-square border-[4px] absolute unit-block z-50",
     styles.unitBlock,
     colors[color]
   );