add score and highscore

gst.html

@@ -46,10 +46,13 @@
         <div class="row">
             <div class="col text-center mb-3">
                 <span class="h2">Guess the socket-type of the CPU</span>
+                <br>
+                <span class="h2">Score: </span><span class="h3" id="score" style="color: violet">0</span>
+                <span class="h2" style="margin-left: 10px;">Highscore: </span> <span class="h3" id="highScore" style="color: crimson;">0</span>
             </div>
         </div>
         <div class="row align-items-center">
-            <div class="col-6 offset-3 border text-center p-2" id="mainCol">
+            <div class="col-md-6 offset-md-3 border text-center p-2" id="mainCol">
                 <span class="h2" id="cpuName"></span>
                 <br>
                 <button class="btn btn-lg m-1 mt-2" id="btnDesktop" style="background-color: #3CC3FA;" onclick="btnClick(0)">Desktop</button>

gst.js

@@ -10,6 +10,10 @@ export async function main() {
         .then((response) => response.json())
         .then((json) => cpuList = json));
 
+    highScore = localStorage.getItem("highScore_socket") ?? 0
+    score = 0;
+    updateScores();
+
     nextRound();
 }
 
@@ -83,7 +87,20 @@ export async function btnClick(typ) {
         btnServer.style.backgroundColor = "lightgreen";
     }
 
-    await delay(2000);
+    // Score
+    if (btns[typ].style.backgroundColor == "lightgreen") {
+        score++;
+    } else {
+        score = 0;
+    }
+    // Highscore
+    if (score > highScore) {
+        highScore = score;
+        localStorage.setItem("highScore_socket", highScore);
+    }
+    updateScores();
+
+    await delay(1000);
 
     btns.forEach( (el) => {
         el.style.backgroundColor = "#3CC3FA";
@@ -93,6 +110,11 @@ export async function btnClick(typ) {
     nextRound();
 }
 
+function updateScores() {
+    document.getElementById("score").innerText = score;
+    document.getElementById("highScore").innerText = highScore;
+}
+
 function getRandomInt(min, max) {
     min = Math.ceil(min);
     max = Math.floor(max);