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 = () => {