First Commit

static/js/games/bac-play.js

@@ -0,0 +1,161 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.querySelector('.container');
+    const gameId = container.dataset.gameId;
+    const players = document.querySelector('#playersList');
+    const countdownDisplay = document.querySelector('#countdownDisplay');
+    const buttonFinish = document.querySelector('#buttonFinish');
+    const playerId = buttonFinish.dataset.playerId;
+    const roundId = container.dataset.roundId;
+    
+    let countdownInterval = null;
+
+    /* Fonction pour récupérer les informations de la partie */
+    const fetchGameInfo = async () => {
+        try {
+            const response = await fetch(`/games/api/bac/${gameId}/info_party`);
+            const data = await response.json();
+
+            // Mise à jour de la liste des joueurs
+            players.innerHTML = "";
+            Object.values(data.players).forEach(player => {
+                const listItem = document.createElement("li");
+                const status = player.status === "playing" ? '<i>En train de jouer...</i>' : 'A fini de jouer';
+                listItem.innerHTML = `${player.username} (${status})`;
+                players.appendChild(listItem);
+            });
+
+            const allPlayersOvered = data.players.every(player => player.status === "overed");
+
+            // Gestion du décompte
+            if (data.countdown_started && data.current_phase === "finish_game") {
+                if (!countdownInterval && data.countdown_time > 0) {
+                    startCountdown(data.countdown_time);
+                    countdownDisplay.style.display = "block"; // Affiche le décompte
+                } else if (data.countdown_time <= 0 || allPlayersOvered) {
+                    clearInterval(countdownInterval); // Arrête l'intervalle si actif
+                    countdownDisplay.style.display = "none"; // Cache le décompte
+                    stopGame();
+                }
+            }
+
+            // On vérifie que le joueur est bien la liste des joueurs et que son status est overed
+            console.log(data.players)
+            console.log(playerId)
+            const player = data.players.find(player => player.username === playerId);
+            console.log(player)
+            if(player && player.status === "overed") {
+                clearInterval(countdownInterval); // Arrête l'intervalle si actif
+                countdownDisplay.style.display = "none"; // Cache le décompte
+                buttonFinish.style.display = "none"; // Cache le bouton de fin de partie
+                document.querySelector('#textFinished').style.display = "block"; // Affiche le message de fin de partie    
+                // window.location.href = `/games/bac/party/${gameId}/results`;
+            } else {
+                console.log('Le joueur n\'a pas terminé la partie');
+            }
+        } catch (error) {
+            console.error("Erreur lors de la récupération des informations de la partie :", error);
+        }
+    };
+
+    /* Fonction pour démarrer le décompte */
+    const startCountdown = (initialTime) => {
+        console.log("Démarrage du décompte...");
+        let countdownTime = initialTime;
+
+        countdownInterval = setInterval(() => {
+            // Affichage du décompte
+            console.log(`Temps restant : ${countdownTime} seconde${countdownTime > 1 ? 's' : ''}`);
+            countdownTime--;
+            countdownDisplay.style.display = "block";
+            countdownDisplay.textContent = `Temps restant : ${countdownTime} seconde${countdownTime > 1 ? 's' : ''}`;
+
+            if (countdownTime <= 0) {
+                clearInterval(countdownInterval);
+                countdownDisplay.style.display = "none"; // Cache le décompte
+                buttonFinish.style.display = "none"; // Cache le bouton
+                stopGame();
+            }
+        }, 1000);
+    };
+
+    /* Fonction pour gérer la soumission du formulaire */
+    const handleFormSubmit = async (form) => {
+        try {
+            const formData = new FormData(form);
+            const response = await fetch(form.action, {
+                method: "POST",
+                body: formData,
+            });
+
+            if (response.ok) {
+                console.log("Formulaire soumis avec succès.");
+                buttonFinish.style.display = "none"; // Cache le bouton
+                document.querySelector('#textFinished').style.display = "block"; // Affiche le message
+                
+                // Lance le décompte pour tous les joueurs
+                const countdownResponse = await startCountdownForAllPlayers();
+                if (countdownResponse && countdownResponse.success) {
+                    await fetchGameInfo(); // Rafraîchit les informations
+                }
+            } else {
+                console.error("Erreur lors de la soumission du formulaire :", response.status);
+            }
+        } catch (error) {
+            console.error("Erreur réseau lors de la soumission du formulaire :", error);
+        }
+    };
+
+    /* Fonction pour informer le serveur de démarrer le décompte */
+    const startCountdownForAllPlayers = async () => {
+        console.log('On appelle l\'API pour lancer le décompte');
+        try {
+            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+            const response = await fetch(`/games/api/${gameId}/start_countdown?type=finish_game`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "X-CSRFToken": csrfToken,
+                },
+                body: JSON.stringify({})
+            });
+
+            const data = await response.json();
+            if (!response.ok) {
+                console.error("Erreur lors du démarrage du décompte :", response.status);
+                console.error("Détails de l'erreur:", data);
+            }
+            return data;
+        } catch (error) {
+            console.error("Erreur réseau lors du démarrage du décompte :", error);
+            return null;
+        }
+    };
+
+    /* Fonction pour gérer la fin de la partie */
+    const stopGame = async () => {
+        try {
+            const response = await fetch(`/games/api/bac/${gameId}/end_game`);
+            
+            if (response.ok) {
+                console.log('Partie terminée.');
+                window.location.href = `/games/bac/party/${gameId}/results`;
+            } else {
+                console.error("Erreur lors de la fin de la partie :", response.status);
+            }
+        } catch (error) {
+            console.error("Erreur réseau lors de la fin de la partie :", error);
+        }
+    };
+
+    /* Initialisation */
+    const form = document.querySelector('form');
+    if (form) {
+        form.addEventListener('submit', (e) => {
+            e.preventDefault(); // Empêche le rechargement de la page
+            handleFormSubmit(form);
+        });
+    }
+
+    fetchGameInfo();
+    setInterval(fetchGameInfo, 3000); // Vérifie les informations toutes les 3 secondes
+});

