127 lines
4.0 KiB
JavaScript
Executable File
127 lines
4.0 KiB
JavaScript
Executable File
import { geolocationHandler, getCoordinates } from './map.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 gameQuizz = document.querySelector('.game-quizz');
|
|
let gameResultStep = document.querySelector('.game-results-step');
|
|
let gameLoading = document.querySelector('.game-loading');
|
|
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');
|
|
let mapButton = document.querySelector('.game-quizz .map-button');
|
|
let resultComName = document.querySelector('.game-results-step .species .com');
|
|
let resultSciName = document.querySelector('.game-results-step .species .sci');
|
|
|
|
let region = 'FR';
|
|
|
|
function returnToMap() {
|
|
gameMapStep.classList.remove("none");
|
|
gameQuizz.classList.add("none");
|
|
gameResultStep.classList.add("none");
|
|
}
|
|
|
|
function geolocationStep() {
|
|
if (map != undefined)
|
|
geolocationHandler();
|
|
if (startButton != undefined)
|
|
startButton.addEventListener('click', regionCoder);
|
|
}
|
|
|
|
function regionCoder() {
|
|
// Start by disallowing geolocation step
|
|
gameMapStep.classList.add('none');
|
|
// Retrieve coordinates from former done geolocation (TODO: fix the need of cookie)
|
|
const coordinates = getCoordinates();
|
|
let [lat, lon] = coordinates;
|
|
client.getRegion(lat, lon).then(data => {
|
|
region = data.region;
|
|
quizzStep();
|
|
});
|
|
}
|
|
|
|
function quizzStep() {
|
|
gameQuizz.classList.remove("none");
|
|
gameLoading.classList.remove("none");
|
|
audio.classList.add("none");
|
|
client.getQuizz(region)
|
|
.then(quizz => {
|
|
gameLoading.classList.add("none");
|
|
displayQuizz(quizz);
|
|
}).catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
|
|
function displayQuizz(quizz) {
|
|
if (quizz.audio == undefined) {
|
|
quizzStep();
|
|
return;
|
|
}
|
|
audio.src = quizz.audio;
|
|
audio.classList.remove("none"); // Display the audio controls
|
|
gameQuizzStep.classList.remove("none");
|
|
// 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');
|
|
button.classList.add('proposal-button');
|
|
button.classList.add('button');
|
|
button.value = sp.speciesCode;
|
|
button.innerHTML = `${sp.comName} (<i>${sp.sciName}</i>)`;
|
|
proposal.appendChild(button);
|
|
proposals.appendChild(proposal);
|
|
button.addEventListener('click', verifyAnswer);
|
|
});
|
|
}
|
|
|
|
function verifyAnswer(event) {
|
|
let answer = event.target.value;
|
|
console.log(answer);
|
|
audio.pause();
|
|
client.checkAnswer(answer)
|
|
.then(data => {
|
|
let message_class;
|
|
if (data.correct)
|
|
message_class = 'success';
|
|
else
|
|
message_class = 'error';
|
|
displayResult(message_class, data.message, data.answer);
|
|
}).catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
restartButton.addEventListener('click', restart);
|
|
mapButton.addEventListener('click', returnToMap);
|
|
|
|
function displayResult(message_class, message, species) {
|
|
gameQuizzStep.classList.toggle('none');
|
|
result.classList.remove('success', 'error');
|
|
result.classList.add(message_class);
|
|
result.innerText = message;
|
|
gameResultStep.classList.remove('none');
|
|
resultComName.innerText = species.comName;
|
|
resultSciName.innerText = species.sciName;
|
|
}
|
|
|
|
function restart() {
|
|
gameResultStep.classList.add("none");
|
|
gameMapStep.classList.add("none");
|
|
quizzStep();
|
|
}
|
|
|
|
function game() {
|
|
geolocationStep();
|
|
}
|
|
|
|
game(); |