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(); }