add gst gamemode | not tested

This commit is contained in:
Florian Schmid 2023-04-12 22:19:37 +02:00
parent ec86800151
commit c08a14b072
3 changed files with 64 additions and 9 deletions

View File

@ -76,7 +76,7 @@ function updateLayout() {
document.getElementById("col2").style.backgroundColor = ""; document.getElementById("col2").style.backgroundColor = "";
} }
function delay(time) { export function delay(time) {
return new Promise(resolve => setTimeout(resolve, time)); return new Promise(resolve => setTimeout(resolve, time));
} }

View File

@ -49,22 +49,22 @@
</div> </div>
</div> </div>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-6 offset-3 border text-center p-2"> <div class="col-6 offset-3 border text-center p-2" id="mainCol">
<span class="h2" id="cpuName"></span> <span class="h2" id="cpuName"></span>
<button class="btn btn-lg bg-info m-1">Desktop</button>
<br> <br>
<button class="btn btn-lg bg-info m-1">Laptop</button> <button class="btn btn-lg bg-info m-1 mt-2" id="btnDesktop" onclick="btnClick(0)">Desktop</button>
<br> <br>
<button class="btn btn-lg bg-info m-1">Mobile/Embedded</button> <button class="btn btn-lg bg-info m-1" id="btnLaptop" onclick="btnClick(1)">Laptop</button>
<br>
<button class="btn btn-lg bg-info m-1" id="btnMobile" onclick="btnClick(2)">Mobile/Embedded</button>
<br> <br>
</div> </div>
</div> </div>
</div> </div>
<script type="module"> <script type="module">
import {main, btnClick} from "./game.js" import {main, btnClick} from "./gst.js"
window.btnHigherClick = btnHigherClick window.btnClick = btnClick
window.btnLowerClick = btnLowerClick
main() main()
</script> </script>
</body> </body>

57
gst.js
View File

@ -4,7 +4,7 @@ var currentCpu;
var score; var score;
var highScore; var highScore;
async function main() { export async function main() {
// init cpu list // init cpu list
await (fetch('./data.json') await (fetch('./data.json')
.then((response) => response.json()) .then((response) => response.json())
@ -17,6 +17,8 @@ function nextRound() {
currentCpu = getRandomCpu(); currentCpu = getRandomCpu();
document.getElementById("cpuName").innerText = currentCpu.name; document.getElementById("cpuName").innerText = currentCpu.name;
document.getElementById("mainCol").style.backgroundColor = "";
} }
function getRandomCpu() { function getRandomCpu() {
@ -32,6 +34,59 @@ function getRandomCpu() {
} }
} }
import { delay } from "./game";
export async function btnClick(typ) {
// 0 -> Desktop
// 1 -> Laptop
// 2 -> Mobile/Embedded
// remove bootstrap class
let btnDesktop = document.getElementById("btnDesktop");
let btnLaptop = document.getElementById("btnLaptop");
let btnMobile = document.getElementById("btnMobile");
let btns = [btnDesktop, btnLaptop, btnLaptop];
btns.forEach( (el) => {
el.className = el.className.replace("bg-info", "");
})
switch (typ) {
case 0:
btnDesktop.style.backgroundColor = "#FF4444";
break;
case 1:
btnLaptop.style.backgroundColor = "#FF4444";
break;
case 2:
btnMobile.style.backgroundColor = "#FF4444";
break;
}
// make correct button green and wrong button red!!!! bg-success | bg-danger
switch (currentCpu.type) {
case "Desktop":
btnDesktop.style.backgroundColor = "lightgreen";
break;
case "Laptop":
btnLaptop.style.backgroundColor = "lightgreen";
break;
case "Mobile/Embedded":
btnMobile.style.backgroundColor = "lightgreen";
break;
}
await delay(2000);
btns.forEach( (el) => {
el.className = el.className + " bg-info";
el.style.backgroundColor = "";
})
nextRound();
}
function getRandomInt(min, max) { function getRandomInt(min, max) {
min = Math.ceil(min); min = Math.ceil(min);
max = Math.floor(max); max = Math.floor(max);