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

add score | style changes

Browse Source
This commit is contained in:
Florian Schmid 2023-04-12 13:46:14 +02:00
parent 96dcaa2a32
commit ba69c736bc
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
game.html
View File

@ -38,18 +38,23 @@
</nav> </nav>
</div> </div>
<div class="container"> <div class="container">
<div class="row">
<div class="col-12 text-center">
<div class="h2">Current Score: <span id="score" style="color: violet;">0</span></div>
</div>
</div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-sm border text-center p-2" id="col1"> <div class="col-sm border text-center p-2" id="col1">
<span class="h2" id="currentCpuTitle"></span> <span class="h2" id="currentCpuTitle"></span>
<br> <br>
<span class="h3">cpu score:</span> <span class="h3">cpu score:</span>
<span class="h3" id="currentCpuScore"></span> <span class="h3" id="currentCpuScore" style="color: blue;"></span>
</div> </div>
<div class="col-sm border text-center p-2" id="col2"> <div class="col-sm border text-center p-2" id="col2">
<span class="h2" id="nextCpuTitle"></span> <span class="h2" id="nextCpuTitle"></span>
<br> <br>
<span class="h3">cpu score:</span> <span class="h3">cpu score:</span>
<span class="h3 counter-count" id="nextCpuScore">?</span> <span class="h3 counter-count" id="nextCpuScore" style="color: blue;">?</span>
<br> <br>
<button class="btn btn-lg bg-info m-3" onclick="btnHigherClick()" id="btnHigher">Higher</button> <button class="btn btn-lg bg-info m-3" onclick="btnHigherClick()" id="btnHigher">Higher</button>
<br> <br>

9
game.js
View File

@ -4,6 +4,9 @@ var cpuList;
var currentCpu; var currentCpu;
var nextCpu; var nextCpu;
// current user score
var score;
export async function main() { export async function main() {
await fetch('./data.json') await fetch('./data.json')
.then((response) => response.json()) .then((response) => response.json())
@ -11,6 +14,7 @@ export async function main() {
currentCpu = getRandomCpu(); currentCpu = getRandomCpu();
nextCpu = getRandomCpu(); nextCpu = getRandomCpu();
score = 0;
updateLayout(); updateLayout();
} }
@ -35,10 +39,13 @@ 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";
score = isCorrect ? score + 1 : 0;
document.getElementById("score").innerText = score;
countUp(); countUp();
} }
// updates view based on the cpu objects
function updateLayout() { function updateLayout() {
document.getElementById("currentCpuTitle").innerText = currentCpu.name; document.getElementById("currentCpuTitle").innerText = currentCpu.name;
// add "." to large numbers // add "." to large numbers
@ -68,7 +75,7 @@ async function countUp() {
counter.error(demo.error); counter.error(demo.error);
} }
await delay(3000) await delay(2500)
nextRound(); nextRound();
document.getElementById("btnHigher").removeAttribute("disabled"); document.getElementById("btnHigher").removeAttribute("disabled");