CpuHigherLower/js/game.js

103 lines
2.9 KiB
JavaScript
Raw Normal View History

2023-04-12 13:39:26 +02:00
import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
2023-04-19 20:20:08 +02:00
import { Stats } from "./statistics.js";
2023-04-12 12:32:09 +02:00
2023-04-11 13:00:03 +02:00
var cpuList;
var currentCpu;
var nextCpu;
2023-04-19 20:20:08 +02:00
var localStats;
2023-04-12 13:46:14 +02:00
2023-04-12 12:51:10 +02:00
export async function main() {
2023-04-19 20:48:51 +02:00
localStats = new Stats("highScore_cpu");
2023-04-19 20:20:08 +02:00
await (fetch('./js/data.json')
2023-04-11 12:15:56 +02:00
.then((response) => response.json())
2023-04-12 14:26:35 +02:00
.then((json) => cpuList = json));
2023-04-11 12:15:56 +02:00
2023-04-12 13:29:07 +02:00
currentCpu = getRandomCpu();
nextCpu = getRandomCpu();
2023-04-19 20:20:08 +02:00
2023-04-12 01:25:57 +02:00
updateLayout();
2023-04-11 12:15:56 +02:00
}
function getRandomCpu() {
2023-04-11 13:00:03 +02:00
let randomIndex = getRandomInt(0, cpuList.length)
return {
name: cpuList[randomIndex]["name"].split('@')[0],
score: cpuList[randomIndex]["cpuScore"]
}
2023-04-11 12:15:56 +02:00
}
2023-04-12 12:32:09 +02:00
export function btnLowerClick() {
2023-04-12 13:03:27 +02:00
nextCpu.score < currentCpu.score ? showResult(true) : showResult(false);
2023-04-12 01:25:57 +02:00
}
2023-04-12 12:32:09 +02:00
export function btnHigherClick() {
2023-04-12 13:03:27 +02:00
nextCpu.score > currentCpu.score ? showResult(true) : showResult(false);
2023-04-12 01:25:57 +02:00
}
function showResult(isCorrect) {
2023-04-12 13:29:07 +02:00
document.getElementById("btnHigher").setAttribute("disabled", "");
document.getElementById("btnLower").setAttribute("disabled", "");
2023-04-12 09:00:36 +02:00
document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
2023-04-19 20:20:08 +02:00
2023-04-19 20:48:51 +02:00
isCorrect ? localStats.incrementScore() : localStats.resetScore();
2023-04-19 20:20:08 +02:00
document.getElementById("highScore").innerText = localStats.highScore;
document.getElementById("score").innerText = localStats.score;
2023-04-12 09:00:36 +02:00
countUp();
2023-04-12 01:25:57 +02:00
}
2023-04-12 13:46:14 +02:00
// updates view based on the cpu objects
2023-04-12 01:25:57 +02:00
function updateLayout() {
2023-04-19 20:20:08 +02:00
document.getElementById("highScore").innerText = localStats.highScore;;
2023-04-12 20:12:22 +02:00
2023-04-12 01:25:57 +02:00
document.getElementById("currentCpuTitle").innerText = currentCpu.name;
// add "." to large numbers
2023-04-12 12:41:25 +02:00
document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(currentCpu.score)
2023-04-12 01:25:57 +02:00
document.getElementById("nextCpuTitle").innerText = nextCpu.name;
2023-04-12 13:29:07 +02:00
document.getElementById("nextCpuScore").innerText = "?";
document.getElementById("col2").style.backgroundColor = "";
2023-04-12 01:25:57 +02:00
}
2023-04-13 12:40:01 +02:00
function delay(time) {
2023-04-12 13:29:07 +02:00
return new Promise(resolve => setTimeout(resolve, time));
}
2023-04-12 09:00:36 +02:00
2023-04-12 13:29:07 +02:00
async function countUp() {
2023-04-12 09:00:36 +02:00
const options = {
2023-04-12 13:29:07 +02:00
startVal: nextCpu.score / 2,
2023-04-12 09:00:36 +02:00
separator: '.',
decimal: ',',
2023-04-12 13:29:07 +02:00
duration: 2
2023-04-12 09:00:36 +02:00
};
let counter = new CountUp('nextCpuScore', nextCpu.score, options);
if (!counter.error) {
2023-04-12 13:29:07 +02:00
counter.start();
2023-04-12 09:00:36 +02:00
} else {
2023-04-19 21:40:06 +02:00
console.log(counter.error);
2023-04-12 09:00:36 +02:00
}
2023-04-12 13:29:07 +02:00
2023-04-12 13:46:14 +02:00
await delay(2500)
2023-04-12 13:29:07 +02:00
nextRound();
document.getElementById("btnHigher").removeAttribute("disabled");
document.getElementById("btnLower").removeAttribute("disabled");
}
function nextRound() {
currentCpu = nextCpu;
nextCpu = getRandomCpu();
updateLayout();
2023-04-12 09:00:36 +02:00
}
2023-04-11 13:00:03 +02:00
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
2023-04-12 12:51:10 +02:00
}