static/js/games/bac-results.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const players = document.querySelector('#playersList');
+    const gameId = document.querySelector(".container").dataset.gameId;
+
+    const fetchPlayersList = async () => {
+        try {
+            const response = await fetch(`/games/api/bac/${gameId}/players`);
+            const data = await response.json();
+
+            // Met à jour la liste des joueurs
+            players.innerHTML = "";
+            data.players.forEach(player => {
+                const listItem = document.createElement("li");
+                const status = player.status === "playing" ? '<i>En train de jouer...</i>' : 'A fini de jouer';
+                listItem.textContent = `${player.username} (${status})`;
+                players.appendChild(listItem);
+            });
+        } catch (error) {
+            console.error("Erreur lors de la récupération des joueurs :", error);
+        }
+    };
+
+    fetchPlayersList();
+});

static/js/games/bac-start.js

@@ -0,0 +1,112 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.querySelector('.container');
+    const gameId = document.querySelector(".container").dataset.gameId;
+    const playerId = document.querySelector('#playButton').dataset.playerId;
+    const players = document.querySelector('#playersList');
+    const playButton = document.querySelector('#playButton');
+
+    const infoNbPlayersReady = document.querySelector('#infoNbPlayersReady');
+    const readyCount = document.querySelector('#readyCount');
+
+    let countdownStarted = false;
+    let countdownInterval; 
+    let countdownIntervalStarted = false;
+
+    /* Fonction pour mettre à jour la liste des joueurs */
+    const fetchPlayersList = async () => {
+        try {
+            const response = await fetch(`/games/api/bac/${gameId}/players`);
+            const data = await response.json();
+
+            // Met à jour la liste des joueurs
+            players.innerHTML = "";
+            data.players.forEach(player => {
+                const listItem = document.createElement("li");
+                listItem.textContent = `${player.username}`;
+                players.appendChild(listItem);
+            });
+
+            // Met à jour le nombre de joueurs prêts
+            const gameInfo = await fetch(`/games/api/bac/${gameId}/info`);
+            const infoData = await gameInfo.json();
+            readyCount.textContent = infoData.all_ready;
+
+            // Affiche ou masque les messages en fonction du nombre de joueurs
+            playButton.style.display = data.players.length > 1 ? 'block' : 'none';
+            document.querySelector('#infoNbPlayersReady').style.display = data.players.length > 1 ? 'block' : 'none';
+            document.querySelector('#waitingPlayers').style.display = data.players.length > 1 ? 'none' : 'block';
+        } catch (error) {
+            console.error("Erreur lors de la récupération des joueurs :", error);
+        }
+    };
+
+    /* Fonction pour vérifier le décompte */
+    const checkCountdownStatus = async () => {
+        try {
+            const response = await fetch(`/games/api/${gameId}/countdown_status`);
+            const data = await response.json();
+    
+            console.log("Countdown status data:", data); // Vérification
+    
+            if (data.countdown_started && data.countdown_time > 0) {
+                const countdownElement = document.querySelector('#countdown') || document.createElement('p');
+                countdownElement.id = 'countdown';
+                countdownElement.className = 'countdown';
+                countdownElement.innerHTML = `La partie commence dans <strong>${data.countdown_time}</strong> seconde${data.countdown_time > 1 ? 's' : ''}...`;
+                container.appendChild(countdownElement);
+            }
+            
+            console.log(data)
+
+            if (data.countdown_started === true && data.countdown_time === 0) {
+                clearInterval(countdownInterval); // Arrête l'intervalle
+                window.location.href = `/games/bac/party/${gameId}/play`;
+            }
+        } catch (error) {
+            console.error("Erreur lors de la vérification du décompte :", error);
+        }
+    };
+
+    /* Fonction pour gérer le clic sur le bouton "Prêt" */
+    const toggleReadyStatus = async () => {
+        try {
+            const response = await fetch(`/games/api/bac/${gameId}/player/${playerId}/toggle_ready`);
+
+            if (response.ok) {
+                const data = await response.json();
+                playButton.textContent = data.is_ready ? "Pas prêt :(" : "Prêt :)";
+                playButton.className = data.is_ready ? "btn btn-warning btn-large" : "btn btn-default btn-large";
+
+                // Si tous les joueurs sont prêts et que le décompte n'a pas commencé
+                if (data.all_ready === players.childElementCount && !countdownStarted) {
+                    countdownStarted = true; // Empêche de redémarrer le décompte
+                    const response = await fetch(`/games/api/${gameId}/start_countdown?type=ready_game`);
+                    const countdownData = await response.json();
+
+                    if (countdownData.countdown_started) {
+                        console.log("Décompte démarré par le serveur.");
+                        startCountdownCheck(); // Commence à vérifier le décompte
+                    }
+                }
+            } else {
+                console.error("ERREUR API :", response.status);
+            }
+        } catch (error) {
+            console.error("Erreur lors du changement d'état :", error);
+        }
+    };
+
+    /* Fonction pour démarrer la vérification du décompte */
+    const startCountdownCheck = () => {
+        if (!countdownIntervalStarted) {
+            countdownIntervalStarted = true;
+            countdownInterval = setInterval(checkCountdownStatus, 1000);
+        }
+    };
+
+    /* INITIALISATION */
+    playButton.addEventListener('click', toggleReadyStatus);
+    fetchPlayersList();
+    setInterval(fetchPlayersList, 3000);
+    setInterval(checkCountdownStatus, 1000);
+});

