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

Compare commits

base: florian-schmid:main
Branches Tags
florian-schmid:main
florian-schmid:Developer
florian-schmid:refactor-state
..
compare: florian-schmid:Developer
Branches Tags
florian-schmid:Developer
florian-schmid:main
florian-schmid:refactor-state

1 Commits
main ... Developer

Author SHA1 Message Date
Florian Schmid
dd45c1d997 replace # to private 2023-05-11 16:42:33 +02:00
10 changed files with 159 additions and 694 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
.DS_Store .DS_Store
node_modules node_modules
js/

151
js/WWTRA.js
View File

@ -1,151 +0,0 @@
import { CpuRepository } from "./cpuRepository.js";
import { Stats } from "./statistics.js";
class UI {
constructor() {
this.model = new ViewModel();
let button1 = document.getElementById("btnDate1");
let button2 = document.getElementById("btnDate2");
let button3 = document.getElementById("btnDate3");
let button4 = document.getElementById("btnDate4");
this.buttons = [button1, button2, button3, button4];
this.score = document.getElementById("score");
this.highScore = document.getElementById("highScore");
document.getElementById("modeSwitch").addEventListener("change", (e) => { this.switchMode(); this.nextRound(); });
}
async init() {
await this.model.init();
this.cpuName = document.getElementById("cpuName");
this.nextRound();
this.updateScores();
this.buttons.forEach((btn) => {
btn.addEventListener("click", (e) => this.buttonClick(btn));
});
}
switchMode() {
this.model.switchMode();
}
async buttonClick(btn) {
btn.setAttribute("disabled", "");
let result = this.model.processClick(btn.innerText);
btn.style.backgroundColor = result ? "lightgreen" : "#FF4444";
this.updateScores();
await this.delay(1500);
if (result) {
this.nextRound();
}
}
async delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
nextRound() {
this.buttons.forEach((btn) => {
btn.removeAttribute("disabled");
btn.style.backgroundColor = "#5bc0de";
});
this.model.nextRound();
this.cpuName.innerText = this.model.currentCpu.name;
this.model.Dates.forEach((value, index) => (this.buttons[index].innerText = value));
}
updateScores() {
this.score.innerText = this.model.score.toString();
this.highScore.innerText = this.model.highScore.toString();
}
}
class ViewModel {
constructor() {
this.stats = new Stats("highScore_date");
this.repo = new CpuRepository();
this.hardmode = false;
}
async init() {
await this.repo.init();
}
nextRound() {
this.repo.reset();
}
incrementScore(num = 1) {
this.stats.incrementScore(num);
}
reduceScore() {
this.stats.updateScore(-1);
}
resetScore() {
this.stats.resetScore();
}
switchMode() {
this.hardmode = !this.hardmode;
}
getDates() {
let cpuDate = this.repo.currentCpu.date;
// if date is undefined the go for recursion
if (cpuDate === undefined) {
this.repo.reset();
return this.getDates();
}
const dateArray = cpuDate.split("-");
const year = Number(dateArray[0]);
let currentCpuQuartal = this.getCurrentQuartal(dateArray);
let newDates = new Array(4);
if (this.hardmode) {
for (let index = 0; index < 4; index++) {
newDates[index] = this.getRandomDate(new Date((year - 1) + "-" + "01-01"), new Date((year + 1) + "-" + "01-01"));
}
// check if the cpus quartal was randomly choosen already
if (newDates.includes(currentCpuQuartal)) {
return newDates;
}
newDates[this.getRandomInt(0, 4)] = currentCpuQuartal;
return newDates;
}
// normal Mode
for (let index = 0; index < 4; index++) {
newDates[index] = this.getRandomDate(new Date("2000-01-01"), new Date(Date.now()));
}
// check if the cpus quartal was randomly choosen already
if (newDates.includes(currentCpuQuartal)) {
return newDates;
}
newDates[this.getRandomInt(0, 4)] = currentCpuQuartal;
return newDates;
}
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
}
getCurrentQuartal(dateArray) {
let quartal = Math.ceil(Number(dateArray[1] / 4));
return "Q" + quartal + " " + dateArray[0];
}
getRandomDate(startDate, endDate) {
let newYear = this.getRandomInt(startDate.getFullYear(), endDate.getFullYear() + 1);
let quartal = this.getRandomInt(1, 5);
return "Q" + quartal + " " + newYear;
}
processClick(text) {
let result = text == this.getCurrentQuartal(this.currentCpu.date.split("-"));
if (result) {
this.incrementScore(2);
}
else {
this.reduceScore();
}
return result;
}
get currentCpu() {
return this.repo.currentCpu;
}
get score() {
return this.stats.score;
}
get highScore() {
return this.stats.highScore;
}
get Dates() {
return this.getDates();
}
}
export async function main() {
const ui = new UI();
await ui.init();
}

