From 2e4a9d7c4a9dcbad63f5a1860ba67a5b198f19f8 Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Sun, 11 Apr 2021 15:04:52 +0100 Subject: [PATCH] lots of stuff --- .gitignore | 2 +- Makefile | 8 +- scripts/generate_countries_list.py | 11 ++- src/favicon.ico | Bin 0 -> 15086 bytes src/game.js | 122 ++++++++++++++++++++++++----- src/game_styles.css | 44 +++++++++++ src/index.html | 8 +- src/styles.css | 1 + 8 files changed, 165 insertions(+), 31 deletions(-) create mode 100644 src/favicon.ico diff --git a/.gitignore b/.gitignore index 277dc9b..c16f33d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ -src/countries.json +src/countries.js *.swp diff --git a/Makefile b/Makefile index 0b32738..67bdd19 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,7 @@ -all: src/countries.json +all: src/countries.js -src/countries.json: - python scripts/generate_countries_list.py countries/countries.json > src/countries.json +src/countries.js: + python scripts/generate_countries_list.py countries/countries.json > src/countries.js clean: - rm -rf src/countries.json + rm -rf src/countries.js diff --git a/scripts/generate_countries_list.py b/scripts/generate_countries_list.py index d2eb28c..814c133 100755 --- a/scripts/generate_countries_list.py +++ b/scripts/generate_countries_list.py @@ -21,11 +21,16 @@ def main(args): r = {} for country in countries: - if len(country['capital']) < 1 or country['capital'][0] is None: + if len(country['capital']) < 1 or country['capital'][0] == "" or not country['independent']: continue - r[country['name']['common']] = country['capital'][0] + r[country['name']['common']] = { + 'capital': country['capital'][0], + 'regions': [country['region'], + 'subregion': country['subregion'], + 'languages': country['languages'] + } - print('capitals = ', end='') + print('countries = ', end='') print(json.dumps(r)) return 0 diff --git a/src/favicon.ico b/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..c12b7c61469684aa558943777e3cb5079168edc2 GIT binary patch literal 15086 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 literal 0 HcmV?d00001 diff --git a/src/game.js b/src/game.js index e68a272..ebe7c5f 100644 --- a/src/game.js +++ b/src/game.js @@ -1,57 +1,90 @@ "use strict"; var question_list = null; -const capitals_list = Object.values(capitals); +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))]); const date = new Date(); -var state = {"score": 0, "start_time": 0, "end_time": 0, "finishedGame": true}; +var selectorMatches = [] -var answersHTML = document.getElementById('answers'); -var answerAHTML = document.getElementById('answer_a'); -var answerBHTML = document.getElementById('answer_b'); -var answerCHTML = document.getElementById('answer_c'); -var answerDHTML = document.getElementById('answer_d'); -var scoreHTML = document.getElementById('score'); -var 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'); + +var state = { + "score": 0, + "max_score": 0, + "start_time": 0, + "end_time": 0, + "finishedGame": true, +}; function init() { // reset states list, score, end_time; start timer for game; - question_list = Object.keys(capitals).sort(() => Math.random()-0.5); + var regex; + if (selectorHTML.value === "") { + regex = new RegExp(".*"); + } else { + regex = new RegExp(selectorHTML.value, 'gi'); + } + question_list = Object.keys(countries) + .filter(c => countries[c].region.match(regex) || countries[c].subregion.match(regex)) + .sort(() => Math.random()-0.5); + state.maxScore = question_list.length; answersHTML.style.display = ""; + settingsHTML.style.display = "none"; state.finishedGame = false; state.score = 0; state.end_time = 0; state.start_time = date.getTime(); + questionHTML.onclick = deinit; updateState(); updateScreen(); } +function deinit() { + answersHTML.style.display = "none"; + settingsHTML.style.display = ""; + questionHTML.innerHTML = "tap here or press enter to start"; + questionHTML.onclick = init; + scoreHTML.innerHTML = "score"; +} + function updateState() { // check if game is over - if (question_list.length == 0) { - state.finishedGame = true; - return; - } + if (question_list.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 options = [] while (options.length < 4) { var c = capitals_list[Math.floor(Math.random()*capitals_list.length)]; - if (c !== capitals[newQuestion] && !options.includes(c)){ + if (c !== countries[newQuestion].capital && !options.includes(c)){ options.push(c); } } console.log(options) - options[Math.floor(Math.random()*4)] = capitals[newQuestion]; + options[Math.floor(Math.random()*4)] = countries[newQuestion].capital; console.log(options) state.question = newQuestion; state.options = options; - state.answer = capitals[newQuestion]; + state.answer = countries[newQuestion].capital; } function updateScreen(){ - scoreHTML.innerHTML = state.score; + scoreHTML.innerHTML = state.score + "/" + state.maxScore; if (state.finishedGame) { questionHTML.innerHTML = "you finishedeededede!!! tap here or press space to restart"; answers.style.display = "none"; @@ -65,23 +98,70 @@ function updateScreen(){ } 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') + setTimeout(() => bodyHTML.classList = [], 200) console.log("got click: " + answer); updateState(); updateScreen(); } + +function setSelectorMatches(value){ + const regex = new RegExp(selectorHTML.value, 'gi'); + selectorMatches = regionList + .filter(region => region.match(regex)) + displaySelectorMatches(); +} + +function displaySelectorMatches(){ + selectorResultsHTML.innerHTML = selectorMatches + .map(region => { + return `
${region}
` + }) + .join(''); +} + +function setSelectorValue(value) { + selectorHTML.value = value; +} + answerAHTML.addEventListener('click', () => processClick(0)); answerBHTML.addEventListener('click', () => processClick(1)); answerCHTML.addEventListener('click', () => processClick(2)); answerDHTML.addEventListener('click', () => processClick(3)); -questionHTML.addEventListener('click', () => init()); -document.addEventListener('keydown', e => { +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 == "Space") init(); + if (e.code == "Enter" && document.activeElement !== selectorHTML) 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(); + + setSelectorMatches(); +}); + +deinit(); +selectorHTML.focus(); +setSelectorMatches(); diff --git a/src/game_styles.css b/src/game_styles.css index 8e68664..b1ae889 100644 --- a/src/game_styles.css +++ b/src/game_styles.css @@ -6,6 +6,26 @@ --question-country-color: var(--teal); } +.correct { + animation: correct .2s; +} + +.incorrect { + animation: incorrect .2s; +} + +@keyframes correct { + 0% { background: var(--default-bg); } + 50% { background: var(--green); } + 100% { background: var(--default-bg); } +} + +@keyframes incorrect { + 0% { background: var(--default-bg); } + 50% { background: var(--red); } + 100% { background: var(--default-bg); } +} + #game #toprow { display: flex; justify-content: space-between; @@ -70,3 +90,27 @@ span#questionCountry { background-color: var(--question-country-color); } + +#settings #region_selector { + width: 100%; + max-width: 100%; + background: var(--dark-bg); + font-size: 1.5em; + padding: 1em; + border: none; + border-radius: 0.25em; + box-sizing: border-box; +} + +#settings { + width: 100% +} + +#settings #selector_results { + display: flex; + flex-wrap: wrap; +} + +#settings .selector_result { + padding: 1em; +} diff --git a/src/index.html b/src/index.html index 96e0824..c04434a 100644 --- a/src/index.html +++ b/src/index.html @@ -12,9 +12,13 @@
-

tap here or press space to start

+

you need javascript enabled to play this

score

+
- + diff --git a/src/styles.css b/src/styles.css index b6f175e..1e59a0e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,5 +1,6 @@ :root { --default-bg: #fefefe; + --dark-bg: #b8b8b8; --selected-bg:#383838; --default-fg: #454545; --red: #ab4642;