diff --git a/src/assets/podium.tsx b/src/assets/podium.tsx new file mode 100644 index 0000000..bf5fc56 --- /dev/null +++ b/src/assets/podium.tsx @@ -0,0 +1,20 @@ +const Podium = (props: any) => { + return ( + + + + ); +}; + +export default Podium; diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index be79083..1c84c2c 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -13,13 +13,14 @@ import { gameStateAtom } from '../../contexts/gameState'; // ------------------------------------------------------ Utils -------------------------------------------------------- import { Difficulty } from '../../types/game'; -import { discoverAroundCell, genGrid, startGame } from '../../utils/game'; +import { discoverAroundCell, genGrid, revealAllGrid, startGame } from '../../utils/game'; // --------------------------------------------------------------------------------------------------------------------- // ----------------------------------------------------- Assets -------------------------------------------------------- import Bomb from '../../assets/bomb.png'; import Flag from '../../assets/flag.png'; import './styles.scss'; +import Podium from '../../assets/podium'; // --------------------------------------------------------------------------------------------------------------------- const Grid = () => { @@ -47,6 +48,14 @@ const Grid = () => { })); } + if (prev[rowIndex][colIndex].value === 'bomb') { + setGameState((prev) => ({ + ...prev, + endType: 'loose', + })); + return revealAllGrid(grid, true); + } + return discoverAroundCell(prev, rowIndex, colIndex); }); forceUpdate(); @@ -138,6 +147,25 @@ const Grid = () => { })} ))} + {gameState.endType !== '' && ( +
+

{gameState.endType === 'win' ? 'Gagné !' : 'Perdu !'}

+ +
+ )} ); }; diff --git a/src/components/Grid/styles.scss b/src/components/Grid/styles.scss index 33273ab..73eba81 100644 --- a/src/components/Grid/styles.scss +++ b/src/components/Grid/styles.scss @@ -1,5 +1,6 @@ .grid { --size: 30px; + position: relative; display: grid; gap: 2px; padding: 2px; @@ -73,4 +74,39 @@ } } } + + & > .overlay { + z-index: 1; + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + width: 100%; + height: 100%; + background-color: rgba($color: #000000, $alpha: 0.3); + backdrop-filter: blur(1px); + + & > .overlayTitle { + font-size: 2.5em; + color: var(--overlayColor); + } + + & > .overlayButton { + display: grid; + grid-template-columns: 1.1em auto; + place-items: center; + gap: 10px; + padding: 10px 25px; + border: none; + border-radius: 5px; + background-color: var(--overlayColor); + font-size: 1em; + color: #ffff; + cursor: pointer; + } + } } diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index 25caf8b..f90dbb6 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -39,13 +39,9 @@ const Home = () => { @@ -56,13 +52,9 @@ const Home = () => { diff --git a/src/components/Leaderboard/leaderboard.tsx b/src/components/Leaderboard/leaderboard.tsx index dd79a81..4f81538 100644 --- a/src/components/Leaderboard/leaderboard.tsx +++ b/src/components/Leaderboard/leaderboard.tsx @@ -47,7 +47,7 @@ const LeaderBoard = () => { if (data.length === 0) { getData(); } - }, []); + }, [data.length]); return ( <> @@ -93,7 +93,7 @@ const LeaderBoard = () => {