flags! and minor styling tweaks

.gitignore

@@ -1,2 +1,3 @@
 countries.js
+flags
 *.swp

Makefile

@@ -1,10 +1,14 @@
-all: countries.js
+all: countries.js flags
 
 countries/countries.json: .SUBMODULES
 
 countries.js: countries/countries.json .PHONY
 	python3 scripts/generate_countries_list.py countries/countries.json > countries.js
 
+flags: .SUBMODULES
+	mkdir flags
+	cp countries/data/*.svg flags
+
 clean:
 	rm -rf countries.js
 	rm -rf countries

game.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const ALL_REGIONS = "All Regions";
+const FLAG_DIR = "flags";
 
 const answersHTML = document.getElementById("answers");
 const answerAHTML = document.getElementById("answer_a");
@@ -10,7 +11,6 @@ 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 regionListHTML = document.getElementById("regionList");
@@ -23,7 +23,11 @@ const timeHTML = document.getElementById("time");
 var gameTimeStartTime = 0;
 var gameTimeIntervalId = 0;
 var selectedRegion = null;
-const guessCountry = () => guessCheckboxHTML.checked;
+
+const guessCapital = () => document.getElementById('questionTypeCapital').checked;
+const guessCountry = () => document.getElementById('questionTypeCountry').checked;
+const guessFlag = () => document.getElementById('questionTypeFlag').checked;
+const guessReverseFlag = () => document.getElementById('questionTypeReverseFlag').checked;
 
 const updateTime = () => {
     const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000)
@@ -38,11 +42,20 @@ const getMasterQuestionList = () => {
 
 const getQuestionHTML = (state) => {
   if(guessCountry())
-    return `what country is <span id="questionCapital">${state.question}</span> the capital of?`
+    return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?`
-  return `what is the capital of <span id="questionCountry">${state.question}</span>?`
+  if (guessCapital())
+    return `what is the capital of <span id="questionCountry">${state.question.countryname}</span>?`
+  if(guessFlag())
+    return `what is the flag of <span id="questionCountry">${state.question.countryname}</span>?`
+  if(guessReverseFlag())
+    return `which country's flag is ${getImageURLFromCountryCode(state.question.code)}?`
 }
 
-const answer_list = () => Object.values(getMasterQuestionList()).map(item => item.answer);
+const answer_list = () => {
+  return Object.values(getMasterQuestionList());
+}
+
+const getImageURLFromCountryCode = (code) => `<img src="${FLAG_DIR}/${code}.svg" />`;
 
 
 const regionList = () => [...new Set(Object.values(getMasterQuestionList()).map(item => item.region))]
@@ -79,8 +92,8 @@ var resultsChart = new Chart(
 // set up game
 function init() {
     // generate question list
-    questionList = Object.keys(getMasterQuestionList())
+    questionList = Object.values(getMasterQuestionList())
-        .filter(c => getMasterQuestionList()[c].region == selectedRegion || getMasterQuestionList()[c].subregion == selectedRegion)
+        .filter(q => q.region == selectedRegion || q.subregion == selectedRegion)
         .sort(() => Math.random()-0.5);
 
     // set up state variable
@@ -138,24 +151,34 @@ function updateState() {
     if (questionList.length == 0) { state.finishedGame = true; return; }
 
     // set up new question
-    var newQuestion = questionList.pop();
+    const newQuestion = questionList.pop();
+    console.log(newQuestion);
+
     var options = []
     while (options.length < 4) {
         var c = answer_list()[Math.floor(Math.random()*answer_list().length)];
-        if (c !== getMasterQuestionList()[newQuestion].answer && !options.includes(c)){
+        var question = getMasterQuestionList()[newQuestion.countryname];
+        if (question == undefined) question = getMasterQuestionList()[newQuestion.capital];
+        console.log(c);
+        console.log(question);
+        if (c !== getMasterQuestionList()[newQuestion.countryname]&& !options.includes(c)){
             options.push(c);
         }
     }
-    options[Math.floor(Math.random()*4)] = getMasterQuestionList()[newQuestion].answer;
+    var question = getMasterQuestionList()[newQuestion.countryname];
+    if (question == undefined) question = getMasterQuestionList()[newQuestion.capital];
+    options[Math.floor(Math.random()*4)] = question;
 
     if (state.question) state.previousQuestion = {
         "question": state.question,
         "options": state.options,
         "answer": state.answer
     };
+
     state.question = newQuestion;
     state.options = options;
-    state.answer = getMasterQuestionList()[newQuestion].answer;
+    state.answer = question;
+    console.log(state);
 }
 
 
@@ -166,13 +189,25 @@ function updateScreen(){
 	    displayEndScreen();
         return;
     }
-    answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0];
+    if (!guessFlag() && !guessReverseFlag()) {
-    answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1];
+      answerAHTML.getElementsByClassName("text")[0].innerHTML = state.options[0].answer;
-    answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2];
+      answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1].answer;
-    answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3];
+      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);
+    }
     questionHTML.innerHTML = getQuestionHTML(state)
     if (state.previousQuestion ) {
-        previousQuestionAnswer.innerHTML = state.previousQuestion.answer;
+        previousQuestionAnswer.innerHTML = state.previousQuestion.question.answer;
         previousQuestionText.style.display = "";
     }
 }
@@ -185,14 +220,22 @@ function displayEndScreen() {
     
     clearInterval(gameTimeIntervalId);
 
+
 	state.incorrectAnswers.forEach(ans => {
 		var tr = document.createElement('tr');
+    console.log(ans)
+
 		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.question
+		tr.lastChild.innerHTML = ans.question.countryname
+
 		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.answer
+    if (guessFlag()) tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.answer.code);
+		else tr.lastChild.innerHTML = ans.answer.answer;
+
 		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.options[ans.userAnswer]
+    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)
@@ -201,9 +244,10 @@ function displayEndScreen() {
 	state.correctAnswers.forEach(ans => {
 		var tr = document.createElement('tr');
 		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.question
+		tr.lastChild.innerHTML = ans.question.countryname
 		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.answer
+    if (guessFlag()) tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.answer.code);
+		else tr.lastChild.innerHTML = ans.answer.answer;
 		correctAnswersTable.appendChild(tr);
 	})
 	if (state.correctAnswers.length <= 0)

game_styles.css

@@ -45,6 +45,16 @@ input {
 
 #question {
 	font-size: 1.5em;
+	display: flex;
+	align-items: center;
+}
+
+#question img {
+	max-height: 10vh;
+}
+
+#question * {
+	margin: 1em;
 }
 
 #score {
@@ -205,4 +215,4 @@ input:checked + .slider:before {
 	margin-bottom: 3em;;
 }
 
-
+.text img, td img { max-height: 15vh }

index.html

@@ -21,12 +21,17 @@
 	<div style="display: none" id="settings">
 		<div id="regionList"></div>
 		<div id="questionTypeSelector" >
-		  <p>guess capital</p>
+			<input type="radio" name="questionMode" value="capital" id="questionTypeCapital" checked>
-		  <label class="switch">
+			<label for="questionTypeCapital">capital</label>
-		  <input id="guessCheckbox" type="checkbox">
+
-		  <span class="slider round"></span>
+			<input type="radio" name="questionMode" value="country" id="questionTypeCountry">
-		  </label>
+			<label for="questionTypeCountry">country</label>
-		  <p>guess country</p>
+
+			<input type="radio" name="questionMode" value="flag" id="questionTypeFlag">
+			<label for="questionTypeFlag">flag</label>
+
+			<input type="radio" name="questionMode" value="reverseflag" id="questionTypeReverseFlag">
+			<label for="questionTypeReverseFlag">reverseflag</label>
 		</div>
 	</div>
 	<div style="display: none" id="answers">

scripts/generate_countries_list.py

@@ -26,16 +26,22 @@ def main(args):
             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']
+                'languages': country['languages'],
+                'code': country['cca3'].lower()
         }
 
         capital_list[country['capital'][0]] = {
                 'answer': country['name']['common'],
+                'capital': country['capital'][0],
+                'countryname': country['name']['common'],
                 'region': country['region'],
                 'subregion': country['subregion'],
-                'languages': country['languages']
+                'languages': country['languages'],
+                'code': country['cca3'].lower()
         }
 
     print('countries = ', end='')

styles.css

@@ -19,9 +19,9 @@ body {
 	font-family: monospace;
 	color: var(--default-fg);
 	font-size: 16px;
-	margin: 2em auto;
+	margin: 0 auto;
 	max-width: 800px;
-	padding: 5em;
+	padding: 2em;
 	line-height: 1.1;
 	text-align: justify;
 	background-color: var(--default-bg);