From a643fe3b7582c024ea275ecfc80c8972d95d7122 Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Sun, 11 Apr 2021 17:30:43 +0100 Subject: [PATCH] use spaces instead of tabs, use double quotes instead of single --- src/game.js | 234 ++++++++++++++++++++++++++-------------------------- 1 file changed, 117 insertions(+), 117 deletions(-) diff --git a/src/game.js b/src/game.js index 265b57e..69177c0 100644 --- a/src/game.js +++ b/src/game.js @@ -2,23 +2,23 @@ const ALL_REGIONS = "All Regions"; -const answersHTML = document.getElementById('answers'); -const answerAHTML = document.getElementById('answer_a'); -const answerBHTML = document.getElementById('answer_b'); -const answerCHTML = document.getElementById('answer_c'); -const answerDHTML = document.getElementById('answer_d'); -const bodyHTML = document.getElementsByTagName('body')[0] -const scoreHTML = document.getElementById('score'); -const settingsHTML = document.getElementById('settings'); -const selectorHTML = document.getElementById('region_selector'); -const selectorResultsHTML = document.getElementById('selector_results'); -const questionHTML = document.getElementById('question'); +const answersHTML = document.getElementById("answers"); +const answerAHTML = document.getElementById("answer_a"); +const answerBHTML = document.getElementById("answer_b"); +const answerCHTML = document.getElementById("answer_c"); +const answerDHTML = document.getElementById("answer_d"); +const bodyHTML = document.getElementsByTagName("body")[0] +const scoreHTML = document.getElementById("score"); +const settingsHTML = document.getElementById("settings"); +const selectorHTML = document.getElementById("region_selector"); +const selectorResultsHTML = document.getElementById("selector_results"); +const questionHTML = document.getElementById("question"); const capitals_list = Object.values(countries).map(country => country.capital); const regionList = [...new Set(Object.values(countries).map(country => country.region))] - .concat([...new Set(Object.values(countries).map(country => country.subregion))]) - .concat([ALL_REGIONS]) - .sort(); + .concat([...new Set(Object.values(countries).map(country => country.subregion))]) + .concat([ALL_REGIONS]) + .sort(); const date = new Date(); var questionList, selectorMatches, state; @@ -26,154 +26,154 @@ var questionList, selectorMatches, state; // set up game function init() { - // generate question list - var regex; - if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*"); - else regex = new RegExp(selectorHTML.value, 'gi'); + // generate question list + var regex; + if (selectorHTML.value == "" || selectorHTML.value == ALL_REGIONS) regex = new RegExp(".*"); + else regex = new RegExp(selectorHTML.value, "gi"); - questionList = Object.keys(countries) - .filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex)) - .sort(() => Math.random()-0.5); + questionList = Object.keys(countries) + .filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex)) + .sort(() => Math.random()-0.5); - // set up state variable - state.endTime = 0; - state.finishedGame = false; - state.startedGame = true; - state.maxScore = questionList.length; - state.score = 0; - state.startTime = date.getTime(); + // set up state variable + state.endTime = 0; + state.finishedGame = false; + state.startedGame = true; + state.maxScore = questionList.length; + state.score = 0; + state.startTime = date.getTime(); - // show and hide appropriate elements - answersHTML.style.display = ""; - settingsHTML.style.display = "none"; - questionHTML.onclick = deinit; + // show and hide appropriate elements + answersHTML.style.display = ""; + settingsHTML.style.display = "none"; + questionHTML.onclick = deinit; - // start game - updateState(); - updateScreen(); + // start game + updateState(); + updateScreen(); } // stop game, go back to start screen function deinit() { - answersHTML.style.display = "none"; - settingsHTML.style.display = ""; - questionHTML.innerHTML = "tap here or press enter to start"; - scoreHTML.innerHTML = "score"; - questionHTML.onclick = init; + answersHTML.style.display = "none"; + settingsHTML.style.display = ""; + questionHTML.innerHTML = "tap here or press enter to start"; + scoreHTML.innerHTML = "score"; + questionHTML.onclick = init; - questionList = null; - selectorMatches = [] - state = { - "score": 0, - "maxScore": 0, - "startTime": 0, - "endTime": 0, - "finishedGame": true, - "startedGame": false, - }; + questionList = null; + selectorMatches = [] + state = { + "score": 0, + "maxScore": 0, + "startTime": 0, + "endTime": 0, + "finishedGame": true, + "startedGame": false, + }; } function updateState() { - // check if game is over - if (questionList.length == 0) { state.finishedGame = true; return; } + // check if game is over + if (questionList.length == 0) { state.finishedGame = true; return; } - // set up new question - var newQuestion = questionList.pop(); - var options = [] - while (options.length < 4) { - var c = capitals_list[Math.floor(Math.random()*capitals_list.length)]; - if (c !== countries[newQuestion].capital && !options.includes(c)){ - options.push(c); - } - } - options[Math.floor(Math.random()*4)] = countries[newQuestion].capital; + // set up new question + var newQuestion = questionList.pop(); + var options = [] + while (options.length < 4) { + var c = capitals_list[Math.floor(Math.random()*capitals_list.length)]; + if (c !== countries[newQuestion].capital && !options.includes(c)){ + options.push(c); + } + } + options[Math.floor(Math.random()*4)] = countries[newQuestion].capital; - state.question = newQuestion; - state.options = options; - state.answer = countries[newQuestion].capital; + state.question = newQuestion; + state.options = options; + state.answer = countries[newQuestion].capital; } // update HTML elements to reflect values of state function updateScreen(){ - scoreHTML.innerHTML = state.score + "/" + state.maxScore; - if (state.finishedGame) { - questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart"; - answers.style.display = "none"; - return; - } - answerAHTML.getElementsByClassName('text')[0].innerHTML = state.options[0]; - answerBHTML.getElementsByClassName('text')[0].innerHTML = state.options[1]; - answerCHTML.getElementsByClassName('text')[0].innerHTML = state.options[2]; - answerDHTML.getElementsByClassName('text')[0].innerHTML = state.options[3]; - questionHTML.innerHTML = "what is the capital of " + state.question + "?"; + scoreHTML.innerHTML = state.score + "/" + state.maxScore; + if (state.finishedGame) { + questionHTML.innerHTML = "woooooooo!! tap here or press enter to restart"; + answers.style.display = "none"; + return; + } + answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0]; + answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1]; + answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2]; + answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3]; + questionHTML.innerHTML = "what is the capital of " + state.question + "?"; } function processClick(answer) { - if (state.finishedGame) return; - // check if answer to previous question was correct - var isAnswerCorrect = state.options[answer] == state.answer - state.score += isAnswerCorrect ? 1 : 0; + if (state.finishedGame) return; + // check if answer to previous question was correct + var isAnswerCorrect = state.options[answer] == state.answer + state.score += isAnswerCorrect ? 1 : 0; - // change background color based on if answer was correct - bodyHTML.classList.add(isAnswerCorrect ? 'correct' : 'incorrect') - setTimeout(() => bodyHTML.classList = [], 500) + // change background color based on if answer was correct + bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect") + setTimeout(() => bodyHTML.classList = [], 500) - updateState(); - updateScreen(); + updateState(); + updateScreen(); } function setSelectorMatches(value){ - const regex = new RegExp(selectorHTML.value, 'gi'); - selectorMatches = regionList - .filter(region => region.match(regex)) - displaySelectorMatches(); + const regex = new RegExp(selectorHTML.value, "gi"); + selectorMatches = regionList + .filter(region => region.match(regex)) + displaySelectorMatches(); } function displaySelectorMatches(){ - selectorResultsHTML.innerHTML = selectorMatches - .map(region => { - return `
${region}
` - }) - .sort() - .join(''); + selectorResultsHTML.innerHTML = selectorMatches + .map(region => { + return `
${region}
` + }) + .sort() + .join(""); } function setSelectorValue(value) { - selectorHTML.value = value; + selectorHTML.value = value; } -answerAHTML.addEventListener('click', () => processClick(0)); -answerBHTML.addEventListener('click', () => processClick(1)); -answerCHTML.addEventListener('click', () => processClick(2)); -answerDHTML.addEventListener('click', () => processClick(3)); -document.addEventListener('keyup', e => { - if (e.code == "Digit1") processClick(0); - if (e.code == "Digit2") processClick(1); - if (e.code == "Digit3") processClick(2); - if (e.code == "Digit4") processClick(3); - if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) { - deinit(); - return; - } - if (e.code == "Enter" && !state.startedGame) init(); +answerAHTML.addEventListener("click", () => processClick(0)); +answerBHTML.addEventListener("click", () => processClick(1)); +answerCHTML.addEventListener("click", () => processClick(2)); +answerDHTML.addEventListener("click", () => processClick(3)); +document.addEventListener("keyup", e => { + if (e.code == "Digit1") processClick(0); + if (e.code == "Digit2") processClick(1); + if (e.code == "Digit3") processClick(2); + if (e.code == "Digit4") processClick(3); + if (e.code == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) { + deinit(); + return; + } + if (e.code == "Enter" && !state.startedGame) init(); }); -selectorHTML.addEventListener('change', setSelectorMatches); -selectorHTML.addEventListener('keyup', e => { - var topResult = document.getElementsByClassName('selector_result')[0] - if (e.code == "Enter" && selectorHTML.value === "") { init(); return; } - if (e.code == "Enter" && selectorHTML.value === topResult.innerHTML.trim()) { init(); return; } - if (e.code == "Enter") selectorHTML.value = topResult.innerHTML.trim(); +selectorHTML.addEventListener("change", setSelectorMatches); +selectorHTML.addEventListener("keyup", e => { + var topResult = document.getElementsByClassName("selector_result")[0] + if (e.code == "Enter" && selectorHTML.value === "") { init(); return; } + if (e.code == "Enter" && selectorHTML.value === topResult.innerHTML.trim()) { init(); return; } + if (e.code == "Enter") selectorHTML.value = topResult.innerHTML.trim(); - setSelectorMatches(); + setSelectorMatches(); });