52
js/cpuRepository.js
View File

@ -1,52 +0,0 @@
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 {
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("../data.json");
__classPrivateFieldSet(this, _CpuRepository_cpuList, await fetchResult.json(), "f");
this.reset();
}
get currentCpu() {
return __classPrivateFieldGet(this, _CpuRepository_currentCPU, "f");
}
get nextCpu() {
return __classPrivateFieldGet(this, _CpuRepository_nextCPU, "f");
}
getRandomCpu() {
let randomIndex;
do {
randomIndex = __classPrivateFieldGet(this, _CpuRepository_instances, "m", _CpuRepository_getRandomInt).call(this, 0, __classPrivateFieldGet(this, _CpuRepository_cpuList, "f").length);
} while (__classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["value"] == null || __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["type"] == null);
__classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["name"] = __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["name"].split('@')[0];
return __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex];
}
nextRound() {
__classPrivateFieldSet(this, _CpuRepository_currentCPU, __classPrivateFieldGet(this, _CpuRepository_nextCPU, "f"), "f");
__classPrivateFieldSet(this, _CpuRepository_nextCPU, this.getRandomCpu(), "f");
}
reset() {
__classPrivateFieldSet(this, _CpuRepository_currentCPU, this.getRandomCpu(), "f");
__classPrivateFieldSet(this, _CpuRepository_nextCPU, this.getRandomCpu(), "f");
}
}
_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
};

142
js/game.js
View File

