darkmaria

Sleeping

App Files Files Community

Docfile commited on May 23, 2025

Commit

44bedb5

verified ·

1 Parent(s): 0356fb2

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +138 -386

templates/index.html CHANGED Viewed

@@ -4,439 +4,191 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jeu d'Échecs</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        .chess-board {
-            display: grid;
-            grid-template-columns: repeat(8, 1fr);
-            grid-template-rows: repeat(8, 1fr);
-            aspect-ratio: 1;
-            max-width: 600px;
-            margin: 0 auto;
-            border: 4px solid #8B4513;
         }
-        .chess-square {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2.5rem;
-            cursor: pointer;
-            transition: all 0.2s;
-            user-select: none;
         }
-        .chess-square.light {
-            background-color: #F0D9B5;
-        }
-        .chess-square.dark {
-            background-color: #B58863;
-        }
-        .chess-square.selected {
-            background-color: #7fc97f !important;
-            box-shadow: inset 0 0 0 3px #4CAF50;
-        }
-        .chess-square.legal-move {
-            background-color: #90EE90 !important;
-        }
-        .chess-square:hover {
-            opacity: 0.8;
-        }
-        .piece-white { color: white; text-shadow: 1px 1px 1px black; }
-        .piece-black { color: black; text-shadow: 1px 1px 1px white; }
-        .status-bar {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
-        <!-- Header -->
-        <div class="text-center mb-8">
-            <h1 class="text-4xl font-bold text-gray-800 mb-4">♔ Jeu d'Échecs ♛</h1>
-            <div class="status-bar text-white px-6 py-4 rounded-lg shadow-lg">
-                <div id="game-status" class="text-xl font-semibold">
-                    Choisissez un mode de jeu pour commencer
-                </div>
-                <div id="current-player" class="text-sm mt-1 opacity-90"></div>
-            </div>
-        </div>
-        <!-- Game Controls -->
-        <div class="flex flex-wrap justify-center gap-4 mb-8">
-            <button id="btn-human-mode" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors shadow-lg">
-                🤝 Mode Humain vs Humain
             </button>
-            <button id="btn-ai-mode" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-semibold transition-colors shadow-lg">
-                🤖 Mode vs IA
             </button>
-            <button id="btn-reset" class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition-colors shadow-lg">
-                🔄 Nouvelle Partie
             </button>
         </div>
-        <!-- Chess Board -->
-        <div class="flex justify-center mb-8">
-            <div class="bg-white p-6 rounded-xl shadow-2xl">
-                <div id="chess-board" class="chess-board">
-                    <!-- Le plateau sera généré par JavaScript -->
-                </div>
             </div>
-        </div>
-        <!-- Game Info -->
-        <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
-            <!-- Moves History -->
-            <div class="bg-white rounded-lg shadow-lg p-6">
-                <h3 class="text-xl font-bold text-gray-800 mb-4">📝 Historique des coups</h3>
-                <div id="moves-history" class="max-h-60 overflow-y-auto text-sm">
-                    <p class="text-gray-500 italic">Aucun coup joué</p>
                 </div>
-            </div>
-            <!-- Game Instructions -->
-            <div class="bg-white rounded-lg shadow-lg p-6">
-                <h3 class="text-xl font-bold text-gray-800 mb-4">ℹ️ Instructions</h3>
-                <ul class="text-sm text-gray-600 space-y-2">
-                    <li><strong>Mode Humain:</strong> Deux joueurs alternent sur le même appareil</li>
-                    <li><strong>Mode IA:</strong> Jouez contre l'intelligence artificielle</li>
-                    <li><strong>Comment jouer:</strong> Cliquez sur une pièce puis sur la case de destination</li>
-                    <li><strong>Cases vertes:</strong> Coups légaux possibles</li>
-                </ul>
-                <div class="mt-4 text-xs text-gray-500">
-                    <p>🔴 Cases rouges = sélection | 🟢 Cases vertes = coups possibles</p>
-                </div>
             </div>
         </div>
     </div>
     <script>
-        class ChessGame {
-            constructor() {
-                this.gameState = null;
-                this.selectedSquare = null;
-                this.legalMoves = [];
-                this.initializeBoard();
-                this.setupEventListeners();
-            }
-            initializeBoard() {
-                const board = document.getElementById('chess-board');
-                board.innerHTML = '';
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const square = document.createElement('div');
-                        square.className = `chess-square ${(row + col) % 2 === 0 ? 'light' : 'dark'}`;
-                        square.dataset.square = this.getSquareName(row, col);
-                        square.addEventListener('click', (e) => this.handleSquareClick(e));
-                        board.appendChild(square);
-                    }
-                }
-            }
-            getSquareName(row, col) {
-                const files = 'abcdefgh';
-                const ranks = '87654321';
-                return files[col] + ranks[row];
-            }
-            getSquareFromName(squareName) {
-                const files = 'abcdefgh';
-                const ranks = '87654321';
-                const col = files.indexOf(squareName[0]);
-                const row = ranks.indexOf(squareName[1]);
-                return { row, col };
-            }
-            pieceToUnicode(piece) {
-                const pieces = {
-                    'K': '♔', 'Q': '♕', 'R': '♖', 'B': '♗', 'N': '♘', 'P': '♙',
-                    'k': '♚', 'q': '♛', 'r': '♜', 'b': '♝', 'n': '♞', 'p': '♟'
-                };
-                return pieces[piece] || '';
             }
