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

💄 (leaderboard): Ability to replay a game or change game settings

Browse Source
This commit is contained in:
alexis
2024-02-14 22:19:55 +01:00
parent 79962f45dc
commit 6d22409763
10 changed files with 366 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Leaderboard/leaderboard.tsx
+62 -29
View File
@@ -1,50 +1,83 @@
import React from 'react';
import { useRecoilState } from 'recoil';
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: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ date: '12/06/2014', time: '1.06' },
{ 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 LeaderBoard = () => {
const [, setGameState] = useRecoilState(gameStateAtom);
return (
<div className='boardContainer'>
<p className='titleBoard'>Time Leaderboard</p>
<div className='completeBoard'>
<div className='lineInfo'>
<p className='infoDate'>Day</p>
<p className='infoScore'>Time</p>
<>
<h1 className='title'>Time Leaderboard</h1>
<div className='board'>
<div className='header'>
<p>#</p>
<p>
<CalendarIcon />
Date
</p>
<p>
<TimerIcon />
Time
</p>
</div>
<div className='containerLittle'>
<div className='scoresContainer'>
{arrayBoard.map((item, index) => {
return (
<div
className='lineBoard'
key={index}
className='score'
key={`score#${index}`}
>
<p className='blockDate'>{item.date}</p>
<p className='blockScore'>{item.time}</p>
<span>{index + 1}</span>
<span>{item.date}</span>
<span>{item.time}</span>
</div>
);
})}
;
</div>
</div>
</div>
<div className='controls'>
<button
className='controlButton home'
onClick={() => setGameState((prev) => ({ ...prev, status: 'settings' }))}
>
<Settings />
Paramètres
</button>
<button
className='controlButton replay'
onClick={() => setGameState((prev) => ({ ...prev, status: 'idle' }))}
>
<Replay />
Rejouer
</button>
</div>
</>
);
};