A more sticky control buttons and centered loading

This commit is contained in:
Samuel Ortion 2024-02-11 22:17:46 +01:00
parent c588768401
commit 17aaee56ad
7 changed files with 58 additions and 30 deletions

3
TODO Normal file
View File

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

View File

@ -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"
}

View File

@ -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);

View File

@ -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%);
}

View File

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

View File

@ -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")

View File

@ -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