A more sticky control buttons and centered loading

TODO

@@ -0,0 +1,3 @@
+- Add expert mode with typing autocompletion
+- Generate a quizz of 10 question
+- Add a more local species selector

locales/en.json

@@ -16,5 +16,6 @@
 	"Correct!": "Correct!",
 	"Set": "Set",
 	"Play the quizz": "Play the quizz",
-	"About this game": "About this game"
+	"About this game": "About this game",
+	"Launch a quizz": "Launch a quizz"
 }

public/javascripts/map.js

@@ -6,7 +6,6 @@ function getCoordinates() {
     let lng = getCookie("lng");
     if (lat != undefined && lng != undefined) {
         location = [lat, lng];
-        console.log(`Got a previous geolocation cookie at ${location[0]}, ${location[1]}`)
     }
     return location;
 }
@@ -21,7 +20,7 @@ function geolocationHandler() {
     let location = getCoordinates();
     let message = document.querySelector('.message');
     // Init map
-    let map = L.map('map').setView(location, 15);
+    let map = L.map('map').setView(location, 5);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     }).addTo(map);

public/stylesheets/game.css

@@ -1,4 +1,8 @@
 
+header h1 {
+  margin-bottom: 1em;
+}
+
 .link {
   position: relative;
   display: inline-block;
@@ -29,10 +33,12 @@
 footer .link:after {
   border-bottom: 2px dotted white;
 }
-
-
 #map {
-  height: 50vh;
+  min-height: 60vh;
+}
+
+.invit {
+  min-height: 60vh;
 }
 
 
@@ -52,3 +58,10 @@ footer .link:after {
   margin: 1em 0;
 }
 
+.game-loading  {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%);
+}

public/stylesheets/tailwind.css

@@ -23,4 +23,9 @@
     .menu {
         @apply flex flex-col md:flex-row;
     }
+}
+
+nav {
+    background-color: white;
+    opacity: 50%;
 }

views/game.pug

@@ -1,29 +1,36 @@
 .game
     .game-map-step
-        #map.h-100
+        .invit
-        button.button.geolocation-button(aria-label=__('Geolocalize yourself on the map'))  
+            #map
-            i(data-feather="map-pin")
+        .controls
-        button.button.start-button(aria-label=__('Start the game'))
+            button.button.geolocation-button(aria-label=__('Geolocalize yourself on the map'))  
-            i(data-feather="play")
+                i(data-feather="map-pin")
+            button.button.start-button(aria-label=__('Start the game'))
+                i(data-feather="play")
+            button.button.quizz-start-button(aria-label=__('Launch a quizz'))
+                i(data-feather="clipboard")
     .game-quizz.none
-        .game-loading 
+        .invit
-            <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+            .game-loading 
-            <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+                <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-            </svg>
+                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
-        .game-audio
+                </svg>
-            .game-quizz-step.none
+            .game-audio
-                ul.proposals
+                .game-quizz-step.none
-            .game-results-step.none
+                    ul.proposals
-                p.message
+                .game-results-step.none
-                .species.answer 
+                    p.message
-                    p #{ __('It was a') } 
+                    .species.answer 
-                        span.com
+                        p #{ __('It was a') } 
-                        span.sci 
+                            span.com
-            audio(controls).none
+                            span.sci 
-        button.button.restart-button(aria-label=__('Start a new quizz'))
+                audio(controls).none
-            i(data-feather="repeat")
+        .controls
-        button.button.map-button(aria-label=__('Return to the map'))
+            button.button.restart-button(aria-label=__('Start a new quizz'))
-            i(data-feather="map")
+                i(data-feather="repeat")
+            button.button.map-button(aria-label=__('Return to the map'))
+                i(data-feather="map")
+        
     link(rel="stylesheet" href="/dist/leaflet/leaflet.css")
     link(rel="stylesheet" href="/stylesheets/spinner.css")
     script(src="/dist/leaflet/leaflet.js")

views/layout.pug

@@ -20,7 +20,7 @@ html
                     include lang.pug
                 header
                     h1= title
-                main 
+                main.flex-1 
                     block content
             footer.w-full.bg-black.text-white.text-center.p-5
                 .description