Refactor app

game.html

@@ -45,21 +45,21 @@
             </div>
         </div>
         <div class="row mt-3">
-            <div class="col-sm border text-center p-2" id="col1">
+            <div class="col-sm border text-center p-2" id="currCpuCol">
                 <span class="h2" id="currentCpuTitle"></span>
                 <br>
                 <span class="h3">cpu score:</span>
                 <span class="h3" id="currentCpuScore" style="color: blue;"></span>
             </div>
-            <div class="col-sm border text-center p-2" id="col2">
+            <div class="col-sm border text-center p-2" id="nextCpuCol">
                 <span class="h2" id="nextCpuTitle"></span>
                 <br>
                 <span class="h3">cpu score:</span>
                 <span class="h3 counter-count" id="nextCpuScore" style="color: blue;">?</span>
                 <br>
-                <button class="btn btn-lg bg-info m-3" onclick="btnHigherClick()" id="btnHigher">Higher</button>
+                <button class="btn btn-lg bg-info m-3" id="btnHigher">Higher</button>
                 <br>
-                <button class="btn btn-lg bg-info mb-3" onclick="btnLowerClick()" id="btnLower">Lower</button>
+                <button class="btn btn-lg bg-info mb-3" id="btnLower">Lower</button>
             </div>
         </div>
     </div>
@@ -69,10 +69,8 @@
     </div> -->
 
     
-    <script type="module">
+    <script defer type="module">
-        import {main, btnHigherClick, btnLowerClick} from "./game.js"
+        import { main } from "./game.js"
-        window.btnHigherClick = btnHigherClick
-        window.btnLowerClick = btnLowerClick
         main()
     </script>
 </body>

game.js

@@ -1,110 +1,170 @@
 import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
 
