From f20d73d0a1715a0eec7397d66ab1855065bd0699 Mon Sep 17 00:00:00 2001
From: mhawryluk <marcinhawrylukxx@gmail.com>
Date: Sat, 30 Dec 2023 15:12:02 +0100
Subject: [PATCH] Create scoreboard

---
 game.js    | 24 ++++++++++++++++++--
 index.html | 26 +++++++++++++++++++--
 style.css  | 66 +++++++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 102 insertions(+), 14 deletions(-)

diff --git a/game.js b/game.js
index 922e295..8c2c0d5 100644
--- a/game.js
+++ b/game.js
@@ -52,6 +52,8 @@ class Game {
                     const token = document.getElementById(id);
                     token.setAttribute('visible', 'true');
                 }
+            } else {
+                document.querySelector(`.scoreboard .${player}`).style.display = 'none';
             }
         }
 
@@ -109,7 +111,7 @@ class Game {
         this.currentPlayerIndex %= this.numberOfPlayers;
         this.lastRolledValue = 0;
 
-        currentPlayerDiv.innerText = `Now playing: ${this.players[this.currentPlayerIndex]}`;
+        currentPlayerDiv.innerText = this.players[this.currentPlayerIndex];
 
         root.style.setProperty('--background-color', `var(--${this.players[this.currentPlayerIndex]}-bg)`);
         root.style.setProperty('--text-color', `var(--${this.players[this.currentPlayerIndex]}-text)`);
@@ -161,6 +163,7 @@ class Game {
 
                     const startPosition = this.getFreeStartPosition(otherPlayer);
                     tokens[otherPlayer][otherTileIndex].setAttribute('translation', `${startPosition[1]} 1 ${startPosition[0]}`);
+                    this.updatePlayerScore(otherPlayer);
                 }
             }
         }
@@ -196,6 +199,8 @@ class Game {
             if (oldTile) this.distributeTokensOnOneTile(oldTile);
             this.distributeTokensOnOneTile(newTile);
 
+            this.updatePlayerScore(player);
+
             if (!this.checkForGameOver(player) && this.lastRolledValue !== 6) {
                 this.nextPlayer();
             }
@@ -206,7 +211,7 @@ class Game {
 
             this.resetRolledValue();
 
-        }, movesCount * 250 + 500);
+        }, movesCount * 250);
 
         this.clearPossibleMoves();
 
@@ -286,6 +291,14 @@ class Game {
         side.style.opacity = 0;
         return true;
     }
+
+    updatePlayerScore(player) {
+        scoreDivs[player].innerText = this.getPlayerScore(player);
+    }
+
+    getPlayerScore(player) {
+        return this.tokenPositons[player].reduce((a, b) => a + b, 0) + 24;
+    }
 }
 
 function onRollButtonClick() {
@@ -321,3 +334,10 @@ document.getElementById('3-players-button').addEventListener('click', () => setP
 document.getElementById('4-players-button').addEventListener('click', () => setPlayers(allPossiblePlayers));
 
 document.getElementById('easy-mode').addEventListener('click', () => setPlayers([allPossiblePlayers[0], allPossiblePlayers[2]], [1]));
+
+h1.addEventListener('click', () => location.reload());
+
+const scoreDivs = {};
+for (let player of allPossiblePlayers) {
+    scoreDivs[player] = document.querySelector(`.scoreboard .${player} .value`);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index cd1e05a..114171d 100644
--- a/index.html
+++ b/index.html
@@ -210,9 +210,31 @@ <h1>Ludo 3D</h1>
     </main>
 
     <side>
-        <div id="info">Hello! Let the games begin.</div>
-        <div id="current-player">Now playing: Blue</div>
+        <div class="side-text">
+            <div id="info">Hello! Let the games begin.</div>
+            <div>Now playing:</div>
+            <div id="current-player">blue</div>
+        </div>
         <button id="roll-button">Roll the dice</button>
+
+        <div class="scoreboard">
+            <div class="blue">
+                <div class="dot"></div>
+                <div class="value">0</div>
+            </div>
+            <div class="yellow">
+                <div class="dot"></div>
+                <div class="value">0</div>
+            </div>
+            <div class="green">
+                <div class="dot"></div>
+                <div class="value">0</div>
+            </div>
+            <div class="red">
+                <div class="dot"></div>
+                <div class="value">0</div>
+            </div>
+        </div>
     </side>
 
     <div class="dot-bg"></div>
diff --git a/style.css b/style.css
index da3d0a9..75212da 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,8 @@
 
     --background-color: var(--blue-bg);
     --text-color: var(--blue-text);
+
+    --transition-duration: 1000ms;
 }
 
 * {
@@ -25,13 +27,13 @@
 
 body {
     background-color: var(--background-color);
-    transition: background-color 1000ms;
+    transition: background-color var(--transition-duration);
     height: 100svh;
     margin: 0;
 
     display: flex;
     align-items: flex-end;
-    transition: all 1000ms;
+    transition: all var(--transition-duration);
 }
 
 .dot-bg {
@@ -47,6 +49,7 @@ body {
 }
 
 h1 {
+    cursor: pointer;
     position: absolute;
     top: 0;
     left: 50%;
@@ -55,7 +58,7 @@ h1 {
     z-index: 20;
     font-size: 3rem;
 
-    transition: all 2000ms;
+    transition: all var(--transition-duration);
 }
 
 main {
@@ -64,18 +67,18 @@ main {
     display: flex;
     align-items: center;
 
-    transition: opacity 500ms ease-in;
+    transition: opacity calc(var(--transition-duration) / 2) ease-in;
 }
 
 button {
-    background-color: rgba(255, 255, 255, 0.4);
     color: var(--text-color);
     font-weight: bolder;
     font-size: 30px;
     border: none;
     cursor: pointer;
     padding: 10px;
-    transition: color 1000ms;
+    transition: color var(--transition-duration);
+    background-color: transparent;
 }
 
 side {
@@ -101,8 +104,8 @@ side {
     translate: 100vw;
 
     transition:
-        color 1000ms,
-        translate 500ms;
+        color var(--transition-duration),
+        translate var(--transition-duration);
 }
 
 .popup {
@@ -131,7 +134,6 @@ side {
 
 .popup button {
     font-size: 2.25rem;
-    background-color: transparent;
     color: inherit;
     padding: 0 1rem;
     border-radius: 0.5rem;
@@ -139,7 +141,8 @@ side {
     cursor: pointer;
 }
 
-button:hover {
+button:hover,
+h1:hover {
     color: white;
     transition: none;
 }
@@ -149,4 +152,47 @@ button:hover {
     justify-content: center;
     gap: 30px;
     margin-bottom: 30px;
+}
+
+.scoreboard {
+    position: relative;
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    padding: 1rem;
+
+    border: .125rem solid var(--text-color);
+    border-radius: 1rem;
+}
+
+.scoreboard .dot {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+}
+
+.scoreboard>div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.blue .dot {
+    background-color: var(--blue-text);
+}
+
+.yellow .dot {
+    background-color: var(--yellow-text);
+}
+
+.red .dot {
+    background-color: var(--red-text);
+}
+
+.green .dot {
+    background-color: var(--green-text);
 }
\ No newline at end of file