add styling for timer

Makefile

@@ -1,7 +1,12 @@
 all: src/countries.js
 
-src/countries.js:
+countries:
+	git submodule init
+	git submodule update
+
+src/countries.js: countries
 	python scripts/generate_countries_list.py countries/countries.json > src/countries.js
 
 clean:
 	rm -rf src/countries.js
+	rm -rf countries

src/game.js

@@ -18,6 +18,16 @@ 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;
+
+function updateTime() {
+    const secondsPassed = ((new Date().getTime() - gameTimeStartTime.getTime())/1000)
+        .toFixed(3);
+    timeHTML.innerHTML = secondsPassed;
+}
 
 const capitals_list = Object.values(countries).map(country => country.capital);
 const regionList = [...new Set(Object.values(countries).map(country => country.region))]
@@ -83,17 +93,22 @@ function init() {
     // 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 = "tap here or press enter to start";
     scoreHTML.innerHTML = "score";
     questionHTML.onclick = init;
+    timeHTML.innerHTML = "time";
 
     questionList = null;
     selectorMatches = []
@@ -152,10 +167,13 @@ function updateScreen(){
     }
 }
 
+
 function displayEndScreen() {
-        questionHTML.innerHTML = "you did it! click here to restart";
-        answers.style.display = "none";
-        answers.style.display = "none";
+    questionHTML.innerHTML = "you did it! click here to restart";
+    answers.style.display = "none";
+    answers.style.display = "none";
+    
+    clearInterval(gameTimeIntervalId);
 
 	state.incorrectAnswers.forEach(ans => {
 		var tr = document.createElement('tr');
@@ -235,7 +253,6 @@ function setSelectorValue(value) {
     selectorHTML.value = value;
 }
 
-
 answerAHTML.addEventListener("click", () => processClick(0));
 answerBHTML.addEventListener("click", () => processClick(1));
 answerCHTML.addEventListener("click", () => processClick(2));

src/game_styles.css

@@ -49,6 +49,18 @@
 	background: var(--good);
 }
 
+#time {
+    background: var(--blue);
+}
+
+#gameinfo {
+    display: flex;
+}
+
+#gameinfo * {
+    margin: 0 0.5em 0 0.5em;
+}
+
 #previousQuestionAnswer { background: var(--green) }
 
 #game .answer {

src/index.html

@@ -13,7 +13,10 @@
 <div id=game>
 	<div id="toprow">
 		<p onclick="init()" 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">
 		<input placeholder="select a region (tap or type to filter)" id="region_selector" type="text">

src/styles.css

@@ -1,3 +1,5 @@
+@import url("https://alv.cx/styles.css");
+
 :root {
 	--default-bg: #fefefe;
 	--dark-bg: #b8b8b8;
@@ -32,35 +34,3 @@ body {
 	}
 }
 
-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;
-}