visual tweakssss

visual tweaks
flags! and minor styling tweaks
2025-10-13 16:04:25 +00:00 · 2022-01-14 02:18:58 +00:00 · 2022-01-14 02:13:13 +00:00 · 2022-01-14 01:49:34 +00:00
7 changed files with 159 additions and 47 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 countries.js
+flags
 *.swp
--- a/6
+++ b/6
@@ -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
--- a/game.js
+++ b/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 is the capital of <span id="questionCountry">${state.question}</span>?`
+    return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?`
+  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())
-        .filter(c => getMasterQuestionList()[c].region == selectedRegion || getMasterQuestionList()[c].subregion == selectedRegion)
+    questionList = Object.values(getMasterQuestionList())
+        .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];
-    answerBHTML.getElementsByClassName("text")[0].innerHTML = state.options[1];
-    answerCHTML.getElementsByClassName("text")[0].innerHTML = state.options[2];
-    answerDHTML.getElementsByClassName("text")[0].innerHTML = state.options[3];
+    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);
+    }
    questionHTML.innerHTML = getQuestionHTML(state)
    if (state.previousQuestion ) {
-        previousQuestionAnswer.innerHTML = state.previousQuestion.answer;
+        previousQuestionAnswer.innerHTML = state.previousQuestion.question.answer;
        previousQuestionText.style.display = "";
    }
 }
@@ -185,14 +220,25 @@ function displayEndScreen() {
    
    clearInterval(gameTimeIntervalId);

+    if (guessReverseFlag() || guessFlag()) {
+      incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> answer </th> <th> your answer </th> </tr>";
+      correctAnswersTable.innerHTML = "<tr> <th> flag </th> <th> country </th>  </tr>";
+    }
+
+  if (guessReverseFlag()) {
    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
+      tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.answer.code);
+
      tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.options[ans.userAnswer]
+      tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.options[ans.userAnswer].code);
+
      incorrectAnswersTable.appendChild(tr);
    })
    if (state.incorrectAnswers.length <= 0)
@@ -201,11 +247,43 @@ function displayEndScreen() {
    state.correctAnswers.forEach(ans => {
      var tr = document.createElement('tr');
      tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.question
+      tr.lastChild.innerHTML = getImageURLFromCountryCode(ans.question.code);
      tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.answer
+      tr.lastChild.innerHTML = ans.answer.countryname;
      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 :')";

--- a/game_styles.css
+++ b/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,12 @@ input:checked + .slider:before {
 	margin-bottom: 3em;;
 }

+.text img, td img { max-height: 15vh }

+#questionTypeSelector input[type="radio"] { display: none; }
+input[type="radio"]+label {
+	padding: 0.5em;
+}
+input[type="radio"]:checked+label {
+	background-color: var(--yellow);
+}
--- a/index.html
+++ b/index.html
@@ -21,12 +21,17 @@
 	<div style="display: none" id="settings">
 		<div id="regionList"></div>
 		<div id="questionTypeSelector" >
-		  <p>guess capital</p>
-		  <label class="switch">
-		  <input id="guessCheckbox" type="checkbox">
-		  <span class="slider round"></span>
-		  </label>
-		  <p>guess country</p>
+			<input type="radio" name="questionMode" value="capital" id="questionTypeCapital" checked>
+			<label for="questionTypeCapital">capital</label>
+
+			<input type="radio" name="questionMode" value="country" id="questionTypeCountry">
+			<label for="questionTypeCountry">country</label>
+
+			<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">
--- a/scripts/generate_countries_list.py
+++ b/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='')
--- a/styles.css
+++ b/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);
Author	SHA1	Message	Date
Alvie Rahman	2e8bdd8b18	visual tweakssss	2022-01-14 02:18:58 +00:00
Alvie Rahman	8af47e5abc	visual tweaks	2022-01-14 02:13:13 +00:00
Alvie Rahman	36805a64a6	flags! and minor styling tweaks	2022-01-14 01:49:34 +00:00