-var cpuList;
+class Ui {
-var currentCpu;
+    model;
-var nextCpu;
 
-// current user score
+    scoreEl;
-var score;
+    highscoreEl;
-var highscore;
     
-function setHighscore(score) {
+    currCpuTitleEl;
-    const currHighscore = localStorage.getItem("highscore_cpu")
+    currCpuScoreEl;
-    if (currHighscore < score) {
+
-        localStorage.setItem("highscore_cpu", score)
+    nextCpuTitleEl;
-        highscore = score
+    nextCpuScoreEl;
+
+    nextCpuStyle;
+
+    btnHigher;
+    btnLower;
+
+    constructor() {
+        this.model = new Model();
+    }
+
+    async init() {
+        await this.model.init();
+
+        this.scoreEl = document.getElementById("score");
+        this.highscoreEl = document.getElementById("highscore");
+        this.currCpuTitleEl = document.getElementById("currentCpuTitle");
+        this.currCpuScoreEl = document.getElementById("currentCpuScore");
+        this.nextCpuTitleEl = document.getElementById("nextCpuTitle");
+        this.nextCpuScoreEl = document.getElementById("nextCpuScore");
+        this.nextCpuStyle = document.getElementById("nextCpuCol").style;
+
+        this.btnHigher = document.getElementById("btnHigher");
+        this.btnLower = document.getElementById("btnLower");
+        this.btnHigher.onclick = () => this.handleHigherPress();
+        this.btnLower.onclick = () => this.handleLowerPress();
+
+        this.updateUiFromModel();
+    }
+
+    handleHigherPress() {
+        let result = this.model.postAnswer('higher');
+        this.animateTransition(result);
+    }
+
+    handleLowerPress() {
+        let result = this.model.postAnswer('lower');
+        this.animateTransition(result);
+    }
+
+    updateUiFromModel() {
+        this.scoreEl.innerText = this.model.score;
+        this.highscoreEl.innerText = this.model.highscore;
+        this.currCpuTitleEl.innerText = this.model.currentCpu.name;
+        this.currCpuScoreEl.innerText = new Intl.NumberFormat().format(this.model.currentCpu.score);
+        this.nextCpuTitleEl.innerText = this.model.nextCpu.name;
+    }
+
+    async animateTransition(wasCorrect) {
+        this.updateUiFromModel();
+        this.btnHigher.setAttribute("disabled", "");
+        this.btnLower.setAttribute("disabled", "");
+        this.nextCpuStyle.backgroundColor = wasCorrect ? "lightgreen" : "#FF4444";
+
+        const options = {
+            startVal: this.model.nextCpu.score / 2,
+            separator: '.',
+            decimal: ',',
+            duration: 2
+        };
+        const counter = new CountUp(this.nextCpuScoreEl, this.model.nextCpu.score, options);
+
+        await new Promise(resolve => counter.start(resolve));
+        await this.#delay(500);
+
+        this.model.nextRound();
+        this.updateUiFromModel();
+        
+        this.nextCpuStyle.backgroundColor = '';
+        this.nextCpuScoreEl.innerText = '?';
+        this.btnHigher.removeAttribute("disabled");
+        this.btnLower.removeAttribute("disabled");
+    }
+
+    #delay(time) {
+        return new Promise(resolve => setTimeout(resolve, time));
+    }
+}
+
+class Model {
+    #cpuList;
+
+    #currentCpu;
+    #nextCpu;
+
+    #score;
+    #highscore;
+
+    async init() {
+        const fetchResult = await fetch("./data.json");
+        this.#cpuList = await fetchResult.json();
+
+        this.#currentCpu = this.#getRandomCpu();
+        this.#nextCpu = this.#getRandomCpu();
+        this.#score = 0;
+        this.#highscore = localStorage.getItem("highscore_cpu") ?? 0;
+    }
+
+    get highscore() {
+        return this.#highscore;
+    }
+
+    get score() {
+        return this.#score;
+    }
+
+    get currentCpu() {
+        return this.#currentCpu;
+    }
+
+    get nextCpu() {
+        return this.#nextCpu;
+    }
+
+    // Can be 'higher' or 'lower'
+    postAnswer(answer) {
+        let answerWasCorrect = false;
+        if (answer === 'higher') {
+            answerWasCorrect = this.nextCpu.score > this.#currentCpu.score;
+        } else if (answer === 'lower') {
+            answerWasCorrect = this.nextCpu.score < this.#currentCpu.score;
+        }
+
+        if (answerWasCorrect) {
+            this.#score += 1;
+            return true;
+        } else {
+            this.#updateHighscore(this.score)
+            this.#score = 0;
+            return false;
+        }
+    }
+
+    nextRound() {
+        this.#currentCpu = this.#nextCpu;
+        this.#nextCpu = this.#getRandomCpu();
+    }
+
+    #getRandomCpu() {
+        const item = this.#cpuList[Math.floor(Math.random() * this.#cpuList.length)];
+        return {
+            name: item["name"].split('@')[0],
+            score: item["cpuScore"]
+        };
+    }
+
+    #updateHighscore(newScore) {
+        if (newScore > this.#highscore) {
+            localStorage.setItem("highscore_cpu", newScore);
+            this.#highscore = newScore;
+        }
     }
 }
 
 export async function main() {
-    await fetch('./data.json')
+    const ui = new Ui();
-        .then((response) => response.json())
+    ui.init()
-        .then((json) => cpuList = json);
-
-    currentCpu = getRandomCpu();
-    nextCpu = getRandomCpu();
-    score = 0;
-    highscore = localStorage.getItem("highscore_cpu") ?? 0
-    updateLayout();
-}
-
-function getRandomCpu() {
-    let randomIndex = getRandomInt(0, cpuList.length)
-    return {
-        name: cpuList[randomIndex]["name"].split('@')[0],
-        score: cpuList[randomIndex]["cpuScore"]
-    }
-}
-
-export function btnLowerClick() {
-    nextCpu.score < currentCpu.score ? showResult(true) : showResult(false);
-}
-
-export function btnHigherClick() {
-    nextCpu.score > currentCpu.score ? showResult(true) : showResult(false);
-}
-
-function showResult(isCorrect) {
-    document.getElementById("btnHigher").setAttribute("disabled", "");
-    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;
-
-    countUp();
-}
-
-// 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)
-    document.getElementById("nextCpuTitle").innerText = nextCpu.name;
-    
-    document.getElementById("nextCpuScore").innerText = "?";
-
-    document.getElementById("col2").style.backgroundColor = "";
-}
-
-function delay(time) {
-    return new Promise(resolve => setTimeout(resolve, time));
-}
-
-async function countUp() {
-    const options = {
-        startVal: nextCpu.score / 2,
-        separator: '.',
-        decimal: ',',
-        duration: 2
-    };
-    let counter = new CountUp('nextCpuScore', nextCpu.score, options);
-    if (!counter.error) {
-        counter.start();
-    } else {
-        counter.error(demo.error);
-    }
-
-    await delay(2500)
-    nextRound();
-
-    document.getElementById("btnHigher").removeAttribute("disabled");
-    document.getElementById("btnLower").removeAttribute("disabled");
-}
-
-function nextRound() {
-    currentCpu = nextCpu;
-    nextCpu = getRandomCpu();
-
-    updateLayout();
-}
-
-function getRandomInt(min, max) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
 }