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

replace # to private

Browse Source
This commit is contained in:
Florian Schmid 2023-05-11 16:42:33 +02:00
parent 265dab430c
commit dd45c1d997
4 changed files with 155 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/cpuRepository.ts
View File

@ -1,46 +1,46 @@
export class CpuRepository {
#cpuList;
private cpuList;
#currentCPU;
#nextCPU;
private currentCPU;
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);
} while (this.#cpuList[randomIndex]["value"] == null || this.#cpuList[randomIndex]["type"] == null)
this.#cpuList[randomIndex]["name"] = this.#cpuList[randomIndex]["name"].split('@')[0];
return this.#cpuList[randomIndex];
randomIndex = this.getRandomInt(0, this.cpuList.length);
} while (this.cpuList[randomIndex]["value"] == null || this.cpuList[randomIndex]["type"] == null)
this.cpuList[randomIndex]["name"] = this.cpuList[randomIndex]["name"].split('@')[0];
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.#nextCPU = this.getRandomCpu();
this.currentCPU = this.nextCPU
this.nextCPU = this.getRandomCpu();
}
reset(): void {
this.#currentCPU = this.getRandomCpu();
this.#nextCPU = this.getRandomCpu();
this.currentCPU = this.getRandomCpu();
this.nextCPU = this.getRandomCpu();
}
}

126
src/game.ts
View File

@ -4,161 +4,161 @@ import { Stats } from "./statistics.js";
import { CpuRepository } from "./cpuRepository.js"
class UI {
#model: ViewModel;
private model: ViewModel;
#btnLower: HTMLElement;
#btnHigher: HTMLElement;
#btnScore: HTMLElement;
#btnHighScore: HTMLElement;
private btnLower: HTMLElement;
private btnHigher: HTMLElement;
private btnScore: HTMLElement;
private btnHighScore: HTMLElement;
#curCpuTitle: HTMLElement;
#curCpuScore: HTMLElement;
#nextCpuTitle: HTMLElement;
#nextCpuScore: HTMLElement;
private curCpuTitle: HTMLElement;
private curCpuScore: HTMLElement;
private nextCpuTitle: 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.#btnHigher = document.getElementById("btnHigher");
this.#btnScore = document.getElementById("score");
this.#btnHighScore = document.getElementById("highScore");
this.btnLower = document.getElementById("btnLower");
this.btnHigher = document.getElementById("btnHigher");
this.btnScore = document.getElementById("score");
this.btnHighScore = document.getElementById("highScore");
this.#curCpuTitle = document.getElementById("currentCpuTitle");
this.#curCpuScore = document.getElementById("currentCpuScore");
this.#nextCpuTitle = document.getElementById("nextCpuTitle");
this.#nextCpuScore = document.getElementById("nextCpuScore");
this.curCpuTitle = document.getElementById("currentCpuTitle");
this.curCpuScore = document.getElementById("currentCpuScore");
this.nextCpuTitle = document.getElementById("nextCpuTitle");
this.nextCpuScore = document.getElementById("nextCpuScore");
this.#background = document.getElementById("col2");
this.background = document.getElementById("col2");
this.#btnLower.onclick = () => this.handleButtonLowerClick();
this.#btnHigher.onclick = () => this.handleButtonHigherClick();
this.btnLower.onclick = () => this.handleButtonLowerClick();
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.#nextCpuTitle.innerText = this.#model.nextCpu.name;
this.curCpuScore.innerText = new Intl.NumberFormat().format(this.model.currentCpu.cpuScore);
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");
this.#showResult(result);
let result = this.model.buttonClicked("lower");
this.showResult(result);
}
handleButtonHigherClick() {
let result = this.#model.buttonClicked("higher");
this.#showResult(result);
let result = this.model.buttonClicked("higher");
this.showResult(result);
}
#showResult(isCorrect) {
this.#btnHigher.setAttribute("disabled", "");
this.#btnLower.setAttribute("disabled", "");
showResult(isCorrect) {
this.btnHigher.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.#btnScore.innerText = this.#model.score.toString();
this.btnHighScore.innerText = this.model.highScore.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)
this.#model.nextRound();
await this.delay(2500)
this.model.nextRound();
this.#btnHigher.removeAttribute("disabled");
this.#btnLower.removeAttribute("disabled");
this.btnHigher.removeAttribute("disabled");
this.btnLower.removeAttribute("disabled");
this.updateLayout();
}
}
class ViewModel {
#repo: CpuRepository;
#localStats: Stats;
repo: CpuRepository;
localStats: Stats;
constructor() {
this.#repo = new CpuRepository();
this.#localStats = new Stats("highScore_cpu");
this.repo = new CpuRepository();
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;
}
}