-            updateBoard() {
-                if (!this.gameState) return;
-                // Parse FEN pour obtenir la position des pièces
-                const fenParts = this.gameState.fen.split(' ');
-                const position = fenParts[0];
-                const rows = position.split('/');
-                const squares = document.querySelectorAll('.chess-square');
-                squares.forEach(square => {
-                    square.textContent = '';
-                    square.className = square.className.replace(/piece-(white|black)/, '');
-                });
-                rows.forEach((row, rowIndex) => {
-                    let colIndex = 0;
-                    for (let char of row) {
-                        if (char >= '1' && char <= '8') {
-                            colIndex += parseInt(char);
-                        } else {
-                            const squareName = this.getSquareName(rowIndex, colIndex);
-                            const square = document.querySelector(`[data-square="${squareName}"]`);
-                            if (square) {
-                                square.textContent = this.pieceToUnicode(char);
-                                square.classList.add(char === char.toUpperCase() ? 'piece-white' : 'piece-black');
-                            }
-                            colIndex++;
-                        }
-                    }
-                });
-            }
-            updateGameStatus() {
-                const statusEl = document.getElementById('game-status');
-                const playerEl = document.getElementById('current-player');
-                if (!this.gameState) {
-                    statusEl.textContent = 'Choisissez un mode de jeu pour commencer';
-                    playerEl.textContent = '';
-                    return;
-                }
-                if (this.gameState.game_over) {
-                    if (this.gameState.winner === 'draw') {
-                        statusEl.textContent = '🤝 Match nul !';
-                    } else {
-                        const winner = this.gameState.winner === 'white' ? 'Blancs' : 'Noirs';
-                        statusEl.textContent = `🏆 ${winner} gagnent !`;
-                    }
-                    playerEl.textContent = 'Partie terminée';
-                } else {
-                    const currentPlayer = this.gameState.current_player === 'white' ? 'Blancs' : 'Noirs';
-                    const modeText = this.gameState.mode === 'ai' ? 'vs IA' : 'Humain vs Humain';
-                    statusEl.textContent = `🎮 ${modeText}`;
-                    playerEl.textContent = `Au tour des ${currentPlayer}`;
-                }
             }
