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

View File

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

View File

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

View File

@ -1,29 +1,36 @@
.game .game
.game-map-step .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-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="/dist/leaflet/leaflet.css")
link(rel="stylesheet" href="/stylesheets/spinner.css") link(rel="stylesheet" href="/stylesheets/spinner.css")
script(src="/dist/leaflet/leaflet.js") script(src="/dist/leaflet/leaflet.js")

View File

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