feat : lien Chrono/ProgressBar

Website/css/progressBar.css

@@ -0,0 +1,9 @@
+.progress {
+    position: relative;
+}
+
+.progress img {
+    position: absolute;
+    height: 16px;
+    width: auto;
+}

Website/js/progressBar.js

@@ -0,0 +1,73 @@
+import { tempsExport } from "./scriptChrono.js";
+
+$(document).ready(function() {
+    var timerId, percent;
+    percent = 0;
+    var isPaused = false;
+
+    // reset progress bar
+    percent = 0;
+    //$('#test').attr('disabled', true);
+    $('#load').css('width', '0px');
+    $('#load').addClass('progress-bar-striped active');
+    $('#rocket').show();
+
+    timerId = setInterval(function() {
+        if(!isPaused){
+            // increment progress bar
+            percent += 1/12;
+            $('#load').css('width', percent + '%');
+            $('#load').html(percent + '%');
+            $('#rocket').css('left','calc('+percent+'% - 19px');
+            
+            if(percent>= 100){
+                clearInterval(timerId);
+                $('#load').removeClass('progress-bar-striped active');
+                $('#load').addClass('bg-danger');
+                $('#repondbien').attr('disabled', true);
+                $('#load').html('Finish');
+                $('#rocket').hide();
+            }
+        }
+    }, 250);
+
+    function wait(ms){
+        var start = new Date().getTime();
+        var end = start;
+        while(end < start + ms) {
+            end = new Date().getTime();
+        }
+    }
+    
+    $('#repondbien').click(function() {
+        if (tempsExport <= 6000) {
+            percent += 12;
+        } else if (tempsExport > 6000 && tempsExport <= 12000) {
+            percent += 11;
+        } else if (tempsExport > 12000 && tempsExport <= 18000) {
+            percent += 10;
+        } else if (tempsExport > 18000 && tempsExport <= 24000) {
+            percent += 9;
+        } else {
+            percent += 8;
+        }
+        $('#repondbien').attr('disabled', false);
+        $('#load').css('width', '0px');
+        $('#load').addClass('progress-bar-striped active');
+        $('#load').removeClass('bg-danger');
+        $('#load').css('width', percent + '%');
+        $('#load').html(percent + '%');
+        
+    })
+
+    $('#repondmal').click(function() {
+        isPaused = true;
+        $('#repondmal').attr('disabled', false);
+        //$('#load').css('width', percent+'px');
+        $('#load').addClass('progress-bar-striped active');
+        $('#load').removeClass('bg-danger');
+        wait(3000);
+        console.log("test");
+        isPaused = false;
+    })
+})

Website/js/scriptChrono.js

@@ -1,22 +1,28 @@
+let tempsExport = 0;
 const dureeQuiz = 30; // Durée du quiz en secondes
     const aiguilleElement = document.getElementById("aiguille");
     const fondElement = document.getElementById("fond");
     let tempsRestant = dureeQuiz;
     let debutAnimation;
     const animationDuration = 30 * 1000; // Durée de l'animation en millisecondes
+    
+
+    function mettreAJourTempsExport(newTemps) {
+        tempsExport = newTemps;
+    }
 
     function mettreAJourAiguille(timestamp) {
         if (!debutAnimation) {
             debutAnimation = timestamp;
         }
     const tempsEcoule = timestamp - debutAnimation;
+    mettreAJourTempsExport(tempsEcoule);
     const pourcentageTempsEcoule = tempsEcoule / animationDuration;
     const rotationDeg = pourcentageTempsEcoule * 360;
     aiguilleElement.style.transform = `rotate(${rotationDeg}deg)`;
     // Mettez à jour le fond en fonction de la position de l'aiguille
     fondElement.style.background = `conic-gradient(red 0%, red ${rotationDeg}deg, #4b4b4b ${rotationDeg}deg, #4b4b4b 360deg)`;
 
-
     if (tempsEcoule < animationDuration) {
         requestAnimationFrame(mettreAJourAiguille);
     } else {
@@ -25,4 +31,5 @@ const dureeQuiz = 30; // Durée du quiz en secondes
         // action à foutre à la fin du timer
     }
 }
-requestAnimationFrame(mettreAJourAiguille);
+requestAnimationFrame(mettreAJourAiguille);
+export {tempsExport};

Website/templates/multijoueur.twig

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="fr">
-<html>
+
 
 <head>
     <meta charset=utf-8>
     <title>Math'Educ</title>
     <link rel="stylesheet" href="css/global.css">
     <link rel="stylesheet" href="css/chrono.css">
+    <link rel="stylesheet" href="css/progressBar.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     
 </head>
@@ -19,8 +21,20 @@
         </div>
         <div id="fond"></div>
     </div>
-    <script src="js/scriptChrono.js"></script>
     
+    <div class="container py-3">
+            <div class="progress">
+                <div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="load" style="width:0%">
+                    
+                </div>
+                <img src="Media/rocket.png" id="rocket" style="left: 0px;">
+            </div>
+            
+            <button type="button" id="repondbien" class="btn btn-primary mt-2" autocomplete="off">OK</button>
+            <button type="button" id="repondmal" class="btn btn-danger mt-2" autocomplete="off">KO</button>
+    </div>
+    
+
     <div class="container text-center text-white">
         <div class="container border border-white rounded mt-5">
             <p class="fs-2">
@@ -69,4 +83,7 @@
             </div>
         </div>
     </div>
-</body>
+    <script type="module" src="js/scriptChrono.js"></script>
+    <script type="module" src="js/progressBar.js"></script>
+</body>
+<html>