This commit is contained in:
Florian Schmid 2023-04-12 20:03:24 +02:00
commit 70e2982f28
2 changed files with 15 additions and 2 deletions

View File

@ -41,6 +41,7 @@
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
<div class="h2">Current Score: <span id="score" style="color: violet;">0</span></div> <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> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">

16
game.js
View File

@ -6,7 +6,15 @@ var nextCpu;
// current user score // current user score
var score; var score;
var highScore; var highscore;
function setHighscore(score) {
const currHighscore = localStorage.getItem("highscore_cpu")
if (currHighscore < score) {
localStorage.setItem("highscore_cpu", score)
highscore = score
}
}
export async function main() { export async function main() {
await (fetch('./data.json') await (fetch('./data.json')
@ -16,7 +24,7 @@ export async function main() {
currentCpu = getRandomCpu(); currentCpu = getRandomCpu();
nextCpu = getRandomCpu(); nextCpu = getRandomCpu();
score = 0; score = 0;
highScore = 0; highscore = localStorage.getItem("highscore_cpu") ?? 0
updateLayout(); updateLayout();
} }
@ -41,6 +49,9 @@ function showResult(isCorrect) {
document.getElementById("btnLower").setAttribute("disabled", ""); document.getElementById("btnLower").setAttribute("disabled", "");
document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444"; document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
if (!isCorrect) {
setHighscore(score)
}
score = isCorrect ? score + 1 : 0; score = isCorrect ? score + 1 : 0;
if (score > highScore) { if (score > highScore) {
highScore = score; highScore = score;
@ -53,6 +64,7 @@ function showResult(isCorrect) {
// updates view based on the cpu objects // updates view based on the cpu objects
function updateLayout() { function updateLayout() {
document.getElementById("highscore").innerText = highscore;
document.getElementById("currentCpuTitle").innerText = currentCpu.name; document.getElementById("currentCpuTitle").innerText = currentCpu.name;
// add "." to large numbers // add "." to large numbers
document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(currentCpu.score) document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(currentCpu.score)