prettier -w

game.js

@@ -8,11 +8,13 @@ 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 bodyHTML = document.getElementsByTagName("body")[0];
-const incorrectAnswersTable = document.getElementById('incorrectAnswersTable');
+const incorrectAnswersTable = document.getElementById("incorrectAnswersTable");
-const correctAnswersTable = document.getElementById('correctAnswersTable');
+const correctAnswersTable = document.getElementById("correctAnswersTable");
-const previousQuestionAnswer = document.getElementById('previousQuestionAnswer');
+const previousQuestionAnswer = document.getElementById(
-const previousQuestionText = document.getElementById('previousQuestionText');
+  "previousQuestionAnswer"
+);
+const previousQuestionText = document.getElementById("previousQuestionText");
 const regionListHTML = document.getElementById("regionList");
 const resultsHTML = document.getElementById("results");
 const scoreHTML = document.getElementById("score");
@@ -24,118 +26,123 @@ var gameTimeStartTime = 0;
 var gameTimeIntervalId = 0;
 var selectedRegion = null;
 
-const guessCapital = () => document.getElementById('questionTypeCapital').checked;
+const guessCapital = () =>
-const guessCountry = () => document.getElementById('questionTypeCountry').checked;
+  document.getElementById("questionTypeCapital").checked;
-const guessFlag = () => document.getElementById('questionTypeFlag').checked;
+const guessCountry = () =>
-const guessReverseFlag = () => document.getElementById('questionTypeReverseFlag').checked;
+  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)
+  const secondsPassed = (
-        .toFixed(3);
+    (new Date().getTime() - gameTimeStartTime.getTime()) /
+    1000
+  ).toFixed(3);
   timeHTML.innerHTML = secondsPassed;
