diff --git a/locales/en.json b/locales/en.json index bf04e7b..ded0a4f 100644 --- a/locales/en.json +++ b/locales/en.json @@ -14,5 +14,7 @@ "Author": "Author", "The project is made with ♥ by Samuel Ortion.": "The project is made with ♥ by Samuel Ortion.", "Correct!": "Correct!", - "Set": "Set" + "Set": "Set", + "Play the quizz": "Play the quizz", + "About this game": "About this game" } \ No newline at end of file diff --git a/public/javascripts/game.js b/public/javascripts/game.js index bb1b30c..e2c9fe3 100755 --- a/public/javascripts/game.js +++ b/public/javascripts/game.js @@ -21,6 +21,7 @@ let region = 'FR'; function returnToMap() { gameMapStep.classList.remove("none"); gameQuizz.classList.add("none"); + gameResultStep.classList.add("none"); } function geolocationStep() { @@ -64,7 +65,7 @@ function displayQuizz(quizz) { audio.src = quizz.audio; audio.classList.remove("none"); // Display the audio controls gameQuizzStep.classList.remove("none"); - audio.play(); + // audio.play(); proposals.innerHTML = ""; quizz.species.forEach(sp => { if (sp.speciesCode == undefined) { @@ -114,8 +115,7 @@ function displayResult(message_class, message, species) { } function restart() { - // window.location.reload(); - document.querySelector('.game-results-step').classList.add("none"); + gameResultStep.classList.add("none"); gameMapStep.classList.add("none"); quizzStep(); } diff --git a/public/javascripts/lang.js b/public/javascripts/lang.js index 57e8226..a5b2050 100755 --- a/public/javascripts/lang.js +++ b/public/javascripts/lang.js @@ -1,6 +1,15 @@ let languageSelectorButton = document.getElementById('language-selector-button'); let languageSelector = document.getElementById('language-selector'); -languageSelectorButton.addEventListener('click', function () { +let selecting = false; +function update() { let code = languageSelector.value; window.location = '/' + code; -}); \ No newline at end of file +} +languageSelector.addEventListener('click', function() { + if (selecting) { + update(); + selecting = false; + } else { + selecting = true; + } +}); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 6c83eb9..1a6a3a6 100755 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -508,6 +508,21 @@ h1 { --tw-bg-opacity: 1; background-color: rgb(21 128 61 / var(--tw-bg-opacity)); } +.nav-item { + display: flex; + align-self: center; + padding: 0.5rem; +} +.menu { + display: flex; + flex-direction: column; +} +@media (min-width: 768px) { + + .menu { + flex-direction: row; + } +} .pointer-events-none { pointer-events: none; } @@ -564,9 +579,6 @@ h1 { .flex-col { flex-direction: column; } -.justify-evenly { - justify-content: space-evenly; -} .rounded-\[7px\] { border-radius: 7px; } diff --git a/public/stylesheets/tailwind.css b/public/stylesheets/tailwind.css index 4fee564..e6ae9ed 100755 --- a/public/stylesheets/tailwind.css +++ b/public/stylesheets/tailwind.css @@ -15,4 +15,12 @@ .button { @apply text-white font-bold py-2 px-4 m-2 rounded bg-green-500 hover:bg-green-700; } + + .nav-item { + @apply flex flex self-center p-2; + } + + .menu { + @apply flex flex-col md:flex-row; + } } \ No newline at end of file diff --git a/views/lang.pug b/views/lang.pug index bc570c2..2474887 100755 --- a/views/lang.pug +++ b/views/lang.pug @@ -8,4 +8,4 @@ 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 selected=selected) #{ 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 #{ __('Set language') } + //- button#language-selector-button.p-1.btn.button.secondary-button #{ __('Set language') } diff --git a/views/layout.pug b/views/layout.pug index 3f84501..4728b12 100755 --- a/views/layout.pug +++ b/views/layout.pug @@ -10,14 +10,14 @@ html body .flex.flex-col.min-h-screen .flex-1.p-5 - nav(role="navigation") - - var i18n_prefix = locale ? '/' + locale : '' - ul.flex.flex-row.text-center.justify-evenly - li + .menu + nav(role="navigation").flex.flex-row + - var i18n_prefix = locale ? '/' + locale : '' + span.nav-item a(href=`${i18n_prefix}/` title=__('Play the quizz')) #{ __('Game') } - li + span.nav-item a(href=`${i18n_prefix}/about` title=__('About this game')) #{ __('About') } - include lang.pug + include lang.pug header h1= title main