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 ( -