add gst gamemode | not tested

game.js

@@ -76,7 +76,7 @@ function updateLayout() {
     document.getElementById("col2").style.backgroundColor = "";
 }
 
-function delay(time) {
+export function delay(time) {
     return new Promise(resolve => setTimeout(resolve, time));
 }
 

gst.html

@@ -49,22 +49,22 @@
             </div>
         </div>
         <div class="row align-items-center">
-            <div class="col-6 offset-3 border text-center p-2">
+            <div class="col-6 offset-3 border text-center p-2" id="mainCol">
                 <span class="h2" id="cpuName"></span>
-                <button class="btn btn-lg bg-info m-1">Desktop</button>
                 <br>
-                <button class="btn btn-lg bg-info m-1">Laptop</button>
+                <button class="btn btn-lg bg-info m-1 mt-2" id="btnDesktop" onclick="btnClick(0)">Desktop</button>
                 <br>
-                <button class="btn btn-lg bg-info m-1">Mobile/Embedded</button>
+                <button class="btn btn-lg bg-info m-1" id="btnLaptop" onclick="btnClick(1)">Laptop</button>
+                <br>
+                <button class="btn btn-lg bg-info m-1" id="btnMobile" onclick="btnClick(2)">Mobile/Embedded</button>
                 <br>
             </div>
         </div>
     </div>
 
     <script type="module">
-        import {main, btnClick} from "./game.js"
-        window.btnHigherClick = btnHigherClick
-        window.btnLowerClick = btnLowerClick
+        import {main, btnClick} from "./gst.js"
+        window.btnClick = btnClick
         main()
     </script>
 </body>

gst.js

@@ -4,7 +4,7 @@ var currentCpu;
 var score;
 var highScore;
 
-async function main() {
+export async function main() {
     // init cpu list
     await (fetch('./data.json')
         .then((response) => response.json())
@@ -17,6 +17,8 @@ function nextRound() {
     currentCpu = getRandomCpu();
 
     document.getElementById("cpuName").innerText = currentCpu.name;
+
+    document.getElementById("mainCol").style.backgroundColor = "";
 }
 
 function getRandomCpu() {
@@ -32,6 +34,59 @@ function getRandomCpu() {
     }
 }
 
+import { delay } from "./game";
+
+export async function btnClick(typ) {
+    // 0 -> Desktop
+    // 1 -> Laptop
+    // 2 -> Mobile/Embedded
+    // remove bootstrap class
+
+    let btnDesktop =  document.getElementById("btnDesktop");
+    let btnLaptop =  document.getElementById("btnLaptop");
+    let btnMobile =  document.getElementById("btnMobile");
+
+    let btns = [btnDesktop, btnLaptop, btnLaptop];
+
+    btns.forEach( (el) => {
+        el.className = el.className.replace("bg-info", "");
+    })
+
+    switch (typ) {
+        case 0:
+            btnDesktop.style.backgroundColor = "#FF4444";
+            break;
+        case 1:
+            btnLaptop.style.backgroundColor = "#FF4444";
+            break;
+        case 2:
+            btnMobile.style.backgroundColor = "#FF4444";
+            break;
+    }
+    // make correct button green and wrong button red!!!! bg-success | bg-danger
+
+    switch (currentCpu.type) {
+        case "Desktop":
+            btnDesktop.style.backgroundColor = "lightgreen";
+            break;
+        case "Laptop":
+            btnLaptop.style.backgroundColor = "lightgreen";
+            break;
+        case "Mobile/Embedded":
+            btnMobile.style.backgroundColor = "lightgreen";
+            break;
+    }
+
+    await delay(2000);
+
+    btns.forEach( (el) => {
+        el.className = el.className + " bg-info";
+        el.style.backgroundColor = "";
+    })
+
+    nextRound();
+}
+
 function getRandomInt(min, max) {
     min = Math.ceil(min);
     max = Math.floor(max);