sortion/soundbirder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Avoid DOM queries

Browse Source
This commit is contained in:
Samuel Ortion 2024-01-06 23:29:38 +01:00
parent fdb868414a
commit 07a42f4d8d
2 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/javascripts/game.js
View File

@ -1,23 +1,34 @@
import { geolocationHandler, getCoordinates } from './map.js'; import { geolocationHandler, getCoordinates } from './map.js';
import client from './api-client.js'; import client from './api-client.js';
let map = document.getElementById('map');
let startButton = document.querySelector('.game .start-button');
let gameMapStep = document.querySelector('.game-map-step');
let gameQuizzStep = document.querySelector('.game-quizz-step');
let gameResultStep = document.querySelector('.game-results-step');
let audio = document.querySelector('.game-quizz-step audio');
let proposals = document.querySelector('.game-quizz-step .proposals');
let result = document.querySelector('.game-results-step .message');
let restartButton = document.querySelector('.game-results-step .restart-button');
let resultComName = document.querySelector('.game-results-step .species .com');
let resultSciName = document.querySelector('.game-results-step .species .sci');
const API_VERSION = "0"; const API_VERSION = "0";
function geolocationStep() { function geolocationStep() {
if (document.getElementById('map') != undefined) if (map != undefined)
geolocationHandler(); geolocationHandler();
let start_button = document.querySelector('.game .start-button'); if (startButton != undefined)
if (start_button != undefined) startButton.addEventListener('click', quizzStep);
start_button.addEventListener('click', quizzStep);
} }
const REGION = "FR"; const REGION = "FR";
function quizzStep() { function quizzStep() {
// Start by disallowing geolocation step // Start by disallowing geolocation step
document.querySelector('.game-map-step').classList.toggle('none'); gameMapStep.classList.add('none');
// Then allow the quizz step // Then allow the quizz step
document.querySelector('.game-quizz-step').classList.remove('none'); gameQuizzStep.classList.remove('none');
// Retrieve coordinates from former done geolocation (TODO: fix the need of cookie) // Retrieve coordinates from former done geolocation (TODO: fix the need of cookie)
// const coordinates = getCoordinates(); // const coordinates = getCoordinates();
@ -32,11 +43,12 @@ function quizzStep() {
}); });
} }
function displayQuizz(quizz) { function displayQuizz(quizz) {
let audio = document.querySelector('.game-quizz-step audiow');
audio.src = quizz.audio; audio.src = quizz.audio;
audio.classList.remove("none"); // Display the audio controls
audio.play(); audio.play();
let proposals = document.querySelector('.game-quizz-step .proposals'); proposals.innerHTML = "";
quizz.species.forEach(sp => { quizz.species.forEach(sp => {
let proposal = document.createElement('li'); let proposal = document.createElement('li');
proposal.classList.add('proposal'); proposal.classList.add('proposal');
@ -44,14 +56,16 @@ function displayQuizz(quizz) {
button.classList.add('proposal-button'); button.classList.add('proposal-button');
button.classList.add('button'); button.classList.add('button');
button.value = sp.speciesCode; button.value = sp.speciesCode;
button.innerText = sp.comName; button.innerHTML = `${sp.comName} (<i>${sp.sciName}</i>)`;
proposal.appendChild(button); proposal.appendChild(button);
proposals.appendChild(proposal); proposals.appendChild(proposal);
button.addEventListener('click', verifyAnswer); button.addEventListener('click', verifyAnswer);
}); });
} }
function verifyAnswer(event) { function verifyAnswer(event) {
let answer = event.target.value; let answer = event.target.value;
audio.pause();
client.checkAnswer(answer) client.checkAnswer(answer)
.then(data => { .then(data => {
let message_class; let message_class;
@ -64,21 +78,24 @@ function verifyAnswer(event) {
console.log(error); console.log(error);
}); });
} }
restartButton.addEventListener('click', restart);
function displayResult(message_class, message, species) { function displayResult(message_class, message, species) {
let result = document.querySelector('.game-results-step .message'); gameQuizzStep.classList.toggle('none');
document.querySelector('.game-quizz-step').classList.toggle('none'); audio.classList.add("none");
result.classList.remove('success', 'error'); result.classList.remove('success', 'error');
result.classList.add(message_class); result.classList.add(message_class);
result.innerText = message; result.innerText = message;
document.querySelector('.game-results-step').classList.remove('none'); gameResultStep.classList.remove('none');
document.querySelector('.game-results-step .restart-button').addEventListener('click', restart); resultComName.innerText = species.comName;
document.querySelector('.game-results-step .species .com').innerText = species.comName; resultSciName.innerText = species.sciName;
document.querySelector('.game-results-step .species .sci').innerText = species.sciName;
} }
function restart() { function restart() {
window.location.reload(); // window.location.reload();
document.querySelector('.game-results-step').classList.add("none");
gameMapStep.classList.add("none");
quizzStep();
} }
function game() { function game() {

4
views/game.pug
View File

@ -6,8 +6,8 @@
button.button.start-button button.button.start-button
i(data-feather="play") i(data-feather="play")
.game-quizz-step.none .game-quizz-step.none
ul.proposals ul.proposals
audio(controls) audio(controls).none
.game-results-step.none .game-results-step.none
p.message p.message
.species.answer .species.answer