diff --git a/locales/en.json b/locales/en.json index 9e26dfe..f47d960 100644 --- a/locales/en.json +++ b/locales/en.json @@ -1 +1,17 @@ -{} \ No newline at end of file +{ + "Game": "Game", + "About": "About", + "It was a": "It was a", + "Language": "Language", + "Submit": "Submit", + "Geolocalize yourself on the map": "Geolocalize yourself on the map", + "Start the game": "Start the game", + "Start a new quizz": "Start a new quizz", + "Return to the map": "Return to the map", + "Wrong!": "Wrong!", + "About SoundBirder": "About SoundBirder", + "SoundBirder is an open-source web application to learn bird song identification. It is based on bird records from Xeno-Canto and data from eBird.": "SoundBirder is an open-source web application to learn bird song identification. It is based on bird records from Xeno-Canto and data from eBird.", + "Author": "Author", + "The project is made with ♥ by Samuel Ortion.": "The project is made with ♥ by Samuel Ortion.", + "Correct!": "Correct!" +} \ No newline at end of file diff --git a/locales/fr.json b/locales/fr.json index a27adcc..19cf3ad 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -1,12 +1,18 @@ { - "Game": "Jeu", - "About": "À propos", - "Contact": "Contact", - "Author": "Auteur", - "The project is made with ♥ by Samuel Ortion": "Ce projet est fait avec ♥ par Samuel Ortion", - "Correct!": "Correct !", - "Wrong!": "Incorrect !", - "It was a": "C'était un", - "SoundBirder is an open-source web application to learn bird song identification. It is based on bird records from Xeno-Canto and data from eBird.": "SoundBirder est une application open-source pour apprendre les chant d'oiseaux. Elle est basée sur les enregistrements de Xeno-Canto et sur les données d'eBird", - "The project is made with ♥ by Samuel Ortion.": "Ce projet est fait avec ♥ par Samuel Ortion." + "Game": "Jeu", + "About": "À propos", + "Contact": "Contact", + "Author": "Auteur", + "The project is made with ♥ by Samuel Ortion": "Ce projet est fait avec ♥ par Samuel Ortion", + "Correct!": "Correct !", + "Wrong!": "Incorrect !", + "It was a": "C'était un", + "SoundBirder is an open-source web application to learn bird song identification. It is based on bird records from Xeno-Canto and data from eBird.": "SoundBirder est une application open-source pour apprendre les chant d'oiseaux. Elle est basée sur les enregistrements de Xeno-Canto et sur les données d'eBird", + "The project is made with ♥ by Samuel Ortion.": "Ce projet est fait avec ♥ par Samuel Ortion.", + "Language": "Language", + "Submit": "Submit", + "Geolocalize yourself on the map": "Geolocalize yourself on the map", + "Start the game": "Start the game", + "Start a new quizz": "Start a new quizz", + "Return to the map": "Return to the map" } \ No newline at end of file diff --git a/public/javascripts/game.js b/public/javascripts/game.js index 3a31ae3..bb1b30c 100755 --- a/public/javascripts/game.js +++ b/public/javascripts/game.js @@ -8,7 +8,7 @@ let gameQuizzStep = document.querySelector('.game-quizz-step'); let gameQuizz = document.querySelector('.game-quizz'); let gameResultStep = document.querySelector('.game-results-step'); let gameLoading = document.querySelector('.game-loading'); -let audio = document.querySelector('.game-quizz-step audio'); +let audio = document.querySelector('.game-audio audio'); let proposals = document.querySelector('.game-quizz-step .proposals'); let result = document.querySelector('.game-results-step .message'); let restartButton = document.querySelector('.game-quizz .restart-button'); @@ -45,6 +45,7 @@ function regionCoder() { function quizzStep() { gameQuizz.classList.remove("none"); gameLoading.classList.remove("none"); + audio.classList.add("none"); client.getQuizz(region) .then(quizz => { gameLoading.classList.add("none"); @@ -66,6 +67,10 @@ function displayQuizz(quizz) { audio.play(); proposals.innerHTML = ""; quizz.species.forEach(sp => { + if (sp.speciesCode == undefined) { + quizzStep(); + return + } let proposal = document.createElement('li'); proposal.classList.add('proposal'); let button = document.createElement('button'); @@ -81,6 +86,7 @@ function displayQuizz(quizz) { function verifyAnswer(event) { let answer = event.target.value; + console.log(answer); audio.pause(); client.checkAnswer(answer) .then(data => { @@ -99,7 +105,6 @@ mapButton.addEventListener('click', returnToMap); function displayResult(message_class, message, species) { gameQuizzStep.classList.toggle('none'); - audio.classList.add("none"); result.classList.remove('success', 'error'); result.classList.add(message_class); result.innerText = message; diff --git a/public/javascripts/lang.js b/public/javascripts/lang.js new file mode 100755 index 0000000..57e8226 --- /dev/null +++ b/public/javascripts/lang.js @@ -0,0 +1,6 @@ +let languageSelectorButton = document.getElementById('language-selector-button'); +let languageSelector = document.getElementById('language-selector'); +languageSelectorButton.addEventListener('click', function () { + let code = languageSelector.value; + window.location = '/' + code; +}); \ No newline at end of file diff --git a/views/game.pug b/views/game.pug index 99147f0..ce94d54 100755 --- a/views/game.pug +++ b/views/game.pug @@ -1,27 +1,28 @@ .game .game-map-step #map.h-100 - button.button.geolocation-button + button.button.geolocation-button(aria-label=__('Geolocalize yourself on the map')) i(data-feather="map-pin") - button.button.start-button + button.button.start-button(aria-label=__('Start the game')) i(data-feather="play") .game-quizz.none .game-loading - .game-quizz-step.none - ul.proposals + .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 - .game-results-step.none - p.message - .species.answer - p #{ __('It was a') } - span.com - span.sci - button.button.restart-button + button.button.restart-button(aria-label=__('Start a new quizz')) i(data-feather="repeat") - button.button.map-button + 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") diff --git a/views/lang.pug b/views/lang.pug new file mode 100644 index 0000000..ba40ad3 --- /dev/null +++ b/views/lang.pug @@ -0,0 +1,10 @@ +- var languages = {en: "English", fr: "Français"} // , de: "Deutsch", es: "Español"} + +.flex.flex-row + .relative.h-10.w-10(class='min-w-[100px]') + select#language-selector.peer.h-full.w-full.border.border-blue-gray-200.border-t-transparent.bg-transparent.px-3.font-sans.text-sm.font-normal.text-blue-gray-700.outline.outline-0.transition-all(class='rounded-[7px] py-2.5 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 empty:!bg-gray-900 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50') + each language, code in languages + option.pointer-events-none.absolute.left-0.flex.h-full.w-full.select-none.font-normal.leading-tight.text-blue-gray-400.transition-all(class="before:content[' '] after:content[' '] -top-1.5 text-[11px] before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500" value=code) #{ language } + label.pointer-events-none.absolute.left-0.flex.h-full.w-full.select-none.font-normal.leading-tight.text-blue-gray-400.transition-all(class="before:content[' '] after:content[' '] -top-1.5 text-[11px] before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500") + | #{ __('Language') } + button#language-selector-button.p-1.btn #{ __('Submit') } diff --git a/views/layout.pug b/views/layout.pug index fe1ef6c..d8b3643 100755 --- a/views/layout.pug +++ b/views/layout.pug @@ -10,13 +10,14 @@ html body .flex.flex-col.min-h-screen .flex-1.p-5 - nav + nav(role="navigation") - var i18n_prefix = locale ? '/' + locale : '' ul.flex.flex-row.text-center.justify-evenly li a(href=`${i18n_prefix}/`) #{ __('Game') } li a(href=`${i18n_prefix}/about`) #{ __('About') } + include lang.pug header h1= title main @@ -29,4 +30,5 @@ html span.author a(href="https://samuel.ortion.fr" class="link") Samuel Ortion script(src="/javascripts/app.js" type="module") - script(src="/dist/feather/feather.min.js") \ No newline at end of file + script(src="/dist/feather/feather.min.js") + script(src="/javascripts/lang.js") \ No newline at end of file