Introduce clean and commit action buttons

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 (
     <React.Fragment>
       <h1>Game Page Title</h1>
-      <div className="game-panel">
+      <div className="game-panel" id={id.toString()}>
         <GameBoard
           modifyDieState={modifyDieState}
           fetchDie={fetchDie}
           setSpecialDieUsedInRound={setSpecialDieUsedInRound}
+          refreshBoardRender={refreshBoardRender}
+          board={board}
         />
         <div className="right-panel">
           <DiceSet
@@ -86,6 +112,8 @@ const GamePage = () => {
             specialDice={specialDice}
             modifyDieState={modifyDieState}
             specialDieUsedInRound={specialDieUsedInRound}
+            resetBoard={resetBoard}
+            commitBoard={commitBoard}
           />
         </div>
       </div>

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;
+        }
     }
 }
 

web/src/pages/game/components/DiceSet.tsx

@@ -11,9 +11,18 @@ export interface DiceSetProps {
     newStateComputer: (die: DieViewProps) => Partial<DieViewProps>,
   ) => 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)}
         ></img>
+        <img src="./clean-icon.png" onClick={resetBoard}></img>
+        <img src="./commit-icon.png" onClick={commitBoard}></img>
       </div>
       <div className="dice-set">
         {dice.map((die) => (

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<React.SetStateAction<boolean>>;
+  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 (
-    <div className="game-board" id={id.toString()}>
+    <div className="game-board">
       {board.flatMap((row) =>
-        row.map((cell) => (
-          <BoardCell
-            {...props}
-            cell={cell}
-            refreshBoardRender={refreshBoardRender}
-          />
-        )),
+        row.map((cell) => <BoardCell {...props} cell={cell} />),
       )}
     </div>
   );

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;
 }