126
src/gst.ts
View File

@ -7,61 +7,61 @@ type CPU = {
}
class UI {
#model: ViewModel;
private model: ViewModel;
#btnDesktop: HTMLElement;
#btnLaptop: HTMLElement;
#btnServer: HTMLElement;
#btnMobile: HTMLElement;
private btnDesktop: HTMLElement;
private btnLaptop: HTMLElement;
private btnServer: HTMLElement;
private btnMobile: HTMLElement;
#btns: HTMLElement[];
private btns: HTMLElement[];
#cpuName: HTMLElement;
#score: HTMLElement;
#highScore: HTMLElement;
#mainCol: HTMLElement;
private cpuName: HTMLElement;
private score: HTMLElement;
private highScore: HTMLElement;
private mainCol: HTMLElement;
constructor() {
this.#model = new ViewModel();
this.model = new ViewModel();
this.#btnDesktop = document.getElementById("btnDesktop");
this.#btnDesktop.onclick = () => this.btnClick(0);
this.#btnLaptop = document.getElementById("btnLaptop");
this.#btnLaptop.onclick = () => this.btnClick(1);
this.#btnMobile = document.getElementById("btnMobile");
this.#btnMobile.onclick = () => this.btnClick(2);
this.#btnServer = document.getElementById("btnServer");
this.#btnServer.onclick = () => this.btnClick(3);
this.btnDesktop = document.getElementById("btnDesktop");
this.btnDesktop.onclick = () => this.btnClick(0);
this.btnLaptop = document.getElementById("btnLaptop");
this.btnLaptop.onclick = () => this.btnClick(1);
this.btnMobile = document.getElementById("btnMobile");
this.btnMobile.onclick = () => this.btnClick(2);
this.btnServer = document.getElementById("btnServer");
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.#score = document.getElementById("score");
this.#highScore = document.getElementById("highScore");
this.#mainCol = document.getElementById("mainCol");
this.cpuName = document.getElementById("cpuName");
this.score = document.getElementById("score");
this.highScore = document.getElementById("highScore");
this.mainCol = document.getElementById("mainCol");
}
async init() {
await this.#model.init();
await this.model.init();
this.#nextRound();
this.nextRound();
}
#updateScores() {
this.#score.innerText = this.#model.score.toString();
this.#highScore.innerText = this.#model.highScore.toString();
updateScores() {
this.score.innerText = this.model.score.toString();
this.highScore.innerText = this.model.highScore.toString();
}
async #delay(time) {
async delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
#nextRound() {
this.#model.nextRound();
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") {
this.#model.incrementScore();
if (this.btns[typ].style.backgroundColor == "lightgreen") {
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) => {
el.style.backgroundColor = "#3CC3FA";
this.btns.forEach( (el) => {
el.style.backgroundColor = "3CC3FA";
el.removeAttribute("disabled");
})
this.#nextRound();
this.nextRound();
}
}
class ViewModel {
#repo: CpuRepository;
#stats: Stats;
private repo: CpuRepository;
private stats: Stats;
constructor() {
this.#stats = new Stats("highScore_socket");
this.#repo = new CpuRepository();
this.stats = new Stats("highScore_socket");
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;
}
}

28
src/statistics.ts
View File

@ -1,44 +1,44 @@
export class Stats {
#score: number;
#highScore: number;
#highScoreStorageKey: string;
private _score: number;
private _highScore: number;
private highScoreStorageKey: string;
constructor(highScoreStorageKey) {
// used as key for localStorage
this.#highScoreStorageKey = highScoreStorageKey;
this.highScoreStorageKey = highScoreStorageKey;
this.#score = 0;
this.#highScore = Number(localStorage.getItem(this.#highScoreStorageKey)) ?? 0;
this._score = 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) {
this.#highScore = this.#score;
localStorage.setItem(this.#highScoreStorageKey, this.#highScore.toString());
if (this._highScore < this._score) {
this._highScore = this._score;
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;
}
}