@ -1,142 +0,0 @@
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 _UI_instances, _UI_model, _UI_btnLower, _UI_btnHigher, _UI_btnScore, _UI_btnHighScore, _UI_curCpuTitle, _UI_curCpuScore, _UI_nextCpuTitle, _UI_nextCpuScore, _UI_background, _UI_showResult, _UI_delay, _UI_countUp, _ViewModel_repo, _ViewModel_localStats;
// @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";
class UI {
constructor() {
_UI_instances.add(this);
_UI_model.set(this, void 0);
_UI_btnLower.set(this, void 0);
_UI_btnHigher.set(this, void 0);
_UI_btnScore.set(this, void 0);
_UI_btnHighScore.set(this, void 0);
_UI_curCpuTitle.set(this, void 0);
_UI_curCpuScore.set(this, void 0);
_UI_nextCpuTitle.set(this, void 0);
_UI_nextCpuScore.set(this, void 0);
_UI_background.set(this, void 0);
__classPrivateFieldSet(this, _UI_model, new ViewModel(), "f");
}
async init() {
await __classPrivateFieldGet(this, _UI_model, "f").init();
__classPrivateFieldSet(this, _UI_btnLower, document.getElementById("btnLower"), "f");
__classPrivateFieldSet(this, _UI_btnHigher, document.getElementById("btnHigher"), "f");
__classPrivateFieldSet(this, _UI_btnScore, document.getElementById("score"), "f");
__classPrivateFieldSet(this, _UI_btnHighScore, document.getElementById("highScore"), "f");
__classPrivateFieldSet(this, _UI_curCpuTitle, document.getElementById("currentCpuTitle"), "f");
__classPrivateFieldSet(this, _UI_curCpuScore, document.getElementById("currentCpuScore"), "f");
__classPrivateFieldSet(this, _UI_nextCpuTitle, document.getElementById("nextCpuTitle"), "f");
__classPrivateFieldSet(this, _UI_nextCpuScore, document.getElementById("nextCpuScore"), "f");
__classPrivateFieldSet(this, _UI_background, document.getElementById("col2"), "f");
__classPrivateFieldGet(this, _UI_btnLower, "f").onclick = () => this.handleButtonLowerClick();
__classPrivateFieldGet(this, _UI_btnHigher, "f").onclick = () => this.handleButtonHigherClick();
this.updateLayout();
}
updateLayout() {
__classPrivateFieldGet(this, _UI_btnHighScore, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").highScore.toString();
__classPrivateFieldGet(this, _UI_curCpuTitle, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").currentCpu.name;
// add "." to large numbers
__classPrivateFieldGet(this, _UI_curCpuScore, "f").innerText = new Intl.NumberFormat().format(__classPrivateFieldGet(this, _UI_model, "f").currentCpu.cpuScore);
__classPrivateFieldGet(this, _UI_nextCpuTitle, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").nextCpu.name;
__classPrivateFieldGet(this, _UI_nextCpuScore, "f").innerText = "?";
__classPrivateFieldGet(this, _UI_background, "f").style.backgroundColor = "";
}
handleButtonLowerClick() {
let result = __classPrivateFieldGet(this, _UI_model, "f").buttonClicked("lower");
__classPrivateFieldGet(this, _UI_instances, "m", _UI_showResult).call(this, result);
}
handleButtonHigherClick() {
let result = __classPrivateFieldGet(this, _UI_model, "f").buttonClicked("higher");
__classPrivateFieldGet(this, _UI_instances, "m", _UI_showResult).call(this, result);
}
}
_UI_model = new WeakMap(), _UI_btnLower = new WeakMap(), _UI_btnHigher = new WeakMap(), _UI_btnScore = new WeakMap(), _UI_btnHighScore = new WeakMap(), _UI_curCpuTitle = new WeakMap(), _UI_curCpuScore = new WeakMap(), _UI_nextCpuTitle = new WeakMap(), _UI_nextCpuScore = new WeakMap(), _UI_background = new WeakMap(), _UI_instances = new WeakSet(), _UI_showResult = function _UI_showResult(isCorrect) {
__classPrivateFieldGet(this, _UI_btnHigher, "f").setAttribute("disabled", "");
__classPrivateFieldGet(this, _UI_btnLower, "f").setAttribute("disabled", "");
__classPrivateFieldGet(this, _UI_background, "f").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
isCorrect ? __classPrivateFieldGet(this, _UI_model, "f").incrementScore() : __classPrivateFieldGet(this, _UI_model, "f").resetScore();
__classPrivateFieldGet(this, _UI_btnHighScore, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").highScore.toString();
__classPrivateFieldGet(this, _UI_btnScore, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").score.toString();
__classPrivateFieldGet(this, _UI_instances, "m", _UI_countUp).call(this);
}, _UI_delay = function _UI_delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}, _UI_countUp = async function _UI_countUp() {
const options = {
startVal: __classPrivateFieldGet(this, _UI_model, "f").nextCpu.cpuScore / 2,
separator: '.',
decimal: ',',
duration: 2
};
let counter = new CountUp('nextCpuScore', __classPrivateFieldGet(this, _UI_model, "f").nextCpu.cpuScore, options);
if (!counter.error) {
counter.start();
}
else {
console.log(counter.error);
}
await __classPrivateFieldGet(this, _UI_instances, "m", _UI_delay).call(this, 2500);
__classPrivateFieldGet(this, _UI_model, "f").nextRound();
__classPrivateFieldGet(this, _UI_btnHigher, "f").removeAttribute("disabled");
__classPrivateFieldGet(this, _UI_btnLower, "f").removeAttribute("disabled");
this.updateLayout();
};
class ViewModel {
constructor() {
_ViewModel_repo.set(this, void 0);
_ViewModel_localStats.set(this, void 0);
__classPrivateFieldSet(this, _ViewModel_repo, new CpuRepository(), "f");
__classPrivateFieldSet(this, _ViewModel_localStats, new Stats("highScore_cpu"), "f");
}
async init() {
await __classPrivateFieldGet(this, _ViewModel_repo, "f").init();
}
nextRound() {
__classPrivateFieldGet(this, _ViewModel_repo, "f").nextRound();
}
// "lower" and "higher"
buttonClicked(value) {
if (value == "higher") {
return __classPrivateFieldGet(this, _ViewModel_repo, "f").nextCpu.cpuScore > __classPrivateFieldGet(this, _ViewModel_repo, "f").currentCpu.cpuScore;
}
if (value == "lower") {
return __classPrivateFieldGet(this, _ViewModel_repo, "f").nextCpu.cpuScore < __classPrivateFieldGet(this, _ViewModel_repo, "f").currentCpu.cpuScore;
}
console.log("nothing found for '" + value + "'");
return false;
}
incrementScore() {
__classPrivateFieldGet(this, _ViewModel_localStats, "f").incrementScore();
}
resetScore() {
__classPrivateFieldGet(this, _ViewModel_localStats, "f").resetScore();
}
get currentCpu() {
return __classPrivateFieldGet(this, _ViewModel_repo, "f").currentCpu;
}
get nextCpu() {
return __classPrivateFieldGet(this, _ViewModel_repo, "f").nextCpu;
}
get highScore() {
return __classPrivateFieldGet(this, _ViewModel_localStats, "f").highScore;
}
get score() {
return __classPrivateFieldGet(this, _ViewModel_localStats, "f").score;
}
}
_ViewModel_repo = new WeakMap(), _ViewModel_localStats = new WeakMap();
export async function main() {
const ui = new UI();
await ui.init();
}

141
js/gst.js
View File

@ -1,141 +0,0 @@
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 _UI_instances, _UI_model, _UI_btnDesktop, _UI_btnLaptop, _UI_btnServer, _UI_btnMobile, _UI_btns, _UI_cpuName, _UI_score, _UI_highScore, _UI_mainCol, _UI_updateScores, _UI_delay, _UI_nextRound, _ViewModel_repo, _ViewModel_stats;
import { CpuRepository } from "./cpuRepository.js";
import { Stats } from "./statistics.js";
class UI {
constructor() {
_UI_instances.add(this);
_UI_model.set(this, void 0);
_UI_btnDesktop.set(this, void 0);
_UI_btnLaptop.set(this, void 0);
_UI_btnServer.set(this, void 0);
_UI_btnMobile.set(this, void 0);
_UI_btns.set(this, void 0);
_UI_cpuName.set(this, void 0);
_UI_score.set(this, void 0);
_UI_highScore.set(this, void 0);
_UI_mainCol.set(this, void 0);
__classPrivateFieldSet(this, _UI_model, new ViewModel(), "f");
__classPrivateFieldSet(this, _UI_btnDesktop, document.getElementById("btnDesktop"), "f");
__classPrivateFieldGet(this, _UI_btnDesktop, "f").onclick = () => this.btnClick(0);
__classPrivateFieldSet(this, _UI_btnLaptop, document.getElementById("btnLaptop"), "f");
__classPrivateFieldGet(this, _UI_btnLaptop, "f").onclick = () => this.btnClick(1);
__classPrivateFieldSet(this, _UI_btnMobile, document.getElementById("btnMobile"), "f");
__classPrivateFieldGet(this, _UI_btnMobile, "f").onclick = () => this.btnClick(2);
__classPrivateFieldSet(this, _UI_btnServer, document.getElementById("btnServer"), "f");
__classPrivateFieldGet(this, _UI_btnServer, "f").onclick = () => this.btnClick(3);
__classPrivateFieldSet(this, _UI_btns, [__classPrivateFieldGet(this, _UI_btnDesktop, "f"), __classPrivateFieldGet(this, _UI_btnLaptop, "f"), __classPrivateFieldGet(this, _UI_btnMobile, "f"), __classPrivateFieldGet(this, _UI_btnServer, "f")], "f");
__classPrivateFieldSet(this, _UI_cpuName, document.getElementById("cpuName"), "f");
__classPrivateFieldSet(this, _UI_score, document.getElementById("score"), "f");
__classPrivateFieldSet(this, _UI_highScore, document.getElementById("highScore"), "f");
__classPrivateFieldSet(this, _UI_mainCol, document.getElementById("mainCol"), "f");
}
async init() {
await __classPrivateFieldGet(this, _UI_model, "f").init();
__classPrivateFieldGet(this, _UI_instances, "m", _UI_nextRound).call(this);
}
async btnClick(typ) {
// 0 -> Desktop
// 1 -> Laptop
// 2 -> Mobile/Embedded
// 3 -> Server
__classPrivateFieldGet(this, _UI_btns, "f").forEach((el) => {
el.setAttribute("disabled", "");
});
switch (typ) {
case 0:
__classPrivateFieldGet(this, _UI_btnDesktop, "f").style.backgroundColor = "#FF4444";
break;
case 1:
__classPrivateFieldGet(this, _UI_btnLaptop, "f").style.backgroundColor = "#FF4444";
break;
case 2:
__classPrivateFieldGet(this, _UI_btnMobile, "f").style.backgroundColor = "#FF4444";
break;
case 3:
__classPrivateFieldGet(this, _UI_btnServer, "f").style.backgroundColor = "#FF4444";
break;
}
const currentType = __classPrivateFieldGet(this, _UI_model, "f").currentCpu.type;
if (currentType.includes("Desktop")) {
__classPrivateFieldGet(this, _UI_btnDesktop, "f").style.backgroundColor = "lightgreen";
}
if (currentType.includes("Laptop")) {
__classPrivateFieldGet(this, _UI_btnLaptop, "f").style.backgroundColor = "lightgreen";
}
if (currentType.includes("Mobile/Embedded")) {
__classPrivateFieldGet(this, _UI_btnMobile, "f").style.backgroundColor = "lightgreen";
}
if (currentType.includes("Server")) {
__classPrivateFieldGet(this, _UI_btnServer, "f").style.backgroundColor = "lightgreen";
}
// Score
if (__classPrivateFieldGet(this, _UI_btns, "f")[typ].style.backgroundColor == "lightgreen") {
__classPrivateFieldGet(this, _UI_model, "f").incrementScore();
}
else {
__classPrivateFieldGet(this, _UI_model, "f").resetScore();
}
__classPrivateFieldGet(this, _UI_instances, "m", _UI_updateScores).call(this);
await __classPrivateFieldGet(this, _UI_instances, "m", _UI_delay).call(this, 1000);
__classPrivateFieldGet(this, _UI_btns, "f").forEach((el) => {
el.style.backgroundColor = "#3CC3FA";
el.removeAttribute("disabled");
});
__classPrivateFieldGet(this, _UI_instances, "m", _UI_nextRound).call(this);
}
}
_UI_model = new WeakMap(), _UI_btnDesktop = new WeakMap(), _UI_btnLaptop = new WeakMap(), _UI_btnServer = new WeakMap(), _UI_btnMobile = new WeakMap(), _UI_btns = new WeakMap(), _UI_cpuName = new WeakMap(), _UI_score = new WeakMap(), _UI_highScore = new WeakMap(), _UI_mainCol = new WeakMap(), _UI_instances = new WeakSet(), _UI_updateScores = function _UI_updateScores() {
__classPrivateFieldGet(this, _UI_score, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").score.toString();
__classPrivateFieldGet(this, _UI_highScore, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").highScore.toString();
}, _UI_delay = async function _UI_delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}, _UI_nextRound = function _UI_nextRound() {
__classPrivateFieldGet(this, _UI_model, "f").nextRound();
__classPrivateFieldGet(this, _UI_cpuName, "f").innerText = __classPrivateFieldGet(this, _UI_model, "f").currentCpu.name;
__classPrivateFieldGet(this, _UI_mainCol, "f").style.backgroundColor = "";
};
class ViewModel {
constructor() {
_ViewModel_repo.set(this, void 0);
_ViewModel_stats.set(this, void 0);
__classPrivateFieldSet(this, _ViewModel_stats, new Stats("highScore_socket"), "f");
__classPrivateFieldSet(this, _ViewModel_repo, new CpuRepository(), "f");
}
async init() {
await __classPrivateFieldGet(this, _ViewModel_repo, "f").init();
}
nextRound() {
__classPrivateFieldGet(this, _ViewModel_repo, "f").reset();
}
incrementScore() {
__classPrivateFieldGet(this, _ViewModel_stats, "f").incrementScore();
}
resetScore() {
__classPrivateFieldGet(this, _ViewModel_stats, "f").resetScore();
}
get currentCpu() {
return __classPrivateFieldGet(this, _ViewModel_repo, "f").currentCpu;
}
get score() {
return __classPrivateFieldGet(this, _ViewModel_stats, "f").score;
}
get highScore() {
return __classPrivateFieldGet(this, _ViewModel_stats, "f").highScore;
}
}
_ViewModel_repo = new WeakMap(), _ViewModel_stats = new WeakMap();
export async function main() {
const ui = new UI();
await ui.init();
}

49
js/statistics.js
View File

@ -1,49 +0,0 @@
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 {
constructor(highScoreStorageKey) {
var _a;
_Stats_score.set(this, void 0);
_Stats_highScore.set(this, void 0);
_Stats_highScoreStorageKey.set(this, void 0);
// used as key for localStorage
__classPrivateFieldSet(this, _Stats_highScoreStorageKey, highScoreStorageKey, "f");
__classPrivateFieldSet(this, _Stats_score, 0, "f");
__classPrivateFieldSet(this, _Stats_highScore, (_a = Number(localStorage.getItem(__classPrivateFieldGet(this, _Stats_highScoreStorageKey, "f")))) !== null && _a !== void 0 ? _a : 0, "f");
}
incrementScore(value = 1) {
__classPrivateFieldSet(this, _Stats_score, __classPrivateFieldGet(this, _Stats_score, "f") + value, "f");
this.checkHighScore();
}
resetScore() {
__classPrivateFieldSet(this, _Stats_score, 0, "f");
}
updateScore(value) {
__classPrivateFieldSet(this, _Stats_score, __classPrivateFieldGet(this, _Stats_score, "f") + value, "f");
this.checkHighScore();
}
checkHighScore() {
console.log("Highscore: " + __classPrivateFieldGet(this, _Stats_highScore, "f") + " | Score: " + __classPrivateFieldGet(this, _Stats_score, "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").toString());
}
}
get highScore() {
return __classPrivateFieldGet(this, _Stats_highScore, "f");
}
get score() {
return __classPrivateFieldGet(this, _Stats_score, "f");
}
}
_Stats_score = new WeakMap(), _Stats_highScore = new WeakMap(), _Stats_highScoreStorageKey = new WeakMap();

30
src/cpuRepository.ts
View File

@ -1,46 +1,46 @@
export class CpuRepository { export class CpuRepository {
#cpuList; private cpuList;
#currentCPU; private currentCPU;
#nextCPU; private nextCPU;
async init() { async init() {
const fetchResult = await fetch("../data.json"); const fetchResult = await fetch("../data.json");
this.#cpuList = await fetchResult.json(); this.cpuList = await fetchResult.json();
this.reset(); this.reset();
} }
get currentCpu() { get currentCpu() {
return this.#currentCPU; return this.currentCPU;
} }
get nextCpu() { get nextCpu() {
return this.#nextCPU; return this.nextCPU;
} }
getRandomCpu() { getRandomCpu() {
let randomIndex: number; let randomIndex: number;
do { 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); min = Math.ceil(min);
max = Math.floor(max); max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
} }
nextRound(): void { nextRound(): void {
this.#currentCPU = this.#nextCPU this.currentCPU = this.nextCPU
this.#nextCPU = this.getRandomCpu(); this.nextCPU = this.getRandomCpu();
} }
reset(): void { reset(): void {
this.#currentCPU = this.getRandomCpu(); this.currentCPU = this.getRandomCpu();
this.#nextCPU = 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" import { CpuRepository } from "./cpuRepository.js"
class UI { 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() { constructor() {
this.#model = new ViewModel(); this.model = new ViewModel();
} }
async init() { 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(); this.updateLayout();
} }
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 // 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() { handleButtonLowerClick() {
let result = this.#model.buttonClicked("lower"); let result = this.model.buttonClicked("lower");
this.#showResult(result); this.showResult(result);
} }
handleButtonHigherClick() { 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)); return new Promise(resolve => setTimeout(resolve, time));
} }
async #countUp() { async countUp() {
const options = { const options = {
startVal: this.#model.nextCpu.cpuScore / 2, startVal: this.model.nextCpu.cpuScore / 2,
separator: '.', separator: '.',
decimal: ',', decimal: ',',
duration: 2 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) { if (!counter.error) {
counter.start(); counter.start();
} else { } else {
console.log(counter.error); 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(); this.updateLayout();
} }
} }
class ViewModel { class ViewModel {
#repo: CpuRepository; repo: CpuRepository;
#localStats: Stats; localStats: Stats;
constructor() { constructor() {
this.#repo = new CpuRepository(); this.repo = new CpuRepository();
this.#localStats = new Stats("highScore_cpu"); this.localStats = new Stats("highScore_cpu");
} }
async init() { async init() {
await this.#repo.init(); await this.repo.init();
} }
nextRound(): void { nextRound(): void {
this.#repo.nextRound(); this.repo.nextRound();
} }
// "lower" and "higher" // "lower" and "higher"
buttonClicked(value: string): boolean { buttonClicked(value: string): boolean {
if (value == "higher") { if (value == "higher") {
return this.#repo.nextCpu.cpuScore > this.#repo.currentCpu.cpuScore; return this.repo.nextCpu.cpuScore > this.repo.currentCpu.cpuScore;
} }
if (value == "lower") { 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 + "'"); console.log("nothing found for '" + value + "'");
return false; return false;
} }
incrementScore() { incrementScore() {
this.#localStats.incrementScore(); this.localStats.incrementScore();
} }
resetScore() { resetScore() {
this.#localStats.resetScore(); this.localStats.resetScore();
} }
get currentCpu() { get currentCpu() {
return this.#repo.currentCpu; return this.repo.currentCpu;
} }
get nextCpu() { get nextCpu() {
return this.#repo.nextCpu; return this.repo.nextCpu;
} }
get highScore() { get highScore() {
return this.#localStats.highScore; return this.localStats.highScore;
} }
get score() { get score() {
return this.#localStats.score; return this.localStats.score;
} }
} }

126
src/gst.ts
View File

@ -7,61 +7,61 @@ type CPU = {
} }
class UI { 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() { 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() { 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)); 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) { async btnClick(typ) {
@ -70,93 +70,93 @@ class UI {
// 2 -> Mobile/Embedded // 2 -> Mobile/Embedded
// 3 -> Server // 3 -> Server
this.#btns.forEach((el) => { this.btns.forEach((el) => {
el.setAttribute("disabled", ""); el.setAttribute("disabled", "");
}) })
switch (typ) { switch (typ) {
case 0: case 0:
this.#btnDesktop.style.backgroundColor = "#FF4444"; this.btnDesktop.style.backgroundColor = "FF4444";
break; break;
case 1: case 1:
this.#btnLaptop.style.backgroundColor = "#FF4444"; this.btnLaptop.style.backgroundColor = "FF4444";
break; break;
case 2: case 2:
this.#btnMobile.style.backgroundColor = "#FF4444"; this.btnMobile.style.backgroundColor = "FF4444";
break; break;
case 3: case 3:
this.#btnServer.style.backgroundColor = "#FF4444"; this.btnServer.style.backgroundColor = "FF4444";
break; break;
} }
const currentType = this.#model.currentCpu.type; const currentType = this.model.currentCpu.type;
if(currentType.includes("Desktop")) { if(currentType.includes("Desktop")) {
this.#btnDesktop.style.backgroundColor = "lightgreen"; this.btnDesktop.style.backgroundColor = "lightgreen";
} }
if(currentType.includes("Laptop")) { if(currentType.includes("Laptop")) {
this.#btnLaptop.style.backgroundColor = "lightgreen"; this.btnLaptop.style.backgroundColor = "lightgreen";
} }
if(currentType.includes("Mobile/Embedded")) { if(currentType.includes("Mobile/Embedded")) {
this.#btnMobile.style.backgroundColor = "lightgreen"; this.btnMobile.style.backgroundColor = "lightgreen";
} }
if(currentType.includes("Server")) { if(currentType.includes("Server")) {
this.#btnServer.style.backgroundColor = "lightgreen"; this.btnServer.style.backgroundColor = "lightgreen";
} }
// Score // Score
if (this.#btns[typ].style.backgroundColor == "lightgreen") { if (this.btns[typ].style.backgroundColor == "lightgreen") {
this.#model.incrementScore(); this.model.incrementScore();
} else { } 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"); el.removeAttribute("disabled");
}) })
this.#nextRound(); this.nextRound();
} }
} }
class ViewModel { class ViewModel {
#repo: CpuRepository; private repo: CpuRepository;
#stats: Stats; private stats: Stats;
constructor() { constructor() {
this.#stats = new Stats("highScore_socket"); this.stats = new Stats("highScore_socket");
this.#repo = new CpuRepository(); this.repo = new CpuRepository();
} }
async init() { async init() {
await this.#repo.init(); await this.repo.init();
} }
nextRound() { nextRound() {
this.#repo.reset(); this.repo.reset();
} }
incrementScore() { incrementScore() {
this.#stats.incrementScore(); this.stats.incrementScore();
} }
resetScore() { resetScore() {
this.#stats.resetScore(); this.stats.resetScore();
} }
get currentCpu(): CPU { get currentCpu(): CPU {
return this.#repo.currentCpu; return this.repo.currentCpu;
} }
get score(): number { get score(): number {
return this.#stats.score; return this.stats.score;
} }
get highScore(): number { get highScore(): number {
return this.#stats.highScore; return this.stats.highScore;
} }
} }

33
src/statistics.ts
View File

@ -1,45 +1,44 @@
export class Stats { export class Stats {
#score: number; private _score: number;
#highScore: number; private _highScore: number;
#highScoreStorageKey: string; private highScoreStorageKey: string;
constructor(highScoreStorageKey) { constructor(highScoreStorageKey) {
// used as key for localStorage // 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) { incrementScore(value = 1) {
this.#score += value; this._score += value;
this.checkHighScore(); this.checkHighScore;
} }
resetScore(): void { resetScore(): void {
this.#score = 0; this._score = 0;
} }
updateScore(value) { updateScore(value) {
this.#score += value; this._score += value;
this.checkHighScore(); this.checkHighScore;
} }
private checkHighScore() { private checkHighScore() {
console.log("Highscore: " + this.#highScore + " | Score: " + this.#score) 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 { get highScore(): number {
return this.#highScore; return this._highScore;
} }
get score(): number { get score(): number {
return this.#score; return this._score;
} }
} }