Add reset button on lose

michaeldoylecs · Dec 13, 2024 · c34aa2b · c34aa2b
1 parent 5120494
commit c34aa2b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 12 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,8 @@
+html {
+  overflow-x: hidden;
+  margin-right: calc(-1 * (100vw - 100%));
+}
+
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
   font-size: 16px;

diff --git a/src/minesweeper/Minesweeper.css b/src/minesweeper/Minesweeper.css
@@ -5,6 +5,7 @@
     justify-content: center;
     align-items: center;
     align-content: center;
+    gap: 10px;
 }
 
 .game-board {
@@ -54,10 +55,20 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-start;
     align-content: center;
     border: 2px solid black;
     border-radius: 5px;
     padding: 5px;
-    margin: 0 0 10px 0;
+}
+
+.win {
+    align-items: flex-start;
+}
+
+.lose {
+    align-items: center;
+}
+
+.reset-button {
+
 }
diff --git a/src/minesweeper/Minesweeper.tsx b/src/minesweeper/Minesweeper.tsx
@@ -92,6 +92,12 @@ function Minesweeper() {
         }
     }
 
+    const handleReset = (event: SyntheticEvent) => {
+        event.preventDefault();
+        game.reset();
+        console.log("RESET");
+    }
+
     // Save game state on change
     useEffect(() => {
         const disposer = autorun(() => {
@@ -189,21 +195,48 @@ function Minesweeper() {
         padding: '2px',
     }
 
-    const GameStats = observer((observable: { stats: IGameStats }) => {
-        const { wins, consecutiveWins, previousWinSeed } = observable.stats;
-        return (
-            <div className="game-stats">
-                <div><strong>You Win!</strong></div>
-                <div>Wins: {wins}</div>
-                <div>Streak: {consecutiveWins}</div>
-            </div>
-        );
+    const GameOver = observer((observable: { stats: IGameStats, game: MinesweeperGame }) => {
+        const { wins, consecutiveWins } = observable.stats;
+        const game = observable.game;
+
+        if (!game.isOver) {
+            return <></>;
+        }
+
+        if (game.isWin()) {
+            return (
+                <div className="game-stats win">
+                    <div><strong>You win!</strong></div>
+                    <div>Wins: {wins}</div>
+                    <div>Streak: {consecutiveWins}</div>
+                </div>
+            );
+        } else {
+            return (
+                <div className="game-stats lose">
+                    <div><strong>You lose, try again?</strong></div>
+                    <ResetButton game={game}/>
+                </div>
+            );
+        }
+    });
+
+    const ResetButton = observer((observable: { game: MinesweeperGame }) => {
+        if (observable.game.isOver && !observable.game.isWin()) {
+            return (
+                <button className="reset-button" onClick={handleReset}>
+                    Reset
+                </button>
+            );
+        } else {
+            return <></>;
+        }
     });
 
     return (
         <div className="minesweeper">
             <ResetClock />
-            {game.isOver && <GameStats stats={stats} />}
+            <GameOver stats={stats} game={game} />
             <div className='game-board' style={gameBoardStyle} onContextMenu={disableContextMenu}>
                 <GameBoardComponent game={game} />
             </div>