Improved slightly the language selector

locales/en.json

@@ -14,5 +14,7 @@
 	"Author": "Author",
 	"The project is made with ♥ by Samuel Ortion.": "The project is made with ♥ by Samuel Ortion.",
 	"Correct!": "Correct!",
-	"Set": "Set"
+	"Set": "Set",
+	"Play the quizz": "Play the quizz",
+	"About this game": "About this game"
 }

public/javascripts/game.js

@@ -21,6 +21,7 @@ let region = 'FR';
 function returnToMap() {
     gameMapStep.classList.remove("none");
     gameQuizz.classList.add("none");
+    gameResultStep.classList.add("none");
 }
 
 function geolocationStep() {
@@ -64,7 +65,7 @@ function displayQuizz(quizz) {
     audio.src = quizz.audio;
     audio.classList.remove("none"); // Display the audio controls
     gameQuizzStep.classList.remove("none");
-    audio.play();
+    // audio.play();
     proposals.innerHTML = "";
     quizz.species.forEach(sp => {
         if (sp.speciesCode == undefined) {
@@ -114,8 +115,7 @@ function displayResult(message_class, message, species) {
 }
 
 function restart() {
-    // window.location.reload();
-    document.querySelector('.game-results-step').classList.add("none");
+    gameResultStep.classList.add("none");
     gameMapStep.classList.add("none");
     quizzStep();
 }

public/javascripts/lang.js

@@ -1,6 +1,15 @@
 let languageSelectorButton = document.getElementById('language-selector-button');
 let languageSelector = document.getElementById('language-selector');
-languageSelectorButton.addEventListener('click', function () {
+let selecting = false;
+function update() {
     let code = languageSelector.value;
     window.location = '/' + code;
-});
+}
+languageSelector.addEventListener('click', function() {
+    if (selecting) {
+        update();
+        selecting = false;
+    } else {
+        selecting = true;
+    }
+});

public/stylesheets/style.css

@@ -508,6 +508,21 @@ h1 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
+.nav-item {
+  display: flex;
+  align-self: center;
+  padding: 0.5rem;
+}
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 768px) {
+
+  .menu {
+    flex-direction: row;
+  }
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -564,9 +579,6 @@ h1 {
 .flex-col {
   flex-direction: column;
 }
-.justify-evenly {
-  justify-content: space-evenly;
-}
 .rounded-\[7px\] {
   border-radius: 7px;
 }

public/stylesheets/tailwind.css

@@ -15,4 +15,12 @@
     .button {
         @apply text-white font-bold py-2 px-4 m-2 rounded bg-green-500 hover:bg-green-700;
     }
+
+    .nav-item {
+        @apply flex flex self-center p-2;
+    }
+
+    .menu {
+        @apply flex flex-col md:flex-row;
+    }
 }

views/lang.pug

@@ -8,4 +8,4 @@
         option.pointer-events-none.absolute.left-0.flex.h-full.w-full.select-none.font-normal.leading-tight.text-blue-gray-400.transition-all(class="before:content[' '] after:content[' '] -top-1.5 text-[11px] before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500" value=code selected=selected) #{ language }
     label.pointer-events-none.absolute.left-0.flex.h-full.w-full.select-none.font-normal.leading-tight.text-blue-gray-400.transition-all(class="before:content[' '] after:content[' '] -top-1.5 text-[11px] before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500")
       | #{ __('Language') }
-  button#language-selector-button.p-1.btn #{ __('Set language') }
+  //- button#language-selector-button.p-1.btn.button.secondary-button #{ __('Set language') }

views/layout.pug

@@ -10,14 +10,14 @@ html
     body
         .flex.flex-col.min-h-screen
             .flex-1.p-5
-                nav(role="navigation")
-                    - var i18n_prefix = locale ? '/' + locale : ''
-                    ul.flex.flex-row.text-center.justify-evenly
-                        li
+                .menu
+                    nav(role="navigation").flex.flex-row
+                        - var i18n_prefix = locale ? '/' + locale : ''
+                        span.nav-item
                             a(href=`${i18n_prefix}/` title=__('Play the quizz')) #{ __('Game') }
-                        li
+                        span.nav-item
                             a(href=`${i18n_prefix}/about` title=__('About this game')) #{ __('About') }
-                        include lang.pug
+                    include lang.pug
                 header
                     h1= title
                 main