✨ Ability to loose game

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 = () => {
 					})}
 				</div>
 			))}
+			{gameState.endType !== '' && (
+				<div
+					className='overlay'
+					style={
+						{
+							'--overlayColor': gameState.endType === 'win' ? '#5f8e59' : '#ca5940',
+						} as React.CSSProperties
+					}
+				>
+					<p className='overlayTitle'>{gameState.endType === 'win' ? 'Gagné !' : 'Perdu !'}</p>
+					<button
+						className='overlayButton'
+						onClick={() => setGameState((prev) => ({ ...prev, status: 'board' }))}
+					>
+						<Podium />
+						Leaderboard
+					</button>
+				</div>
+			)}
 		</div>
 	);
 };

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;
+		}
+	}
 }