diff --git a/web/public/clean-icon.png b/web/public/clean-icon.png new file mode 100644 index 0000000..c06ba90 Binary files /dev/null and b/web/public/clean-icon.png differ diff --git a/web/public/commit-icon.png b/web/public/commit-icon.png new file mode 100644 index 0000000..d254d8d Binary files /dev/null and b/web/public/commit-icon.png differ diff --git a/web/src/pages/game/GamePage.tsx b/web/src/pages/game/GamePage.tsx index 4e15ed6..4ad8707 100644 --- a/web/src/pages/game/GamePage.tsx +++ b/web/src/pages/game/GamePage.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import GameBoard from "./components/GameBoard"; import DiceSet from "./components/DiceSet"; import "./GamePage.scss"; -import { PieceId } from "interface"; +import { buildBoard, PieceId } from "interface"; import { DieViewProps } from "./types/DieViewProps"; const GamePage = () => { @@ -11,18 +11,18 @@ const GamePage = () => { return Object.values(PieceId)[randomId]; }; - const [dice, setDice] = useState( + const getRandomDiceSet: () => DieViewProps[] = () => [1, 2, 3, 4].map(() => { - const dieViewProps: DieViewProps = { + return { pieceId: getRandomPieceId(), isSelected: false, isDisabled: false, isSpecial: false, rotation: 0, }; - return dieViewProps; - }), - ); + }); + + const [dice, setDice] = useState(getRandomDiceSet()); const [specialDice, setSpecialDice] = useState( [ PieceId.P03, @@ -71,14 +71,40 @@ const GamePage = () => { return dice.concat(specialDice).find((die) => matcher(die)); }; + const [storedBoard, setStoredBoard] = useState(buildBoard()); + const [board, setBoard] = useState(buildBoard()); + const [id, setId] = useState(1); + const refreshBoardRender = () => { + setBoard(board); + setId(id + 1); + }; + const resetBoard = () => { + setBoard(storedBoard); + modifyDieState( + () => true, + () => { + return { isSelected: false, isDisabled: false }; + }, + ); + setId(id + 1); + }; + const commitBoard = () => { + if (dice.some((die) => !die.isDisabled)) return; + setStoredBoard(board); + setDice(getRandomDiceSet()); + setSpecialDieUsedInRound(false); + }; + return (

Game Page Title

-
+
{ specialDice={specialDice} modifyDieState={modifyDieState} specialDieUsedInRound={specialDieUsedInRound} + resetBoard={resetBoard} + commitBoard={commitBoard} />
diff --git a/web/src/pages/game/components/DiceSet.scss b/web/src/pages/game/components/DiceSet.scss index da09ab7..114a733 100644 --- a/web/src/pages/game/components/DiceSet.scss +++ b/web/src/pages/game/components/DiceSet.scss @@ -9,13 +9,17 @@ box-shadow: 0 0 10px green; border-radius: 20%; padding: 5px; - width: 80px; - height: 80px; + width: 70px; + height: 70px; margin-right: 10px; &.icon-inverted { transform: scaleX(-1); } + + &:last-child { + margin-right: 0; + } } } diff --git a/web/src/pages/game/components/DiceSet.tsx b/web/src/pages/game/components/DiceSet.tsx index 518e2a1..bf0b5a2 100644 --- a/web/src/pages/game/components/DiceSet.tsx +++ b/web/src/pages/game/components/DiceSet.tsx @@ -11,9 +11,18 @@ export interface DiceSetProps { newStateComputer: (die: DieViewProps) => Partial, ) => void; specialDieUsedInRound: boolean; + resetBoard: () => void; + commitBoard: () => void; } const DiceSet = (props: DiceSetProps) => { - const { dice, specialDice, modifyDieState, specialDieUsedInRound } = props; + const { + dice, + specialDice, + modifyDieState, + specialDieUsedInRound, + resetBoard, + commitBoard, + } = props; const handleDieClick = (clickedDie: DieViewProps) => { if (clickedDie.isDisabled) return; const isSpecialDie = clickedDie.isSpecial; @@ -51,6 +60,8 @@ const DiceSet = (props: DiceSetProps) => { className="icon-inverted" onClick={() => handleRotateButton(90)} > + +
{dice.map((die) => ( diff --git a/web/src/pages/game/components/GameBoard.tsx b/web/src/pages/game/components/GameBoard.tsx index 8ea33b9..2ddfb81 100644 --- a/web/src/pages/game/components/GameBoard.tsx +++ b/web/src/pages/game/components/GameBoard.tsx @@ -1,6 +1,5 @@ -import { buildBoard } from "interface"; +import { Cell } from "interface"; import "./GameBoard.scss"; -import { useState } from "react"; import BoardCell from "./BoardCell"; import { DieViewProps } from "../types/DieViewProps"; @@ -13,26 +12,17 @@ export interface GameBoardProps { matcher: (die: DieViewProps) => boolean, ) => DieViewProps | undefined; setSpecialDieUsedInRound: React.Dispatch>; + refreshBoardRender: () => void; + board: Cell[][]; } const GameBoard = (props: GameBoardProps) => { - const [board, setBoard] = useState(buildBoard()); - const [id, setId] = useState(1); - const refreshBoardRender = () => { - setBoard(board); - setId(id + 1); - }; + const { board } = props; return ( -
+
{board.flatMap((row) => - row.map((cell) => ( - - )), + row.map((cell) => ), )}
); diff --git a/web/src/pages/game/types/DieViewProps.ts b/web/src/pages/game/types/DieViewProps.ts index 05f049a..71914ed 100644 --- a/web/src/pages/game/types/DieViewProps.ts +++ b/web/src/pages/game/types/DieViewProps.ts @@ -4,6 +4,6 @@ export interface DieViewProps { pieceId: PieceId; isSelected: boolean; isDisabled: boolean; - isSpecial: boolean; + readonly isSpecial: boolean; rotation: number; }