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>