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>
</>
);
};
src/components/Leaderboard/styles.scss
+101 -62
View File
@@ -1,72 +1,111 @@
.boardContainer {
.title {
margin-bottom: 40px;
font-size: 2rem;
font-weight: 600;
color: #ffffff;
}
.board {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
width: 95svw;
max-width: 450px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
& > .header {
display: grid;
grid-template-columns: 1em repeat(2, 1fr);
gap: 30px;
padding: 15px 20px;
background-color: #333;
& > * {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
font-size: 1.3em;
font-weight: 400;
color: #fff;
& > svg {
height: 1.3em;
}
&:last-child {
justify-content: flex-end;
}
}
}
& > .scoresContainer {
height: 100%;
max-height: 400px;
overflow-y: auto;
& > .score {
display: grid;
grid-template-columns: 1em repeat(2, 1fr);
gap: 30px;
padding: 10px 20px;
background-color: #e1e1e1;
color: #333;
& > * {
&:first-child {
opacity: 0.5;
}
&:last-child {
justify-self: end;
font-weight: 600;
}
}
&:nth-child(2n) {
background-color: #ffffff;
}
}
}
}
.titleBoard {
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: bold;
}
.controls {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 100px;
width: 100%;
.completeBoard {
display: flex;
flex-direction: column;
gap: 1em;
border: 2px solid #fff;
border-radius: 5px;
padding: 15px;
background-color: #fff;
width: 100%;
max-width: 400px;
}
& > .controlButton {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
transition: filter 0.3s ease;
color: #fff;
cursor: pointer;
.containerLittle {
overflow: scroll;
height: 100%;
max-height: 350px;
gap: 1em;
}
&:hover {
filter: brightness(1.1);
}
.lineInfo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border: 1.5px solid #fff;
border-radius: 3px;
padding: 10px;
background-color: #333;
color: #fff;
font-weight: 400;
}
&.home {
background-color: #ca5940;
}
.infoDate {
margin-left: 10px;
}
&.replay {
background-color: #f39440;
}
.infoScore {
text-align: right;
margin-right: 10px;
}
.lineBoard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border: 1.5px solid #fff;
margin-bottom: 10px;
border-radius: 3px;
padding: 5px;
background-color: #e1e1e1;
color: #333;
font-weight: 400;
}
.blockScore {
text-align: right;
& > svg {
width: 20px;
}
}
}