-}
+};
 
 const getMasterQuestionList = () => {
   return countries;
-}
+};
 
 const getQuestionByCountryName = (name) => {
-  c = getMasterQuestionList().filter(c => c.countryname === name)
+  c = getMasterQuestionList().filter((c) => c.countryname === name);
-  if (c.length > 0) return c[0]
+  if (c.length > 0) return c[0];
-  return null
+  return null;
-}
+};
 
 const getQuestionByCapital = (capital) => {
-  c = getMasterQuestionList().filter(c => c.capital === capital)
+  c = getMasterQuestionList().filter((c) => c.capital === capital);
-  if (c.length > 0) return c[0]
+  if (c.length > 0) return c[0];
-  return null
+  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
+  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
+  return r;
-}
+};
 
 const getQuestionHTML = (state) => {
   if (guessCountry())
-    return `what country is <span id="questionCapital">${state.question.capital}</span> the capital of?`
+    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>?`
+    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>?`
+    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)}?`
+    return `which country's flag is ${getImageURLFromCountryCode(
-}
+      state.question.code
+    )}?`;
+};
 
 const answerList = () => {
-  return getMasterQuestionList().map(q => {
+  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 getImageURLFromCountryCode = (code) => `<img src="${FLAG_DIR}/${code}.svg" />`;
+const regionList = () =>
-
+  [...new Set(getMasterQuestionList().map((item) => item.region))]
-const regionList = () => [...new Set(getMasterQuestionList().map(item => item.region))]
+    .concat([...new Set(getMasterQuestionList().map((item) => item.subregion))])
-    .concat([...new Set(getMasterQuestionList().map(item => item.subregion))])
     .concat([ALL_REGIONS])
     .sort();
 const date = new Date();
 
 var questionList, state;
 
-var resultsChart = new Chart(
+var resultsChart = new Chart(document.getElementById("resultsChart"), {
-	document.getElementById('resultsChart'),
+  type: "doughnut",
-	{
-		type: 'doughnut',
   data: {
     labels: [],
     datasets: [
       {
         labels: [],
         data: [],
-					backgroundColor: [
+        backgroundColor: ["#a1b56c", "#ab4642"],
-						"#a1b56c",
-						"#ab4642",
-					]
-
-				}
-			]
       },
-		options: {}
+    ],
-	}
+  },
-);
+  options: {},
-
+});
 
 // set up game
 function init() {
   // generate question list
   questionList = getMasterQuestionList()
-        .filter(q => q.region == selectedRegion || q.subregion == selectedRegion || selectedRegion == ALL_REGIONS)
+    .filter(
+      (q) =>
+        q.region == selectedRegion ||
+        q.subregion == selectedRegion ||
+        selectedRegion == ALL_REGIONS
+    )
     .sort(() => Math.random() - 0.5);
 
   // set up state variable
@@ -153,17 +160,18 @@ function init() {
   answersHTML.style.display = "";
   settingsHTML.style.display = "none";
   questionHTML.onclick = deinit;
-    incorrectAnswersTable.innerHTML = "<tr> <th> question </th> <th> answer </th> <th> your answer </th> </tr>";
+  incorrectAnswersTable.innerHTML =
-    correctAnswersTable.innerHTML = "<tr> <th> country </th> <th> capital </th>  </tr>";
+    "<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()
+  gameTimeStartTime = new Date();
   gameTimeIntervalId = setInterval(updateTime, 1);
 }
 
-
 // stop game, go back to start screen
 function deinit() {
   clearInterval(gameTimeIntervalId);
@@ -178,43 +186,52 @@ function deinit() {
 
   questionList = null;
   state = {
-        "score": 0,
+    score: 0,
-        "maxScore": 0,
+    maxScore: 0,
-        "startTime": 0,
+    startTime: 0,
-        "endTime": 0,
+    endTime: 0,
-        "finishedGame": true,
+    finishedGame: true,
-        "startedGame": false,
+    startedGame: false,
   };
 }
 
-
 function updateState() {
   // check if game is over
-    if (questionList.length == 0) { state.finishedGame = true; return; }
+  if (questionList.length == 0) {
+    state.finishedGame = true;
+    return;
+  }
 
   // set up new question
   const newQuestion = questionList.pop();
   console.log(newQuestion);
 
-    var options = []
+  var options = [];
   while (options.length < 4) {
-        var c = getMasterQuestionList()[Math.floor(Math.random()*answerList().length)];
+    var c =
+      getMasterQuestionList()[Math.floor(Math.random() * answerList().length)];
     var question = getQuestionByCountryName(newQuestion.countryname);
-        if (question == undefined) question = getQuestionByCapital(newQuestion.capital);
+    if (question == undefined)
+      question = getQuestionByCapital(newQuestion.capital);
     console.log(c);
     console.log(question);
-        if (c !== getQuestionByCountryName(newQuestion.countryname)&& !options.includes(c)){
+    if (
+      c !== getQuestionByCountryName(newQuestion.countryname) &&
+      !options.includes(c)
+    ) {
       options.push(c);
     }
   }
   var question = getQuestionByCountryName(newQuestion.countryname);
-    if (question == undefined) question = getQuestionByCapital(newQuestion.capital);
+  if (question == undefined)
+    question = getQuestionByCapital(newQuestion.capital);
   options[Math.floor(Math.random() * 4)] = question;
 
-    if (state.question) state.previousQuestion = {
+  if (state.question)
-        "question": state.question,
+    state.previousQuestion = {
-        "options": state.options,
+      question: state.question,
-        "answer": state.answer
+      options: state.options,
+      answer: state.answer,
     };
 
   state.question = newQuestion;
@@ -223,7 +240,6 @@ function updateState() {
   console.log(state);
 }
 
-
 // update HTML elements to reflect values of state
 function updateScreen() {
   scoreHTML.innerHTML = state.score + "/" + state.maxScore;
@@ -232,19 +248,24 @@ function updateScreen(){
     return;
   }
 
-    answerAHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[0]);
+  answerAHTML.getElementsByClassName("text")[0].innerHTML =
-    answerBHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[1]);
+    optionToAnswerFormatted(state.options[0]);
-    answerCHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[2]);
+  answerBHTML.getElementsByClassName("text")[0].innerHTML =
-    answerDHTML.getElementsByClassName("text")[0].innerHTML = optionToAnswerFormatted(state.options[3]);
+    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)
+  questionHTML.innerHTML = getQuestionHTML(state);
   if (state.previousQuestion) {
-        previousQuestionAnswer.innerHTML = optionToAnswerFormatted(state.previousQuestion.question);
+    previousQuestionAnswer.innerHTML = optionToAnswerFormatted(
+      state.previousQuestion.question
+    );
     previousQuestionText.style.display = "";
   }
 }
 
-
 function displayEndScreen() {
   questionHTML.innerHTML = "you did it! click here to restart";
   answers.style.display = "none";
@@ -253,73 +274,79 @@ function displayEndScreen() {
   clearInterval(gameTimeIntervalId);
 
   if (guessReverseFlag() || guessFlag()) {
-      incorrectAnswersTable.innerHTML = "<tr> <th> country </th> <th> answer </th> <th> your answer </th> </tr>";
+    incorrectAnswersTable.innerHTML =
-      correctAnswersTable.innerHTML = "<tr> <th> flag </th> <th> country </th>  </tr>";
+      "<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 => {
+  state.incorrectAnswers.forEach((ans) => {
-      var tr = document.createElement('tr');
+    var tr = document.createElement("tr");
-      console.log(ans)
+    console.log(ans);
 
-      tr.appendChild(document.createElement('td'))
+    tr.appendChild(document.createElement("td"));
-      tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question)
+    tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
 
-      tr.appendChild(document.createElement('td'))
+    tr.appendChild(document.createElement("td"));
     tr.lastChild.innerHTML = optionToAnswerFormatted(ans.answer);
 
-      tr.appendChild(document.createElement('td'))
+    tr.appendChild(document.createElement("td"));
-      tr.lastChild.innerHTML = optionToAnswerFormatted(ans.options[ans.userAnswer]);
+    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 => {
+  state.correctAnswers.forEach((ans) => {
-      var tr = document.createElement('tr');
+    var tr = document.createElement("tr");
-      tr.appendChild(document.createElement('td'))
+    tr.appendChild(document.createElement("td"));
     tr.lastChild.innerHTML = optionToQuestionFormatted(ans.question);
-      tr.appendChild(document.createElement('td'))
+    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 :')";
+    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.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
+  var isAnswerCorrect = state.options[answer] == state.answer;
   state.score += isAnswerCorrect ? 1 : 0;
   state.userAnswer = answer;
   state[isAnswerCorrect ? "correctAnswers" : "incorrectAnswers"].push({
-        "question": state.question,
+    question: state.question,
-        "options": state.options,
+    options: state.options,
-        "userAnswer": state.userAnswer,
+    userAnswer: state.userAnswer,
-        "answer": state.answer
+    answer: state.answer,
   });
   state.userAnswer = null;
 
   // change background color based on if answer was correct for 500ms
-    bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
+  bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect");
-    setTimeout(() => bodyHTML.classList = [], 500)
+  setTimeout(() => (bodyHTML.classList = []), 500);
 
   updateState();
   updateScreen();
 }
 
-
 function setRegion(region) {
-    selectedRegion = region
+  selectedRegion = region;
 }
 
 // set up event listeners
@@ -328,12 +355,16 @@ answerAHTML.addEventListener("click", () => processClick(0));
 answerBHTML.addEventListener("click", () => processClick(1));
 answerCHTML.addEventListener("click", () => processClick(2));
 answerDHTML.addEventListener("click", () => processClick(3));
-document.addEventListener("keyup", 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 == "Enter" && settingsHTML.style.display === "none" && state.finishedGame) {
+  if (
+    e.code == "Enter" &&
+    settingsHTML.style.display === "none" &&
+    state.finishedGame
+  ) {
     deinit();
     return;
   }
@@ -344,6 +375,9 @@ document.addEventListener("keyup", e => {
 
 deinit();
 regionListHTML.innerHTML = regionList()
-  .map(region => `<div class="regionListItem" onclick="setRegion('${region}'); init()"> ${region} </div>`)
+  .map(
+    (region) =>
+      `<div class="regionListItem" onclick="setRegion('${region}'); init()"> ${region} </div>`
+  )
   .sort()
   .join("");

game_styles.css

@@ -8,27 +8,39 @@
 }
 
 input {
-	font-family: inherit
+  font-family: inherit;
 }
 
 .correct {
-	animation: correct .5s;
+  animation: correct 0.5s;
 }
 
 .incorrect {
-	animation: incorrect .5s;
+  animation: incorrect 0.5s;
 }
 
 @keyframes correct {
-	0%   { background: var(--default-bg); }
+  0% {
-	50%  { background: var(--green); }
+    background: var(--default-bg);
-	100% { background: var(--default-bg); }
+  }
+  50% {
+    background: var(--green);
+  }
+  100% {
+    background: var(--default-bg);
+  }
 }
 
 @keyframes incorrect {
-	0%   { background: var(--default-bg); }
+  0% {
-	50%  { background: var(--red); }
+    background: var(--default-bg);
-	100% { background: var(--default-bg); }
+  }
+  50% {
+    background: var(--red);
+  }
+  100% {
+    background: var(--default-bg);
+  }
 }
 
 #toprow {
@@ -76,7 +88,9 @@ input {
   margin: 0 0.5em 0 0.5em;
 }
 
-#previousQuestionAnswer { background: var(--green) }
+#previousQuestionAnswer {
+  background: var(--green);
+}
 
 #game .answer {
   display: flex;
@@ -125,7 +139,7 @@ span#questionCapital {
 }
 
 #settings {
-	width: 100% 
+  width: 100%;
 }
 
 #regionList {
@@ -167,8 +181,8 @@ span#questionCapital {
   right: 0;
   bottom: 0;
   background-color: var(--question-country-color);
-  -webkit-transition: .4s;
+  -webkit-transition: 0.4s;
-  transition: .4s;
+  transition: 0.4s;
 }
 
 .slider:before {
@@ -179,8 +193,8 @@ span#questionCapital {
   left: 4px;
   bottom: 4px;
   background-color: white;
-  -webkit-transition: .4s;
+  -webkit-transition: 0.4s;
-  transition: .4s;
+  transition: 0.4s;
 }
 
 input:checked + .slider {
@@ -211,13 +225,18 @@ input:checked + .slider:before {
   width: 100%;
   align-items: center;
   justify-content: space-around;
-	margin-top: 3em;;
+  margin-top: 3em;
-	margin-bottom: 3em;;
+  margin-bottom: 3em;
 }
 
-.text img, td img { max-height: 15vh }
+.text img,
+td img {
+  max-height: 15vh;
+}
 
-#questionTypeSelector input[type="radio"] { display: none; }
+#questionTypeSelector input[type="radio"] {
+  display: none;
+}
 input[type="radio"] + label {
   padding: 0.5em;
 }

index.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
+    <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="game">
       <div id="toprow">
         <p id="question">you need javascript enabled to play this</p>
         <div id="gameinfo">
@@ -21,16 +20,37 @@
       <div style="display: none" id="settings">
         <div id="regionList"></div>
         <div id="questionTypeSelector">
-			<input type="radio" name="questionMode" value="capital" id="questionTypeCapital" checked>
+          <input
+            type="radio"
+            name="questionMode"
+            value="capital"
+            id="questionTypeCapital"
+            checked
+          />
           <label for="questionTypeCapital">capital</label>
 
-			<input type="radio" name="questionMode" value="country" id="questionTypeCountry">
+          <input
+            type="radio"
+            name="questionMode"
+            value="country"
+            id="questionTypeCountry"
+          />
           <label for="questionTypeCountry">country</label>
 
-			<input type="radio" name="questionMode" value="flag" id="questionTypeFlag">
+          <input
+            type="radio"
+            name="questionMode"
+            value="flag"
+            id="questionTypeFlag"
+          />
           <label for="questionTypeFlag">flag</label>
 
-			<input type="radio" name="questionMode" value="reverseflag" id="questionTypeReverseFlag">
+          <input
+            type="radio"
+            name="questionMode"
+            value="reverseflag"
+            id="questionTypeReverseFlag"
+          />
           <label for="questionTypeReverseFlag">reverseflag</label>
         </div>
       </div>
@@ -51,7 +71,10 @@
           <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>
+        <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>
@@ -65,8 +88,12 @@
         <table id="correctAnswersTable"></table>
       </div>
     </div>
-<p> built with ❤ and adequate amounts of care by <a href="https://alra.uk">alv</a></p>
+    <p>
+      built with ❤ and adequate amounts of care by
+      <a href="https://alra.uk">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>