From 07a42f4d8db4ca8bbee81f51ad8f6fe2ebefa5d9 Mon Sep 17 00:00:00 2001
From: Samuel Ortion <samuel+git@ortion.fr>
Date: Sat, 6 Jan 2024 23:29:38 +0100
Subject: [PATCH] fix: Avoid DOM queries

---
 public/javascripts/game.js | 49 +++++++++++++++++++++++++-------------
 views/game.pug             |  4 ++--
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/public/javascripts/game.js b/public/javascripts/game.js
index b726ee3..ee53c87 100755
--- a/public/javascripts/game.js
+++ b/public/javascripts/game.js
@@ -1,23 +1,34 @@
 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 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";
 
 function geolocationStep() {
-    if (document.getElementById('map') != undefined)
+    if (map != undefined)
         geolocationHandler();
-    let start_button = document.querySelector('.game .start-button');
-    if (start_button != undefined)
-        start_button.addEventListener('click', quizzStep);
+    if (startButton != undefined)
+        startButton.addEventListener('click', quizzStep);
 }
 
 const REGION = "FR";
 
 function quizzStep() {
     // Start by disallowing geolocation step
-    document.querySelector('.game-map-step').classList.toggle('none');
+    gameMapStep.classList.add('none');
     // 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)
     // const coordinates = getCoordinates();
@@ -32,11 +43,12 @@ function quizzStep() {
         });
 }
 
+
 function displayQuizz(quizz) {
-    let audio = document.querySelector('.game-quizz-step audiow');
     audio.src = quizz.audio;
+    audio.classList.remove("none"); // Display the audio controls
     audio.play();
-    let proposals = document.querySelector('.game-quizz-step .proposals');
+    proposals.innerHTML = "";
     quizz.species.forEach(sp => {
         let proposal = document.createElement('li');
         proposal.classList.add('proposal');
@@ -44,14 +56,16 @@ function displayQuizz(quizz) {
         button.classList.add('proposal-button');
         button.classList.add('button');
         button.value = sp.speciesCode;
-        button.innerText = sp.comName;
+        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;
+    audio.pause();
     client.checkAnswer(answer)
         .then(data => {
             let message_class;
@@ -64,21 +78,24 @@ function verifyAnswer(event) {
             console.log(error);
         });
 }
+restartButton.addEventListener('click', restart);
 
 function displayResult(message_class, message, species) {
-    let result = document.querySelector('.game-results-step .message');
-    document.querySelector('.game-quizz-step').classList.toggle('none');
+    gameQuizzStep.classList.toggle('none');
+    audio.classList.add("none");
     result.classList.remove('success', 'error');
     result.classList.add(message_class);
     result.innerText = message;
-    document.querySelector('.game-results-step').classList.remove('none');
-    document.querySelector('.game-results-step .restart-button').addEventListener('click', restart);
-    document.querySelector('.game-results-step .species .com').innerText = species.comName;
-    document.querySelector('.game-results-step .species .sci').innerText = species.sciName;
+    gameResultStep.classList.remove('none');
+    resultComName.innerText = species.comName;
+    resultSciName.innerText = species.sciName;
 }
 
 function restart() {
-    window.location.reload();
+    // window.location.reload();
+    document.querySelector('.game-results-step').classList.add("none");
+    gameMapStep.classList.add("none");
+    quizzStep();
 }
 
 function game() {
diff --git a/views/game.pug b/views/game.pug
index 47237d2..137031e 100755
--- a/views/game.pug
+++ b/views/game.pug
@@ -6,8 +6,8 @@
         button.button.start-button
             i(data-feather="play")
     .game-quizz-step.none
-        ul.proposals 
-        audio(controls)
+        ul.proposals
+        audio(controls).none
     .game-results-step.none
         p.message
         .species.answer