static/js/games/bac-utils.js

@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const status = document.querySelector('#status');
+    /* Fonction pour vérifier le statut de la partie */
+    const updateStatus = () => {
+        const statuses = {
+            waiting: { text: 'En attente', style: 'color:orange;font-style:italic' },
+            in_progress: { text: 'En cours', style: 'color:green;font-style:italic' },
+            finished: { text: 'Terminée', style: 'color:red;font-style:italic' },
+        };
+
+        const currentStatus = statuses[status.textContent];
+        if (currentStatus) {
+            status.style = currentStatus.style;
+            status.textContent = currentStatus.text;
+        }
+    };
+    updateStatus();
+})

static/js/games/quiz.js

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const buttonAddResponse = document.querySelector('#add-response')
+    const buttonAddAsk = document.querySelector('#add-ask')
+    const divResponses = document.querySelector('#responses')
+    const divQuestions = document.querySelector('#questions')
+    let responses = 0;
+    let questions = 0;
+    
+    if (buttonAddResponse) {
+        buttonAddResponse.addEventListener('click', () => {
+            // Si on clique sur le bouton, on ajoute un champ de réponse
+            responses++;
+            const newResponse = document.createElement('div')
+            newResponse.classList.add('form-group')
+            newResponse.innerHTML = `
+                <input type="text" name="response-${responses}" class="form-control" placeholder="Réponse">
+            `
+            divResponses.appendChild(newResponse)
+        })
+    }
+
+    if (buttonAddAsk) {
+        buttonAddAsk.addEventListener('click', () => {
+            // Si on clique sur le bouton, on ajoute un champ de question
+            questions++;
+            const newAsk = document.createElement('div')
+            newAsk.classList.add('form-group')
+            newAsk.innerHTML = `
+                <input type="text" name="ask-${questions}" class="form-control" style="margin-bottom: 20px;" placeholder="Question">
+                <a class="btn btn-default btn-small add-response" data-question="${questions}">Ajouter une réponse</a>
+                <div class="responses" id="responses-${questions}"></div>
+            `
+            divQuestions.appendChild(newAsk)
+
+            const hr = document.createElement('hr');
+            hr.style.marginTop = '20px';
+            hr.style.marginBottom = '20px';
+            divQuestions.appendChild(hr);
+
+            // Add event listener for the new "Ajouter une réponse" button
+            newAsk.querySelector('.add-response').addEventListener('click', (event) => {
+                const questionId = event.target.getAttribute('data-question');
+                const responseContainer = document.querySelector(`#responses-${questionId}`);
+                const responseCount = responseContainer.children.length + 1;
+                const newResponse = document.createElement('div');
+                newResponse.classList.add('form-group');
+                newResponse.innerHTML = `
+                    <input type="text" name="response-${questionId}-${responseCount}" class="form-control" placeholder="Réponse">
+                    <p><label for="is_correct-${questionId}-${responseCount}">Réponse correcte ?</label> <input type="radio" name="is_correct-${questionId}" class="form-check-input" id="is_correct-${questionId}-${responseCount}" value="${responseCount}"></p>
+                `;
+                responseContainer.appendChild(newResponse);
+            });
+        })
+    }
+})