-            updateMovesHistory() {
-                const historyEl = document.getElementById('moves-history');
-                if (!this.gameState || this.gameState.moves_history.length === 0) {
-                    historyEl.innerHTML = '<p class="text-gray-500 italic">Aucun coup joué</p>';
-                    return;
-                }
-                let historyHtml = '<div class="grid grid-cols-2 gap-2 text-sm">';
-                this.gameState.moves_history.forEach((move, index) => {
-                    const moveNumber = Math.floor(index / 2) + 1;
-                    const isWhite = index % 2 === 0;
-                    if (isWhite) {
-                        historyHtml += `<div class="font-semibold">${moveNumber}. ${move}</div>`;
-                    } else {
-                        historyHtml += `<div class="pl-4">${move}</div>`;
-                    }
                 });
-                historyHtml += '</div>';
-                historyEl.innerHTML = historyHtml;
-                // Scroll vers le bas
-                historyEl.scrollTop = historyEl.scrollHeight;
-            }
-            async handleSquareClick(event) {
-                const square = event.target;
-                const squareName = square.dataset.square;
-                if (!this.gameState || this.gameState.game_over) return;
-                // Si aucune pièce n'est sélectionnée
-                if (!this.selectedSquare) {
-                    if (square.textContent && this.canSelectPiece(square)) {
-                        this.selectSquare(square);
-                    }
-                    return;
-                }
-                // Si on clique sur la même case
-                if (this.selectedSquare === square) {
-                    this.deselectSquare();
-                    return;
-                }
-                // Si on clique sur une autre pièce de la même couleur
-                if (square.textContent && this.canSelectPiece(square)) {
-                    this.selectSquare(square);
-                    return;
-                }
-                // Tentative de coup
-                const fromSquare = this.selectedSquare.dataset.square;
-                const toSquare = squareName;
-                const move = fromSquare + toSquare;
-                await this.makeMove(move);
-            }
-            canSelectPiece(square) {
-                if (!square.textContent) return false;
-                const isWhitePiece = square.classList.contains('piece-white');
-                const isCurrentPlayerWhite = this.gameState.current_player === 'white';
-                return isWhitePiece === isCurrentPlayerWhite;
-            }
-            selectSquare(square) {
-                this.deselectSquare();
-                this.selectedSquare = square;
-                square.classList.add('selected');
-                this.highlightLegalMoves(square.dataset.square);
-            }
-            deselectSquare() {
-                if (this.selectedSquare) {
-                    this.selectedSquare.classList.remove('selected');
-                    this.selectedSquare = null;
-                }
-                this.clearHighlights();
             }
-            highlightLegalMoves(fromSquare) {
-                this.clearHighlights();
-                if (!this.gameState.legal_moves) return;
-                const movesFromSquare = this.gameState.legal_moves.filter(move =>
-                    move.startsWith(fromSquare)
-                );
-                movesFromSquare.forEach(move => {
-                    const toSquare = move.substring(2, 4);
-                    const square = document.querySelector(`[data-square="${toSquare}"]`);
-                    if (square) {
-                        square.classList.add('legal-move');
-                    }
                 });
             }
-            clearHighlights() {
-                document.querySelectorAll('.legal-move').forEach(square => {
-                    square.classList.remove('legal-move');
-                });
             }
-            async makeMove(move) {
-                try {
-                    const response = await fetch('/api/make_move', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({ move })
-                    });
-                    const data = await response.json();
-                    if (data.success) {
-                        this.gameState = data.game_state;
-                        this.updateDisplay();
-                        this.deselectSquare();
-                        // Si l'IA a joué un coup
-                        if (data.ai_move) {
-                            setTimeout(() => {
-                                console.log('IA a joué:', data.ai_move);
-                            }, 500);
-                        }
-                    } else {
-                        alert('Coup invalide: ' + data.error);
-                    }
-                } catch (error) {
-                    console.error('Erreur lors du coup:', error);
-                    alert('Erreur de connexion');
-                }
-            }
-            async startNewGame(mode) {
                 try {
-                    const response = await fetch('/api/new_game', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({ mode })
-                    });
                     const data = await response.json();
-                    if (data.success) {
-                        this.gameState = data.game_state;
-                        this.updateDisplay();
-                        this.deselectSquare();
-                    } else {
-                        alert('Erreur lors de la création de la partie');
-                    }
                 } catch (error) {
-                    console.error('Erreur:', error);
-                    alert('Erreur de connexion');
                 }
-            }
-            async resetGame() {
-                if (!this.gameState) return;
-                try {
-                    const response = await fetch('/api/reset_game', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        }
-                    });
                     const data = await response.json();
-                    if (data.success) {
-                        this.gameState = data.game_state;
-                        this.updateDisplay();
-                        this.deselectSquare();
                     }
                 } catch (error) {
-                    console.error('Erreur:', error);
-                    alert('Erreur de connexion');
                 }
             }
