Merge pull request 'combine changes' (#2) from score into main
Reviewed-on: Schmidii99/CpuHigherLower#2
This commit is contained in:
commit
558b75b3c6
@ -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
9
game.js
@ -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");
|
||||||
|
Loading…
Reference in New Issue
Block a user