Untitled

 avatar
unknown
plain_text
2 months ago
3.1 kB
4
Indexable
// Temps total (30 minutes) en secondes
const TOTAL_TIME = 30 * 60;
const LOCAL_STORAGE_KEY = "remainingTime";
const SESSION_STORAGE_KEY = "sessionStarted";

let remainingTime;

// Fonction pour charger le temps restant depuis Local Storage ou initialiser
function loadRemainingTime() {
    // Si la session a été démarrée, réinitialiser le chrono
    if (!sessionStorage.getItem(SESSION_STORAGE_KEY)) {
        sessionStorage.setItem(SESSION_STORAGE_KEY, "true");
        return TOTAL_TIME; // Réinitialiser à la valeur initiale
    }

    const storedTime = localStorage.getItem(LOCAL_STORAGE_KEY);
    if (storedTime) {
        const elapsedTime = Math.floor((Date.now() - JSON.parse(storedTime).timestamp) / 1000);
        const updatedRemainingTime = JSON.parse(storedTime).remainingTime - elapsedTime;

        // Si le temps est écoulé, démarrer à zéro
        return updatedRemainingTime > 0 ? updatedRemainingTime : 0;
    }
    return TOTAL_TIME; // Si rien n'est stocké, démarrer avec le temps total
}

// Fonction pour sauvegarder le temps restant dans Local Storage
function saveRemainingTime() {
    localStorage.setItem(
        LOCAL_STORAGE_KEY,
        JSON.stringify({
            remainingTime,
            timestamp: Date.now(),
        })
    );
}

// Initialiser le temps restant
remainingTime = loadRemainingTime();

// Sélection de l'élément timer et du cercle de progression
const timerElement = document.getElementById("timer");
const circleProgress = document.querySelector(".circle-progress");

// Vérification que l'élément existe
if (timerElement && circleProgress) {
    // Mettre à jour l'affichage du timer
    function updateTimer() {
        // Si le temps est écoulé, arrêter le chronomètre
        if (remainingTime <= 0) {
            clearInterval(timerInterval);
            timerElement.textContent = "00:00:00";
            circleProgress.style.strokeDashoffset = "0"; // Cercle entièrement rempli
            return;
        }

        // Calculer les minutes et secondes restantes
        const minutes = Math.floor(remainingTime / 60);
        const seconds = remainingTime % 60;

        // Formater les minutes et secondes en ajoutant des zéros au besoin
        const formattedMinutes = String(minutes).padStart(2, "0");
        const formattedSeconds = String(seconds).padStart(2, "0");

        // Mettre à jour l'affichage du timer
        timerElement.textContent = `00:${formattedMinutes}:${formattedSeconds}`;

        // Mettre à jour le cercle de progression
        const progress = (remainingTime / TOTAL_TIME) * 113; // Proportion du cercle
        circleProgress.style.strokeDashoffset = progress;

        // Sauvegarder le temps restant
        saveRemainingTime();

        // Décrémenter le temps restant
        remainingTime--;
    }

    // Mettre à jour le timer toutes les secondes
    const timerInterval = setInterval(updateTimer, 1000);

    // Initialiser l'affichage immédiatement
    updateTimer();
} else {
    console.error("Erreur : L'élément avec l'ID 'timer' ou le cercle de progression est introuvable dans le DOM.");
}
Editor is loading...
Leave a Comment