Compare commits
57 Commits
refactor-s
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 4e006e64e8 | |||
| cb403d1e51 | |||
| ce443e26b5 | |||
| 265dab430c | |||
| 78dfb5ba9a | |||
| fa68450373 | |||
| f552bc99b9 | |||
| 1445942d04 | |||
| 8e5143fba8 | |||
| 223d212fd1 | |||
| 41c3ac5652 | |||
| c40030a13e | |||
| 52dcce3013 | |||
| ae1d9a077a | |||
| b4830536a2 | |||
| 70bf9a6fc7 | |||
| b2934f5c9c | |||
| eb5b4ed450 | |||
| 8eced118f2 | |||
| 70dd1dbf23 | |||
| ca0136a808 | |||
| 38e9e848fd | |||
| 1c4dfdad00 | |||
| c22a3e6757 | |||
| 40e9213c19 | |||
| 1f90d0351f | |||
| ae3445bcfe | |||
| 644447526f | |||
| 959f0bf656 | |||
| 36c759cfe6 | |||
| 19730d0ce3 | |||
| 7a14937463 | |||
| 72bc385048 | |||
| b978835251 | |||
| 2350b9126c | |||
| 995c436ffe | |||
| a9bb5a3fdb | |||
| 15baa335b7 | |||
| 1e40ec50d5 | |||
| 545832726f | |||
| 026f58b3cc | |||
| 5f61cf50be | |||
| f3812e9a7f | |||
| 1fb4e3f8e3 | |||
| 69a4772b76 | |||
| bc69cc9e0a | |||
| 8833deaace | |||
| 7d01dcda30 | |||
| 01369bcf90 | |||
| 82adaca14c | |||
| c08a14b072 | |||
| ec86800151 | |||
| 53827029a4 | |||
| fc76ba9ecf | |||
| 70e2982f28 | |||
| 9c19249b72 | |||
| 2145b93704 |
78
WWTRA.html
Normal file
78
WWTRA.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The CPU Higher Lower Game</title>
|
||||
<link rel="icon" type="image/x" href="imgs/chip.png">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<nav class="navbar navbar-expand-sm bg-light navbar-light">
|
||||
<div class="container-fluid h4">
|
||||
<img class="navbar-brand" src="imgs/chip.png" height="50">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="collapsibleNavbar">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="game.html">Game</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="gst.html">GST</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" style="text-decoration: underline;" href="WWTRA.html">WWTRA</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col text-center mb-3">
|
||||
<span class="h2"><span style="color: blue;">W</span>hen <span style="color: blue;">w</span>as <span style="color: blue;">t</span>hat <span style="color: blue;">r</span>eleased <span style="color: blue;">a</span>gain?</span>
|
||||
<br>
|
||||
<span class="h2">Score: </span><span class="h3" id="score" style="color: violet">0</span>
|
||||
<span class="h2" style="margin-left: 10px;">Highscore: </span> <span class="h3" id="highScore" style="color: crimson;">0</span>
|
||||
<br>
|
||||
<br>
|
||||
<input id="modeSwitch" type="checkbox" data-toggle="switchbutton" checked data-onlabel="Normal" data-offlabel="Hard Mode" data-onstyle="primary" data-offstyle="danger">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 offset-md-3 border text-center p-2" id="mainCol">
|
||||
<span class="h2" id="cpuName"></span>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1 mt-2" id="btnDate1" style="background-color: #3CC3FA;"></button>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1" id="btnDate2" style="background-color: #3CC3FA;"></button>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1" id="btnDate3" style="background-color: #3CC3FA;"></button>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1" id="btnDate4" style="background-color: #3CC3FA;"></button>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { main } from "./js/WWTRA.js"
|
||||
main()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -29,6 +29,9 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="gst.html">GST</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="WWTRA.html">WWTRA</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" style="text-decoration: underline;" href="about.html">About</a>
|
||||
</li>
|
||||
|
||||
18
game.html
18
game.html
@ -29,6 +29,9 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="gst.html">GST</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="WWTRA.html">WWTRA</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">About</a>
|
||||
</li>
|
||||
@ -41,25 +44,25 @@
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="h2">Current Score: <span id="score" style="color: violet;">0</span></div>
|
||||
<div class="h4">Personal Highscore: <span id="highscore" style="color: violet;">0</span></div>
|
||||
<div class="h4">Personal Highscore: <span id="highScore" style="color: crimson;">0</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-sm border text-center p-2" id="currCpuCol">
|
||||
<div class="col-sm border text-center p-2" id="col1">
|
||||
<span class="h2" id="currentCpuTitle"></span>
|
||||
<br>
|
||||
<span class="h3">cpu score:</span>
|
||||
<span class="h3" id="currentCpuScore" style="color: blue;"></span>
|
||||
</div>
|
||||
<div class="col-sm border text-center p-2" id="nextCpuCol">
|
||||
<div class="col-sm border text-center p-2" id="col2">
|
||||
<span class="h2" id="nextCpuTitle"></span>
|
||||
<br>
|
||||
<span class="h3">cpu score:</span>
|
||||
<span class="h3 counter-count" id="nextCpuScore" style="color: blue;">?</span>
|
||||
<br>
|
||||
<button class="btn btn-lg bg-info m-3" id="btnHigher">Higher</button>
|
||||
<button class="btn btn-lg bg-info m-3" onclick="btnHigherClick()" id="btnHigher">Higher</button>
|
||||
<br>
|
||||
<button class="btn btn-lg bg-info mb-3" id="btnLower">Lower</button>
|
||||
<button class="btn btn-lg bg-info mb-3" onclick="btnLowerClick()" id="btnLower">Lower</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,9 +71,8 @@
|
||||
<a href="https://www.flaticon.com/free-icons/processor" title="processor icons">Processor icons created by kerismaker - Flaticon</a>
|
||||
</div> -->
|
||||
|
||||
|
||||
<script defer type="module">
|
||||
import { main } from "./game.js"
|
||||
<script type="module">
|
||||
import { main } from "./js/game.js"
|
||||
main()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
181
game.js
181
game.js
@ -1,181 +0,0 @@
|
||||
import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
|
||||
|
||||
class Ui {
|
||||
#model;
|
||||
|
||||
#scoreEl;
|
||||
#highscoreEl;
|
||||
|
||||
#currCpuTitleEl;
|
||||
#currCpuScoreEl;
|
||||
|
||||
#nextCpuTitleEl;
|
||||
#nextCpuScoreEl;
|
||||
|
||||
#nextCpuStyle;
|
||||
|
||||
#btnHigher;
|
||||
#btnLower;
|
||||
|
||||
constructor() {
|
||||
this.#model = new Model();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.#model.init();
|
||||
|
||||
this.#scoreEl = document.getElementById("score");
|
||||
this.#highscoreEl = document.getElementById("highscore");
|
||||
this.#currCpuTitleEl = document.getElementById("currentCpuTitle");
|
||||
this.#currCpuScoreEl = document.getElementById("currentCpuScore");
|
||||
this.#nextCpuTitleEl = document.getElementById("nextCpuTitle");
|
||||
this.#nextCpuScoreEl = document.getElementById("nextCpuScore");
|
||||
this.#nextCpuStyle = document.getElementById("nextCpuCol").style;
|
||||
|
||||
this.#btnHigher = document.getElementById("btnHigher");
|
||||
this.#btnLower = document.getElementById("btnLower");
|
||||
this.#btnHigher.onclick = () => this.handleHigherPress();
|
||||
this.#btnLower.onclick = () => this.handleLowerPress();
|
||||
|
||||
this.updateUiFromModel();
|
||||
}
|
||||
|
||||
async handleHigherPress() {
|
||||
let result = this.#model.postAnswer('higher');
|
||||
await this.animateTransition(result);
|
||||
}
|
||||
|
||||
async handleLowerPress() {
|
||||
let result = this.#model.postAnswer('lower');
|
||||
await this.animateTransition(result);
|
||||
}
|
||||
|
||||
updateUiFromModel() {
|
||||
this.#scoreEl.innerText = this.#model.score;
|
||||
this.#highscoreEl.innerText = this.#model.highscore;
|
||||
this.#currCpuTitleEl.innerText = this.#model.currentCpu.name;
|
||||
this.#currCpuScoreEl.innerText = new Intl.NumberFormat().format(this.#model.currentCpu.score);
|
||||
this.#nextCpuTitleEl.innerText = this.#model.nextCpu.name;
|
||||
}
|
||||
|
||||
async animateTransition(wasCorrect) {
|
||||
this.updateUiFromModel();
|
||||
this.#btnHigher.setAttribute("disabled", "");
|
||||
this.#btnLower.setAttribute("disabled", "");
|
||||
this.#nextCpuStyle.backgroundColor = wasCorrect ? "lightgreen" : "#FF4444";
|
||||
|
||||
const options = {
|
||||
startVal: this.#model.nextCpu.score / 2,
|
||||
separator: '.',
|
||||
decimal: ',',
|
||||
duration: 2
|
||||
};
|
||||
const counter = new CountUp(this.#nextCpuScoreEl, this.#model.nextCpu.score, options);
|
||||
|
||||
await new Promise(resolve => counter.start(resolve));
|
||||
await this.#delay(500);
|
||||
|
||||
this.#model.nextRound();
|
||||
this.updateUiFromModel();
|
||||
|
||||
this.#nextCpuStyle.backgroundColor = '';
|
||||
this.#nextCpuScoreEl.innerText = '?';
|
||||
this.#btnHigher.removeAttribute("disabled");
|
||||
this.#btnLower.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
#delay(time) {
|
||||
return new Promise(resolve => setTimeout(resolve, time));
|
||||
}
|
||||
}
|
||||
|
||||
class Model {
|
||||
#cpuList;
|
||||
|
||||
#currentCpu;
|
||||
#nextCpu;
|
||||
#tookGuessOnCurrent;
|
||||
|
||||
#score;
|
||||
#highscore;
|
||||
|
||||
async init() {
|
||||
const fetchResult = await fetch("./data.json");
|
||||
this.#cpuList = await fetchResult.json();
|
||||
|
||||
this.#currentCpu = this.#getRandomCpu();
|
||||
this.#nextCpu = this.#getRandomCpu();
|
||||
this.#score = 0;
|
||||
this.#highscore = localStorage.getItem("highscore_cpu") ?? 0;
|
||||
|
||||
this.#tookGuessOnCurrent = false;
|
||||
}
|
||||
|
||||
get highscore() {
|
||||
return this.#highscore;
|
||||
}
|
||||
|
||||
get score() {
|
||||
return this.#score;
|
||||
}
|
||||
|
||||
get currentCpu() {
|
||||
return this.#currentCpu;
|
||||
}
|
||||
|
||||
get nextCpu() {
|
||||
return this.#nextCpu;
|
||||
}
|
||||
|
||||
get hasGuessed() {
|
||||
return this.#tookGuessOnCurrent;
|
||||
}
|
||||
|
||||
// Can be 'higher' or 'lower'
|
||||
postAnswer(answer) {
|
||||
if (this.#tookGuessOnCurrent) return false;
|
||||
this.#tookGuessOnCurrent = true;
|
||||
|
||||
let answerWasCorrect = false;
|
||||
if (answer === 'higher') {
|
||||
answerWasCorrect = this.nextCpu.score > this.#currentCpu.score;
|
||||
} else if (answer === 'lower') {
|
||||
answerWasCorrect = this.nextCpu.score < this.#currentCpu.score;
|
||||
}
|
||||
|
||||
if (answerWasCorrect) {
|
||||
this.#score += 1;
|
||||
return true;
|
||||
} else {
|
||||
this.#updateHighscore(this.score)
|
||||
this.#score = 0;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
nextRound() {
|
||||
this.#currentCpu = this.#nextCpu;
|
||||
this.#nextCpu = this.#getRandomCpu();
|
||||
this.#tookGuessOnCurrent = false;
|
||||
}
|
||||
|
||||
#getRandomCpu() {
|
||||
const item = this.#cpuList[Math.floor(Math.random() * this.#cpuList.length)];
|
||||
return {
|
||||
name: item["name"].split('@')[0],
|
||||
score: item["cpuScore"]
|
||||
};
|
||||
}
|
||||
|
||||
#updateHighscore(newScore) {
|
||||
if (newScore > this.#highscore) {
|
||||
localStorage.setItem("highscore_cpu", newScore);
|
||||
this.#highscore = newScore;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function main() {
|
||||
const ui = new Ui();
|
||||
await ui.init()
|
||||
}
|
||||
33
gst.html
33
gst.html
@ -11,6 +11,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<nav class="navbar navbar-expand-sm bg-light navbar-light">
|
||||
<div class="container-fluid h4">
|
||||
@ -29,6 +30,9 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" style="text-decoration: underline;" href="gst.html">GST</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="WWTRA.html">WWTRA</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">About</a>
|
||||
</li>
|
||||
@ -41,5 +45,34 @@
|
||||
<!-- <div class="footer">
|
||||
<a href="https://www.flaticon.com/free-icons/processor" title="processor icons">Processor icons created by kerismaker - Flaticon</a>
|
||||
</div> -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col text-center mb-3">
|
||||
<span class="h2">Guess the socket-type of the CPU</span>
|
||||
<br>
|
||||
<span class="h2">Score: </span><span class="h3" id="score" style="color: violet">0</span>
|
||||
<span class="h2" style="margin-left: 10px;">Highscore: </span> <span class="h3" id="highScore" style="color: crimson;">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 offset-md-3 border text-center p-2" id="mainCol">
|
||||
<span class="h2" id="cpuName"></span>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1 mt-2" id="btnDesktop" style="background-color: #3CC3FA;" >Desktop</button>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1" id="btnServer" style="background-color: #3CC3FA;">Server</button>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1" id="btnLaptop" style="background-color: #3CC3FA;">Laptop</button>
|
||||
<br>
|
||||
<button class="btn btn-lg m-1" id="btnMobile" style="background-color: #3CC3FA;">Mobile/Embedded</button>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { main } from "./js/gst.js"
|
||||
main()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
24
gst.js
24
gst.js
@ -1,24 +0,0 @@
|
||||
var cpuList;
|
||||
async function main() {
|
||||
await fetch('./data.json')
|
||||
.then((response) => response.json())
|
||||
.then((json) => cpuList = json);
|
||||
|
||||
console.log(getRandomCpu().name)
|
||||
}
|
||||
|
||||
function getRandomCpu() {
|
||||
let randomIndex = getRandomInt(0, cpuList.length)
|
||||
return {
|
||||
name: cpuList[randomIndex]["name"].split('@')[0],
|
||||
score: cpuList[randomIndex]["cpuScore"]
|
||||
}
|
||||
}
|
||||
|
||||
function 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
|
||||
}
|
||||
|
||||
main();
|
||||
@ -29,6 +29,9 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="gst.html">GST</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="WWTRA.html">WWTRA</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">About</a>
|
||||
</li>
|
||||
|
||||
151
js/WWTRA.js
Normal file
151
js/WWTRA.js
Normal file
@ -0,0 +1,151 @@
|
||||
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
Normal file
52
js/cpuRepository.js
Normal file
@ -0,0 +1,52 @@
|
||||
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
Normal file
142
js/game.js
Normal file
@ -0,0 +1,142 @@
|
||||
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
Normal file
141
js/gst.js
Normal file
@ -0,0 +1,141 @@
|
||||
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
Normal file
49
js/statistics.js
Normal file
@ -0,0 +1,49 @@
|
||||
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();
|
||||
211
src/WWTRA.ts
Normal file
211
src/WWTRA.ts
Normal file
@ -0,0 +1,211 @@
|
||||
import { CpuRepository } from "./cpuRepository.js";
|
||||
import { Stats } from "./statistics.js";
|
||||
|
||||
class UI {
|
||||
private model: ViewModel;
|
||||
|
||||
private buttons: HTMLElement[];
|
||||
private cpuName: HTMLElement;
|
||||
|
||||
private score: HTMLElement;
|
||||
private highScore: HTMLElement;
|
||||
|
||||
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:Event) => {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:Event) => this.buttonClick(btn));
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
switchMode() {
|
||||
this.model.switchMode();
|
||||
}
|
||||
|
||||
async buttonClick(btn: HTMLElement) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
private 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)
|
||||
);
|
||||
}
|
||||
|
||||
private updateScores() {
|
||||
this.score.innerText = this.model.score.toString();
|
||||
this.highScore.innerText = this.model.highScore.toString();
|
||||
}
|
||||
}
|
||||
|
||||
class ViewModel {
|
||||
private repo: CpuRepository;
|
||||
private stats: Stats;
|
||||
|
||||
private hardmode: boolean;
|
||||
|
||||
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: number = 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: string[] = 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;
|
||||
}
|
||||
|
||||
private 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
|
||||
}
|
||||
|
||||
private getCurrentQuartal(dateArray) {
|
||||
let quartal = Math.ceil(Number(dateArray[1] / 4));
|
||||
|
||||
return "Q" + quartal + " " + dateArray[0];
|
||||
}
|
||||
|
||||
private getRandomDate(startDate: Date, endDate: Date) {
|
||||
let newYear = this.getRandomInt(startDate.getFullYear(), endDate.getFullYear() + 1);
|
||||
let quartal = this.getRandomInt(1, 5);
|
||||
return "Q" + quartal + " " + newYear;
|
||||
}
|
||||
|
||||
processClick(text: string): boolean {
|
||||
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(): number {
|
||||
return this.stats.score;
|
||||
}
|
||||
|
||||
get highScore(): number {
|
||||
return this.stats.highScore;
|
||||
}
|
||||
|
||||
get Dates(): string[] {
|
||||
return this.getDates();
|
||||
}
|
||||
}
|
||||
|
||||
export async function main() {
|
||||
const ui = new UI();
|
||||
await ui.init();
|
||||
}
|
||||
46
src/cpuRepository.ts
Normal file
46
src/cpuRepository.ts
Normal file
@ -0,0 +1,46 @@
|
||||
export class CpuRepository {
|
||||
#cpuList;
|
||||
|
||||
#currentCPU;
|
||||
#nextCPU;
|
||||
|
||||
async init() {
|
||||
const fetchResult = await fetch("../data.json");
|
||||
this.#cpuList = await fetchResult.json();
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
get currentCpu() {
|
||||
return this.#currentCPU;
|
||||
}
|
||||
|
||||
get 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];
|
||||
}
|
||||
|
||||
#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();
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
this.#currentCPU = this.getRandomCpu();
|
||||
this.#nextCPU = this.getRandomCpu();
|
||||
}
|
||||
}
|
||||
168
src/game.ts
Normal file
168
src/game.ts
Normal file
@ -0,0 +1,168 @@
|
||||
// @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 {
|
||||
#model: ViewModel;
|
||||
|
||||
#btnLower: HTMLElement;
|
||||
#btnHigher: HTMLElement;
|
||||
#btnScore: HTMLElement;
|
||||
#btnHighScore: HTMLElement;
|
||||
|
||||
#curCpuTitle: HTMLElement;
|
||||
#curCpuScore: HTMLElement;
|
||||
#nextCpuTitle: HTMLElement;
|
||||
#nextCpuScore: HTMLElement;
|
||||
|
||||
#background: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
this.#model = new ViewModel();
|
||||
}
|
||||
|
||||
async 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.#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.#btnLower.onclick = () => this.handleButtonLowerClick();
|
||||
this.#btnHigher.onclick = () => this.handleButtonHigherClick();
|
||||
|
||||
this.updateLayout();
|
||||
}
|
||||
|
||||
updateLayout() {
|
||||
this.#btnHighScore.innerText = this.#model.highScore.toString();
|
||||
|
||||
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.#nextCpuScore.innerText = "?";
|
||||
|
||||
this.#background.style.backgroundColor = "";
|
||||
}
|
||||
|
||||
handleButtonLowerClick() {
|
||||
let result = this.#model.buttonClicked("lower");
|
||||
this.#showResult(result);
|
||||
}
|
||||
|
||||
handleButtonHigherClick() {
|
||||
let result = this.#model.buttonClicked("higher");
|
||||
this.#showResult(result);
|
||||
}
|
||||
|
||||
#showResult(isCorrect) {
|
||||
this.#btnHigher.setAttribute("disabled", "");
|
||||
this.#btnLower.setAttribute("disabled", "");
|
||||
|
||||
this.#background.style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
|
||||
|
||||
isCorrect ? this.#model.incrementScore() : this.#model.resetScore();
|
||||
|
||||
this.#btnHighScore.innerText = this.#model.highScore.toString();
|
||||
this.#btnScore.innerText = this.#model.score.toString();
|
||||
|
||||
this.#countUp();
|
||||
}
|
||||
|
||||
#delay(time) {
|
||||
return new Promise(resolve => setTimeout(resolve, time));
|
||||
}
|
||||
|
||||
async #countUp() {
|
||||
const options = {
|
||||
startVal: this.#model.nextCpu.cpuScore / 2,
|
||||
separator: '.',
|
||||
decimal: ',',
|
||||
duration: 2
|
||||
};
|
||||
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();
|
||||
|
||||
this.#btnHigher.removeAttribute("disabled");
|
||||
this.#btnLower.removeAttribute("disabled");
|
||||
|
||||
this.updateLayout();
|
||||
}
|
||||
}
|
||||
|
||||
class ViewModel {
|
||||
#repo: CpuRepository;
|
||||
#localStats: Stats;
|
||||
|
||||
constructor() {
|
||||
this.#repo = new CpuRepository();
|
||||
this.#localStats = new Stats("highScore_cpu");
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.#repo.init();
|
||||
}
|
||||
|
||||
nextRound(): void {
|
||||
this.#repo.nextRound();
|
||||
}
|
||||
|
||||
// "lower" and "higher"
|
||||
buttonClicked(value: string): boolean {
|
||||
if (value == "higher") {
|
||||
return this.#repo.nextCpu.cpuScore > this.#repo.currentCpu.cpuScore;
|
||||
}
|
||||
if (value == "lower") {
|
||||
return this.#repo.nextCpu.cpuScore < this.#repo.currentCpu.cpuScore;
|
||||
}
|
||||
console.log("nothing found for '" + value + "'");
|
||||
return false;
|
||||
}
|
||||
|
||||
incrementScore() {
|
||||
this.#localStats.incrementScore();
|
||||
}
|
||||
|
||||
resetScore() {
|
||||
this.#localStats.resetScore();
|
||||
}
|
||||
|
||||
get currentCpu() {
|
||||
return this.#repo.currentCpu;
|
||||
}
|
||||
|
||||
get nextCpu() {
|
||||
return this.#repo.nextCpu;
|
||||
}
|
||||
|
||||
get highScore() {
|
||||
return this.#localStats.highScore;
|
||||
}
|
||||
|
||||
get score() {
|
||||
return this.#localStats.score;
|
||||
}
|
||||
}
|
||||
|
||||
export async function main() {
|
||||
const ui = new UI();
|
||||
await ui.init();
|
||||
}
|
||||
166
src/gst.ts
Normal file
166
src/gst.ts
Normal file
@ -0,0 +1,166 @@
|
||||
import { CpuRepository } from "./cpuRepository.js";
|
||||
import { Stats } from "./statistics.js";
|
||||
|
||||
type CPU = {
|
||||
name: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
class UI {
|
||||
#model: ViewModel;
|
||||
|
||||
#btnDesktop: HTMLElement;
|
||||
#btnLaptop: HTMLElement;
|
||||
#btnServer: HTMLElement;
|
||||
#btnMobile: HTMLElement;
|
||||
|
||||
#btns: HTMLElement[];
|
||||
|
||||
#cpuName: HTMLElement;
|
||||
#score: HTMLElement;
|
||||
#highScore: HTMLElement;
|
||||
#mainCol: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
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.#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");
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.#model.init();
|
||||
|
||||
this.#nextRound();
|
||||
}
|
||||
|
||||
#updateScores() {
|
||||
this.#score.innerText = this.#model.score.toString();
|
||||
this.#highScore.innerText = this.#model.highScore.toString();
|
||||
}
|
||||
|
||||
async #delay(time) {
|
||||
return new Promise(resolve => setTimeout(resolve, time));
|
||||
}
|
||||
|
||||
#nextRound() {
|
||||
this.#model.nextRound();
|
||||
|
||||
this.#cpuName.innerText = this.#model.currentCpu.name;
|
||||
|
||||
this.#mainCol.style.backgroundColor = "";
|
||||
}
|
||||
|
||||
async btnClick(typ) {
|
||||
// 0 -> Desktop
|
||||
// 1 -> Laptop
|
||||
// 2 -> Mobile/Embedded
|
||||
// 3 -> Server
|
||||
|
||||
this.#btns.forEach((el) => {
|
||||
el.setAttribute("disabled", "");
|
||||
})
|
||||
|
||||
switch (typ) {
|
||||
case 0:
|
||||
this.#btnDesktop.style.backgroundColor = "#FF4444";
|
||||
break;
|
||||
case 1:
|
||||
this.#btnLaptop.style.backgroundColor = "#FF4444";
|
||||
break;
|
||||
case 2:
|
||||
this.#btnMobile.style.backgroundColor = "#FF4444";
|
||||
break;
|
||||
case 3:
|
||||
this.#btnServer.style.backgroundColor = "#FF4444";
|
||||
break;
|
||||
}
|
||||
|
||||
const currentType = this.#model.currentCpu.type;
|
||||
if(currentType.includes("Desktop")) {
|
||||
this.#btnDesktop.style.backgroundColor = "lightgreen";
|
||||
}
|
||||
if(currentType.includes("Laptop")) {
|
||||
this.#btnLaptop.style.backgroundColor = "lightgreen";
|
||||
}
|
||||
if(currentType.includes("Mobile/Embedded")) {
|
||||
this.#btnMobile.style.backgroundColor = "lightgreen";
|
||||
}
|
||||
if(currentType.includes("Server")) {
|
||||
this.#btnServer.style.backgroundColor = "lightgreen";
|
||||
}
|
||||
|
||||
// Score
|
||||
if (this.#btns[typ].style.backgroundColor == "lightgreen") {
|
||||
this.#model.incrementScore();
|
||||
} else {
|
||||
this.#model.resetScore();
|
||||
}
|
||||
this.#updateScores();
|
||||
|
||||
await this.#delay(1000);
|
||||
|
||||
this.#btns.forEach( (el) => {
|
||||
el.style.backgroundColor = "#3CC3FA";
|
||||
el.removeAttribute("disabled");
|
||||
})
|
||||
|
||||
this.#nextRound();
|
||||
}
|
||||
}
|
||||
|
||||
class ViewModel {
|
||||
#repo: CpuRepository;
|
||||
#stats: Stats;
|
||||
|
||||
constructor() {
|
||||
this.#stats = new Stats("highScore_socket");
|
||||
this.#repo = new CpuRepository();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.#repo.init();
|
||||
}
|
||||
|
||||
nextRound() {
|
||||
this.#repo.reset();
|
||||
}
|
||||
|
||||
incrementScore() {
|
||||
this.#stats.incrementScore();
|
||||
}
|
||||
|
||||
resetScore() {
|
||||
this.#stats.resetScore();
|
||||
}
|
||||
|
||||
get currentCpu(): CPU {
|
||||
return this.#repo.currentCpu;
|
||||
}
|
||||
|
||||
get score(): number {
|
||||
return this.#stats.score;
|
||||
}
|
||||
|
||||
get highScore(): number {
|
||||
return this.#stats.highScore;
|
||||
}
|
||||
}
|
||||
|
||||
export async function main() {
|
||||
const ui = new UI();
|
||||
await ui.init();
|
||||
}
|
||||
45
src/statistics.ts
Normal file
45
src/statistics.ts
Normal file
@ -0,0 +1,45 @@
|
||||
export class Stats {
|
||||
#score: number;
|
||||
#highScore: number;
|
||||
#highScoreStorageKey: string;
|
||||
|
||||
constructor(highScoreStorageKey) {
|
||||
// used as key for localStorage
|
||||
this.#highScoreStorageKey = highScoreStorageKey;
|
||||
|
||||
this.#score = 0;
|
||||
this.#highScore = Number(localStorage.getItem(this.#highScoreStorageKey)) ?? 0;
|
||||
}
|
||||
|
||||
incrementScore(value = 1) {
|
||||
this.#score += value;
|
||||
|
||||
this.checkHighScore();
|
||||
}
|
||||
|
||||
resetScore(): void {
|
||||
this.#score = 0;
|
||||
}
|
||||
|
||||
updateScore(value) {
|
||||
this.#score += value;
|
||||
|
||||
this.checkHighScore();
|
||||
}
|
||||
|
||||
private checkHighScore() {
|
||||
console.log("Highscore: " + this.#highScore + " | Score: " + this.#score)
|
||||
if (this.#highScore < this.#score) {
|
||||
this.#highScore = this.#score;
|
||||
localStorage.setItem(this.#highScoreStorageKey, this.#highScore.toString());
|
||||
}
|
||||
}
|
||||
|
||||
get highScore(): number {
|
||||
return this.#highScore;
|
||||
}
|
||||
|
||||
get score(): number {
|
||||
return this.#score;
|
||||
}
|
||||
}
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./js",
|
||||
"allowJs": true,
|
||||
"target": "ES2017",
|
||||
"lib": ["es2018", "dom"],
|
||||
},
|
||||
"include": ["./src/**/*"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user