replace # to private

src/cpuRepository.ts

@@ -1,46 +1,46 @@
 export class CpuRepository {
-    #cpuList;
+    private cpuList;
 
-    #currentCPU;
+    private currentCPU;
-    #nextCPU;
+    private nextCPU;
 
     async init() {
         const fetchResult = await fetch("../data.json");
-        this.#cpuList = await fetchResult.json();
+        this.cpuList = await fetchResult.json();
 
         this.reset();
     }
 
     get currentCpu() {
-        return this.#currentCPU;
+        return this.currentCPU;
     }
 
     get nextCpu() {
-        return this.#nextCPU;
+        return this.nextCPU;
     }
 
     getRandomCpu() {
         let randomIndex: number;
         do {
-            randomIndex = this.#getRandomInt(0, this.#cpuList.length);
+            randomIndex = this.getRandomInt(0, this.cpuList.length);
-        } while (this.#cpuList[randomIndex]["value"] == null || this.#cpuList[randomIndex]["type"] == null)
+        } while (this.cpuList[randomIndex]["value"] == null || this.cpuList[randomIndex]["type"] == null)
-        this.#cpuList[randomIndex]["name"] = this.#cpuList[randomIndex]["name"].split('@')[0];
+        this.cpuList[randomIndex]["name"] = this.cpuList[randomIndex]["name"].split('@')[0];
-        return this.#cpuList[randomIndex];
+        return this.cpuList[randomIndex];
     }
 
-    #getRandomInt(min, max): number {
+    getRandomInt(min, max): number {
         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
     }
 
     nextRound(): void {
-        this.#currentCPU = this.#nextCPU
+        this.currentCPU = this.nextCPU
-        this.#nextCPU = this.getRandomCpu();
+        this.nextCPU = this.getRandomCpu();
     }
 
     reset(): void {
-        this.#currentCPU = this.getRandomCpu();
+        this.currentCPU = this.getRandomCpu();
-        this.#nextCPU = this.getRandomCpu();
+        this.nextCPU = this.getRandomCpu();
     }
 }

src/game.ts

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

src/gst.ts

