full mvvm implementation for game.js

game.html

@@ -69,9 +69,7 @@
     </div> -->
 
     <script type="module">
-        import {main, btnHigherClick, btnLowerClick} from "./js/game.js"
+        import { main } from "./js/game.js"
-        window.btnHigherClick = btnHigherClick
-        window.btnLowerClick = btnLowerClick
         main()
     </script>
 </body>

src/game.ts

@@ -3,81 +3,166 @@ import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0
 import { Stats } from "./statistics.js";
 import { CpuRepository } from "./cpuRepository.js"
 
-var repo: CpuRepository;
+class UI {
-var localStats: Stats;
+    #model: ViewModel;
 
-export async function main() {
+    #btnLower: HTMLElement;
-    localStats = new Stats("highScore_cpu");
+    #btnHigher: HTMLElement;
+    #btnScore: HTMLElement;
+    #btnHighScore: HTMLElement;
 
-    repo = new CpuRepository();
+    #curCpuTitle: HTMLElement;
-    await repo.init();
+    #curCpuScore: HTMLElement;
+    #nextCpuTitle: HTMLElement;
+    #nextCpuScore: HTMLElement;
 
-    updateLayout();
+    #background: HTMLElement;
-}
     
-export function btnLowerClick() {
+    constructor() {
-    repo.nextCpu.cpuScore < repo.currentCpu.cpuScore ? showResult(true) : showResult(false);
+        this.#model = new ViewModel();
-}
+    }
 
-export function btnHigherClick() {
+    async init() {
-    repo.nextCpu.cpuScore > repo.currentCpu.cpuScore ? showResult(true) : showResult(false);
+        await this.#model.init();
-}
 
-function showResult(isCorrect) {
+        this.#btnLower = document.getElementById("btnLower");
-    document.getElementById("btnHigher").setAttribute("disabled", "");
+        this.#btnHigher = document.getElementById("btnHigher");
-    document.getElementById("btnLower").setAttribute("disabled", "");
+        this.#btnScore = document.getElementById("score");
+        this.#btnHighScore = document.getElementById("highScore");
 
-    document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
+        this.#curCpuTitle = document.getElementById("currentCpuTitle");
+        this.#curCpuScore = document.getElementById("currentCpuScore");
+        this.#nextCpuTitle = document.getElementById("nextCpuTitle");
+        this.#nextCpuScore = document.getElementById("nextCpuScore");
 
-    isCorrect ? localStats.incrementScore() : localStats.resetScore();
+        this.#background = document.getElementById("col2");
 
-    document.getElementById("highScore").innerText = localStats.highScore.toString();
+        this.#btnLower.onclick = () => this.handleButtonLowerClick();
-    document.getElementById("score").innerText = localStats.score.toString();
+        this.#btnHigher.onclick = () => this.handleButtonHigherClick();
 
-    countUp();
+        this.updateLayout();
-}
+    }
 
-// updates view based on the cpu objects
+    updateLayout() {
-function updateLayout() {
+        this.#btnHighScore.innerText = this.#model.highScore.toString();
-    document.getElementById("highScore").innerText = localStats.highScore.toString();
 
-    document.getElementById("currentCpuTitle").innerText = repo.currentCpu.name;
+        this.#curCpuTitle.innerText = this.#model.currentCpu.name;
         // add "." to large numbers
-    document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(repo.currentCpu.cpuScore)
+        this.#curCpuScore.innerText = new Intl.NumberFormat().format(this.#model.currentCpu.cpuScore);
-    document.getElementById("nextCpuTitle").innerText = repo.nextCpu.name;
+        this.#nextCpuTitle.innerText = this.#model.nextCpu.name;
         
-    document.getElementById("nextCpuScore").innerText = "?";
+        this.#nextCpuScore.innerText = "?";
     
-    document.getElementById("col2").style.backgroundColor = "";
+        this.#background.style.backgroundColor = "";
-}
+    }
 
-function delay(time) {
+    handleButtonLowerClick() {
+        let result = this.#model.buttonClicked("lower");
+        this.#showResult(result);
+    }
+
+    handleButtonHigherClick() {
+        let result = this.#model.buttonClicked("higher");
+        this.#showResult(result);
+    }
+
+    #showResult(isCorrect) {
+        this.#btnHigher.setAttribute("disabled", "");
+        this.#btnLower.setAttribute("disabled", "");
+    
+        this.#background.style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
+        
+        isCorrect ? this.#model.incrementScore() : this.#model.resetScore();
+        
+        this.#btnHighScore.innerText = this.#model.highScore.toString();
+        this.#btnScore.innerText = this.#model.score.toString();
+    
+        this.#countUp();
+    }
+
+    #delay(time) {
         return new Promise(resolve => setTimeout(resolve, time));
-}
+    }
     
-async function countUp() {
+    async #countUp() {
         const options = {
-        startVal: repo.nextCpu.cpuScore / 2,
+            startVal: this.#model.nextCpu.cpuScore / 2,
             separator: '.',
             decimal: ',',
             duration: 2
         };
-    let counter = new CountUp('nextCpuScore', repo.nextCpu.cpuScore, options);
+        let counter = new CountUp('nextCpuScore', this.#model.nextCpu.cpuScore, options);
         if (!counter.error) {
             counter.start();
         } else {
             console.log(counter.error);
         }
     
-    await delay(2500)
+        await this.#delay(2500)
-    nextRound();
+        this.#model.nextRound();
     
-    document.getElementById("btnHigher").removeAttribute("disabled");
+        this.#btnHigher.removeAttribute("disabled");
-    document.getElementById("btnLower").removeAttribute("disabled");
+        this.#btnLower.removeAttribute("disabled");
+
+        this.updateLayout();
+    }
 }
 
-function nextRound() {
+class ViewModel {
-    repo.nextRound();
+    #repo: CpuRepository;
+    #localStats: Stats;
     
-    updateLayout();
+    constructor() {
+        this.#repo = new CpuRepository();
+        this.#localStats = new Stats("highScore_cpu");
+    }
+
+    async init() {
+        await this.#repo.init();
+    }
+
+    nextRound(): void {
+        this.#repo.nextRound();
+    }
+
+    // "lower" and "higher"
+    buttonClicked(value: string): boolean {
+        if (value == "higher") {
+            return this.#repo.nextCpu.cpuScore > this.#repo.currentCpu.cpuScore;
+        }
+        if (value == "lower") {
+            return this.#repo.nextCpu.cpuScore < this.#repo.currentCpu.cpuScore;
+        }
+        console.log("nothing found for '" + value + "'");
+        return false;
+    }
+
+    incrementScore() {
+        this.#localStats.incrementScore();
+    }
+
+    resetScore() {
+        this.#localStats.resetScore();
+    }
+
+    get currentCpu() {
+        return this.#repo.currentCpu;
+    }
+
+    get nextCpu() {
+        return this.#repo.nextCpu;
+    }
+
+    get highScore() {
+        return this.#localStats.highScore;
+    }
+
+    get score() {
+        return this.#localStats.score;
+    }
+}
+
+export async function main() {
+    const ui = new UI();
+    await ui.init();
 }