full rework on typescript

js/cpuRepository.js

@@ -1,34 +1,42 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _CpuRepository_instances, _CpuRepository_cpuList, _CpuRepository_currentCPU, _CpuRepository_nextCPU, _CpuRepository_getRandomInt;
 export class CpuRepository {
-    #cpuList;
-
-    #currentCPU;
-    #nextCPU;
-
+    constructor() {
+        _CpuRepository_instances.add(this);
+        _CpuRepository_cpuList.set(this, void 0);
+        _CpuRepository_currentCPU.set(this, void 0);
+        _CpuRepository_nextCPU.set(this, void 0);
+    }
     async init() {
         const fetchResult = await fetch("./js/data.json");
-        this.#cpuList = await fetchResult.json();
-
-        this.#currentCPU = this.getRandomCpu();
-        this.#nextCPU = this.getRandomCpu();
+        __classPrivateFieldSet(this, _CpuRepository_cpuList, await fetchResult.json(), "f");
+        __classPrivateFieldSet(this, _CpuRepository_currentCPU, this.getRandomCpu(), "f");
+        __classPrivateFieldSet(this, _CpuRepository_nextCPU, this.getRandomCpu(), "f");
     }
-
     get currentCpu() {
-        return this.#currentCpu;
+        return __classPrivateFieldGet(this, _CpuRepository_currentCPU, "f");
     }
-
     get nextCpu() {
-        return this.#nextCpu;
+        return __classPrivateFieldGet(this, _CpuRepository_nextCPU, "f");
     }
-
     getRandomCpu() {
-        let randomIndex = this.#getRandomInt(0, this.#cpuList.length);
-        this.#cpuList[randomIndex]["name"] = this.#cpuList[randomIndex]["name"].split('@')[0];
-        return this.#cpuList[randomIndex];
-    }
-
-    #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
+        let randomIndex = __classPrivateFieldGet(this, _CpuRepository_instances, "m", _CpuRepository_getRandomInt).call(this, 0, __classPrivateFieldGet(this, _CpuRepository_cpuList, "f").length);
+        __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["name"] = __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["name"].split('@')[0];
+        return __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex];
     }
 }
+_CpuRepository_cpuList = new WeakMap(), _CpuRepository_currentCPU = new WeakMap(), _CpuRepository_nextCPU = new WeakMap(), _CpuRepository_instances = new WeakSet(), _CpuRepository_getRandomInt = function _CpuRepository_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
+};

js/game.js

@@ -1,78 +1,59 @@
+// @ts-ignore
 import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
 import { Stats } from "./statistics.js";
-import { CpuRepository } from "./cpuRepository.js"
-
-var cpuList;
-var currentCpu;
-var nextCpu;
-
+import { CpuRepository } from "./cpuRepository.js";
+let cpuList;
+let currentCpu;
+let nextCpu;
 var repo;
 var localStats;
-
 export async function main() {
     localStats = new Stats("highScore_cpu");
-    
     repo = new CpuRepository();
     await repo.init();
-
     await (fetch('./js/data.json')
         .then((response) => response.json())
         .then((json) => cpuList = json));
-
     currentCpu = getRandomCpu();
     nextCpu = getRandomCpu();
-    
     updateLayout();
 }
-
 function getRandomCpu() {
-    let randomIndex = getRandomInt(0, cpuList.length)
+    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";
-    
     isCorrect ? localStats.incrementScore() : localStats.resetScore();
-    
     document.getElementById("highScore").innerText = localStats.highScore;
     document.getElementById("score").innerText = localStats.score;
-
     countUp();
 }