-            updateDisplay() {
-                this.updateBoard();
-                this.updateGameStatus();
-                this.updateMovesHistory();
-            }
-            setupEventListeners() {
-                document.getElementById('btn-human-mode').addEventListener('click', () => {
-                    this.startNewGame('human');
-                });
-                document.getElementById('btn-ai-mode').addEventListener('click', () => {
-                    this.startNewGame('ai');
-                });
-                document.getElementById('btn-reset').addEventListener('click', () => {
-                    if (confirm('Êtes-vous sûr de vouloir recommencer la partie ?')) {
-                        this.resetGame();
-                    }
-                });
-            }
         }
-        // Initialiser le jeu quand la page est chargée
-        document.addEventListener('DOMContentLoaded', () => {
-            new ChessGame();
-        });
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jeu d'Échecs</title>
+    <!-- Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        /* Pour une meilleure interaction avec le SVG */
+        .chess-board svg {
+            cursor: default; /* Ou 'pointer' sur les pièces si on gère les clics SVG */
         }
+        .square { /* Styles pour les cases si on n'utilise pas SVG pour le rendu cliquable */
+            width: 40px; height: 40px;
+            display: flex; align-items: center; justify-content: center;
+            border: 1px solid #ccc;
         }
+        .selected-square {
+            background-color: rgba(255, 255, 0, 0.5) !important;
         }
     </style>
 </head>
+<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-4">
+    <div class="bg-white p-6 rounded-lg shadow-xl w-full max-w-3xl">
+        <h1 class="text-3xl font-bold text-center text-gray-700 mb-6">Jeu d'Échecs</h1>
+        <div class="controls mb-4 flex flex-wrap gap-2 justify-center">
+            <button id="newGameHuman" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+                Nouvelle Partie (Humain vs Humain)
             </button>
+            <button id="newGameAIWhite" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+                Nouvelle Partie (Jouer Blancs vs IA)
             </button>
+            <button id="newGameAIBlack" class="bg-gray-700 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded">
+                Nouvelle Partie (Jouer Noirs vs IA)
             </button>
         </div>
+        <div class="game-area flex flex-col md:flex-row gap-4 items-start">
+            <!-- Échiquier (rendu par chess.svg) -->
+            <div id="boardDisplay" class="chess-board mx-auto md:mx-0 border-2 border-gray-500" style="width: 350px; height: 350px;">
+                <!-- Le SVG de l'échiquier sera injecté ici -->
+                {{ initial_board_svg|safe if initial_board_svg else "Chargement de l'échiquier..." }}
             </div>
+            <!-- Informations et contrôles de la partie -->
+            <div class="info-panel flex-grow p-4 bg-gray-50 rounded-md shadow">
+                <h2 class="text-xl font-semibold mb-2">Informations</h2>
+                <p id="turnInfo" class="mb-1">Tour: Chargement...</p>
+                <p id="statusInfo" class="mb-3 font-medium">Statut: Chargement...</p>
+                <h3 class="text-lg font-semibold mb-1">Jouer un coup (ex: e2e4):</h3>
+                <div class="move-input flex gap-2 mb-3">
+                    <input type="text" id="moveInput" placeholder="e.g., e2e4"
+                           class="flex-grow p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <button id="submitMove" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-3 rounded">
+                        Jouer
+                    </button>
                 </div>
+                <p class="text-xs text-gray-500 mb-3">
+                    Alternative: cliquez sur la case de départ puis la case d'arrivée sur un échiquier interactif (non implémenté ici, utilisez l'input).
+                </p>
+                <h3 class="text-lg font-semibold mb-1">Derniers coups:</h3>
+                <p id="playerMoveInfo" class="text-sm"></p>
+                <p id="aiMoveInfo" class="text-sm"></p>
             </div>
         </div>
     </div>
     <script>
