diff --git a/package-lock.json b/package-lock.json index 859ac23..9df6353 100644 --- a/package-lock.json +++ b/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", - "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==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "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", diff --git a/package.json b/package.json index f438c58..a3d3c21 100644 --- a/package.json +++ b/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" diff --git a/src/assets/replay.tsx b/src/assets/replay.tsx index 43eecd1..e2a5032 100644 --- a/src/assets/replay.tsx +++ b/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' - stroke-miterlimit='10' - stroke-width='32' + strokeLinecap='round' + strokeMiterlimit='10' + strokeWidth='32' /> diff --git a/src/assets/settings.tsx b/src/assets/settings.tsx index cc39adf..3174112 100644 --- a/src/assets/settings.tsx +++ b/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' - stroke-linejoin='round' - stroke-width='32' + strokeLinecap='round' + strokeLinejoin='round' + strokeWidth='32' /> ); diff --git a/src/components/Leaderboard/leaderboard.tsx b/src/components/Leaderboard/leaderboard.tsx index 3b0c1a1..9579a55 100644 --- a/src/components/Leaderboard/leaderboard.tsx +++ b/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 = [ - { 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' }, - { 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 store = localforage.createInstance({ + name: 'leaderboard', + driver: localforage.INDEXEDDB, + version: 1.0, + storeName: 'leaderboard', + description: 'Store 10 best game time', +}); const LeaderBoard = () => { const [, setGameState] = useRecoilState(gameStateAtom); + const [data, setData] = useState([]); + + useEffect(() => { + const getData = async () => { + const storeData = await store.getItem('leaderboard'); + if (storeData) { + setData(storeData); + } + }; + + if (data.length === 0) { + getData(); + } + }, []); return ( <> @@ -45,7 +67,7 @@ const LeaderBoard = () => {
- {arrayBoard.map((item, index) => { + {data.map((item, index) => { return (