add mvvm

gst.html

@@ -68,8 +68,7 @@
     </div>
 
     <script type="module">
-        import {main, btnClick} from "./js/gst.js"
+        import { main } from "./js/gst.js"
-        window.btnClick = btnClick
         main()
     </script>
 </body>

src/gst.ts

@@ -1,120 +1,166 @@
+import { CpuRepository } from "./cpuRepository.js";
 import { Stats } from "./statistics.js";
 
-var cpuList;
+type CPU = {
-var currentCpu;
+    name: string;
-
+    type: string;
-var stats: Stats;
-
-export async function main() {
-    // init cpu list
-    await (fetch('./data.json')
-        .then((response) => response.json())
-        .then((json) => cpuList = json));
-
-    stats = new Stats("highScore_socket");
-
-    updateScores();
-
-    nextRound();
 }
 
-function nextRound() {
+class UI {
-    currentCpu = getRandomCpu();
+    #model: ViewModel;
 
-    document.getElementById("cpuName").innerText = currentCpu.name;
+    #btnDesktop: HTMLElement;
+    #btnLaptop: HTMLElement;
+    #btnServer: HTMLElement;
+    #btnMobile: HTMLElement;
 
-    document.getElementById("mainCol").style.backgroundColor = "";
+    #btns: HTMLElement[];
+
+    #cpuName: HTMLElement;
+    #score: HTMLElement;
+    #highScore: HTMLElement;
+    #mainCol: HTMLElement;
+
+    constructor() {
+        this.#model = new ViewModel();
+
+        this.#btnDesktop =  document.getElementById("btnDesktop");
+        this.#btnDesktop.onclick = () => this.btnClick(0);
+        this.#btnLaptop =  document.getElementById("btnLaptop");
+        this.#btnLaptop.onclick = () => this.btnClick(1);
+        this.#btnMobile =  document.getElementById("btnMobile");
+        this.#btnMobile.onclick = () => this.btnClick(2);
+        this.#btnServer =  document.getElementById("btnServer");
+        this.#btnServer.onclick = () => this.btnClick(3);
+
+        this.#btns = [this.#btnDesktop, this.#btnLaptop, this.#btnMobile, this.#btnServer];
+
+        this.#cpuName = document.getElementById("cpuName");
+        this.#score = document.getElementById("score");
+        this.#highScore = document.getElementById("highScore");
+        this.#mainCol = document.getElementById("mainCol");
     }
 
-function getRandomCpu() {
+    async init() {
-    let randomIndex;
+        await this.#model.init();
-    do {
-        randomIndex = getRandomInt(0, cpuList.length)
-    } while (typeof(cpuList[randomIndex]["type"]) == null || cpuList[randomIndex]["type"] == "null" || cpuList[randomIndex]["type"] == null);
 
-    
+        this.#nextRound();
-    return {
-        name: cpuList[randomIndex]["name"].split('@')[0],
-        type: cpuList[randomIndex]["type"]
-    }
     }
 
-function delay(time) {
+    #updateScores() {
+        this.#score.innerText = this.#model.score.toString();
+        this.#highScore.innerText = this.#model.highScore.toString();
+    }
+
+    async #delay(time) {
         return new Promise(resolve => setTimeout(resolve, time));
     }
 
-export async function btnClick(typ) {
+    #nextRound() {
+        this.#model.nextRound();
+
+        this.#cpuName.innerText = this.#model.currentCpu.name;
+
+        this.#mainCol.style.backgroundColor = "";
+    }
+
+    async btnClick(typ) {
         // 0 -> Desktop
         // 1 -> Laptop
         // 2 -> Mobile/Embedded
         // 3 -> Server
     
-    let btnDesktop =  document.getElementById("btnDesktop");
+        this.#btns.forEach((el) => {
-    let btnLaptop =  document.getElementById("btnLaptop");
-    let btnMobile =  document.getElementById("btnMobile");
-    let btnServer =  document.getElementById("btnServer");
-
-    let btns = [btnDesktop, btnLaptop, btnMobile, btnServer];
-
-    btns.forEach((el) => {
             el.setAttribute("disabled", "");
         })
     
         switch (typ) {
             case 0:
-            btnDesktop.style.backgroundColor = "#FF4444";
+                this.#btnDesktop.style.backgroundColor = "#FF4444";
                 break;
             case 1:
-            btnLaptop.style.backgroundColor = "#FF4444";
+                this.#btnLaptop.style.backgroundColor = "#FF4444";
                 break;
             case 2:
-            btnMobile.style.backgroundColor = "#FF4444";
+                this.#btnMobile.style.backgroundColor = "#FF4444";
                 break;
             case 3:
-            btnServer.style.backgroundColor = "#FF4444";
+                this.#btnServer.style.backgroundColor = "#FF4444";
                 break;
         }
     
-    if(currentCpu.type.includes("Desktop")) {
+        const currentType = this.#model.currentCpu.type;
-        btnDesktop.style.backgroundColor = "lightgreen";
+        if(currentType.includes("Desktop")) {
+            this.#btnDesktop.style.backgroundColor = "lightgreen";
         } 
-    if(currentCpu.type.includes("Laptop")) {
+        if(currentType.includes("Laptop")) {
-        btnLaptop.style.backgroundColor = "lightgreen";
+            this.#btnLaptop.style.backgroundColor = "lightgreen";
         } 
-    if(currentCpu.type.includes("Mobile/Embedded")) {
+        if(currentType.includes("Mobile/Embedded")) {
-        btnMobile.style.backgroundColor = "lightgreen";
+            this.#btnMobile.style.backgroundColor = "lightgreen";
         }
-    if(currentCpu.type.includes("Server")) {
+        if(currentType.includes("Server")) {
-        btnServer.style.backgroundColor = "lightgreen";
+            this.#btnServer.style.backgroundColor = "lightgreen";
         }
     
         // Score
-    if (btns[typ].style.backgroundColor == "lightgreen") {
+        if (this.#btns[typ].style.backgroundColor == "lightgreen") {
-        stats.incrementScore();
+            this.#model.incrementScore();
         } else {
-        stats.resetScore();
+            this.#model.resetScore();
         }
-    updateScores();
+        this.#updateScores();
     
-    await delay(1000);
+        await this.#delay(1000);
     
-    btns.forEach( (el) => {
+        this.#btns.forEach( (el) => {
             el.style.backgroundColor = "#3CC3FA";
             el.removeAttribute("disabled");
         })
     
-    nextRound();
+        this.#nextRound();
+    }
 }
 
-function updateScores() {
+class ViewModel {
-    document.getElementById("score").innerText = stats.score.toString();
+    #repo: CpuRepository;
-    document.getElementById("highScore").innerText = stats.highScore.toString();
+    #stats: Stats;
+
+    constructor() {
+        this.#stats = new Stats("highScore_socket");
+        this.#repo = new CpuRepository();
     }
 
-function getRandomInt(min, max) {
+    async init() {
-    min = Math.ceil(min);
+        await this.#repo.init();
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
     }
 
-main();
+    nextRound() {
+        this.#repo.reset();
+    }
+
+    incrementScore() {
+        this.#stats.incrementScore();
+    }
+
+    resetScore() {
+        this.#stats.resetScore();
+    }
+
+    get currentCpu(): CPU {
+        return this.#repo.currentCpu;
+    }
+
+    get score(): number {
+        return this.#stats.score;
+    }
+
+    get highScore(): number {
+        return this.#stats.highScore;
+    }
+}
+
+export async function main() {
+    const ui = new UI();
+    await ui.init();
+}