diff --git a/src/index.css b/src/index.css index 917888c..ba263a7 100644 --- 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 index e0a010c..03efb3c 100644 --- 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 index 40d0e13..b2ad1fc 100644 --- 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 ( -
-
You Win!
-
Wins: {wins}
-
Streak: {consecutiveWins}
-
- ); + 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 ( +
+
You win!
+
Wins: {wins}
+
Streak: {consecutiveWins}
+
+ ); + } else { + return ( +
+
You lose, try again?
+ +
+ ); + } + }); + + const ResetButton = observer((observable: { game: MinesweeperGame }) => { + if (observable.game.isOver && !observable.game.isWin()) { + return ( + + ); + } else { + return <>; + } }); return (
- {game.isOver && } +