clean up some stuff

game.js

@@ -13,19 +13,19 @@ 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");
 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 timeHTML = document.getElementById("time");
 
 var gameTimeStartTime = 0;
 var gameTimeIntervalId = 0;
+var selectedRegion = null;
 const guessCountry = () => guessCheckboxHTML.checked;
 
-function updateTime() {
+const updateTime = () => {
     const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000)
         .toFixed(3);
     timeHTML.innerHTML = secondsPassed;
@@ -45,13 +45,13 @@ const getQuestionHTML = (state) => {
 const answer_list = () => Object.values(getMasterQuestionList()).map(item => item.answer);
 
 
-const regionList = [...new Set(Object.values(getMasterQuestionList()).map(item => item.region))]
+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();
 
-var questionList, selectorMatches, state;
+var questionList, state;
 
 var resultsChart = new Chart(
 	document.getElementById('resultsChart'),
@@ -79,12 +79,8 @@ var resultsChart = new Chart(
 // 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(getMasterQuestionList())
-        .filter(c => getMasterQuestionList()[c].region.match(regex) || getMasterQuestionList()[c].subregion.match(regex))
+        .filter(c => getMasterQuestionList()[c].region == selectedRegion || getMasterQuestionList()[c].subregion == selectedRegion)
         .sort(() => Math.random()-0.5);
 
     // set up state variable
@@ -120,13 +116,12 @@ function deinit() {
     answersHTML.style.display = "none";
     resultsHTML.style.display = "none";
     settingsHTML.style.display = "";
-    questionHTML.innerHTML = "tap here or press enter to start";
+    questionHTML.innerHTML = "capitals_quiz - select a region to start!";
     scoreHTML.innerHTML = "score";
     questionHTML.onclick = init;
     timeHTML.innerHTML = "time";
 
     questionList = null;
-    selectorMatches = []
     state = {
         "score": 0,
         "maxScore": 0,
@@ -237,7 +232,7 @@ function processClick(answer) {
     });
     state.userAnswer = null;
 
-    // change background color based on if answer was correct
+    // change background color based on if answer was correct for 500ms
     bodyHTML.classList.add(isAnswerCorrect ? "correct" : "incorrect")
     setTimeout(() => bodyHTML.classList = [], 500)
 
@@ -246,27 +241,11 @@ function processClick(answer) {
 }
 
 
-function setSelectorMatches(value){
+function setRegion(region) {
-    const regex = new RegExp(selectorHTML.value, "gi");
+    selectedRegion = region
-    selectorMatches = regionList
-            .filter(region => region.match(regex))
-    displaySelectorMatches();
 }
 
-
+// set up event listeners
-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));
@@ -284,17 +263,12 @@ document.addEventListener("keyup", e => {
     if (e.code == "Enter" && !state.startedGame) init();
 });
 
-selectorHTML.addEventListener("change", setSelectorMatches);
+// start game
-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();
+regionListHTML.innerHTML = regionList()
-setSelectorMatches();
+    .map(region => {
+        return `<div class="regionListItem" onclick="setRegion('${region}'); init()"> ${region} </div>`
+    })
+    .sort()
+    .join("");

game_styles.css

@@ -114,32 +114,22 @@ span#questionCapital {
 	background-color: var(--question-capital-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 {
+#regionList {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 }
 
-#settings .selector_result {
+#settings .regionListItem {
 	padding: 1em;
 	transition: 0.5s;
 }
 
-#settings .selector_result:hover {
+#settings .regionListItem:hover {
 	background: #d9d9d9;
 	color: black;
 }

index.html

@@ -12,15 +12,14 @@
 <body>
 <div id=game>
 	<div id="toprow">
-		<p onclick="init()" id="question">you need javascript enabled to play this</p>
+		<p id="question">you need javascript enabled to play this</p>
         <div id="gameinfo">
-        <p id="time">time</p>
+		<p id="time">time</p>
 		<p id="score">score</p>
         </div>
 	</div>
 	<div style="display: none" id="settings">
-		<input placeholder="select a region (tap or type to filter)" id="region_selector" type="text">
+		<div id="regionList"></div>
-		<div id="selector_results"></div>
 		<div id="questionTypeSelector" >
 		  <p>guess capital</p>
 		  <label class="switch">
@@ -62,7 +61,7 @@
 	</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="countries.js"></script>
 <script type="text/javascript" src="game.js"></script>
 </body>