@@ -7,61 +7,61 @@ type CPU = {
 }
 
 class UI {
-    #model: ViewModel;
+    private model: ViewModel;
 
-    #btnDesktop: HTMLElement;
+    private btnDesktop: HTMLElement;
-    #btnLaptop: HTMLElement;
+    private btnLaptop: HTMLElement;
-    #btnServer: HTMLElement;
+    private btnServer: HTMLElement;
-    #btnMobile: HTMLElement;
+    private btnMobile: HTMLElement;
 
-    #btns: HTMLElement[];
+    private btns: HTMLElement[];
 
-    #cpuName: HTMLElement;
+    private cpuName: HTMLElement;
-    #score: HTMLElement;
+    private score: HTMLElement;
-    #highScore: HTMLElement;
+    private highScore: HTMLElement;
-    #mainCol: HTMLElement;
+    private mainCol: HTMLElement;
 
     constructor() {
-        this.#model = new ViewModel();
+        this.model = new ViewModel();
 
-        this.#btnDesktop =  document.getElementById("btnDesktop");
+        this.btnDesktop =  document.getElementById("btnDesktop");
-        this.#btnDesktop.onclick = () => this.btnClick(0);
+        this.btnDesktop.onclick = () => this.btnClick(0);
-        this.#btnLaptop =  document.getElementById("btnLaptop");
+        this.btnLaptop =  document.getElementById("btnLaptop");
-        this.#btnLaptop.onclick = () => this.btnClick(1);
+        this.btnLaptop.onclick = () => this.btnClick(1);
-        this.#btnMobile =  document.getElementById("btnMobile");
+        this.btnMobile =  document.getElementById("btnMobile");
-        this.#btnMobile.onclick = () => this.btnClick(2);
+        this.btnMobile.onclick = () => this.btnClick(2);
-        this.#btnServer =  document.getElementById("btnServer");
+        this.btnServer =  document.getElementById("btnServer");
-        this.#btnServer.onclick = () => this.btnClick(3);
+        this.btnServer.onclick = () => this.btnClick(3);
 
-        this.#btns = [this.#btnDesktop, this.#btnLaptop, this.#btnMobile, this.#btnServer];
+        this.btns = [this.btnDesktop, this.btnLaptop, this.btnMobile, this.btnServer];
 
-        this.#cpuName = document.getElementById("cpuName");
+        this.cpuName = document.getElementById("cpuName");
-        this.#score = document.getElementById("score");
+        this.score = document.getElementById("score");
-        this.#highScore = document.getElementById("highScore");
+        this.highScore = document.getElementById("highScore");
-        this.#mainCol = document.getElementById("mainCol");
+        this.mainCol = document.getElementById("mainCol");
     }
 
     async init() {
-        await this.#model.init();
+        await this.model.init();
 
-        this.#nextRound();
+        this.nextRound();
     }
 
-    #updateScores() {
+    updateScores() {
-        this.#score.innerText = this.#model.score.toString();
+        this.score.innerText = this.model.score.toString();
-        this.#highScore.innerText = this.#model.highScore.toString();
+        this.highScore.innerText = this.model.highScore.toString();
     }
 
-    async #delay(time) {
+    async delay(time) {
         return new Promise(resolve => setTimeout(resolve, time));
     }
 
-    #nextRound() {
+    nextRound() {
-        this.#model.nextRound();
+        this.model.nextRound();
 
-        this.#cpuName.innerText = this.#model.currentCpu.name;
+        this.cpuName.innerText = this.model.currentCpu.name;
 
-        this.#mainCol.style.backgroundColor = "";
+        this.mainCol.style.backgroundColor = "";
     }
 
     async btnClick(typ) {
@@ -70,93 +70,93 @@ class UI {
         // 2 -> Mobile/Embedded
         // 3 -> Server
     
-        this.#btns.forEach((el) => {
+        this.btns.forEach((el) => {
             el.setAttribute("disabled", "");
         })
     
         switch (typ) {
             case 0:
-                this.#btnDesktop.style.backgroundColor = "#FF4444";
+                this.btnDesktop.style.backgroundColor = "FF4444";
                 break;
             case 1:
-                this.#btnLaptop.style.backgroundColor = "#FF4444";
+                this.btnLaptop.style.backgroundColor = "FF4444";
                 break;
             case 2:
-                this.#btnMobile.style.backgroundColor = "#FF4444";
+                this.btnMobile.style.backgroundColor = "FF4444";
                 break;
             case 3:
-                this.#btnServer.style.backgroundColor = "#FF4444";
+                this.btnServer.style.backgroundColor = "FF4444";
                 break;
         }
     
-        const currentType = this.#model.currentCpu.type;
+        const currentType = this.model.currentCpu.type;
         if(currentType.includes("Desktop")) {
-            this.#btnDesktop.style.backgroundColor = "lightgreen";
+            this.btnDesktop.style.backgroundColor = "lightgreen";
         } 
         if(currentType.includes("Laptop")) {
-            this.#btnLaptop.style.backgroundColor = "lightgreen";
+            this.btnLaptop.style.backgroundColor = "lightgreen";
         } 
         if(currentType.includes("Mobile/Embedded")) {
-            this.#btnMobile.style.backgroundColor = "lightgreen";
+            this.btnMobile.style.backgroundColor = "lightgreen";
         }
         if(currentType.includes("Server")) {
-            this.#btnServer.style.backgroundColor = "lightgreen";
+            this.btnServer.style.backgroundColor = "lightgreen";
         }
     
         // Score
-        if (this.#btns[typ].style.backgroundColor == "lightgreen") {
+        if (this.btns[typ].style.backgroundColor == "lightgreen") {
-            this.#model.incrementScore();
+            this.model.incrementScore();
         } else {
-            this.#model.resetScore();
+            this.model.resetScore();
         }
-        this.#updateScores();
+        this.updateScores();
     
-        await this.#delay(1000);
+        await this.delay(1000);
     
-        this.#btns.forEach( (el) => {
+        this.btns.forEach( (el) => {
-            el.style.backgroundColor = "#3CC3FA";
+            el.style.backgroundColor = "3CC3FA";
             el.removeAttribute("disabled");
         })
     
-        this.#nextRound();
+        this.nextRound();
     }
 }
 
 class ViewModel {
-    #repo: CpuRepository;
+    private repo: CpuRepository;
-    #stats: Stats;
+    private stats: Stats;
 
     constructor() {
-        this.#stats = new Stats("highScore_socket");
+        this.stats = new Stats("highScore_socket");
-        this.#repo = new CpuRepository();
+        this.repo = new CpuRepository();
     }
 
     async init() {
-        await this.#repo.init();
+        await this.repo.init();
     }
 
     nextRound() {
-        this.#repo.reset();
+        this.repo.reset();
     }
 
     incrementScore() {
-        this.#stats.incrementScore();
+        this.stats.incrementScore();
     }
 
     resetScore() {
-        this.#stats.resetScore();
+        this.stats.resetScore();
     }
 
     get currentCpu(): CPU {
-        return this.#repo.currentCpu;
+        return this.repo.currentCpu;
     }
 
     get score(): number {
-        return this.#stats.score;
+        return this.stats.score;
     }
 
     get highScore(): number {
-        return this.#stats.highScore;
+        return this.stats.highScore;
     }
 }
 

src/statistics.ts

@@ -1,44 +1,44 @@
 export class Stats {
-    #score: number;
+    private _score: number;
-    #highScore: number;
+    private _highScore: number;
-    #highScoreStorageKey: string;
+    private highScoreStorageKey: string;
 
     constructor(highScoreStorageKey) {
         // used as key for localStorage
-        this.#highScoreStorageKey = highScoreStorageKey;
+        this.highScoreStorageKey = highScoreStorageKey;
 
-        this.#score = 0;
+        this._score = 0;
-        this.#highScore = Number(localStorage.getItem(this.#highScoreStorageKey)) ?? 0;
+        this._highScore = Number(localStorage.getItem(this.highScoreStorageKey)) ?? 0;
     }
 
     incrementScore(value = 1) {
-        this.#score += value;
+        this._score += value;
 
         this.checkHighScore;
     }
 
     resetScore(): void {
-        this.#score = 0;
+        this._score = 0;
     }
 
     updateScore(value) {
-        this.#score += value;
+        this._score += value;
 
         this.checkHighScore;
     }
 
     private checkHighScore() {
-        if (this.#highScore < this.#score) {
+        if (this._highScore < this._score) {
-            this.#highScore = this.#score;
+            this._highScore = this._score;
-            localStorage.setItem(this.#highScoreStorageKey, this.#highScore.toString());
+            localStorage.setItem(this.highScoreStorageKey, this._highScore.toString());
         }
     }
 
     get highScore(): number {
-        return this.#highScore;
+        return this._highScore;
     }
 
     get score(): number {
-        return this.#score;
+        return this._score;
     }
 }