improves mobile version, refactors

Author: Inventoris

source/data/signs.js

@@ -115,9 +115,9 @@ const signs = [
   { img: "images/hungarian2.png", lang: "Hungarian", options: ["Hungarian", "Finnish", "Estonian", "Romanian"] },
   { img: "images/hungarian3.png", lang: "Hungarian", options: ["Hungarian", "Finnish", "Estonian", "Romanian"] },
 
-  { img: "images/slovakian1.png", lang: "Slovak", options: ["Slovak", "Czech", "Polish", "Slovenian"] },
-  { img: "images/slovakian2.png", lang: "Slovak", options: ["Slovak", "Czech", "Polish", "Slovenian"] },
-  { img: "images/slovakian3.png", lang: "Slovak", options: ["Slovak", "Czech", "Polish", "Slovenian"] },
+  { img: "images/slovak1.png", lang: "Slovak", options: ["Slovak", "Czech", "Polish", "Slovenian"] },
+  { img: "images/slovak2.png", lang: "Slovak", options: ["Slovak", "Czech", "Polish", "Slovenian"] },
+  { img: "images/slovak3.png", lang: "Slovak", options: ["Slovak", "Czech", "Polish", "Slovenian"] },
 
   { img: "images/czech1.png", lang: "Czech", options: ["Czech", "Slovak", "Polish", "Slovenian"] },
   { img: "images/czech2.png", lang: "Czech", options: ["Czech", "Slovak", "Polish", "Slovenian"] },

source/images/slovakian1.png source/images/slovak1.pngsource/images/slovakian1.png renamed to source/images/slovak1.png

@@ -14,17 +14,21 @@
     <h1 class="game__title">whatlang?</h1>
 
     <!-- ============================================================ -->
-    <!-- Game bar: Score, Record, Rounds selector, Rounds counter -->
+    <!-- Game bar: Score, Record, Settings -->
     <!-- ============================================================ -->
     <div class="game__bar game-bar">
-      Score: <span id="score">0</span> • Record: <span id="record">0</span>
-      <select id="rounds-select" class="game-bar__rounds-select">
-        <option value="10">10 rounds</option>
-        <option value="20">20 rounds</option>
-        <option value="30">30 rounds</option>
-        <option value="0" selected>no limit</option>
-      </select>
-      <span id="rounds-counter" class="game-bar__rounds-counter">∞</span>
+      <div class="game-bar__points">
+        Score: <output id="score">0</output> • Record: <output id="record">0</output>
+      </div>
+      <div class="game-bar__settings">
+        <select id="rounds-select" class="game-bar__rounds-select">
+          <option value="10">10 rounds</option>
+          <option value="20">20 rounds</option>
+          <option value="30">30 rounds</option>
+          <option value="0" selected>no limit</option>
+        </select>
+        <span id="rounds-counter" class="game-bar__rounds-counter">∞</span>
+      </div>
     </div>
 
     <!-- ============================================================ -->

source/images/slovakian2.png source/images/slovak2.pngsource/images/slovakian2.png renamed to source/images/slovak2.png

@@ -12,7 +12,7 @@ const nextBtn = document.getElementById('next');
 const roundsSel = document.getElementById('rounds-select');
 const roundsCounter = document.getElementById('rounds-counter');
 
-recordEl.textContent = record;
+recordEl.value = record;
 
 let pool = [...signs].sort(() => Math.random() - 0.5);
 let index = 0;
@@ -24,7 +24,7 @@ let index = 0;
 function restartGame() {
   score = 0;
   used.clear();
-  scoreEl.textContent = 0;
+  scoreEl.value = 0;
 
   roundsLimit = parseInt(roundsSel.value, 10);
   roundsLeft = roundsLimit === 0 ? Infinity : roundsLimit;
@@ -77,18 +77,18 @@ function checkAnswer(ans, correct, btn) {
   if (ans === correct) {
     score++;
     used.add(correct);
-    scoreEl.textContent = score;
+    scoreEl.value = score;
     btn.classList.add('correct');
     resultEl.textContent = 'Correct!';
 
     if (score > record) {
       record = score;
-      recordEl.textContent = record;
+      recordEl.value = record;
       localStorage.setItem('whatlangRecord', record);
     }
   } else {
     score = 0;
-    scoreEl.textContent = 0;
+    scoreEl.value = 0;
     btn.classList.add('wrong');
     resultEl.innerHTML = `Wrong<br>This is <strong>${correct}</strong>`;
 

source/images/slovakian3.png source/images/slovak3.pngsource/images/slovakian3.png renamed to source/images/slovak3.png

@@ -33,10 +33,20 @@ body {
 }
 
 .game__bar {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
   font-size: 1.1rem;
-  margin-bottom: 35px;
   color: #333333;
+  margin-bottom: 35px;
+}
+
+@media (max-width: 480px) {
+  .game__bar {
+    font-size: 1.15rem;
+    flex-direction: column;
+  }
 }
 
 .game-bar__rounds-select,
@@ -47,9 +57,9 @@ body {
   padding: 0 8px;
   line-height: 26px;
   border: 2px inset #dfdfdf;
+  border-radius: 0;
   display: inline-block;
   vertical-align: middle;
-  box-sizing: border-box;
 }
 
 .game-bar__rounds-select {
@@ -96,6 +106,15 @@ body {
   border: 2px solid #000000;
   cursor: pointer;
   font-family: inherit;
+  appearance: none;
+}
+
+@media (max-width: 480px) {
+  .game-answers__answer {
+    font-size: 1rem;
+    padding: 12px 10px;
+    border-width: 1px;
+  }
 }
 
 .game-answers__answer:hover {
@@ -147,6 +166,14 @@ body {
   margin: 0;
 }
 
+@media (max-width: 480px) {
+  .game-footer__next-button {
+    font-size: 1.05rem;
+    padding: 10px 28px;
+    border-width: 1px;
+  }
+}
+
 .game-footer__next-button:hover,
 .game-footer__next-button:active {
   background: #000000;