diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index 91203d9..1f6da61 100644 --- a/src/components/Home/Home.tsx +++ b/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, diff --git a/src/components/Leaderboard/leaderboard.tsx b/src/components/Leaderboard/leaderboard.tsx index 25710e9..0f34c55 100644 --- a/src/components/Leaderboard/leaderboard.tsx +++ b/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([]); useEffect(() => { const getData = async () => { - const storeData = await store.getItem('leaderboard'); + const storeData = await store.getItem(`${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}`, []); }} > diff --git a/src/components/Stats/Timer/Timer.tsx b/src/components/Stats/Timer/Timer.tsx index ef7f6bd..b9302f4 100644 --- a/src/components/Stats/Timer/Timer.tsx +++ b/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]); diff --git a/src/utils/generics.ts b/src/utils/generics.ts index b234f8a..c2f0488 100644 --- a/src/utils/generics.ts +++ b/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('leaderboard'); +export const saveToLocalStorage = async (time: string, difficulty: Difficulty, gridSize: number) => { + let leaderboard = await store.getItem(`${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); };