-
 // updates view based on the cpu objects
 function updateLayout() {
-    document.getElementById("highScore").innerText = localStats.highScore;;
-
+    document.getElementById("highScore").innerText = localStats.highScore;
+    ;
     document.getElementById("currentCpuTitle").innerText = currentCpu.name;
     // add "." to large numbers
-    document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(currentCpu.score)
+    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,
@@ -83,24 +64,20 @@ async function countUp() {
     let counter = new CountUp('nextCpuScore', nextCpu.score, options);
     if (!counter.error) {
         counter.start();
-    } else {
+    }
+    else {
         console.log(counter.error);
     }
-
-    await delay(2500)
+    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);

js/gst.js

@@ -1,64 +1,49 @@
 var cpuList;
 var currentCpu;
-
 var score;
 var highScore;
-
 export async function main() {
+    var _a;
     // init cpu list
     await (fetch('./data.json')
         .then((response) => response.json())
         .then((json) => cpuList = json));
-
-    highScore = localStorage.getItem("highScore_socket") ?? 0
+    highScore = (_a = localStorage.getItem("highScore_socket")) !== null && _a !== void 0 ? _a : 0;
     score = 0;
     updateScores();
-
     nextRound();
 }
-
 function nextRound() {
     currentCpu = getRandomCpu();
-
     document.getElementById("cpuName").innerText = currentCpu.name;
-
     document.getElementById("mainCol").style.backgroundColor = "";
 }
-
 function getRandomCpu() {
     let randomIndex;
     do {
-        randomIndex = getRandomInt(0, cpuList.length)
-    } while (typeof(cpuList[randomIndex]["type"]) == null || cpuList[randomIndex]["type"] == "null" || cpuList[randomIndex]["type"] == null);
-    
-    
+        randomIndex = getRandomInt(0, cpuList.length);
+    } while (typeof (cpuList[randomIndex]["type"]) == null || cpuList[randomIndex]["type"] == "null" || cpuList[randomIndex]["type"] == null);
     return {
         name: cpuList[randomIndex]["name"].split('@')[0],
         type: cpuList[randomIndex]["type"]
-    }
+    };
 }
-
 function delay(time) {
     return new Promise(resolve => setTimeout(resolve, time));
 }
