Implement high-score function

game.html

@@ -41,6 +41,7 @@
         <div class="row">
             <div class="col-12 text-center">
                 <div class="h2">Current Score: <span id="score" style="color: violet;">0</span></div>
+                <div class="h4">Personal Highscore: <span id="highscore" style="color: violet;">0</span></div>
             </div>
         </div>
         <div class="row mt-3">

game.js

@@ -6,6 +6,15 @@ var nextCpu;
 
 // current user score
 var score;
+var highscore;
+
+function setHighscore(score) {
+    const currHighscore = localStorage.getItem("highscore_cpu")
+    if (currHighscore < score) {
+        localStorage.setItem("highscore_cpu", score)
+        highscore = score
+    }
+}
 
 export async function main() {
     await fetch('./data.json')
@@ -15,6 +24,7 @@ export async function main() {
     currentCpu = getRandomCpu();
     nextCpu = getRandomCpu();
     score = 0;
+    highscore = localStorage.getItem("highscore_cpu") ?? 0
     updateLayout();
 }
 
@@ -39,6 +49,9 @@ function showResult(isCorrect) {
     document.getElementById("btnLower").setAttribute("disabled", "");
 
     document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
+    if (!isCorrect) {
+        setHighscore(score)
+    }
     score = isCorrect ? score + 1 : 0;
     document.getElementById("score").innerText = score;
 
@@ -47,6 +60,7 @@ function showResult(isCorrect) {
 
 // updates view based on the cpu objects
 function updateLayout() {
+    document.getElementById("highscore").innerText = highscore;
     document.getElementById("currentCpuTitle").innerText = currentCpu.name;
     // add "." to large numbers
     document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(currentCpu.score)