Fix out of bounds v2 (#53)

RheingoldRiver · Oct 25, 2023 · 14b7b2e · 14b7b2e
1 parent 5417d60
commit 14b7b2e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 18 deletions.
diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { useContext } from "react";
 import { AppStateContext } from "../AppStateProvider/AppStateProvider";
-import { PaintedCell, PENTOMINO_SIZES } from "../../constants";
+import { ConflictType, PaintedCell, PENTOMINO_SIZES } from "../../constants";
 import { GameStateContext } from "../GameStateProvider/GameStateProvider";
 import { PENTOMINOES } from "../../pentominoes";
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -35,7 +35,12 @@ export const Cell = ({
     return `1px solid ${borderColor}`;
   }
   function backgroundColor() {
-    if (cell.conflict && hasPentomino) return { class: "bg-red-700", style: "" };
+    if (
+      hasPentomino &&
+      (cell.conflict.tileName === pentomino.name || cell.conflict.type === ConflictType.Intersection)
+    ) {
+      return { class: "bg-red-700", style: "" };
+    }
     if (cell.pentomino.pentomino.name === PENTOMINOES.R.name)
       return { class: "bg-gray-500 dark:bg-gray-600", style: "" };
     if (hasPentomino)

diff --git a/src/components/GameStateProvider/paintGrid.test.ts b/src/components/GameStateProvider/paintGrid.test.ts
@@ -1,4 +1,4 @@
-import { EMPTY_GRID } from "./../../constants";
+import { ConflictType, EMPTY_GRID } from "./../../constants";
 import { expect, test } from "vitest";
 import { SURFACES } from "../../constants";
 import {
@@ -88,8 +88,17 @@ test("no incorrect conflicts where 2 pieces touch", () => {
     grid,
     false
   );
-  // expect(paintedGrid[0][1].conflict).toBe(false);
-  expect(paintedGrid[0][0].conflict).toBe(true);
-  expect(paintedGrid[4][1].conflict).toBe(true);
-  expect(paintedGrid[3][1].conflict).toBe(true);
+  expect(paintedGrid[0][1].conflict).toBe(false);
+  expect(paintedGrid[0][0].conflict).toStrictEqual({
+    tileName: "F",
+    type: ConflictType.Overflow,
+  });
+  expect(paintedGrid[4][1].conflict).toStrictEqual({
+    tileName: "V",
+    type: ConflictType.Intersection,
+  });
+  expect(paintedGrid[3][1].conflict).toStrictEqual({
+    tileName: "V",
+    type: ConflictType.Intersection,
+  });
 });
diff --git a/src/components/GameStateProvider/paintGrid.ts b/src/components/GameStateProvider/paintGrid.ts
@@ -1,4 +1,4 @@
-import { PlacedPentomino } from "./../../constants";
+import { ConflictType, PlacedPentomino } from "./../../constants";
 import { Borders, PaintedCell } from "../../constants";
 import { range } from "lodash";
 import { PENTOMINOES } from "../../pentominoes";
@@ -38,7 +38,7 @@ export const emptyPaintedGrid = (h: number, w: number) => {
     range(w).map((y) => {
       return {
         pentomino: EMPTY_PENTOMINO(x, y),
-        conflict: false,
+        conflict: { type: ConflictType.None, tileName: PENTOMINOES.None.name },
         center: false,
         borders: {
           borderTop: false,
@@ -69,14 +69,15 @@ export const paintCell = (
       const width = grid[0].length;
       const { newX, newY } = getCoordinatesToPaint(surface, height, width, rawX, rawY);
 
-      if (checkOutOfBounds(grid, paintedGrid, newX, newY)) return;
+      if (checkOutOfBounds(grid, paintedGrid, newX, newY, p.pentomino.name)) return;
 
       // ok should be a valid placement now
       const cellToPaint = paintedGrid[newX][newY];
       cellToPaint.hovered = hovered;
       cellToPaint.center = px === orientation.center.x && py === orientation.center.y;
       if (cellToPaint.pentomino.pentomino.name !== PENTOMINOES.None.name) {
-        cellToPaint.conflict = true;
+        cellToPaint.conflict.tileName = cellToPaint.pentomino.pentomino.name;
+        cellToPaint.conflict.type = ConflictType.Intersection;
       }
       cellToPaint.pentomino = p;
       const flipX = outOfBounds(rawY, width) && surface.orientation.h === Orientation.Nonorientable;
@@ -207,7 +208,8 @@ function checkOutOfBounds(
   grid: PlacedPentomino[][],
   paintedGrid: PaintedCell[][],
   newX: number,
-  newY: number
+  newY: number,
+  name: string
 ): boolean {
   const height = grid.length;
   const width = grid[0].length;
@@ -216,21 +218,26 @@ function checkOutOfBounds(
   if (newX < 0 || newX > height - 1) {
     const correctedX = newX < 0 ? 0 : height - 1;
     if (newY < 0) {
-      paintedGrid[correctedX][0].conflict = true;
+      overflowConflict(paintedGrid[correctedX][0], name);
     } else if (newY > width - 1) {
-      paintedGrid[correctedX][width - 1].conflict = true;
+      overflowConflict(paintedGrid[correctedX][width - 1], name);
     } else {
-      paintedGrid[correctedX][newY].conflict = true;
+      overflowConflict(paintedGrid[correctedX][newY], name);
     }
     return true;
   }
   if (newY < 0) {
-    paintedGrid[newX][0].conflict = true;
+    overflowConflict(paintedGrid[newX][0], name);
     return true;
   }
   if (newY > width - 1) {
-    paintedGrid[newX][width - 1].conflict = true;
+    overflowConflict(paintedGrid[newX][width - 1], name);
     return true;
   }
   return false;
 }
+
+function overflowConflict(cell: PaintedCell, name: string) {
+  cell.conflict.type = ConflictType.Overflow;
+  cell.conflict.tileName = name;
+}
diff --git a/src/constants.ts b/src/constants.ts
@@ -54,9 +54,20 @@ export interface Borders {
   borderRight: boolean;
 }
 
+export enum ConflictType {
+  None,
+  Overflow,
+  Intersection,
+}
+
+interface Conflict {
+  type: ConflictType;
+  tileName: string;
+}
+
 export interface PaintedCell {
   pentomino: PlacedPentomino;
-  conflict: boolean;
+  conflict: Conflict;
   borders: Borders;
   center: boolean;
   hovered: boolean;