Add Game and Config UI

yahtzee/js/config.js

@@ -28,4 +28,74 @@ function updatePlayerInputs() {
         row.appendChild(nameInput);
         container.appendChild(row);
     }
-}
+}
+
+async function SqlRequest(action, params = {}) {
+    try {
+        const response = await fetch('RequestsHandler.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                action: action,
+                params: params
+            })
+        });
+
+        const resultat = await response.json();
+
+        if (resultat.success) {
+            return resultat;
+        } else {
+            console.error("Erreur :", resultat.error);
+        }
+    } catch (erreur) {
+        console.error("Erreur de communication :", erreur);
+    }
+
+}
+
+const loginForm = document.getElementById('config-form'); // Vérifie bien que l'ID match ton HTML
+
+loginForm.addEventListener('submit', async function(event) {
+    event.preventDefault();
+
+    // 1. Récupération des infos de base
+    const gameName = document.getElementById('game-name').value;
+    const playerRows = document.querySelectorAll('.player-row');
+    // 2. Création de la partie dans la BDD
+    let response = await SqlRequest('createGame', { 
+        game_name: gameName 
+    });
+
+    if (response && response.success) {
+        const gameId = parseInt(response.game_id);
+
+        // 3. Boucle sur les lignes de joueurs pour les ajouter un par un
+        for (let i = 0; i < playerRows.length; i++) {
+            const name = playerRows[i].querySelector('.player-input').value || `Joueur ${i + 1}`;
+            const color = playerRows[i].querySelector('.color-picker').value;
+            
+            // Le premier joueur (index 0) sera l'admin et commencera le tour (is_turn: 1)
+            const isAdmin = (i === 0);
+            const isTurn = (i === 0) ? 1 : 0;
+
+            await SqlRequest('addPlayer', {
+                game_id: gameId,
+                name: name,
+                color: color,
+                is_turn: isTurn,
+                is_admin: isAdmin // Paramètre utilisé par le PHP pour l'admin_id
+            });
+        }
+
+        // 4. Redirection vers la table de jeu
+        console.log("Partie créée avec succès, ID:", gameId);
+        window.location.href = '../game.html?game_id=' + gameId;
+
+    } else {
+        console.error("Erreur lors de la création de la partie :", response?.error);
+        alert("Erreur : " + (response?.error || "Impossible de joindre le serveur"));
+    }
+});

yahtzee/js/game.js

@@ -0,0 +1,77 @@
+async function SqlRequest(action, params = {}) {
+    try {
+        const response = await fetch('RequestsHandler.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                action: action,
+                params: params
+            })
+        });
+
+        const resultat = await response.json();
+
+        if (resultat.success) {
+            return resultat;
+        } else {
+            console.error("Erreur :", resultat.error);
+        }
+    } catch (erreur) {
+        console.error("Erreur de communication :", erreur);
+    }
+
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const gameId = urlParams.get('game_id');
+
+    if (!gameId) {
+        alert("ID de partie manquant");
+        window.location.href = '../index.html';
+        return;
+    }
+
+    // Récupération des données via le RequestsHandler
+    const response = await SqlRequest('getGameData', { game_id: gameId });
+
+    if (response && response.success) {
+        const game = response.game;
+        const players = response.players;
+        const sessionPlayerId = response.session_player_id;
+
+        // 1. Nom de la partie
+        document.getElementById('display-game-name').innerText = game.game_name;
+
+        // 2. Bouton Admin (si le joueur actuel est l'admin)
+        if (game.admin_id == sessionPlayerId) {
+            const adminDiv = document.getElementById('admin-controls');
+            adminDiv.innerHTML = `<button class="btn-admin-close" onclick="closeGame(${gameId})">Fermer la table</button>`;
+        }
+
+        // 3. Liste des joueurs
+        const listContainer = document.getElementById('players-list');
+        players.forEach(p => {
+            const card = document.createElement('div');
+            card.className = `player-card ${p.is_turn == 1 ? 'active' : ''}`;
+            card.style.borderBottomColor = p.player_color;
+            card.innerHTML = `
+                <div style="color: ${p.player_color}; font-weight: bold;">${p.player_name}</div>
+                <small>${p.is_turn == 1 ? '🎲 En train de jouer' : 'En attente'}</small>
+            `;
+            listContainer.appendChild(card);
+        });
+
+    } else {
+        console.error("Erreur chargement:", response?.error);
+    }
+});
+
+async function closeGame(id) {
+    if(confirm("Voulez-vous fermer cette table ?")){
+        const res = await SqlRequest('delete_game', { game_id: id });
+        if(res.success) window.location.href = '../index.html';
+    }
+}