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

@@ -24,3 +24,8 @@
         @apply flex flex-col md:flex-row;
     }
 }
+
+nav {
+    background-color: white;
+    opacity: 50%;
+}

views/game.pug

@@ -1,11 +1,16 @@
 .game
     .game-map-step
-        #map.h-100
+        .invit
+            #map
+        .controls
             button.button.geolocation-button(aria-label=__('Geolocalize yourself on the map'))  
                 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
+        .invit
             .game-loading 
                 <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                 <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
@@ -20,10 +25,12 @@
                             span.com
                             span.sci 
                 audio(controls).none
+        .controls
             button.button.restart-button(aria-label=__('Start a new quizz'))
                 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