From 1654b98ce4ef7681812cec48a19461410f502d8f Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Sun, 11 Apr 2021 17:25:33 +0100 Subject: [PATCH] minor changes to code --- src/game.js | 97 +++++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/src/game.js b/src/game.js index 2dbddb7..265b57e 100644 --- a/src/game.js +++ b/src/game.js @@ -1,5 +1,7 @@ "use strict"; +const ALL_REGIONS = "All Regions"; + const answersHTML = document.getElementById('answers'); const answerAHTML = document.getElementById('answer_a'); const answerBHTML = document.getElementById('answer_b'); @@ -12,43 +14,34 @@ const selectorHTML = document.getElementById('region_selector'); const selectorResultsHTML = document.getElementById('selector_results'); const questionHTML = document.getElementById('question'); -const ALL_REGIONS = "All Regions"; - 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([...new Set(Object.values(countries).map(country => country.subregion))]) + .concat([ALL_REGIONS]) + .sort(); const date = new Date(); -var question_list = null; -var selectorMatches = [] -var state = { - "score": 0, - "max_score": 0, - "start_time": 0, - "end_time": 0, - "finishedGame": true, -}; +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'); - } - question_list = Object.keys(countries) + 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); // set up state variable - state.end_time = 0; + state.endTime = 0; state.finishedGame = false; - state.maxScore = question_list.length; + state.startedGame = true; + state.maxScore = questionList.length; state.score = 0; - state.start_time = date.getTime(); + state.startTime = date.getTime(); // show and hide appropriate elements answersHTML.style.display = ""; @@ -60,24 +53,34 @@ function init() { 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"; - questionHTML.onclick = init; scoreHTML.innerHTML = "score"; + questionHTML.onclick = init; + + questionList = null; + selectorMatches = [] + state = { + "score": 0, + "maxScore": 0, + "startTime": 0, + "endTime": 0, + "finishedGame": true, + "startedGame": false, + }; } + function updateState() { // check if game is over - if (question_list.length == 0) { state.finishedGame = true; return; } + if (questionList.length == 0) { state.finishedGame = true; return; } // set up new question - console.log(1); - var newQuestion = question_list.pop(); - console.log(newQuestion); - console.log(2); + var newQuestion = questionList.pop(); var options = [] while (options.length < 4) { var c = capitals_list[Math.floor(Math.random()*capitals_list.length)]; @@ -85,15 +88,14 @@ function updateState() { options.push(c); } } - console.log(options) options[Math.floor(Math.random()*4)] = countries[newQuestion].capital; - console.log(options) 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; @@ -109,17 +111,17 @@ function updateScreen(){ questionHTML.innerHTML = "what is the capital of " + state.question + "?"; } + function processClick(answer) { - console.log("got click: " + answer); if (state.finishedGame) return; - console.log(1); // check if answer to previous question was correct - state.score += 1 ? state.options[answer] == state.answer : 0; - console.log(state.options[answer] == state.answer ? 'correct' : 'incorrect') - bodyHTML.classList.add(state.options[answer] == state.answer ? 'correct' : 'incorrect') + 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) - console.log("got click: " + answer); updateState(); updateScreen(); } @@ -132,9 +134,9 @@ function setSelectorMatches(value){ displaySelectorMatches(); } + function displaySelectorMatches(){ selectorResultsHTML.innerHTML = selectorMatches - .concat(ALL_REGIONS) .map(region => { return `
${region}
` }) @@ -142,10 +144,12 @@ function displaySelectorMatches(){ .join(''); } + function setSelectorValue(value) { selectorHTML.value = value; } + answerAHTML.addEventListener('click', () => processClick(0)); answerBHTML.addEventListener('click', () => processClick(1)); answerCHTML.addEventListener('click', () => processClick(2)); @@ -155,27 +159,24 @@ document.addEventListener('keyup', e => { if (e.code == "Digit2") processClick(1); if (e.code == "Digit3") processClick(2); if (e.code == "Digit4") processClick(3); - if (e.code == "Enter" && document.activeElement !== selectorHTML) init(); + 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 => { - console.log(e.code); 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(); + 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(); }); + deinit(); selectorHTML.focus(); setSelectorMatches();