280 lines
8.6 KiB
JavaScript
280 lines
8.6 KiB
JavaScript
//Countdown-timer
|
|
const minEl= document.getElementById("min");
|
|
const secondsEl = document.getElementById("seconds");
|
|
|
|
var defaultTime = 180;
|
|
var time = defaultTime;
|
|
var intervID;
|
|
var score = 0;
|
|
var allowClick = true;
|
|
|
|
if (screen.width < 576 || screen.height < 599) {
|
|
document.getElementById("error-page").style.display = "block";
|
|
document.getElementById("game-page").style.display = "none";
|
|
}
|
|
//list question with options
|
|
const question = document.getElementById("question");
|
|
const options = document.getElementById("choices");
|
|
const scoreText = document.getElementById("score");
|
|
const hintContainer = document.getElementById("hint-container");
|
|
|
|
function updateCountdown() {
|
|
let min = Math.floor(time/60);
|
|
let seconds = time % 60;
|
|
min = min < 10 ? "0" + min : min;
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
minEl.innerHTML = `${min}`
|
|
secondsEl.innerHTML = `${seconds}`
|
|
|
|
time -= 1;
|
|
if (time < 0) {
|
|
clearInterval(intervID);
|
|
removeQuestion();
|
|
document.getElementById("game-container").style.display = "none";
|
|
document.getElementById("modal-save-score").style.display = "block";
|
|
document.getElementById("last-score").innerHTML =
|
|
" <h2 class='fw-lighter'> Dein Ergebnis: <h1><strong> " +
|
|
score * 10 +
|
|
" </strong></h1></h2> ";
|
|
completed.play();
|
|
}
|
|
|
|
if(time<10){
|
|
secondsEl.style.display = "none"
|
|
minEl.style.display = "none"
|
|
setTimeout(function() {
|
|
secondsEl.style.display = "block"
|
|
minEl.style.display = "block"
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
async function getJson() {
|
|
const game = await fetch("/public/game.json");
|
|
const gameJson = await game.json();
|
|
return gameJson;
|
|
}
|
|
|
|
function removeQuestion() {
|
|
const elements = document.querySelectorAll(".choice-content");
|
|
question.removeAttribute("src");
|
|
elements.forEach((e) => {
|
|
e.remove();
|
|
});
|
|
}
|
|
|
|
function removeHint() {
|
|
const hintElements = document.querySelectorAll(".hint");
|
|
hintElements.forEach((e) => {
|
|
e.remove();
|
|
});
|
|
}
|
|
|
|
function getNewQuestion() {
|
|
//radom question
|
|
const qIndex = Math.floor(Math.random() * allData.length);
|
|
question.querySelector("img").setAttribute("src", allData[qIndex].question);
|
|
|
|
//random options of question with no order
|
|
//never change input Data => copy an Input Data for usage
|
|
const allOptions = Object.assign([], allData[qIndex].choices);
|
|
var optionsLength = allOptions.length;
|
|
const allHints = [];
|
|
while (optionsLength--) {
|
|
const optionRandom = Math.floor(Math.random() * (optionsLength + 1));
|
|
const choiceSrc = `src='` + allOptions[optionRandom].img + `'`;
|
|
//add hintAttribute for later usage (2.method)
|
|
options.innerHTML +=
|
|
`<div class="col-md-6 col-lg-3 justify-content-center mb-lg-0 p-0 choice-content"> <img class='choice
|
|
cursor-pointer' alt='Choice Image' hint='` +
|
|
allOptions[optionRandom].hint +
|
|
`'` +
|
|
choiceSrc +
|
|
`></img> </div>`;
|
|
|
|
allHints.push(allOptions[optionRandom].hint);
|
|
const hintAttribute =
|
|
`src='` +
|
|
allOptions[optionRandom].hint +
|
|
`' id='` +
|
|
allHints.indexOf(allOptions[optionRandom].hint) +
|
|
`' class='hint'`;
|
|
hintContainer.innerHTML += `<img ` + hintAttribute + `></img>`;
|
|
const hints = document.querySelectorAll(".hint");
|
|
hints.forEach((e) => {
|
|
e.style.display = "none";
|
|
});
|
|
|
|
allOptions.splice(optionRandom, 1);
|
|
}
|
|
handleClick(qIndex, allHints);
|
|
}
|
|
|
|
function handleClick(qIndex, allHints) {
|
|
// const questionIndex = getNewQuestion();
|
|
const choices = document.querySelectorAll(".choice-content");
|
|
|
|
choices.forEach((choice) => {
|
|
choice.addEventListener("click", async (e) => {
|
|
if(!allowClick) return;
|
|
allowClick = false;
|
|
//other method for hint with getAttribute
|
|
// console.log(choice.getAttribute("hint"))
|
|
|
|
//1.method
|
|
// console.log( choice.getAttribute("src"))
|
|
//find src of choice in json choices
|
|
const src = choice.children[0].getAttribute("src");
|
|
// console.log(choice.children[0]);
|
|
const result = allData[qIndex].choices.find((e) => e.img === src);
|
|
|
|
//hint appear
|
|
document.getElementById(allHints.indexOf(result.hint)).style.display = "block";
|
|
|
|
// if ( == answer)
|
|
// if (questionChoice == answer)
|
|
if (src.localeCompare(allData[qIndex].answer) == 0) {
|
|
score++;
|
|
scoreText.innerText = score * 10;
|
|
choice.children[0].src = "/public/images/Check.png";
|
|
correct.play().then(() => {
|
|
setTimeout(() => {
|
|
allowClick = true
|
|
removeQuestion();
|
|
removeHint();
|
|
getNewQuestion();
|
|
}, 1000);
|
|
});
|
|
} else {
|
|
choice.children[0].src = "/public/images/X.png";
|
|
//wait for hint's appearance
|
|
fail.play().then(() => {
|
|
setTimeout(() => {
|
|
allowClick = true;
|
|
removeQuestion();
|
|
removeHint();
|
|
getNewQuestion();
|
|
}, 2500);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
async function startGame() {
|
|
scoreText.innerText = score;
|
|
allData = await getJson();
|
|
getNewQuestion();
|
|
}
|
|
|
|
function playGame() {
|
|
removeQuestion();
|
|
intervID = setInterval(updateCountdown, 1000);
|
|
document.getElementById("game-container").style.display = "block";
|
|
document.getElementById("end-container").style.display = "none";
|
|
document.getElementById("introduction-page").style.display = "none";
|
|
time = defaultTime;
|
|
// intervID = setInterval(updateCountdown, 1000);
|
|
score = 0;
|
|
startGame();
|
|
}
|
|
|
|
function playAgain() {
|
|
removeQuestion();
|
|
document.getElementById("ranking-row").innerHTML= "";
|
|
document.getElementById("game-container").style.display = "block";
|
|
document.getElementById("end-container").style.display = "none";
|
|
document.getElementById("introduction-page").style.display = "none";
|
|
time = defaultTime;
|
|
intervID = setInterval(updateCountdown, 1000);
|
|
score = 0;
|
|
startGame();
|
|
}
|
|
|
|
|
|
var correct = new Audio("/public/audio/correct-notification.wav");
|
|
var fail = new Audio("/public/audio/failure-notification.wav");
|
|
var completed = new Audio("/public/audio/game-completed.wav");
|
|
|
|
// Backend
|
|
async function saveScore() {
|
|
const playerName = document.getElementById("player-name").value;
|
|
const validationName = document.getElementById("validation-player-name");
|
|
if (playerName == "") {
|
|
validationName.style.display = "block";
|
|
document.getElementById("player-name").classList.add("border-warning");
|
|
return false;
|
|
} else {
|
|
document.getElementById("player-name").classList.add("border-0");
|
|
validationName.style.display = "none";
|
|
document.getElementById("end-container").style.display = "block";
|
|
document.getElementById("modal-save-score").style.display = "none";
|
|
|
|
const data = {
|
|
name: playerName,
|
|
score: Number(document.getElementById("score").innerText),
|
|
};
|
|
// console.log(data);
|
|
const appwriteData = { data: JSON.stringify(data) };
|
|
const response = await fetch(
|
|
"https://baas.vibentec-it.io/v1/functions/6466b6d587ca2a959fb9/executions",
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"X-Appwrite-Project": "6466b683b00bf586977c",
|
|
"Content-Type": "application/json",
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: JSON.stringify(appwriteData),
|
|
}
|
|
);
|
|
const appwriteRes = await response.json();
|
|
console.log(appwriteRes.response);
|
|
const rankData = JSON.parse(appwriteRes.response);
|
|
console.log(rankData);
|
|
|
|
if (rankData.currentRank > 5) {
|
|
document.getElementById("end-score").innerHTML =
|
|
"<h1 class='fw-bold'> Du bist am " + rankData.currentRank + ". Platz </h1> <h5>Übung macht den Meister. Toi Toi Toi <i class='bi bi-emoji-smile-fill'></i></h5>";
|
|
} else {
|
|
document.getElementById("end-score").innerHTML = "<h1 class='fw-bold'> Du bist am " + rankData.currentRank + ". Platz <i class='bi bi-trophy-fill'></i> </h1> <h4> Prima !!! </h4>";
|
|
}
|
|
|
|
const rankingRow = document.getElementById("ranking-row");
|
|
|
|
const bgColor = [
|
|
"bg-pink1",
|
|
"bg-pink2",
|
|
"bg-pink3",
|
|
"bg-green1",
|
|
"bg-green2",
|
|
];
|
|
|
|
rankData.higherRank.forEach((i, index) => {
|
|
console.log(i);
|
|
console.log(index)
|
|
const j = bgColor[index];
|
|
// console.log(i.name, j)
|
|
rankingRow.innerHTML +=
|
|
" <tr class='" +
|
|
j +
|
|
"'> <th scope='row'>" +
|
|
(index + 1) +
|
|
"</th> <td>" +
|
|
i.name +
|
|
"</td><td>" +
|
|
i.score +
|
|
"</td></tr>";
|
|
});
|
|
}
|
|
}
|
|
|
|
function goToIntroductionPage() {
|
|
document.getElementById("ranking-row").innerHTML= "";
|
|
document.getElementById("introduction-page").style.display = "block";
|
|
document.getElementById("modal-save-score").style.display = "none";
|
|
document.getElementById("end-container").style.display = "none";
|
|
}
|