thomas

2025-08-28 14:34:18 +02:00
commit 5ff4c53a10
29 changed files with 1705 additions and 0 deletions
--- a/TP3/EX4/foxes.html
+++ b/TP3/EX4/foxes.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Jeu des renards</title>
+    <style>
+        body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; }
+        .grid-container {
+            display: grid;
+            border: 2px solid #333;
+            background-color: #555;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+        .cell {
+            width: 40px;
+            height: 40px;
+            background-color: #777;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            color: white;
+        }
+        .cell:hover { background-color: #999; }
+        .cell.shot { background-color: #333; cursor: not-allowed; }
+        .cell.won { background-color: green; }
+        #info-panel { margin-top: 20px; text-align: center; }
+    </style>
+</head>
+<body>
+    <h1>Jeu des renards</h1>
+    <div id="grid-container" class="grid-container"></div>
+    <div id="info-panel">
+        <p id="foxes-info">Renards restants : ?</p>
+        <p id="tries-info">Coups joués : 0</p>
+        <button id="reset-btn">Nouvelle partie</button>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const serverUrl = 'https://dwarves.iut-fbleau.fr/foxes/foxes.php';
+            const gridContainer = document.getElementById('grid-container');
+            const foxesInfo = document.getElementById('foxes-info');
+            const triesInfo = document.getElementById('tries-info');
+            const resetBtn = document.getElementById('reset-btn');
+            
+            let gridSize = 10;
+            let initialFoxes = 10;
+            let currentFoxes = initialFoxes;
+            let tries = 0;
+            let gameOver = false;
+
+            const updateInfo = (foxes, newTries) => {
+                currentFoxes = foxes;
+                tries = newTries;
+                foxesInfo.textContent = `Renards restants : ${currentFoxes}`;
+                triesInfo.textContent = `Coups joués : ${tries}`;
+            };
+
+            const resetGame = async () => {
+                gameOver = false;
+                gridContainer.innerHTML = '';
+                const url = `${serverUrl}?new&size=${gridSize}&foxes=${initialFoxes}`;
+                try {
+                    const response = await fetch(url, { credentials: 'omit' }); // 'omit' pour ignorer les cookies
+                    const data = await response.json();
+                    if (data.status === 'ok') {
+                        gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
+                        for (let i = 0; i < gridSize * gridSize; i++) {
+                            const cell = document.createElement('div');
+                            cell.classList.add('cell');
+                            cell.dataset.x = i % gridSize;
+                            cell.dataset.y = Math.floor(i / gridSize);
+                            cell.addEventListener('click', handleShot);
+                            gridContainer.appendChild(cell);
+                        }
+                        updateInfo(data.foxes, data.tries);
+                    } else {
+                        alert('Erreur lors de la réinitialisation du jeu.');
+                    }
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    alert('Erreur de connexion au serveur.');
+                }
+            };
+
+            const handleShot = async (event) => {
+                if (gameOver || event.target.classList.contains('shot')) {
+                    return;
+                }
+                
+                const x = event.target.dataset.x;
+                const y = event.target.dataset.y;
+                const url = `${serverUrl}?X=${x}&Y=${y}`;
+
+                try {
+                    const response = await fetch(url, { credentials: 'omit' });
+                    const data = await response.json();
+
+                    if (data.status === 'ok') {
+                        event.target.classList.add('shot');
+                        if (data.foxes === -1) {
+                            event.target.textContent = 'X';
+                            updateInfo(currentFoxes - 1, data.tries);
+                        } else {
+                            event.target.textContent = data.foxes;
+                            updateInfo(currentFoxes, data.tries);
+                        }
+                    } else if (data.status === 'win') {
+                        gameOver = true;
+                        updateInfo(0, data.tries);
+                        event.target.classList.add('won');
+                        event.target.textContent = 'X';
+                        setTimeout(() => alert(`Félicitations ! Vous avez gagné en ${data.tries} coups.`), 100);
+                    } else if (data.status === 'nok') {
+                        console.error('Erreur du serveur:', data.message);
+                    }
+
+                    // Check for win condition client-side (if currentFoxes reaches 0)
+                    if (currentFoxes === 0 && !gameOver) {
+                         gameOver = true;
+                         setTimeout(() => alert(`Félicitations ! Vous avez gagné !`), 100);
+                    }
+
+                } catch (error) {
+                    console.error('Erreur:', error);
+                }
+            };
+            
+            resetBtn.addEventListener('click', resetGame);
+            resetGame();
+        });
+    </script>
+</body>
+</html>