florian-schmid/CpuHigherLower
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make Ui members private

Browse Source
This commit is contained in:
Marcel Schwarz 2023-04-12 18:47:46 +02:00
parent 52b0e8c1da
commit e174b655af
1 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
game.js
View File

@ -1,87 +1,87 @@
import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js"; import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
class Ui { class Ui {
model; #model;
scoreEl; #scoreEl;
highscoreEl; #highscoreEl;
currCpuTitleEl; #currCpuTitleEl;
currCpuScoreEl; #currCpuScoreEl;
nextCpuTitleEl; #nextCpuTitleEl;
nextCpuScoreEl; #nextCpuScoreEl;
nextCpuStyle; #nextCpuStyle;
btnHigher; #btnHigher;
btnLower; #btnLower;
constructor() { constructor() {
this.model = new Model(); this.#model = new Model();
} }
async init() { async init() {
await this.model.init(); await this.#model.init();
this.scoreEl = document.getElementById("score"); this.#scoreEl = document.getElementById("score");
this.highscoreEl = document.getElementById("highscore"); this.#highscoreEl = document.getElementById("highscore");
this.currCpuTitleEl = document.getElementById("currentCpuTitle"); this.#currCpuTitleEl = document.getElementById("currentCpuTitle");
this.currCpuScoreEl = document.getElementById("currentCpuScore"); this.#currCpuScoreEl = document.getElementById("currentCpuScore");
this.nextCpuTitleEl = document.getElementById("nextCpuTitle"); this.#nextCpuTitleEl = document.getElementById("nextCpuTitle");
this.nextCpuScoreEl = document.getElementById("nextCpuScore"); this.#nextCpuScoreEl = document.getElementById("nextCpuScore");
this.nextCpuStyle = document.getElementById("nextCpuCol").style; this.#nextCpuStyle = document.getElementById("nextCpuCol").style;
this.btnHigher = document.getElementById("btnHigher"); this.#btnHigher = document.getElementById("btnHigher");
this.btnLower = document.getElementById("btnLower"); this.#btnLower = document.getElementById("btnLower");
this.btnHigher.onclick = () => this.handleHigherPress(); this.#btnHigher.onclick = () => this.handleHigherPress();
this.btnLower.onclick = () => this.handleLowerPress(); this.#btnLower.onclick = () => this.handleLowerPress();
this.updateUiFromModel(); this.updateUiFromModel();
} }
handleHigherPress() { async handleHigherPress() {
let result = this.model.postAnswer('higher'); let result = this.#model.postAnswer('higher');
this.animateTransition(result); await this.animateTransition(result);
} }
handleLowerPress() { async handleLowerPress() {
let result = this.model.postAnswer('lower'); let result = this.#model.postAnswer('lower');
this.animateTransition(result); await this.animateTransition(result);
} }
updateUiFromModel() { updateUiFromModel() {
this.scoreEl.innerText = this.model.score; this.#scoreEl.innerText = this.#model.score;
this.highscoreEl.innerText = this.model.highscore; this.#highscoreEl.innerText = this.#model.highscore;
this.currCpuTitleEl.innerText = this.model.currentCpu.name; this.#currCpuTitleEl.innerText = this.#model.currentCpu.name;
this.currCpuScoreEl.innerText = new Intl.NumberFormat().format(this.model.currentCpu.score); this.#currCpuScoreEl.innerText = new Intl.NumberFormat().format(this.#model.currentCpu.score);
this.nextCpuTitleEl.innerText = this.model.nextCpu.name; this.#nextCpuTitleEl.innerText = this.#model.nextCpu.name;
} }
async animateTransition(wasCorrect) { async animateTransition(wasCorrect) {
this.updateUiFromModel(); this.updateUiFromModel();
this.btnHigher.setAttribute("disabled", ""); this.#btnHigher.setAttribute("disabled", "");
this.btnLower.setAttribute("disabled", ""); this.#btnLower.setAttribute("disabled", "");
this.nextCpuStyle.backgroundColor = wasCorrect ? "lightgreen" : "#FF4444"; this.#nextCpuStyle.backgroundColor = wasCorrect ? "lightgreen" : "#FF4444";
const options = { const options = {
startVal: this.model.nextCpu.score / 2, startVal: this.#model.nextCpu.score / 2,
separator: '.', separator: '.',
decimal: ',', decimal: ',',
duration: 2 duration: 2
}; };
const counter = new CountUp(this.nextCpuScoreEl, this.model.nextCpu.score, options); const counter = new CountUp(this.#nextCpuScoreEl, this.#model.nextCpu.score, options);
await new Promise(resolve => counter.start(resolve)); await new Promise(resolve => counter.start(resolve));
await this.#delay(500); await this.#delay(500);
this.model.nextRound(); this.#model.nextRound();
this.updateUiFromModel(); this.updateUiFromModel();
this.nextCpuStyle.backgroundColor = ''; this.#nextCpuStyle.backgroundColor = '';
this.nextCpuScoreEl.innerText = '?'; this.#nextCpuScoreEl.innerText = '?';
this.btnHigher.removeAttribute("disabled"); this.#btnHigher.removeAttribute("disabled");
this.btnLower.removeAttribute("disabled"); this.#btnLower.removeAttribute("disabled");
} }
#delay(time) { #delay(time) {
@ -166,5 +166,5 @@ class Model {
export async function main() { export async function main() {
const ui = new Ui(); const ui = new Ui();
ui.init() await ui.init()
} }