-
 export async function btnClick(typ) {
     // 0 -> Desktop
     // 1 -> Laptop
     // 2 -> Mobile/Embedded
     // 3 -> Server
-
-    let btnDesktop =  document.getElementById("btnDesktop");
-    let btnLaptop =  document.getElementById("btnLaptop");
-    let btnMobile =  document.getElementById("btnMobile");
-    let btnServer =  document.getElementById("btnServer");
-
+    let btnDesktop = document.getElementById("btnDesktop");
+    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";
@@ -73,24 +58,23 @@ export async function btnClick(typ) {
             btnServer.style.backgroundColor = "#FF4444";
             break;
     }
-
-    if(currentCpu.type.includes("Desktop")) {
+    if (currentCpu.type.includes("Desktop")) {
         btnDesktop.style.backgroundColor = "lightgreen";
     }
-    if(currentCpu.type.includes("Laptop")) {
+    if (currentCpu.type.includes("Laptop")) {
         btnLaptop.style.backgroundColor = "lightgreen";
     }
-    if(currentCpu.type.includes("Mobile/Embedded")) {
+    if (currentCpu.type.includes("Mobile/Embedded")) {
         btnMobile.style.backgroundColor = "lightgreen";
     }
-    if(currentCpu.type.includes("Server")) {
+    if (currentCpu.type.includes("Server")) {
         btnServer.style.backgroundColor = "lightgreen";
     }
-
     // Score
     if (btns[typ].style.backgroundColor == "lightgreen") {
         score++;
-    } else {
+    }
+    else {
         score = 0;
     }
     // Highscore
@@ -99,26 +83,20 @@ export async function btnClick(typ) {
         localStorage.setItem("highScore_socket", highScore);
     }
     updateScores();
-
     await delay(1000);
-
-    btns.forEach( (el) => {
+    btns.forEach((el) => {
         el.style.backgroundColor = "#3CC3FA";
         el.removeAttribute("disabled");
-    })
-
+    });
     nextRound();
 }
-
 function updateScores() {
     document.getElementById("score").innerText = score;
     document.getElementById("highScore").innerText = highScore;
 }
-
 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
 }
-
 main();

js/statistics.js

@@ -1,35 +1,41 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Stats_score, _Stats_highScore, _Stats_highScoreStorageKey;
 export class Stats {
-    #score;
-    #highScore;
-    #highScoreStorageKey;
-
     constructor(highScoreStorageKey) {
         // used as key for localStorage
-        
-        this.#highScoreStorageKey = highScoreStorageKey;
-
-        this.#score = 0;
-        this.#highScore = localStorage.getItem(this.#highScoreStorageKey) ?? 0;
+        var _a;
+        _Stats_score.set(this, void 0);
+        _Stats_highScore.set(this, void 0);
+        _Stats_highScoreStorageKey.set(this, void 0);
+        __classPrivateFieldSet(this, _Stats_highScoreStorageKey, highScoreStorageKey, "f");
+        __classPrivateFieldSet(this, _Stats_score, 0, "f");
+        __classPrivateFieldSet(this, _Stats_highScore, (_a = localStorage.getItem(__classPrivateFieldGet(this, _Stats_highScoreStorageKey, "f"))) !== null && _a !== void 0 ? _a : 0, "f");
     }
-
     incrementScore(value = 1) {
-        this.#score += value;
-
-        if (this.#highScore < this.#score) {
-            this.#highScore = this.#score;
-            localStorage.setItem(this.#highScoreStorageKey, this.#highScore);
+        __classPrivateFieldSet(this, _Stats_score, __classPrivateFieldGet(this, _Stats_score, "f") + value, "f");
+        if (__classPrivateFieldGet(this, _Stats_highScore, "f") < __classPrivateFieldGet(this, _Stats_score, "f")) {
+            __classPrivateFieldSet(this, _Stats_highScore, __classPrivateFieldGet(this, _Stats_score, "f"), "f");
+            localStorage.setItem(__classPrivateFieldGet(this, _Stats_highScoreStorageKey, "f"), __classPrivateFieldGet(this, _Stats_highScore, "f"));
         }
     }
-
     resetScore() {
-        this.#score = 0;
+        __classPrivateFieldSet(this, _Stats_score, 0, "f");
     }
-
     get highScore() {
-        return this.#highScore;
+        return __classPrivateFieldGet(this, _Stats_highScore, "f");
     }
-
     get score() {
-        return this.#score;
+        return __classPrivateFieldGet(this, _Stats_score, "f");
     }
 }
+_Stats_score = new WeakMap(), _Stats_highScore = new WeakMap(), _Stats_highScoreStorageKey = new WeakMap();

src/cpuRepository.ts

@@ -0,0 +1,34 @@
+export class CpuRepository {
+    #cpuList;
+
+    #currentCPU;
+    #nextCPU;
+
+    async init() {
+        const fetchResult = await fetch("./js/data.json");
+        this.#cpuList = await fetchResult.json();
+
+        this.#currentCPU = this.getRandomCpu();
+        this.#nextCPU = this.getRandomCpu();
+    }
+
+    get currentCpu() {
+        return this.#currentCPU;
+    }
+
+    get nextCpu() {
+        return this.#nextCPU;
+    }
+
+    getRandomCpu() {
+        let randomIndex = this.#getRandomInt(0, this.#cpuList.length);
+        this.#cpuList[randomIndex]["name"] = this.#cpuList[randomIndex]["name"].split('@')[0];
+        return this.#cpuList[randomIndex];
+    }
+
+    #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
+    }
+}

src/game.ts

@@ -0,0 +1,109 @@
+// @ts-ignore
+import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
+import { Stats } from "./statistics.js";
+import { CpuRepository } from "./cpuRepository.js"
+
+let cpuList;
+let currentCpu;
+let nextCpu;
+
+var repo;
+var localStats;
+
+export async function main() {
+    localStats = new Stats("highScore_cpu");
+    
+    repo = new CpuRepository();
+    await repo.init();
+
+    await (fetch('./js/data.json')
+        .then((response) => response.json())
+        .then((json) => cpuList = json));
+
+    currentCpu = getRandomCpu();
+    nextCpu = getRandomCpu();
+    
+    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";
+    
+    isCorrect ? localStats.incrementScore() : localStats.resetScore();
+    
+    document.getElementById("highScore").innerText = localStats.highScore;
+    document.getElementById("score").innerText = localStats.score;
+
+    countUp();
+}
+
+// updates view based on the cpu objects
+function updateLayout() {
+    document.getElementById("highScore").innerText = localStats.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 {
+        console.log(counter.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
+}

src/gst.ts

@@ -0,0 +1,124 @@
+var cpuList;
+var currentCpu;
+
+var score;
+var highScore;
+
+export async function main() {
+    // init cpu list
+    await (fetch('./data.json')
+        .then((response) => response.json())
+        .then((json) => cpuList = json));
+
+    highScore = localStorage.getItem("highScore_socket") ?? 0
+    score = 0;
+    updateScores();
+
+    nextRound();
+}
+
+function nextRound() {
+    currentCpu = getRandomCpu();
+
+    document.getElementById("cpuName").innerText = currentCpu.name;
+
+    document.getElementById("mainCol").style.backgroundColor = "";
+}
+
+function getRandomCpu() {
+    let randomIndex;
+    do {
+        randomIndex = getRandomInt(0, cpuList.length)
+    } while (typeof(cpuList[randomIndex]["type"]) == null || cpuList[randomIndex]["type"] == "null" || cpuList[randomIndex]["type"] == null);
+    
+    
+    return {
+        name: cpuList[randomIndex]["name"].split('@')[0],
+        type: cpuList[randomIndex]["type"]
+    }
+}
+
+function delay(time) {
+    return new Promise(resolve => setTimeout(resolve, time));
+}
+
+export async function btnClick(typ) {
+    // 0 -> Desktop
+    // 1 -> Laptop
+    // 2 -> Mobile/Embedded
+    // 3 -> Server
+
+    let btnDesktop =  document.getElementById("btnDesktop");
+    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";
+            break;
+        case 1:
+            btnLaptop.style.backgroundColor = "#FF4444";
+            break;
+        case 2:
+            btnMobile.style.backgroundColor = "#FF4444";
+            break;
+        case 3:
+            btnServer.style.backgroundColor = "#FF4444";
+            break;
+    }
+
+    if(currentCpu.type.includes("Desktop")) {
+        btnDesktop.style.backgroundColor = "lightgreen";
+    } 
+    if(currentCpu.type.includes("Laptop")) {
+        btnLaptop.style.backgroundColor = "lightgreen";
+    } 
+    if(currentCpu.type.includes("Mobile/Embedded")) {
+        btnMobile.style.backgroundColor = "lightgreen";
+    }
+    if(currentCpu.type.includes("Server")) {
+        btnServer.style.backgroundColor = "lightgreen";
+    }
+
+    // Score
+    if (btns[typ].style.backgroundColor == "lightgreen") {
+        score++;
+    } else {
+        score = 0;
+    }
+    // Highscore
+    if (score > highScore) {
+        highScore = score;
+        localStorage.setItem("highScore_socket", highScore);
+    }
+    updateScores();
+
+    await delay(1000);
+
+    btns.forEach( (el) => {
+        el.style.backgroundColor = "#3CC3FA";
+        el.removeAttribute("disabled");
+    })
+
+    nextRound();
+}
+
+function updateScores() {
+    document.getElementById("score").innerText = score;
+    document.getElementById("highScore").innerText = highScore;
+}
+
+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
+}
+
+main();

src/statistics.ts

@@ -0,0 +1,35 @@
+export class Stats {
+    #score;
+    #highScore;
+    #highScoreStorageKey;
+
+    constructor(highScoreStorageKey) {
+        // used as key for localStorage
+        
+        this.#highScoreStorageKey = highScoreStorageKey;
+
+        this.#score = 0;
+        this.#highScore = localStorage.getItem(this.#highScoreStorageKey) ?? 0;
+    }
+
+    incrementScore(value = 1) {
+        this.#score += value;
+
+        if (this.#highScore < this.#score) {
+            this.#highScore = this.#score;
+            localStorage.setItem(this.#highScoreStorageKey, this.#highScore);
+        }
+    }
+
+    resetScore() {
+        this.#score = 0;
+    }
+
+    get highScore() {
+        return this.#highScore;
+    }
+
+    get score() {
+        return this.#score;
+    }
+}

tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+      "outDir": "./js",
+      "allowJs": true,
+      "target": "ES2017",
+      "lib": ["es2018", "dom"],
+    },
+    "include": ["./src/**/*"]
+}
+