-
Day
-
Time
+ <>
+
Time Leaderboard
+
+
+
+
#
+
+
+ Date
+
+
+
+ Time
+
-
+
{arrayBoard.map((item, index) => {
return (
-
{item.date}
-
{item.time}
+
{index + 1}
+
{item.date}
+
{item.time}
);
})}
- ;
-
+
+
+
+
+
+
+
);
};
diff --git a/src/components/Leaderboard/styles.scss b/src/components/Leaderboard/styles.scss
index e45fa8c..8d6bd73 100644
--- a/src/components/Leaderboard/styles.scss
+++ b/src/components/Leaderboard/styles.scss
@@ -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;
+ }
+ }
}
diff --git a/src/contexts/gameState.ts b/src/contexts/gameState.ts
index 20ca51b..7e28bf9 100644
--- a/src/contexts/gameState.ts
+++ b/src/contexts/gameState.ts
@@ -3,7 +3,7 @@ import { atom } from 'recoil';
export const gameStateAtom = atom({
key: 'gameState',
default: {
- status: 'settings',
+ status: 'board',
difficulty: 'begginer',
gridSize: 20,
bombs: 0,