✨ Add ability to delete all leaderboard

src/assets/difficulty.tsx

@@ -0,0 +1,72 @@
+const Difficulty = (props: any) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+				d='M48 256h416'
+			/>
+			<rect
+				x='384'
+				y='128'
+				width='32'
+				height='256'
+				rx='16'
+				ry='16'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<rect
+				x='96'
+				y='128'
+				width='32'
+				height='256'
+				rx='16'
+				ry='16'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<rect
+				x='32'
+				y='192'
+				width='16'
+				height='128'
+				rx='8'
+				ry='8'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<rect
+				x='464'
+				y='192'
+				width='16'
+				height='128'
+				rx='8'
+				ry='8'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default Difficulty;

src/assets/size.tsx

@@ -0,0 +1,20 @@
+const Size = (props: any) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+				d='M304 96h112v112M405.77 106.2L111.98 400.02M208 416H96V304'
+			/>
+		</svg>
+	);
+};
+
+export default Size;

src/components/Leaderboard/leaderboard.tsx

@@ -3,7 +3,7 @@
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ------------------------------------------------------ React --------------------------------------------------------
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ----------------------------------------------- Context & Stockage --------------------------------------------------
@@ -12,8 +12,9 @@ import { useRecoilState } from 'recoil';
 import { gameStateAtom } from '../../contexts/gameState';
 // ---------------------------------------------------------------------------------------------------------------------
 
-// ------------------------------------------------------ Types --------------------------------------------------------
-import { LeaderBoardItem } from '../../types/game';
+// -------------------------------------------------- Utils & Types ----------------------------------------------------
+import { Difficulty, LeaderBoardItem } from '../../types/game';
+import { getDifficultyLabel } from '../../utils/generics';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ----------------------------------------------------- Assets --------------------------------------------------------
@@ -22,6 +23,8 @@ import Replay from '../../assets/replay';
 import Settings from '../../assets/settings';
 import TimerIcon from '../../assets/timer';
 import Trash from '../../assets/trash';
+import DifficultyIcon from '../../assets/difficulty';
+import Size from '../../assets/size';
 import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -37,18 +40,30 @@ const LeaderBoard = () => {
 	const [gameState, setGameState] = useRecoilState(gameStateAtom);
 	const [data, setData] = useState<LeaderBoardItem[]>([]);
 
+	const [, updateLeaderboard] = useState({});
+	const forceUpdate = useCallback(() => updateLeaderboard({}), []);
+
+	const getData = async () => {
+		const storeData = await store.getItem<LeaderBoardItem[]>(`${gameState.difficulty}:${gameState.gridSize}`);
+
+		setData(storeData || []);
+	};
+
 	useEffect(() => {
-		const getData = async () => {
-			const storeData = await store.getItem<LeaderBoardItem[]>(`${gameState.difficulty}:${gameState.gridSize}`);
-
-			setData(storeData || []);
-		};
-
 		if (data.length === 0) {
 			getData();
 		}
 	}, [data.length]);
 
+	const clearAllLeaderboards = async () => {
+		const keys = await store.keys();
+
+		for (let i = 0; i < keys.length; i++) {
+			await store.removeItem(keys[i]);
+		}
+		getData();
+	};
+
 	return (
 		<>
 			<h1 className='title'>Time Leaderboard</h1>
@@ -60,6 +75,14 @@ const LeaderBoard = () => {
 						<CalendarIcon />
 						Date
 					</p>
+					<p>
+						<DifficultyIcon style={{ rotate: '-45deg' }} />
+						Difficulté
+					</p>
+					<p>
+						<Size />
+						Taille
+					</p>
 					<p>
 						<TimerIcon />
 						Time
@@ -75,6 +98,8 @@ const LeaderBoard = () => {
 							>
 								<span>{index + 1}</span>
 								<span>{item.date}</span>
+								<span>{getDifficultyLabel(gameState.difficulty as Difficulty)}</span>
+								<span>{gameState.gridSize}</span>
 								<span>{item.time}</span>
 							</div>
 						);
@@ -91,11 +116,19 @@ const LeaderBoard = () => {
 					Paramètres
 				</button>
 
+				<button
+					className='controlButton replay'
+					onClick={() => setGameState((prev) => ({ ...prev, status: 'idle', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }))}
+				>
+					<Replay />
+					Rejouer
+				</button>
+
 				<button
 					className='controlButton clear'
-					onClick={() => {
-						setGameState((prev) => ({ ...prev, status: 'settings', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }));
-						store.setItem(`${gameState.difficulty}:${gameState.gridSize}`, []);
+					onClick={async () => {
+						await store.setItem(`${gameState.difficulty}:${gameState.gridSize}`, []);
+						await getData();
 					}}
 				>
 					<Trash />
@@ -103,11 +136,11 @@ const LeaderBoard = () => {
 				</button>
 
 				<button
-					className='controlButton replay'
-					onClick={() => setGameState((prev) => ({ ...prev, status: 'idle', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }))}
+					className='controlButton clearAll'
+					onClick={clearAllLeaderboards}
 				>
 					<Replay />
-					Rejouer
+					Tout supprimer
 				</button>
 			</div>
 		</>

src/components/Leaderboard/styles.scss

@@ -9,14 +9,14 @@
 	display: flex;
 	flex-direction: column;
 	width: 95svw;
-	max-width: 500px;
+	max-width: 600px;
 	border-radius: 5px;
 	background-color: #fff;
 	overflow: hidden;
 
 	& > .header {
 		display: grid;
-		grid-template-columns: 1em repeat(2, 1fr);
+		grid-template-columns: 1em 1fr 1fr 0.7fr 1fr;
 		gap: 30px;
 		padding: 15px 20px;
 		background-color: #333;
@@ -47,7 +47,9 @@
 
 		& > .score {
 			display: grid;
-			grid-template-columns: 1em repeat(2, 1fr);
+			grid-template-columns: 1em 1fr 1fr 0.7fr 1fr;
+			align-items: center;
+			justify-content: center;
 			gap: 30px;
 			padding: 10px 20px;
 			background-color: #e1e1e1;
@@ -59,7 +61,7 @@
 				}
 
 				&:last-child {
-					justify-self: end;
+					text-align: right;
 					font-weight: 600;
 				}
 			}
@@ -73,7 +75,8 @@
 
 .controls {
 	display: grid;
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-rows: repeat(2, 1fr);
 	gap: 10px;
 	width: 100%;
 
@@ -100,12 +103,16 @@
 			background-color: #f39440;
 		}
 
+		&.replay {
+			background-color: #f39440;
+		}
+
 		&.clear {
 			background-color: #ca5940;
 		}
 
-		&.replay {
-			background-color: #f39440;
+		&.clearAll {
+			background-color: hsl(0, 57%, 52%);
 		}
 
 		& > svg {

src/utils/generics.ts

@@ -44,3 +44,10 @@ export const saveToLocalStorage = async (time: string, difficulty: Difficulty, g
 
 	await store.setItem(`${difficulty}:${gridSize}`, leaderboard);
 };
+
+export const getDifficultyLabel = (difficulty: Difficulty): string => {
+	if (difficulty == 'beginner') return 'Débutant';
+	if (difficulty == 'intermediate') return 'Intermédiaire';
+	if (difficulty == 'expert') return 'Expert';
+	return difficulty;
+};