Update title & add project info (#73)

RheingoldRiver · Nov 3, 2023 · 70ffdb6 · 70ffdb6
1 parent 74fcca7
commit 70ffdb6
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
         background-color: #030712;
       }
     </style>
-    <title>Pentominoes</title>
+    <title>Pentominoes on Surfaces</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/GameStateProvider/GameStateProvider.tsx b/src/components/GameStateProvider/GameStateProvider.tsx
@@ -53,7 +53,7 @@ import { deserializeHotkeys, serializeHotkeys } from "./hotkeyMapState";
 
 interface GameState {
   grid: PlacedPentomino[][];
-  newGrid: (nextGrid: PlacedPentomino[][]) => void;
+  newGrid: (nextGrid: PlacedPentomino[][]) => boolean;
   resetGrid: (dimensions: Dimensions) => void;
   paintedGrid: PaintedCell[][];
   currentPentomino: Pentomino;
@@ -84,7 +84,9 @@ interface GameState {
 
 const DEFAULT_GAME_STATE: GameState = {
   grid: [],
-  newGrid: () => {},
+  newGrid: () => {
+    return true;
+  },
   resetGrid: () => {},
   paintedGrid: [],
   currentPentomino: PENTOMINOES.None,
@@ -300,15 +302,19 @@ export default function GameStateProvider({ children }: { children: ReactNode })
     );
   }
 
-  function newGrid(nextGrid: PlacedPentomino[][]) {
+  function newGrid(nextGrid: PlacedPentomino[][]): boolean {
     let gridIsEmpty = true;
     // check against the grid from game state
     grid.forEach((row) =>
       row.forEach((cell) => {
         if (cell.pentomino.name !== PENTOMINOES.None.name) gridIsEmpty = false;
       })
     );
-    if (gridIsEmpty || confirm("Reset your board? You won't be able to undo.")) setGrid(nextGrid);
+    if (gridIsEmpty || confirm("Reset your board? You won't be able to undo.")) {
+      setGrid(nextGrid);
+      return true;
+    }
+    return false;
   }
 
   function clickBoard(x: number, y: number) {

diff --git a/src/components/Grid/InfoGrid.tsx b/src/components/Grid/InfoGrid.tsx
@@ -1,22 +1,32 @@
 import { PlacedPentomino } from "../../constants";
 import clsx from "clsx";
-import { ReactNode, memo, useContext } from "react";
+import { Dispatch, ReactNode, SetStateAction, memo, useContext } from "react";
 import { GameStateContext } from "../GameStateProvider/GameStateProvider";
 
-export const InfoGrid = memo(({ grid: displayGrid, children }: { grid: PlacedPentomino[][]; children: ReactNode }) => {
-  const { newGrid } = useContext(GameStateContext);
-  return (
-    <div
-      className={clsx("grid grid-flow-row w-fit h-fit cursor-pointer")}
-      style={{
-        gridTemplateRows: `repeat(${displayGrid.length}, minmax(0, 1fr))`,
-        gridTemplateColumns: `repeat(${displayGrid[0].length}, minmax(0, 1fr))`,
-      }}
-      onClick={() => {
-        newGrid(displayGrid);
-      }}
-    >
-      {children}
-    </div>
-  );
-});
+export const InfoGrid = memo(
+  ({
+    grid: displayGrid,
+    setInfoOpen,
+    children,
+  }: {
+    grid: PlacedPentomino[][];
+    setInfoOpen: Dispatch<SetStateAction<boolean>>;
+    children: ReactNode;
+  }) => {
+    const { newGrid } = useContext(GameStateContext);
+    return (
+      <div
+        className={clsx("grid grid-flow-row w-fit h-fit cursor-pointer")}
+        style={{
+          gridTemplateRows: `repeat(${displayGrid.length}, minmax(0, 1fr))`,
+          gridTemplateColumns: `repeat(${displayGrid[0].length}, minmax(0, 1fr))`,
+        }}
+        onClick={() => {
+          if (newGrid(displayGrid)) setInfoOpen(false);
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+);
diff --git a/src/components/Information/Information.tsx b/src/components/Information/Information.tsx
@@ -19,6 +19,16 @@ interface GridExample {
 }
 
 const gridExampleStructure: GridExample[] = [
+  {
+    w: 8,
+    l: 8,
+    terrain: [
+      { x: 7, y: 7 },
+      { x: 0, y: 0 },
+      { x: 0, y: 7 },
+      { x: 7, y: 0 },
+    ],
+  },
   {
     w: 8,
     l: 8,
@@ -59,16 +69,6 @@ const gridExampleStructure: GridExample[] = [
       { x: 6, y: 0 },
     ],
   },
-  {
-    w: 8,
-    l: 8,
-    terrain: [
-      { x: 7, y: 7 },
-      { x: 0, y: 0 },
-      { x: 0, y: 7 },
-      { x: 7, y: 0 },
-    ],
-  },
   {
     w: 8,
     l: 8,
@@ -80,14 +80,14 @@ const gridExampleStructure: GridExample[] = [
     ],
   },
   {
-    w: 10,
-    l: 6,
-    terrain: [],
-  },
-  {
-    w: 12,
-    l: 5,
-    terrain: [],
+    w: 8,
+    l: 8,
+    terrain: [
+      { x: 0, y: 4 },
+      { x: 4, y: 7 },
+      { x: 3, y: 0 },
+      { x: 7, y: 3 },
+    ],
   },
 ];
 
@@ -183,10 +183,10 @@ export const Information = () => {
           </KeyboardKeyInfo>
         ))}
         <Dialog.Title className="text-center font-bold text-md mb-2">Suggested Puzzles</Dialog.Title>
-        <div className="flex flex-row flex-wrap gap-3 justify-center">
+        <div className="flex flex-row flex-wrap gap-3 justify-center mb-2">
           {exampleGrids.map((grid, i) => (
             <div key={i} className="flex flex-col items-center justify-center">
-              <InfoGrid grid={grid}>
+              <InfoGrid grid={grid} setInfoOpen={setInfoOpen}>
                 <Grid
                   pentominoSize={4}
                   paintedGrid={getPaintedBoard(grid, SURFACES.Rectangle, undefined, false)}
@@ -197,6 +197,45 @@ export const Information = () => {
             </div>
           ))}
         </div>
+        <Dialog.Title className="text-center font-bold text-md mb-2">Project Information</Dialog.Title>
+        <p className="mb-2">
+          <a
+            href="https://en.wikipedia.org/wiki/Pentomino"
+            target="_blank"
+            className="text-blue-600 dark:text-blue-400 cursor-pointer underline"
+          >
+            Pentominoes
+          </a>{" "}
+          are a classic puzzle, typically played using physical tiles. A digital implementation has the advantage of
+          playing on surfaces other than the plane, so this game is Pentominoes on Surfaces.
+        </p>
+        <p className="mb-2">
+          Pentominoes on Surfaces is{" "}
+          <a
+            href="https://github.com/RheingoldRiver/pentominoes"
+            target="_blank"
+            className="text-blue-600 dark:text-blue-400 cursor-pointer underline"
+          >
+            open source
+          </a>{" "}
+          and built in React using TypeScript and TailwindCSS, scaffolded with Vite, and hosted on GitHub Pages. You can{" "}
+          <a
+            href="https://river.me/tags/pentominoes/"
+            target="_blank"
+            className="text-blue-600 dark:text-blue-400 cursor-pointer underline"
+          >
+            read more
+          </a>{" "}
+          about this project and some of the math behind Pentominoes and surfaces on{" "}
+          <a
+            href="https://river.me/"
+            target="_blank"
+            className="text-blue-600 dark:text-blue-400 cursor-pointer underline"
+          >
+            my blog
+          </a>
+          .
+        </p>
       </div>
     </Modal>
   );