From 95ca34aee468b90484f51102c8955857c7beb4f2 Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Thu, 13 Jan 2022 20:10:47 +0000 Subject: [PATCH] add option to match country to capital --- .gitignore | 2 +- Makefile | 11 ++-- game.js | 37 ++++++++++---- game_styles.css | 80 ++++++++++++++++++++++++++++++ index.html | 8 +++ scripts/generate_countries_list.py | 18 +++++-- styles.css | 1 - 7 files changed, 136 insertions(+), 21 deletions(-) diff --git a/.gitignore b/.gitignore index c16f33d..0c6656a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ -src/countries.js +countries.js *.swp diff --git a/Makefile b/Makefile index aded58f..3c45564 100644 --- a/Makefile +++ b/Makefile @@ -1,12 +1,15 @@ all: countries.js -countries: - git submodule init - git submodule update +countries/countries.json: .SUBMODULES -countries.js: countries +countries.js: countries/countries.json python3 scripts/generate_countries_list.py countries/countries.json > countries.js clean: rm -rf countries.js rm -rf countries + +.SUBMODULES: + git submodule init + git submodule update + diff --git a/game.js b/game.js index 428e7de..8c23e88 100644 --- a/game.js +++ b/game.js @@ -10,6 +10,7 @@ const answerDHTML = document.getElementById("answer_d"); const bodyHTML = document.getElementsByTagName("body")[0] const incorrectAnswersTable = document.getElementById('incorrectAnswersTable'); const correctAnswersTable = document.getElementById('correctAnswersTable'); +const guessCheckboxHTML = document.getElementById('guessCheckbox'); const previousQuestionAnswer = document.getElementById('previousQuestionAnswer'); const previousQuestionText = document.getElementById('previousQuestionText'); const resultsHTML = document.getElementById("results"); @@ -22,6 +23,7 @@ const timeHTML = document.getElementById("time"); var gameTimeStartTime = 0; var gameTimeIntervalId = 0; +const guessCountry = () => guessCheckboxHTML.checked; function updateTime() { const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000) @@ -29,9 +31,22 @@ function updateTime() { timeHTML.innerHTML = secondsPassed; } -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 getMasterQuestionList = () => { + if(guessCountry()) return capitals + return countries; +} + +const getQuestionHTML = (state) => { + if(guessCountry()) + return `what country is ${state.question} the capital of?` + return `what is the capital of ${state.question}?` +} + +const answer_list = Object.values(getMasterQuestionList()).map(item => item.answer); + + +const regionList = [...new Set(Object.values(getMasterQuestionList()).map(item => item.region))] + .concat([...new Set(Object.values(getMasterQuestionList()).map(item => item.subregion))]) .concat([ALL_REGIONS]) .sort(); const date = new Date(); @@ -68,8 +83,8 @@ function init() { 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)) + questionList = Object.keys(getMasterQuestionList()) + .filter(c => getMasterQuestionList()[c].region.match(regex) || getMasterQuestionList()[c].subregion.match(regex)) .sort(() => Math.random()-0.5); // set up state variable @@ -87,7 +102,7 @@ function init() { answersHTML.style.display = ""; settingsHTML.style.display = "none"; questionHTML.onclick = deinit; - incorrectAnswersTable.innerHTML = " country capital your answer "; + incorrectAnswersTable.innerHTML = " question capital your answer "; correctAnswersTable.innerHTML = " country capital "; // start game @@ -131,12 +146,12 @@ function updateState() { 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)){ + var c = answer_list[Math.floor(Math.random()*answer_list.length)]; + if (c !== getMasterQuestionList()[newQuestion].answer && !options.includes(c)){ options.push(c); } } - options[Math.floor(Math.random()*4)] = countries[newQuestion].capital; + options[Math.floor(Math.random()*4)] = getMasterQuestionList()[newQuestion].answer; if (state.question) state.previousQuestion = { "question": state.question, @@ -145,7 +160,7 @@ function updateState() { }; state.question = newQuestion; state.options = options; - state.answer = countries[newQuestion].capital; + state.answer = getMasterQuestionList()[newQuestion].answer; } @@ -160,7 +175,7 @@ function updateScreen(){ 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}?`; + questionHTML.innerHTML = getQuestionHTML(state) if (state.previousQuestion ) { previousQuestionAnswer.innerHTML = state.previousQuestion.answer; previousQuestionText.style.display = ""; diff --git a/game_styles.css b/game_styles.css index c1323d0..ecb39fb 100644 --- a/game_styles.css +++ b/game_styles.css @@ -4,6 +4,11 @@ --c-color: var(--green); --d-color: var(--blue); --question-country-color: var(--teal); + --question-capital-color: var(--blue); +} + +input { + font-family: inherit } .correct { @@ -105,6 +110,10 @@ span#questionCountry { background-color: var(--question-country-color); } +span#questionCapital { + background-color: var(--question-capital-color); +} + #region_selector { width: 100%; background: var(--dark-bg); @@ -128,3 +137,74 @@ span#questionCountry { #settings .selector_result { margin: 1em; } + +/* toggle switches */ +/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--question-country-color); + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: var(--question-capital-color); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--blue); +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +#questionTypeSelector { + display: flex; + width: 100%; + align-items: center; + justify-content: space-around; + margin-top: 3em;; + margin-bottom: 3em;; +} diff --git a/index.html b/index.html index ee1ea36..31ed3c1 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,14 @@