Full typescript and mvvm implementation #3
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1,3 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
|
./js/*
|
||||||
@ -1,49 +0,0 @@
|
|||||||
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
||||||
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
||||||
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
||||||
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
||||||
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
||||||
};
|
|
||||||
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
||||||
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
||||||
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
||||||
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
||||||
};
|
|
||||||
var _CpuRepository_instances, _CpuRepository_cpuList, _CpuRepository_currentCPU, _CpuRepository_nextCPU, _CpuRepository_getRandomInt;
|
|
||||||
export class CpuRepository {
|
|
||||||
constructor() {
|
|
||||||
_CpuRepository_instances.add(this);
|
|
||||||
_CpuRepository_cpuList.set(this, void 0);
|
|
||||||
_CpuRepository_currentCPU.set(this, void 0);
|
|
||||||
_CpuRepository_nextCPU.set(this, void 0);
|
|
||||||
}
|
|
||||||
async init() {
|
|
||||||
const fetchResult = await fetch("./js/data.json");
|
|
||||||
__classPrivateFieldSet(this, _CpuRepository_cpuList, await fetchResult.json(), "f");
|
|
||||||
__classPrivateFieldSet(this, _CpuRepository_currentCPU, this.getRandomCpu(), "f");
|
|
||||||
__classPrivateFieldSet(this, _CpuRepository_nextCPU, this.getRandomCpu(), "f");
|
|
||||||
}
|
|
||||||
get currentCpu() {
|
|
||||||
return __classPrivateFieldGet(this, _CpuRepository_currentCPU, "f");
|
|
||||||
}
|
|
||||||
get nextCpu() {
|
|
||||||
return __classPrivateFieldGet(this, _CpuRepository_nextCPU, "f");
|
|
||||||
}
|
|
||||||
getRandomCpu() {
|
|
||||||
let randomIndex;
|
|
||||||
do {
|
|
||||||
randomIndex = __classPrivateFieldGet(this, _CpuRepository_instances, "m", _CpuRepository_getRandomInt).call(this, 0, __classPrivateFieldGet(this, _CpuRepository_cpuList, "f").length);
|
|
||||||
} while (__classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["value"] == null || __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["type"] == null);
|
|
||||||
__classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["name"] = __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex]["name"].split('@')[0];
|
|
||||||
return __classPrivateFieldGet(this, _CpuRepository_cpuList, "f")[randomIndex];
|
|
||||||
}
|
|
||||||
nextRound() {
|
|
||||||
__classPrivateFieldSet(this, _CpuRepository_currentCPU, __classPrivateFieldGet(this, _CpuRepository_nextCPU, "f"), "f");
|
|
||||||
__classPrivateFieldSet(this, _CpuRepository_nextCPU, this.getRandomCpu(), "f");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
_CpuRepository_cpuList = new WeakMap(), _CpuRepository_currentCPU = new WeakMap(), _CpuRepository_nextCPU = new WeakMap(), _CpuRepository_instances = new WeakSet(), _CpuRepository_getRandomInt = function _CpuRepository_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
|
|
||||||
};
|
|
||||||
63
js/game.js
63
js/game.js
@ -1,63 +0,0 @@
|
|||||||
// @ts-ignore
|
|
||||||
import { CountUp } from "https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.6.0/countUp.min.js";
|
|
||||||
import { Stats } from "./statistics.js";
|
|
||||||
import { CpuRepository } from "./cpuRepository.js";
|
|
||||||
var repo;
|
|
||||||
var localStats;
|
|
||||||
export async function main() {
|
|
||||||
localStats = new Stats("highScore_cpu");
|
|
||||||
repo = new CpuRepository();
|
|
||||||
await repo.init();
|
|
||||||
updateLayout();
|
|
||||||
}
|
|
||||||
export function btnLowerClick() {
|
|
||||||
repo.nextCpu.cpuScore < repo.currentCpu.cpuScore ? showResult(true) : showResult(false);
|
|
||||||
}
|
|
||||||
export function btnHigherClick() {
|
|
||||||
repo.nextCpu.cpuScore > repo.currentCpu.cpuScore ? showResult(true) : showResult(false);
|
|
||||||
}
|
|
||||||
function showResult(isCorrect) {
|
|
||||||
document.getElementById("btnHigher").setAttribute("disabled", "");
|
|
||||||
document.getElementById("btnLower").setAttribute("disabled", "");
|
|
||||||
document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
|
|
||||||
isCorrect ? localStats.incrementScore() : localStats.resetScore();
|
|
||||||
document.getElementById("highScore").innerText = localStats.highScore.toString();
|
|
||||||
document.getElementById("score").innerText = localStats.score.toString();
|
|
||||||
countUp();
|
|
||||||
}
|
|
||||||
// updates view based on the cpu objects
|
|
||||||
function updateLayout() {
|
|
||||||
document.getElementById("highScore").innerText = localStats.highScore.toString();
|
|
||||||
document.getElementById("currentCpuTitle").innerText = repo.currentCpu.name;
|
|
||||||
// add "." to large numbers
|
|
||||||
document.getElementById("currentCpuScore").innerText = new Intl.NumberFormat().format(repo.currentCpu.cpuScore);
|
|
||||||
document.getElementById("nextCpuTitle").innerText = repo.nextCpu.name;
|
|
||||||
document.getElementById("nextCpuScore").innerText = "?";
|
|
||||||
document.getElementById("col2").style.backgroundColor = "";
|
|
||||||
}
|
|
||||||
function delay(time) {
|
|
||||||
return new Promise(resolve => setTimeout(resolve, time));
|
|
||||||
}
|
|
||||||
async function countUp() {
|
|
||||||
const options = {
|
|
||||||
startVal: repo.nextCpu.cpuScore / 2,
|
|
||||||
separator: '.',
|
|
||||||
decimal: ',',
|
|
||||||
duration: 2
|
|
||||||
};
|
|
||||||
let counter = new CountUp('nextCpuScore', repo.nextCpu.cpuScore, options);
|
|
||||||
if (!counter.error) {
|
|
||||||
counter.start();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
console.log(counter.error);
|
|
||||||
}
|
|
||||||
await delay(2500);
|
|
||||||
nextRound();
|
|
||||||
document.getElementById("btnHigher").removeAttribute("disabled");
|
|
||||||
document.getElementById("btnLower").removeAttribute("disabled");
|
|
||||||
}
|
|
||||||
function nextRound() {
|
|
||||||
repo.nextRound();
|
|
||||||
updateLayout();
|
|
||||||
}
|
|
||||||
102
js/gst.js
102
js/gst.js
@ -1,102 +0,0 @@
|
|||||||
var cpuList;
|
|
||||||
var currentCpu;
|
|
||||||
var score;
|
|
||||||
var highScore;
|
|
||||||
export async function main() {
|
|
||||||
var _a;
|
|
||||||
// init cpu list
|
|
||||||
await (fetch('./data.json')
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((json) => cpuList = json));
|
|
||||||
highScore = (_a = localStorage.getItem("highScore_socket")) !== null && _a !== void 0 ? _a : 0;
|
|
||||||
score = 0;
|
|
||||||
updateScores();
|
|
||||||
nextRound();
|
|
||||||
}
|
|
||||||
function nextRound() {
|
|
||||||
currentCpu = getRandomCpu();
|
|
||||||
document.getElementById("cpuName").innerText = currentCpu.name;
|
|
||||||
document.getElementById("mainCol").style.backgroundColor = "";
|
|
||||||
}
|
|
||||||
function getRandomCpu() {
|
|
||||||
let randomIndex;
|
|
||||||
do {
|
|
||||||
randomIndex = getRandomInt(0, cpuList.length);
|
|
||||||
} while (typeof (cpuList[randomIndex]["type"]) == null || cpuList[randomIndex]["type"] == "null" || cpuList[randomIndex]["type"] == null);
|
|
||||||
return {
|
|
||||||
name: cpuList[randomIndex]["name"].split('@')[0],
|
|
||||||
type: cpuList[randomIndex]["type"]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
function delay(time) {
|
|
||||||
return new Promise(resolve => setTimeout(resolve, time));
|
|
||||||
}
|
|
||||||
export async function btnClick(typ) {
|
|
||||||
// 0 -> Desktop
|
|
||||||
// 1 -> Laptop
|
|
||||||
// 2 -> Mobile/Embedded
|
|
||||||
// 3 -> Server
|
|
||||||
let btnDesktop = document.getElementById("btnDesktop");
|
|
||||||
let btnLaptop = document.getElementById("btnLaptop");
|
|
||||||
let btnMobile = document.getElementById("btnMobile");
|
|
||||||
let btnServer = document.getElementById("btnServer");
|
|
||||||
let btns = [btnDesktop, btnLaptop, btnMobile, btnServer];
|
|
||||||
btns.forEach((el) => {
|
|
||||||
el.setAttribute("disabled", "");
|
|
||||||
});
|
|
||||||
switch (typ) {
|
|
||||||
case 0:
|
|
||||||
btnDesktop.style.backgroundColor = "#FF4444";
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
btnLaptop.style.backgroundColor = "#FF4444";
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
btnMobile.style.backgroundColor = "#FF4444";
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
btnServer.style.backgroundColor = "#FF4444";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (currentCpu.type.includes("Desktop")) {
|
|
||||||
btnDesktop.style.backgroundColor = "lightgreen";
|
|
||||||
}
|
|
||||||
if (currentCpu.type.includes("Laptop")) {
|
|
||||||
btnLaptop.style.backgroundColor = "lightgreen";
|
|
||||||
}
|
|
||||||
if (currentCpu.type.includes("Mobile/Embedded")) {
|
|
||||||
btnMobile.style.backgroundColor = "lightgreen";
|
|
||||||
}
|
|
||||||
if (currentCpu.type.includes("Server")) {
|
|
||||||
btnServer.style.backgroundColor = "lightgreen";
|
|
||||||
}
|
|
||||||
// Score
|
|
||||||
if (btns[typ].style.backgroundColor == "lightgreen") {
|
|
||||||
score++;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
score = 0;
|
|
||||||
}
|
|
||||||
// Highscore
|
|
||||||
if (score > highScore) {
|
|
||||||
highScore = score;
|
|
||||||
localStorage.setItem("highScore_socket", highScore);
|
|
||||||
}
|
|
||||||
updateScores();
|
|
||||||
await delay(1000);
|
|
||||||
btns.forEach((el) => {
|
|
||||||
el.style.backgroundColor = "#3CC3FA";
|
|
||||||
el.removeAttribute("disabled");
|
|
||||||
});
|
|
||||||
nextRound();
|
|
||||||
}
|
|
||||||
function updateScores() {
|
|
||||||
document.getElementById("score").innerText = score;
|
|
||||||
document.getElementById("highScore").innerText = highScore;
|
|
||||||
}
|
|
||||||
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
|
|
||||||
}
|
|
||||||
main();
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
||||||
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
||||||
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
||||||
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
||||||
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
||||||
};
|
|
||||||
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
||||||
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
||||||
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
||||||
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
||||||
};
|
|
||||||
var _Stats_score, _Stats_highScore, _Stats_highScoreStorageKey;
|
|
||||||
export class Stats {
|
|
||||||
constructor(highScoreStorageKey) {
|
|
||||||
var _a;
|
|
||||||
_Stats_score.set(this, void 0);
|
|
||||||
_Stats_highScore.set(this, void 0);
|
|
||||||
_Stats_highScoreStorageKey.set(this, void 0);
|
|
||||||
// used as key for localStorage
|
|
||||||
__classPrivateFieldSet(this, _Stats_highScoreStorageKey, highScoreStorageKey, "f");
|
|
||||||
__classPrivateFieldSet(this, _Stats_score, 0, "f");
|
|
||||||
__classPrivateFieldSet(this, _Stats_highScore, (_a = Number(localStorage.getItem(__classPrivateFieldGet(this, _Stats_highScoreStorageKey, "f")))) !== null && _a !== void 0 ? _a : 0, "f");
|
|
||||||
}
|
|
||||||
incrementScore(value = 1) {
|
|
||||||
__classPrivateFieldSet(this, _Stats_score, __classPrivateFieldGet(this, _Stats_score, "f") + value, "f");
|
|
||||||
if (__classPrivateFieldGet(this, _Stats_highScore, "f") < __classPrivateFieldGet(this, _Stats_score, "f")) {
|
|
||||||
__classPrivateFieldSet(this, _Stats_highScore, __classPrivateFieldGet(this, _Stats_score, "f"), "f");
|
|
||||||
localStorage.setItem(__classPrivateFieldGet(this, _Stats_highScoreStorageKey, "f"), __classPrivateFieldGet(this, _Stats_highScore, "f").toString());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
resetScore() {
|
|
||||||
__classPrivateFieldSet(this, _Stats_score, 0, "f");
|
|
||||||
}
|
|
||||||
get highScore() {
|
|
||||||
return __classPrivateFieldGet(this, _Stats_highScore, "f");
|
|
||||||
}
|
|
||||||
get score() {
|
|
||||||
return __classPrivateFieldGet(this, _Stats_score, "f");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
_Stats_score = new WeakMap(), _Stats_highScore = new WeakMap(), _Stats_highScoreStorageKey = new WeakMap();
|
|
||||||
Loading…
Reference in New Issue
Block a user