alexis/Minesweeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (leaderboard): Get data from IndexedDB

Browse Source 
Get leaderboard data from IndexedDB using localForage package
This commit is contained in:
alexis
2024-02-15 19:11:31 +01:00
parent 6d22409763
commit 6aca7b49cf
7 changed files with 79 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/replay.tsx
+6 -6
View File
@@ -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'
/>
<path
fill='none'
stroke='currentColor'
stroke-linecap='round'
stroke-linejoin='round'
stroke-width='32'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='32'
d='M256 58l80 80-80 80'
/>
</svg>
src/assets/settings.tsx
+3 -3
View File
@@ -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'
/>
</svg>
);
src/components/Leaderboard/leaderboard.tsx
+41 -19
View File
@@ -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<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
+1 -1
View File
@@ -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
Vendored
+1
View File
@@ -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` };