diff --git a/TODO b/TODO new file mode 100644 index 0000000..4cb712a --- /dev/null +++ b/TODO @@ -0,0 +1,3 @@ +- Add expert mode with typing autocompletion +- Generate a quizz of 10 question +- Add a more local species selector diff --git a/locales/en.json b/locales/en.json index ded0a4f..b606c8d 100644 --- a/locales/en.json +++ b/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" } \ No newline at end of file diff --git a/public/javascripts/map.js b/public/javascripts/map.js index aa62aa2..8839988 100755 --- a/public/javascripts/map.js +++ b/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: '© OpenStreetMap' }).addTo(map); diff --git a/public/stylesheets/game.css b/public/stylesheets/game.css index daf41d6..efa9f25 100755 --- a/public/stylesheets/game.css +++ b/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%); +} \ No newline at end of file diff --git a/public/stylesheets/tailwind.css b/public/stylesheets/tailwind.css index e6ae9ed..af30c39 100755 --- a/public/stylesheets/tailwind.css +++ b/public/stylesheets/tailwind.css @@ -23,4 +23,9 @@ .menu { @apply flex flex-col md:flex-row; } +} + +nav { + background-color: white; + opacity: 50%; } \ No newline at end of file diff --git a/views/game.pug b/views/game.pug index ce94d54..1babb33 100755 --- a/views/game.pug +++ b/views/game.pug @@ -1,29 +1,36 @@ .game .game-map-step - #map.h-100 - 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") + .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 - .game-loading - - - - .game-audio - .game-quizz-step.none - ul.proposals - .game-results-step.none - p.message - .species.answer - p #{ __('It was a') } - span.com - span.sci - audio(controls).none - 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") + .invit + .game-loading + + + + .game-audio + .game-quizz-step.none + ul.proposals + .game-results-step.none + p.message + .species.answer + p #{ __('It was a') } + 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") diff --git a/views/layout.pug b/views/layout.pug index 4728b12..4a1f651 100755 --- a/views/layout.pug +++ b/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