✨ (leaderboard): Get data from IndexedDB

Get leaderboard data from IndexedDB using localForage package

package-lock.json

@@ -22,6 +22,7 @@
 				"typescript": "^4.9.5"
 			},
 			"devDependencies": {
+				"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 				"cz-conventional-changelog": "^3.3.0"
 			}
 		},
@@ -646,9 +647,17 @@
 			}
 		},
 		"node_modules/@babel/plugin-proposal-private-property-in-object": {
-			"version": "7.21.0-placeholder-for-preset-env.2",
+			"version": "7.21.11",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-			"integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+			"integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+			"dev": true,
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.18.6",
+				"@babel/helper-create-class-features-plugin": "^7.21.0",
+				"@babel/helper-plugin-utils": "^7.20.2",
+				"@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+			},
 			"engines": {
 				"node": ">=6.9.0"
 			},
@@ -1891,6 +1900,17 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
+		"node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+			"version": "7.21.0-placeholder-for-preset-env.2",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+			"integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
 		"node_modules/@babel/preset-env/node_modules/semver": {
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",

package.json

@@ -24,6 +24,10 @@
 		"sass": "^1.70.0",
 		"typescript": "^4.9.5"
 	},
+	"devDependencies": {
+		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+		"cz-conventional-changelog": "^3.3.0"
+	},
 	"eslintConfig": {
 		"extends": [
 			"react-app",
@@ -42,9 +46,6 @@
 			"last 1 safari version"
 		]
 	},
-	"devDependencies": {
-		"cz-conventional-changelog": "^3.3.0"
-	},
 	"config": {
 		"commitizen": {
 			"path": "./node_modules/cz-conventional-changelog"

src/assets/replay.tsx

@@ -9,16 +9,16 @@ const Replay = (props: any) => {
 				d='M320 146s24.36-12-64-12a160 160 0 10160 160'
 				fill='none'
 				stroke='currentColor'
-				stroke-linecap='round'
+				strokeLinecap='round'
-				stroke-miterlimit='10'
+				strokeMiterlimit='10'
-				stroke-width='32'
+				strokeWidth='32'
 			/>
 			<path
 				fill='none'
 				stroke='currentColor'
-				stroke-linecap='round'
+				strokeLinecap='round'
-				stroke-linejoin='round'
+				strokeLinejoin='round'
-				stroke-width='32'
+				strokeWidth='32'
 				d='M256 58l80 80-80 80'
 			/>
 		</svg>

src/assets/settings.tsx

@@ -9,9 +9,9 @@ const Settings = (props: any) => {
 				d='M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z'
 				fill='none'
 				stroke='currentColor'
-				stroke-linecap='round'
+				strokeLinecap='round'
-				stroke-linejoin='round'
+				strokeLinejoin='round'
-				stroke-width='32'
+				strokeWidth='32'
 			/>
 		</svg>
 	);

src/components/Leaderboard/leaderboard.tsx

@@ -1,31 +1,53 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                       Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------------ React --------------------------------------------------------
+import { useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------ Recoil & Stockage --------------------------------------------------
+import localforage from 'localforage';
 import { useRecoilState } from 'recoil';
+import { gameStateAtom } from '../../contexts/gameState';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------------ Types --------------------------------------------------------
+import { LeaderBoardItem } from '../../types/game';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ----------------------------------------------------- Assets --------------------------------------------------------
 import CalendarIcon from '../../assets/calendar';
 import Replay from '../../assets/replay';
 import Settings from '../../assets/settings';
 import TimerIcon from '../../assets/timer';
 import './styles.scss';
-import { gameStateAtom } from '../../contexts/gameState';
+// ---------------------------------------------------------------------------------------------------------------------
 
-const arrayBoard = [
+const store = localforage.createInstance({
-	{ date: '12/06/2014', time: '1m 26s' },
+	name: 'leaderboard',
-	{ date: '12/06/2014', time: '1m 26s' },
+	driver: localforage.INDEXEDDB,
-	{ date: '12/06/2014', time: '1m 26s' },
+	version: 1.0,
-	{ date: '12/06/2014', time: '1m 26s' },
+	storeName: 'leaderboard',
-	{ date: '12/06/2014', time: '1m 26s' },
+	description: 'Store 10 best game time',
-	{ date: '12/06/2014', time: '1m 26s' },
+});
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-	{ date: '12/06/2014', time: '1m 26s' },
-];
 
 const LeaderBoard = () => {
 	const [, setGameState] = useRecoilState(gameStateAtom);
+	const [data, setData] = useState<LeaderBoardItem[]>([]);
+
+	useEffect(() => {
+		const getData = async () => {
+			const storeData = await store.getItem<LeaderBoardItem[]>('leaderboard');
+			if (storeData) {
+				setData(storeData);
+			}
+		};
+
+		if (data.length === 0) {
+			getData();
+		}
+	}, []);
 
 	return (
 		<>
@@ -45,7 +67,7 @@ const LeaderBoard = () => {
 				</div>
 
 				<div className='scoresContainer'>
-					{arrayBoard.map((item, index) => {
+					{data.map((item, index) => {
 						return (
 							<div
 								className='score'

src/contexts/gameState.ts

@@ -5,7 +5,7 @@ export const gameStateAtom = atom({
 	default: {
 		status: 'board',
 		difficulty: 'begginer',
-		gridSize: 20,
+		gridSize: 12,
 		bombs: 0,
 		placedFlags: 0,
 	},

src/types/game.d.ts

@@ -1,3 +1,4 @@
 export type Difficulty = 'beginner' | 'intermediate' | 'expert';
 export type CellValue = 'empty' | 'bomb' | number;
 export type GridType = { hidden: boolean; value: CellValue; flag: boolean }[][];
+export type LeaderBoardItem = { date: string; time: `${number | ''}${number}m ${number}${number}s` };