diff --git a/index.html b/index.html index f8c63f4..e5c4fc5 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ background-color: #030712; } - Pentominoes + Pentominoes on Surfaces
diff --git a/src/components/GameStateProvider/GameStateProvider.tsx b/src/components/GameStateProvider/GameStateProvider.tsx index 4e4ca26..45df43a 100644 --- 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,7 +302,7 @@ 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) => @@ -308,7 +310,11 @@ export default function GameStateProvider({ children }: { children: ReactNode }) 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 index deba107..76d2f25 100644 --- 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 ( -
{ - newGrid(displayGrid); - }} - > - {children} -
- ); -}); +export const InfoGrid = memo( + ({ + grid: displayGrid, + setInfoOpen, + children, + }: { + grid: PlacedPentomino[][]; + setInfoOpen: Dispatch>; + children: ReactNode; + }) => { + const { newGrid } = useContext(GameStateContext); + return ( +
{ + if (newGrid(displayGrid)) setInfoOpen(false); + }} + > + {children} +
+ ); + } +); diff --git a/src/components/Information/Information.tsx b/src/components/Information/Information.tsx index 771cd0a..115148b 100644 --- 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 = () => { ))} Suggested Puzzles -
+
{exampleGrids.map((grid, i) => (
- + {
))}
+ Project Information +

+ + Pentominoes + {" "} + 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. +

+

+ Pentominoes on Surfaces is{" "} + + open source + {" "} + and built in React using TypeScript and TailwindCSS, scaffolded with Vite, and hosted on GitHub Pages. You can{" "} + + read more + {" "} + about this project and some of the math behind Pentominoes and surfaces on{" "} + + my blog + + . +

);