improves mobile version, refactors

Author: Inventoris

source/data/signs.js source/data/questions.jssource/data/signs.js renamed to source/data/questions.js

@@ -1,4 +1,4 @@
-const signs = [
+const questions = [
   { img: "images/russian1.png", lang: "Russian", options: ["Russian", "Ukrainian", "Belarusian", "Bulgarian"] },
   { img: "images/russian2.png", lang: "Russian", options: ["Russian", "Ukrainian", "Belarusian", "Bulgarian"] },
   { img: "images/russian3.png", lang: "Russian", options: ["Russian", "Ukrainian", "Belarusian", "Bulgarian"] },

source/index.html

@@ -4,8 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="index, follow">
+  <meta property="og:title" content="whatlang — guess the language from a picture">
+  <meta property="og:description" content="Guess the language from street signs, store names and random inscriptions">
+  <meta property="og:image" content="https://whatlang.fun/opengraph-image.png">
+  <meta property="og:url" content="https://whatlang.fun/">
   <meta name="description" content="Guess the language from street signs, store names and random inscriptions">
   <title>whatlang — guess the language from a picture</title>
+  <link rel="canonical" href="https://whatlang.fun/">
   <link rel="icon" href="favicon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="styles.css">
 </head>
@@ -69,11 +74,11 @@ <h1 class="game__title">whatlang?</h1>
   <footer class="footer">
     <a class="footer__author" href="https://github.com/Inventoris" target="_blank">Alexey Nikitchenko</a>
     <p class="footer__inspired">
-      Inspired by <a href="https://openguessr.com/" target="_blank">OpenGuessr</a> and Web 1.0
+      Inspired by <a href="https://openguessr.com/" target="_blank">OpenGuessr</a> and&nbsp;Web&nbsp;1.0
     </p>
   </footer>
 
-  <script src="data/signs.js" defer></script>
+  <script src="data/questions.js" defer></script>
   <script src="script.js" defer></script>
 </body>
 </html>

source/opengraph-image.png

@@ -14,7 +14,7 @@ const roundsCounter = document.getElementById('rounds-counter');
 
 recordEl.value = record;
 
-let pool = [...signs].sort(() => Math.random() - 0.5);
+let pool = [...questions].sort(() => Math.random() - 0.5);
 let index = 0;
 
 
@@ -32,7 +32,7 @@ function restartGame() {
   roundsCounter.textContent = roundsLimit === 0 ? '∞' : `1 / ${roundsLimit}`;
 
   index = 0;
-  pool = [...signs].sort(() => Math.random() - 0.5);
+  pool = [...questions].sort(() => Math.random() - 0.5);
 
   showQuestion();
 }
@@ -47,6 +47,7 @@ function showQuestion() {
 
   while (true) {
     q = pool[index++];
+
     if (index >= pool.length) index = 0;
 
     if (!used.has(q.lang)) break;
@@ -113,6 +114,7 @@ nextBtn.onclick = () => {
 
     if (roundsLeft <= 0) {
       restartGame();
+
       return;
     }
   }

source/script.js

@@ -59,7 +59,6 @@ body {
   border: 2px inset #dfdfdf;
   border-radius: 0;
   display: inline-block;
-  vertical-align: middle;
 }
 
 .game-bar__rounds-select {
@@ -75,21 +74,13 @@ body {
 }
 
 .game__image {
-  width: 100%;
-  height: 380px;
+  aspect-ratio: 16 / 9;
+  height: auto;
   object-fit: cover;
   object-position: center;
   margin-bottom: 35px;
 }
 
-@media (max-width: 640px) {
-  .game__image { height: 300px; }
-}
-
-@media (max-width: 480px) {
-  .game__image { height: 260px; }
-}
-
 .game__answers {
   list-style: none;
   display: grid;
@@ -141,19 +132,28 @@ body {
   border-top: 3px double #000080;
   background: #f0f0f0;
   min-height: 64px;
-  flex-wrap: wrap;
   gap: 12px;
   visibility: hidden;
 }
 
+@media (max-width: 480px) {
+  .game__footer {
+    padding: 10px 16px;
+    border-width: 1px;
+  }
+}
+
 .game-footer__result {
   margin: 0;
   font-size: 1.3rem;
   font-weight: bold;
   color: #000080;
-  text-align: left;
-  flex: 1;
-  min-width: 200px;
+}
+
+@media (max-width: 480px) {
+  .game-footer__result {
+    font-size: 1.05rem;
+  }
 }
 
 .game-footer__next-button {
@@ -169,7 +169,7 @@ body {
 
 @media (max-width: 480px) {
   .game-footer__next-button {
-    font-size: 1.05rem;
+    font-size: 1rem;
     padding: 10px 28px;
     border-width: 1px;
   }
@@ -182,23 +182,6 @@ body {
   transform: translate(1px, 1px);
 }
 
-@media (max-width: 640px) {
-  .game__footer {
-    flex-direction: column;
-    text-align: center;
-    padding: 20px 12px;
-  }
-
-  .game-footer__result {
-    text-align: center;
-  }
-
-  .game-footer__next-button {
-    width: 100%;
-    max-width: 300px;
-  }
-}
-
 .footer {
   margin-top: 50px;
   padding-top: 30px;
@@ -218,15 +201,11 @@ body {
   text-decoration: underline;
 }
 
-.footer a:hover {
-  text-decoration: none;
-}
-
 .footer::after {
   content: "★";
   color: #ffff00;
   font-weight: 900;
-  text-shadow: 0 0 4px #000, 2px 2px 0 #000;
+  text-shadow: 0 0 4px #000000, 2px 2px 0 #000000;
   animation: blink 1.3s steps(2, start) infinite;
 }