From 780f6d7272237334a51a207998861be591c4a7bb Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Wed, 19 Jan 2022 20:35:33 +0000 Subject: [PATCH] neaten up game.js --- Makefile | 2 +- game.js | 143 ++++++++++++++--------------- game_styles.css | 9 ++ scripts/generate_countries_list.py | 20 +--- 4 files changed, 83 insertions(+), 91 deletions(-) diff --git a/Makefile b/Makefile index 2d7f62f..b5d69bd 100644 --- a/Makefile +++ b/Makefile @@ -6,7 +6,7 @@ countries.js: countries/countries.json .PHONY python3 scripts/generate_countries_list.py countries/countries.json > countries.js flags: .SUBMODULES - mkdir flags + mkdir -p flags cp countries/data/*.svg flags clean: diff --git a/game.js b/game.js index 1bb93bf..52db917 100644 --- a/game.js +++ b/game.js @@ -36,10 +36,47 @@ const updateTime = () => { } const getMasterQuestionList = () => { - if(guessCountry()) return capitals return countries; } +const getQuestionByCountryName = (name) => { + c = getMasterQuestionList().filter(c => c.countryname === name) + if (c.length > 0) return c[0] + return null +} + +const getQuestionByCapital = (capital) => { + c = getMasterQuestionList().filter(c => c.capital === capital) + if (c.length > 0) return c[0] + return null +} + +const optionToAnswer = (option) => { + if (guessCapital()) return option.capital; + else if (guessCountry()) return option.countryname; + else if (guessReverseFlag()) return option.countryname; + else return option.code; +} + +const optionToAnswerFormatted = (option) => { + const r = optionToAnswer(option); + if (guessFlag()) return getImageURLFromCountryCode(r); + return r +} + +const optionToQuestion = (option) => { + if (guessCapital()) return option.countryname; + else if (guessCountry()) return option.capital; + else if (guessReverseFlag()) return option.code; + else return option.countryname; +} + +const optionToQuestionFormatted = (option) => { + const r = optionToQuestion(option); + if (guessReverseFlag()) return getImageURLFromCountryCode(r); + return r +} + const getQuestionHTML = (state) => { if(guessCountry()) return `what country is ${state.question.capital} the capital of?` @@ -51,15 +88,20 @@ const getQuestionHTML = (state) => { return `which country's flag is ${getImageURLFromCountryCode(state.question.code)}?` } -const answer_list = () => { - return Object.values(getMasterQuestionList()); +const answerList = () => { + return getMasterQuestionList().map(q => { + if (guessCountry()) return q.countryname; + if (guessCapital()) return q.capital; + if (guessFlag()) return q.code; + if (guessReverseFlag()) return q.countryname; + }) } + const getImageURLFromCountryCode = (code) => ``; - -const regionList = () => [...new Set(Object.values(getMasterQuestionList()).map(item => item.region))] - .concat([...new Set(Object.values(getMasterQuestionList()).map(item => item.subregion))]) +const regionList = () => [...new Set(getMasterQuestionList().map(item => item.region))] + .concat([...new Set(getMasterQuestionList().map(item => item.subregion))]) .concat([ALL_REGIONS]) .sort(); const date = new Date(); @@ -92,7 +134,7 @@ var resultsChart = new Chart( // set up game function init() { // generate question list - questionList = Object.values(getMasterQuestionList()) + questionList = getMasterQuestionList() .filter(q => q.region == selectedRegion || q.subregion == selectedRegion || selectedRegion == ALL_REGIONS) .sort(() => Math.random()-0.5); @@ -156,17 +198,17 @@ function updateState() { var options = [] while (options.length < 4) { - var c = answer_list()[Math.floor(Math.random()*answer_list().length)]; - var question = getMasterQuestionList()[newQuestion.countryname]; - if (question == undefined) question = getMasterQuestionList()[newQuestion.capital]; + var c = getMasterQuestionList()[Math.floor(Math.random()*answerList().length)]; + var question = getQuestionByCountryName(newQuestion.countryname); + if (question == undefined) question = getQuestionByCapital(newQuestion.capital); console.log(c); console.log(question); - if (c !== getMasterQuestionList()[newQuestion.countryname]&& !options.includes(c)){ + if (c !== getQuestionByCountryName(newQuestion.countryname)&& !options.includes(c)){ options.push(c); } } - var question = getMasterQuestionList()[newQuestion.countryname]; - if (question == undefined) question = getMasterQuestionList()[newQuestion.capital]; + var question = getQuestionByCountryName(newQuestion.countryname); + if (question == undefined) question = getQuestionByCapital(newQuestion.capital); options[Math.floor(Math.random()*4)] = question; if (state.question) state.previousQuestion = { @@ -189,25 +231,15 @@ function updateScreen(){ displayEndScreen(); return; } - if (!guessFlag() && !guessReverseFlag()) { - answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0].answer; - answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1].answer; - answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2].answer; - answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3].answer; - } else if (guessReverseFlag()) { - answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0].countryname; - answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1].countryname; - answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2].countryname; - answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3].countryname; - } else { - answerAHTML.getElementsByClassName("text")[0].innerHTML = getImageURLFromCountryCode(state.options[0].code); - answerBHTML.getElementsByClassName("text")[0].innerHTML = getImageURLFromCountryCode(state.options[1].code); - answerCHTML.getElementsByClassName("text")[0].innerHTML = getImageURLFromCountryCode(state.options[2].code); - answerDHTML.getElementsByClassName("text")[0].innerHTML = getImageURLFromCountryCode(state.options[3].code); - } + + answerAHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[0]); + answerBHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[1]); + answerCHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[2]); + answerDHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[3]); + questionHTML.innerHTML = getQuestionHTML(state) if (state.previousQuestion ) { - previousQuestionAnswer.innerHTML = state.previousQuestion.question.answer; + previousQuestionAnswer.innerHTML = optionToAnswerFormatted(state.previousQuestion.question); previousQuestionText.style.display = ""; } } @@ -225,19 +257,18 @@ function displayEndScreen() { correctAnswersTable.innerHTML = " flag country "; } - if (guessReverseFlag()) { state.incorrectAnswers.forEach(ans => { var tr = document.createElement('tr'); console.log(ans) tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = ans.question.countryname + tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question) tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.answer.code); + tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.options[ans.userAnswer].code); + tr.lastChild.innerHTML = optionToAnswerFormatted(ans.options[ans.userAnswer]); incorrectAnswersTable.appendChild(tr); }) @@ -247,43 +278,11 @@ function displayEndScreen() { state.correctAnswers.forEach(ans => { var tr = document.createElement('tr'); tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.question.code); + tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question); tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = ans.answer.countryname; + tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer); correctAnswersTable.appendChild(tr); }) - } else { - state.incorrectAnswers.forEach(ans => { - var tr = document.createElement('tr'); - console.log(ans) - - tr.appendChild(document.createElement('td')) - if (guessCountry()) tr.lastChild.innerHTML = ans.question.capital - else tr.lastChild.innerHTML = ans.question.countryname - - tr.appendChild(document.createElement('td')) - if (guessFlag()) tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.answer.code); - else tr.lastChild.innerHTML = ans.answer.answer; - - tr.appendChild(document.createElement('td')) - if (guessFlag()) tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.options[ans.userAnswer].code); - else tr.lastChild.innerHTML = ans.options[ans.userAnswer].answer; - - incorrectAnswersTable.appendChild(tr); - }) - if (state.incorrectAnswers.length <= 0) - incorrectAnswersTable.innerHTML = "no incorrect answers! go you!"; - - state.correctAnswers.forEach(ans => { - var tr = document.createElement('tr'); - tr.appendChild(document.createElement('td')) - tr.lastChild.innerHTML = ans.question.countryname - tr.appendChild(document.createElement('td')) - if (guessFlag()) tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.answer.code); - else tr.lastChild.innerHTML = ans.answer.capital; - correctAnswersTable.appendChild(tr); - }) - } if (state.correctAnswers.length <= 0) correctAnswersTable.innerHTML = "no correct answers. better luck next time :')"; @@ -345,8 +344,6 @@ document.addEventListener("keyup", e => { deinit(); regionListHTML.innerHTML = regionList() - .map(region => { - return `
${region}
` - }) - .sort() - .join(""); + .map(region => `
${region}
`) + .sort() + .join(""); diff --git a/game_styles.css b/game_styles.css index 66cf5f6..391e496 100644 --- a/game_styles.css +++ b/game_styles.css @@ -224,3 +224,12 @@ input[type="radio"]+label { input[type="radio"]:checked+label { background-color: var(--yellow); } + +#previousQuestionAnswer { + display: inline; +} + +#previousQuestionAnswer img { + display: inline; + max-height: 2em; +} diff --git a/scripts/generate_countries_list.py b/scripts/generate_countries_list.py index 83840d4..1539907 100755 --- a/scripts/generate_countries_list.py +++ b/scripts/generate_countries_list.py @@ -18,36 +18,22 @@ def main(args): with open(args.file) as fp: countries = json.load(fp) - country_list = {} - capital_list = {} + country_list = [] for country in countries: if len(country['capital']) < 1 or country['capital'][0] == "" or not country['independent']: continue - country_list[country['name']['common']] = { - 'answer': country['capital'][0], - 'capital': country['capital'], - 'countryname': country['name']['common'], - 'region': country['region'], - 'subregion': country['subregion'], - 'languages': country['languages'], - 'code': country['cca3'].lower() - } - - capital_list[country['capital'][0]] = { - 'answer': country['name']['common'], + country_list.append({ 'capital': country['capital'][0], 'countryname': country['name']['common'], 'region': country['region'], 'subregion': country['subregion'], 'languages': country['languages'], 'code': country['cca3'].lower() - } + }) print('countries = ', end='') print(json.dumps(country_list), end=';') - print('capitals = ', end='') - print(json.dumps(capital_list)) return 0