+        const boardDisplay = document.getElementById('boardDisplay');
+        const turnInfo = document.getElementById('turnInfo');
+        const statusInfo = document.getElementById('statusInfo');
+        const moveInput = document.getElementById('moveInput');
+        const playerMoveInfo = document.getElementById('playerMoveInfo');
+        const aiMoveInfo = document.getElementById('aiMoveInfo');
+        let currentFen = "{{ initial_fen }}"; // FEN initial passé par Flask
+        let selectedSquare = null; // Pour une interaction de clic sur le plateau (non implémenté visuellement ici)
+        async function updateBoard(data) {
+            if (data.error) {
+                statusInfo.textContent = `Erreur: ${data.error}`;
+                if (data.board_svg) boardDisplay.innerHTML = data.board_svg; // Mettre à jour même en cas d'erreur de coup
+                return;
+            }
+            currentFen = data.fen;
+            boardDisplay.innerHTML = data.board_svg; // chess.svg fournit le plateau
+            turnInfo.textContent = `Tour: ${data.turn}`;
+            statusInfo.textContent = `Statut: ${data.status}`;
+            moveInput.value = '';
+            playerMoveInfo.textContent = data.player_move_san ? `Votre coup: ${data.player_move_san}` : "";
+            aiMoveInfo.textContent = data.ai_move_san ? `Coup IA: ${data.ai_move_san}` : "";
+            if (data.game_over) {
+                moveInput.disabled = true;
+                document.getElementById('submitMove').disabled = true;
+                // On pourrait ajouter une alerte ou un modal
+                setTimeout(() => alert(`Partie terminée ! ${data.status}`), 100);
+            } else {
+                moveInput.disabled = false;
+                document.getElementById('submitMove').disabled = false;
             }
+        }
+        async function submitMove() {
+            const move = moveInput.value.trim().toLowerCase();
+            if (!move.match(/^[a-h][1-8][a-h][1-8]([qrbn])?$/)) { // Validation basique du format UCI
+                statusInfo.textContent = "Format de coup invalide (ex: e2e4, e7e8q).";
+                return;
             }
+            playerMoveInfo.textContent = ""; // Clear previous move info
+            aiMoveInfo.textContent = "";
+            try {
+                const response = await fetch('/move', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ move: move })
                 });
+                const data = await response.json();
+                updateBoard(data);
+            } catch (error) {
+                console.error('Erreur lors de la soumission du coup:', error);
+                statusInfo.textContent = 'Erreur de communication avec le serveur.';
             }
+        }
+        async function startNewGame(mode, playerPlaysWhite = true) {
+            playerMoveInfo.textContent = "";
+            aiMoveInfo.textContent = "";
+            try {
+                const response = await fetch('/new_game', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ mode: mode, player_color_white: playerPlaysWhite})
                 });
+                const data = await response.json();
+                updateBoard(data);
+                statusInfo.textContent = `Nouvelle partie commencée. ${mode === 'ai' ? (playerPlaysWhite ? 'Vous jouez les Blancs.' : 'L\'IA joue les Blancs.') : 'Humain vs Humain.'}`;
+            } catch (error) {
+                console.error('Erreur lors du démarrage de la nouvelle partie:', error);
+                statusInfo.textContent = 'Erreur de communication avec le serveur.';
             }
+        }
+        document.getElementById('submitMove').addEventListener('click', submitMove);
+        moveInput.addEventListener('keypress', function(event) {
+            if (event.key === 'Enter') {
+                submitMove();
             }
+        });
+        document.getElementById('newGameHuman').addEventListener('click', () => startNewGame('human'));
+        document.getElementById('newGameAIWhite').addEventListener('click', () => startNewGame('ai', true));
+        document.getElementById('newGameAIBlack').addEventListener('click', () => startNewGame('ai', false));
+        // Initialiser l'état au chargement de la page (si une partie est en cours via session)
+        async function initializeBoardState() {
+            if (boardDisplay.innerHTML.includes("Chargement")) { // Si le SVG n'a pas été injecté par le serveur
                 try {
+                    const response = await fetch('/get_board_state');
                     const data = await response.json();
+                    updateBoard(data);
                 } catch (error) {
+                    console.error('Erreur de récupération de l\'état initial:', error);
+                    statusInfo.textContent = 'Erreur de chargement de la partie.';
                 }
+            } else { // Le SVG est déjà là, il faut juste mettre à jour les infos de statut
+                 try {
+                    const response = await fetch('/get_board_state'); // Récupérer le statut actuel
                     const data = await response.json();
+                    turnInfo.textContent = `Tour: ${data.turn}`;
+                    statusInfo.textContent = `Statut: ${data.status}`;
+                    if (data.game_over) {
+                        moveInput.disabled = true;
+                        document.getElementById('submitMove').disabled = true;
                     }
                 } catch (error) {
+                     console.error('Erreur de récupération de l\'état initial (infos):', error);
                 }
             }
         }
+        window.onload = initializeBoardState;
     </script>
 </body>
 </html>