✨ Different leaderboard on difficulty & size parameters

src/components/Home/Home.tsx

@@ -30,20 +30,18 @@ const Home = () => {
 
 	const [, setGameState] = useRecoilState(gameStateAtom);
 
-	useEffect(() => {
-		const initIDB = async () => {
-			if ((await store.getItem('leaderboard')) === null) {
-				await store.setItem('leaderboard', []);
-			}
-		};
-		initIDB();
-	}, []);
-
 	const onClick = () => {
 		if (difficultyRef.current !== null && sizeRef.current !== null) {
 			const difficulty = difficultyRef.current.value;
 			const size = sizeRef.current.value;
 
+			const initIDB = async () => {
+				if ((await store.getItem(`${difficulty}:${size}`)) === null) {
+					await store.setItem(`${difficulty}:${size}`, []);
+				}
+			};
+			initIDB();
+
 			setGameState((prev) => ({
 				...prev,
 				difficulty: difficulty,

src/components/Leaderboard/leaderboard.tsx

@@ -34,12 +34,12 @@ const store = localforage.createInstance({
 });
 
 const LeaderBoard = () => {
-	const [, setGameState] = useRecoilState(gameStateAtom);
+	const [gameState, setGameState] = useRecoilState(gameStateAtom);
 	const [data, setData] = useState<LeaderBoardItem[]>([]);
 
 	useEffect(() => {
 		const getData = async () => {
-			const storeData = await store.getItem<LeaderBoardItem[]>('leaderboard');
+			const storeData = await store.getItem<LeaderBoardItem[]>(`${gameState.difficulty}:${gameState.gridSize}`);
 
 			setData(storeData || []);
 		};
@@ -95,7 +95,7 @@ const LeaderBoard = () => {
 					className='controlButton clear'
 					onClick={() => {
 						setGameState((prev) => ({ ...prev, status: 'settings', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }));
-						store.setItem('leaderboard', []);
+						store.setItem(`${gameState.difficulty}:${gameState.gridSize}`, []);
 					}}
 				>
 					<Trash />

src/components/Stats/Timer/Timer.tsx

@@ -11,7 +11,8 @@ import { useRecoilState } from 'recoil';
 import { gameStateAtom } from '../../../contexts/gameState';
 // ---------------------------------------------------------------------------------------------------------------------
 
-// ------------------------------------------------------ Utils --------------------------------------------------------
+// -------------------------------------------------- Utils & Types ----------------------------------------------------
+import { Difficulty } from '../../../types/game';
 import { saveToLocalStorage } from '../../../utils/generics';
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -64,7 +65,7 @@ const Timer = () => {
 			clearInterval(intervalId);
 
 			if (gameState.endType === 'win') {
-				saveToLocalStorage(displayedTime);
+				saveToLocalStorage(displayedTime, gameState.difficulty as Difficulty, gameState.gridSize);
 			}
 		}
 	}, [intervalId, gameState.endType, setGameState, displayedTime]);

src/utils/generics.ts

@@ -7,7 +7,7 @@ import localforage from 'localforage';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ------------------------------------------------------ Types --------------------------------------------------------
-import { LeaderBoardItem } from '../types/game';
+import { Difficulty, LeaderBoardItem } from '../types/game';
 // ---------------------------------------------------------------------------------------------------------------------
 
 export const getRandomArbitrary = (min: number, max: number): number => {
@@ -22,8 +22,8 @@ const store = localforage.createInstance({
 	description: 'Store 10 best game time',
 });
 
-export const saveToLocalStorage = async (time: string) => {
-	let leaderboard = await store.getItem<LeaderBoardItem[]>('leaderboard');
+export const saveToLocalStorage = async (time: string, difficulty: Difficulty, gridSize: number) => {
+	let leaderboard = await store.getItem<LeaderBoardItem[]>(`${difficulty}:${gridSize}`);
 
 	const currentDate = new Date().toLocaleString().split(' ')[0];
 
@@ -42,5 +42,5 @@ export const saveToLocalStorage = async (time: string) => {
 		leaderboard = leaderboard.slice(0, 20);
 	}
 
-	await store.setItem('leaderboard', leaderboard);
+	await store.setItem(`${difficulty}:${gridSize}`, leaderboard);
 };