update countries repo commit

.gitignore

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

Makefile

@@ -1,7 +1,20 @@
-all: src/countries.js
+all: countries.js flags
 
-src/countries.js:
-	python scripts/generate_countries_list.py countries/countries.json > src/countries.js
+countries/countries.json: .SUBMODULES
+
+countries.js: countries/countries.json .PHONY
+	python3 scripts/generate_countries_list.py countries/countries.json > countries.js
+
+flags: .SUBMODULES
+	mkdir -p flags
+	cp countries/data/*.svg flags
 
 clean:
-	rm -rf src/countries.js
+	rm -rf countries.js
+	rm -rf countries
+
+.SUBMODULES:
+	git submodule init
+	git submodule update
+
+.PHONY:

game.js

@@ -0,0 +1,383 @@
+"use strict";
+
+const ALL_REGIONS = "All Regions";
+const FLAG_DIR = "flags";
+
+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 incorrectAnswersTable = document.getElementById("incorrectAnswersTable");
+const correctAnswersTable = document.getElementById("correctAnswersTable");
+const previousQuestionAnswer = document.getElementById(
+  "previousQuestionAnswer"
+);
+const previousQuestionText = document.getElementById("previousQuestionText");
+const regionListHTML = document.getElementById("regionList");
+const resultsHTML = document.getElementById("results");
+const scoreHTML = document.getElementById("score");
+const settingsHTML = document.getElementById("settings");
+const questionHTML = document.getElementById("question");
+const timeHTML = document.getElementById("time");
+
+var gameTimeStartTime = 0;
+var gameTimeIntervalId = 0;
+var selectedRegion = null;
+
+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
+  ).toFixed(3);
+  timeHTML.innerHTML = secondsPassed;
+};
+
+const getMasterQuestionList = () => {
+  return countries;
+};
+
+const getQuestionByCountryName = (name) => {
+  var c = getMasterQuestionList().filter((c) => c.countryname === name);
+  if (c.length > 0) return c[0];
+  return null;
+};
+
+const getQuestionByCapital = (capital) => {
+  var 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 <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 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) =>
+  `<img src="${FLAG_DIR}/${code}.svg" />`;
+
+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();
+
+var questionList, state;
+
+var resultsChart = new Chart(document.getElementById("resultsChart"), {
+  type: "doughnut",
+  data: {
+    labels: [],
+    datasets: [
+      {
+        labels: [],
+        data: [],
+        backgroundColor: ["#a1b56c", "#ab4642"],
+      },
+    ],
+  },
+  options: {},
+});
+
+// set up game
+function init() {
+  // generate question list
+  questionList = getMasterQuestionList()
+    .filter(
+      (q) =>
+        q.region == selectedRegion ||
+        q.subregion == selectedRegion ||
+        selectedRegion == ALL_REGIONS
+    )
+    .sort(() => Math.random() - 0.5);
+
+  // set up state variable
+  state.endTime = 0;
+  state.finishedGame = false;
+  state.startedGame = true;
+  state.maxScore = questionList.length;
+  state.score = 0;
+  state.startTime = date.getTime();
+  state.correctAnswers = [];
+  state.incorrectAnswers = [];
+  state.userAnswer = null;
+
+  // show and hide appropriate elements
+  answersHTML.style.display = "";
+  settingsHTML.style.display = "none";
+  questionHTML.onclick = deinit;
+  incorrectAnswersTable.innerHTML =
+    "<tr> <th> question </th> <th> answer </th> <th> your answer </th> </tr>";
+  correctAnswersTable.innerHTML =
+    "<tr> <th> country </th> <th> capital </th>  </tr>";
+
+  // start game
+  updateState();
+  updateScreen();
+  gameTimeStartTime = new Date();
+  gameTimeIntervalId = setInterval(updateTime, 1);
+}
+
+// stop game, go back to start screen
+function deinit() {
+  clearInterval(gameTimeIntervalId);
+
+  answersHTML.style.display = "none";
+  resultsHTML.style.display = "none";
+  settingsHTML.style.display = "";
+  questionHTML.innerHTML = "capitals_quiz - select a region to start!";
+  scoreHTML.innerHTML = "score";
+  questionHTML.onclick = init;
+  timeHTML.innerHTML = "time";
+
+  questionList = null;
+  state = {
+    score: 0,
+    maxScore: 0,
+    startTime: 0,
+    endTime: 0,
+    finishedGame: true,
+    startedGame: false,
+  };
+}
+
+function updateState() {
+  // check if game is over
+  if (questionList.length == 0) {
+    state.finishedGame = true;
+    return;
+  }
+
+  // set up new question
+  const newQuestion = questionList.pop();
+  console.log(newQuestion);
+
+  var options = [];
+  while (options.length < 4) {
+    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 !== getQuestionByCountryName(newQuestion.countryname) &&
+      !options.includes(c)
+    ) {
+      options.push(c);
+    }
+  }
+  var question = getQuestionByCountryName(newQuestion.countryname);
+  if (question == undefined)
+    question = getQuestionByCapital(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 = question;
+  console.log(state);
+}
+
+// update HTML elements to reflect values of state
+function updateScreen() {
+  scoreHTML.innerHTML = state.score + "/" + state.maxScore;
+  if (state.finishedGame) {
+    displayEndScreen();
+    return;
+  }
+
+  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 = optionToAnswerFormatted(
+      state.previousQuestion.question
+    );
+    previousQuestionText.style.display = "";
+  }
+}
+
+function displayEndScreen() {
+  questionHTML.innerHTML = "you did it! click here to restart";
+  answers.style.display = "none";
+  answers.style.display = "none";
+
+  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>";
+  }
+
+  state.incorrectAnswers.forEach((ans) => {
+    var tr = document.createElement("tr");
+    console.log(ans);
+
+    tr.appendChild(document.createElement("td"));
+    tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
+
+    tr.appendChild(document.createElement("td"));
+    tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
+
+    tr.appendChild(document.createElement("td"));
+    tr.lastChild.innerHTML = optionToAnswerFormatted(
+      ans.options[ans.userAnswer]
+    );
+
+    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 = optionToQuestionFormatted(ans.question);
+    tr.appendChild(document.createElement("td"));
+    tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
+    correctAnswersTable.appendChild(tr);
+  });
+  if (state.correctAnswers.length <= 0)
+    correctAnswersTable.innerHTML =
+      "no correct answers. better luck next time :')";
+
+  resultsChart.config.data.labels = ["correct", "incorrect"];
+  resultsChart.config.data.labels = ["correct", "incorrect"];
+  resultsChart.config.data.datasets[0].labels = ["correct", "incorrect"];
+  resultsChart.config.data.datasets[0].data = [
+    state.correctAnswers.length,
+    state.incorrectAnswers.length,
+  ];
+  resultsChart.update();
+  resultsHTML.style.display = "";
+}
+
+function processClick(answer) {
+  if (state.finishedGame) return;
+  // check if answer to previous question  was correct
+  var isAnswerCorrect = state.options[answer] == state.answer;
+  state.score += isAnswerCorrect ? 1 : 0;
+  state.userAnswer = answer;
+  state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({
+    question: state.question,
+    options: state.options,
+    userAnswer: state.userAnswer,
+    answer: state.answer,
+  });
+  state.userAnswer = null;
+
+  // change background color based on if answer was correct for 500ms
+  bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect");
+  setTimeout(() => (bodyHTML.classList = []), 500);
+
+  updateState();
+  updateScreen();
+}
+
+function setRegion(region) {
+  selectedRegion = region;
+}
+
+// set up event listeners
+
+answerAHTML.addEventListener("click", () => processClick(0));
+answerBHTML.addEventListener("click", () => processClick(1));
+answerCHTML.addEventListener("click", () => processClick(2));
+answerDHTML.addEventListener("click", () => processClick(3));
+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 == "Enter" &&
+    settingsHTML.style.display === "none" &&
+    state.finishedGame
+  ) {
+    deinit();
+    return;
+  }
+  if (e.code == "Enter" && !state.startedGame) init();
+});
+
+// start game
+
+deinit();
+regionListHTML.innerHTML = regionList()
+  .map(
+    (region) =>
+      `<div class="regionListItem" onclick="setRegion('${region}'); init()"> ${region} </div>`
+  )
+  .sort()
+  .join("");

game_styles.css

@@ -0,0 +1,264 @@
+:root {
+  --a-color: var(--red);
+  --b-color: var(--yellow);
+  --c-color: var(--green);
+  --d-color: var(--blue);
+  --question-country-color: var(--base16-teal);
+  --question-capital-color: var(--blue);
+}
+
+input {
+  font-family: inherit;
+}
+
+.correct {
+  animation: correct 0.5s;
+}
+
+.incorrect {
+  animation: incorrect 0.5s;
+}
+
+@keyframes correct {
+  0% {
+    background: var(--bg);
+  }
+  50% {
+    background: var(--green);
+  }
+  100% {
+    background: var(--bg);
+  }
+}
+
+@keyframes incorrect {
+  0% {
+    background: var(--bg);
+  }
+  50% {
+    background: var(--red);
+  }
+  100% {
+    background: var(--bg);
+  }
+}
+
+#toprow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media only screen and (max-width: 600px) {
+  #toprow {
+    flex-direction: column-reverse;
+  }
+}
+
+#question {
+  font-size: 1.5em;
+  display: flex;
+  align-items: center;
+}
+
+#question img {
+  max-height: 10vh;
+}
+
+#question * {
+  margin: 1em;
+}
+
+#score {
+  --good: var(--green);
+  --okay: var(--yellow);
+  --bad: var(--red);
+  background: var(--good);
+  color: var(--dark);
+}
+
+#time {
+  background: var(--blue);
+  color: var(--dark);
+}
+
+#gameinfo {
+  display: flex;
+}
+
+#gameinfo * {
+  margin: 0 0.5em 0 0.5em;
+}
+
+#previousQuestionAnswer {
+  background: var(--green);
+  color: var(--dark);
+}
+
+#game .answer {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  align-content: center;
+}
+
+#game .answer .text {
+  width: 50%;
+}
+
+#game .answer .letter {
+  font-size: 1.5em;
+  padding: 1em;
+  border: 0;
+  border-radius: 0.25em;
+}
+
+#a {
+  background-color: var(--a-color);
+  border-color: var(--a-color);
+  color: var(--dark);
+}
+
+#b {
+  background-color: var(--b-color);
+  border-color: var(--b-color);
+  color: var(--dark);
+}
+
+#c {
+  background-color: var(--c-color);
+  border-color: var(--c-color);
+  color: var(--dark);
+}
+
+#d {
+  background-color: var(--d-color);
+  border-color: var(--d-color);
+  color: var(--dark);
+}
+
+span#questionCountry {
+  background-color: var(--question-country-color);
+  color: var(--dark);
+}
+
+span#questionCapital {
+  background-color: var(--question-capital-color);
+  color: var(--dark);
+}
+
+#settings {
+  width: 100%;
+}
+
+#regionList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+#settings .regionListItem {
+  padding: 1em;
+  transition: 0.5s;
+}
+
+#settings .regionListItem:hover {
+  background: var(--light);
+  color: var(--dark);
+}
+
+/* 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: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.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;
+}
+
+.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);
+  color: var(--dark);
+}
+
+#previousQuestionAnswer {
+  display: inline;
+}
+
+#previousQuestionAnswer img {
+  display: inline;
+  max-height: 2em;
+}

gohookr.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+cd `dirname $0`
+git pull
+make

index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <link rel="stylesheet" type="text/css" href="game_styles.css" />
+    <title>capitals_quiz</title>
+  </head>
+
+  <body>
+    <div id="game">
+      <div id="toprow">
+        <p id="question">you need javascript enabled to play this</p>
+        <div id="gameinfo">
+          <p id="time">time</p>
+          <p id="score">score</p>
+        </div>
+      </div>
+      <div style="display: none" id="settings">
+        <div id="regionList"></div>
+        <div id="questionTypeSelector">
+          <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">
+        <div class="answer" id="answer_a">
+          <p class="letter" id="a">1</p>
+          <p class="text">answer 1 text</p>
+        </div>
+        <div class="answer" id="answer_b">
+          <p class="letter" id="b">2</p>
+          <p class="text">answer 2 text</p>
+        </div>
+        <div class="answer" id="answer_c">
+          <p class="letter" id="c">3</p>
+          <p class="text">this sample text is longer than the rest</p>
+        </div>
+        <div class="answer" id="answer_d">
+          <p class="letter" id="d">4</p>
+          <p class="text">answer 4 text</p>
+        </div>
+        <p id="previousQuestionText" style="display: none">
+          answer to previous question:
+          <span id="previousQuestionAnswer"> </span>
+        </p>
+      </div>
+      <div style="display: none" id="results">
+        <h1 id="resultsBreakdownHeader">results breakdown</h1>
+        <div>
+          <canvas id="resultsChart"></canvas>
+        </div>
+        <h2 id="incorrectAnswersHeader">incorrect answers</h2>
+        <table id="incorrectAnswersTable"></table>
+
+        <h2 id="correctAnswersHeader">correct answers</h2>
+        <table id="correctAnswersTable"></table>
+      </div>
+    </div>
+    <p>
+      built with ❤ and adequate amounts of care by
+      <a href="https://alv.cx">alv</a>
+    </p>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script type="text/javascript" src="countries.js"></script>
+    <script type="text/javascript" src="game.js"></script>
+  </body>
+</html>

scripts/generate_countries_list.py

@@ -18,20 +18,22 @@ def main(args):
     with open(args.file) as fp:
         countries = json.load(fp)
 
-    r = {}
+    country_list = []
 
     for country in countries:
         if len(country['capital']) < 1 or country['capital'][0] == "" or not country['independent']:
             continue
-        r[country['name']['common']] = {
+        country_list.append({
                 '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='')
-    print(json.dumps(r))
+    print(json.dumps(country_list), end=';')
 
     return 0
 

src/game.js

@@ -1,268 +0,0 @@
-"use strict";
-
-const ALL_REGIONS = "All Regions";
-
-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 incorrectAnswersTable = document.getElementById('incorrectAnswersTable');
-const correctAnswersTable = document.getElementById('correctAnswersTable');
-const previousQuestionAnswer = document.getElementById('previousQuestionAnswer');
-const previousQuestionText = document.getElementById('previousQuestionText');
-const resultsHTML = document.getElementById("results");
-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");
-
-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))])
-    .concat([ALL_REGIONS])
-    .sort();
-const date = new Date();
-
-var questionList, selectorMatches, state;
-
-var resultsChart = new Chart(
-	document.getElementById('resultsChart'),
-	{
-		type: 'doughnut',
-		data: {
-			labels: [],
-			datasets: [
-				{
-					labels: [],
-					data: [],
-					backgroundColor: [
-						"#a1b56c",
-						"#ab4642",
-					]
-
-				}
-			]
-		},
-		options: {}
-	}
-);
-
-
-// set up game
-function init() {
-    // generate question list
-    var regex;
-    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))
-        .sort(() => Math.random()-0.5);
-
-    // set up state variable
-    state.endTime = 0;
-    state.finishedGame = false;
-    state.startedGame = true;
-    state.maxScore = questionList.length;
-    state.score = 0;
-    state.startTime = date.getTime();
-    state.correctAnswers = [];
-    state.incorrectAnswers = [];
-    state.userAnswer = null;
-
-    // show and hide appropriate elements
-    answersHTML.style.display = "";
-    settingsHTML.style.display = "none";
-    questionHTML.onclick = deinit;
-    incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th> <th> your answer </th> </tr>";
-    correctAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th>  </tr>";
-
-    // start game
-    updateState();
-    updateScreen();
-}
-
-
-// stop game, go back to start screen
-function deinit() {
-    answersHTML.style.display = "none";
-    resultsHTML.style.display = "none";
-    settingsHTML.style.display = "";
-    questionHTML.innerHTML = "tap here or press enter to start";
-    scoreHTML.innerHTML = "score";
-    questionHTML.onclick = init;
-
-    questionList = null;
-    selectorMatches = []
-    state = {
-        "score": 0,
-        "maxScore": 0,
-        "startTime": 0,
-        "endTime": 0,
-        "finishedGame": true,
-        "startedGame": false,
-    };
-}
-
-
-function updateState() {
-    // check if game is over
-    if (questionList.length == 0) { state.finishedGame = true; return; }
-
-    // set up new question
-    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)){
-            options.push(c);
-        }
-    }
-    options[Math.floor(Math.random()*4)] = countries[newQuestion].capital;
-
-    if (state.question) state.previousQuestion = {
-        "question": state.question,
-        "options": state.options,
-        "answer": state.answer
-    };
-    state.question = newQuestion;
-    state.options = options;
-    state.answer = countries[newQuestion].capital;
-}
-
-
-// update HTML elements to reflect values of state
-function updateScreen(){
-    scoreHTML.innerHTML = state.score + "/" + state.maxScore;
-    if (state.finishedGame) {
-	    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];
-    questionHTML.innerHTML = `what is the capital of <span id="questionCountry">${state.question}</span>?`;
-    if (state.previousQuestion ) {
-        previousQuestionAnswer.innerHTML = state.previousQuestion.answer;
-        previousQuestionText.style.display = "";
-    }
-}
-
-function displayEndScreen() {
-        questionHTML.innerHTML = "you did it! click here to restart";
-        answers.style.display = "none";
-        answers.style.display = "none";
-
-	state.incorrectAnswers.forEach(ans => {
-		var tr = document.createElement('tr');
-		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.question
-		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.answer
-		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.options[ans.userAnswer]
-		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
-		tr.appendChild(document.createElement('td'))
-		tr.lastChild.innerHTML = ans.answer
-		correctAnswersTable.appendChild(tr);
-	})
-	if (state.correctAnswers.length <= 0)
-		correctAnswersTable.innerHTML = "no correct answers. better luck next time :')";
-
-	resultsChart.config.data.labels = ["correct", "incorrect"];
-	resultsChart.config.data.labels = ["correct", "incorrect"];
-	resultsChart.config.data.datasets[0].labels = ["correct", "incorrect"];
-	resultsChart.config.data.datasets[0].data = [state.correctAnswers.length,state.incorrectAnswers.length];
-	resultsChart.update();
-	resultsHTML.style.display = "";
-}
-
-
-function processClick(answer) {
-    if (state.finishedGame) return;
-    // check if answer to previous question  was correct
-    var isAnswerCorrect = state.options[answer] == state.answer
-    state.score += isAnswerCorrect ? 1 : 0;
-    state.userAnswer = answer;
-    state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({
-        "question": state.question,
-        "options": state.options,
-        "userAnswer": state.userAnswer,
-        "answer": state.answer
-    });
-    state.userAnswer = null;
-
-    // change background color based on if answer was correct
-    bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
-    setTimeout(() => bodyHTML.classList = [], 500)
-
-    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 `<div class="selector_result" onclick="setSelectorValue('${region}'); init()"> ${region} </div>`
-        })
-        .sort()
-        .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));
-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 == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
-        deinit();
-        return;
-    }
-    if (e.code == "Enter" && !state.startedGame) init();
-});
-
-selectorHTML.addEventListener("change", setSelectorMatches);
-selectorHTML.addEventListener("keyup", e => {
-    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();

src/game_styles.css

@@ -1,118 +0,0 @@
-:root {
-	--a-color: var(--red);
-	--b-color: var(--yellow);
-	--c-color: var(--green);
-	--d-color: var(--blue);
-	--question-country-color: var(--teal);
-}
-
-.correct {
-	animation: correct .5s;
-}
-
-.incorrect {
-	animation: incorrect .5s;
-}
-
-@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); }
-}
-
-#toprow {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-@media only screen and (max-width: 600px) {
-	#toprow {
-		flex-direction: column-reverse;
-	}
-}
-
-#question {
-	font-size: 1.5em;
-}
-
-#score {
-	--good: var(--green);
-	--okay: var(--yellow);
-	--bad: var(--red);
-	background: var(--good);
-}
-
-#previousQuestionAnswer { background: var(--green) }
-
-#game .answer {
-	display: flex;
-	justify-content: space-evenly;
-	align-items: center;
-	align-content: center;
-}
-
-#game .answer .text {
-	width: 50%;
-}
-
-#game .answer .letter {
-	font-size: 1.5em;
-	padding: 1em;
-	border: 0;
-	border-radius: 0.25em;
-}
-
-#a {
-	background-color: var(--a-color);
-	border-color: var(--a-color);
-}
-
-#b {
-	background-color: var(--b-color);
-	border-color: var(--b-color);
-}
-
-#c {
-	background-color: var(--c-color);
-	border-color: var(--c-color);
-}
-
-#d {
-	background-color: var(--d-color);
-	border-color: var(--d-color);
-}
-
-span#questionCountry {
-	background-color: var(--question-country-color);
-}
-
-#region_selector {
-	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% 
-}
-
-#selector_results {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-}
-
-#settings .selector_result {
-	margin: 1em;
-}

src/index.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en"> 
-
-<head>
-<meta charset="utf-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" type="text/css" href="styles.css" />
-<link rel="stylesheet" type="text/css" href="game_styles.css" />
-<title>capitals_quiz</title>
-</head>
-
-<body>
-<div id=game>
-	<div id="toprow">
-		<p onclick="init()" id="question">you need javascript enabled to play this</p>
-		<p id="score">score</p>
-	</div>
-	<div style="display: none" id="settings">
-		<input placeholder="select a region (tap or type to filter)" id="region_selector" type="text">
-		<div id="selector_results"></div>
-	</div>
-	<div style="display: none" id="answers">
-		<div class="answer" id="answer_a">
-			<p class="letter" id="a">a</p>
-			<p class="text">answer a text</p>
-		</div>
-		<div class="answer" id="answer_b">
-			<p class="letter" id="b">b</p>
-			<p class="text">answer b text</p>
-		</div>
-		<div class="answer" id="answer_c">
-			<p class="letter" id="c">c</p>
-			<p class="text">this sample text is longer than the rest</p>
-		</div>
-		<div class="answer" id="answer_d">
-			<p class="letter" id="d">d</p>
-			<p class="text">answer d text</p>
-		</div>
-		<p id="previousQuestionText" style="display: none"> answer to previous question: <span id="previousQuestionAnswer"> </span></p>
-	</div>
-	<div style="display: none" id="results">
-		<h1 id="resultsBreakdownHeader"> results breakdown </h1>
-		<div>
-			<canvas id="resultsChart"></canvas>
-		</div>
-		<h2 id="incorrectAnswersHeader"> incorrect answers </h2>
-		<table id="incorrectAnswersTable"> </table>
-
-		<h2 id="correctAnswersHeader"> correct answers </h2>
-		<table id="correctAnswersTable"> </table>
-	</div>
-</div>
-<p> built with ❤ and adequate amounts of care by <a href="https://alra.uk">alv</a></p>
-<script type="text/javascript" src="countries.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script type="text/javascript" src="game.js"></script>
-</body>

src/styles.css

@@ -1,66 +0,0 @@
-:root {
-	--default-bg: #fefefe;
-	--dark-bg: #b8b8b8;
-	--selected-bg:#383838;
-	--default-fg: #454545;
-	--red:        #ab4642;
-	--orange:     #dc9656;
-	--yellow:     #f7ca88;
-	--green:      #a1b56c;
-	--teal:       #86c1b9;
-	--blue:       #7cafc2;
-	--purple:     #ba8baf;
-	--brown:      #a16946;
-}
-
-body {
-	font-family: monospace;
-	color: var(--default-fg);
-	font-size: 16px;
-	margin: 2em auto;
-	max-width: 800px;
-	padding: 5em;
-	line-height: 1.1;
-	text-align: justify;
-	background-color: var(--default-bg);
-}
-
-@media only screen and (max-width: 600px) {
-	body {
-		margin: 0em auto;
-		padding: 2em;
-	}
-}
-
-a { color: #07a; }
-a:visited { color: #941352; }
-
-img[class="centered"] {
-	margin: 0 auto;
-	display: block;
-}
-
-table {
-	border-collapse: collapse;
-	margin: 1em auto;
-}
-th, td {
-	padding: 1em;
-	border: 1px solid #454545;
-	margin: 0;
-}
-
-
-pre {
-	background-color: #d9d9d9 ;
-	color: #000;
-	padding: 1em;
-}
-
-details {
-	padding: 1em 0 1em 0;
-}
-
-li {
-	margin-bottom: 1em;
-}

styles.css

@@ -0,0 +1,19 @@
+@import url("https://styles.alv.cx/colors/base16-default.css");
+@import url("https://styles.alv.cx/base.css");
+@import url("https://styles.alv.cx/modules/darkmode.css");
+
+body {
+  font-family: monospace;
+  font-size: 16px;
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 2em;
+  line-height: 1.1;
+}
+
+@media only screen and (max-width: 600px) {
+  body {
+    margin: 0em auto;
+    padding: 2em;
+  }
+}