feat : chronomètre

1 year ago · ea4b0bbae4
parent 7a05adf1e7
commit ea4b0bbae4
2 changed files with 41 additions and 1 deletions
--- a/Website/js/scriptChrono.js
+++ b/Website/js/scriptChrono.js
@ -0,0 +1,28 @@
+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 mettreAJourAiguille(timestamp) {
+        if (!debutAnimation) {
+            debutAnimation = timestamp;
+        }
+    const tempsEcoule = timestamp - debutAnimation;
+    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 {
+        // Le temps est écoulé, affichez un message
+        console.log("Le timer est à zéro !");
+        // action à foutre à la fin du timer
+    }
+}
+requestAnimationFrame(mettreAJourAiguille);
--- a/Website/templates/solo.twig
+++ b/Website/templates/solo.twig
@ -18,7 +18,18 @@
    </style>
 </head>

-<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));" class="col my-auto">
+<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));" >
+    
+    <div id="chrono" class="container mx-5 my-4 position-relative" style="width: 120px; height: 120px; border-radius: 50%; background: red; border: solid white; display: flex; align-items: center; justify-content: center;left:5%">
+        <div id="centre" style="height: 10px; width: 10px; border-radius: 50%; background: white; position: absolute; z-index: 2;"></div>
+        <div id="aiguille-container" style="position: absolute; top: 2px; height: 58px; width: 3px;">
+            <div id="aiguille" class="aiguille" style="height: 100%; background: red; transform-origin: center bottom; transform: rotate(0deg);"></div>
+        </div>
+        <div id="fond" style="position: absolute; width: 120px; height: 120px;border: solid white;display: flex; align-items: center; justify-content: center; background: conic-gradient(red 0%, red 0deg, #4b4b4b 0deg, #4b4b4b 360deg);border-radius:50%;"></div>
+    </div>
+
+    <script src="js/scriptChrono.js"></script>
+    
    <div class="container text-center">
        <div class="container text-center text-white border border-white rounded mt-5">
            <p class="fs-2">
@ -55,4 +66,5 @@
            </div>
        </div>
    </div>
+    
 </body>