diff --git a/src/components/game-area/game-over.tsx b/src/components/game-area/game-over.tsx index c5f4ad57..8a41ec9a 100644 --- a/src/components/game-area/game-over.tsx +++ b/src/components/game-area/game-over.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, PropsWithChildren } from "react"; +import React, { FunctionComponent } from "react"; import styles from "./game-section.module.scss"; @@ -8,5 +8,9 @@ interface GameOverProps { } export const GameOver: FunctionComponent = ({ onClick, isWin }) => { - return
{isWin ? "😎" : "🙁"}
; + return ( +
+ {isWin ? "😎" : "🙁"} +
+ ); }; diff --git a/src/modules/GameWithHooks/GameWithHooks.tsx b/src/modules/GameWithHooks/GameWithHooks.tsx index 42ae900c..ca921a1a 100644 --- a/src/modules/GameWithHooks/GameWithHooks.tsx +++ b/src/modules/GameWithHooks/GameWithHooks.tsx @@ -12,14 +12,21 @@ export const GameWithHooks: FunctionComponent = () => { const [level, setLevel] = useState("beginner"); const [size, bombs] = GameSettings[level]; + const [isGameOver, setIsGameOver] = useState(false); + const [isWin, setIsWin] = useState(false); + const [playerField, setPlayerField] = useState(generateFieldWithDefaultState(size, CellState.hidden)); const [gameField, setGameField] = useState(fieldGenerator(size, bombs / (size * size))); const onClickHandler = (coords: Coordinates) => { - const newPlayerField = openCell(coords, playerField, gameField); - - setPlayerField([...newPlayerField]); + try { + const newPlayerField = openCell(coords, playerField, gameField); + setPlayerField([...newPlayerField]); + } catch (e) { + setPlayerField([...gameField]); + setIsGameOver(true); + } }; const resetHandler = ([size, bombs]: [number, number]) => { @@ -28,6 +35,8 @@ export const GameWithHooks: FunctionComponent = () => { setGameField([...newGameField]); setPlayerField([...newPlayerField]); + setIsGameOver(false); + setIsWin(false); }; const onChangeLevelHandler = ({ target: { value: level } }: React.ChangeEvent) => { @@ -46,12 +55,12 @@ export const GameWithHooks: FunctionComponent = () => { - null} isWin={true} /> + {isGameOver && } null} />