Implement high-score function

This commit is contained in:
Marcel Schwarz 2023-04-12 15:14:01 +02:00
parent 558b75b3c6
commit 631f5e484f
2 changed files with 15 additions and 0 deletions

View File

@ -41,6 +41,7 @@
<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>
</div>
<div class="row mt-3">

14
game.js
View File

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