darkmaria

Sleeping

App Files Files Community

Docfile commited on 15 days ago

Commit

39851f5

verified ·

1 Parent(s): d4c0bb8

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +415 -164

templates/index.html CHANGED Viewed

@@ -3,192 +3,443 @@
 <head>
     <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chess vs Stockfish</title>
+    <!-- Chess.js et Chessboard.js -->
+    <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/chess.min.js"></script>
+    <script src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"></script>
     <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            box-sizing: border-box;
         }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            backdrop-filter: blur(10px);
         }
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 2.5em;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        }
+        .game-container {
+            display: flex;
+            gap: 30px;
+            justify-content: center;
+            align-items: flex-start;
+            flex-wrap: wrap;
+        }
+        .board-container {
+            flex-shrink: 0;
+        }
+        #myBoard {
+            border: 4px solid #8B4513;
+            border-radius: 10px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+        }
+        .info-panel {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 25px;
+            min-width: 300px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .status {
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-bottom: 15px;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+        }
+        .status.playing {
+            background: linear-gradient(45deg, #4CAF50, #45a049);
+            color: white;
+        }
+        .status.game-over {
+            background: linear-gradient(45deg, #f44336, #d32f2f);
+            color: white;
+        }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        button {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1em;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        }
+        button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(0,0,0,0.3);
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .evaluation {
+            background: #e3f2fd;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 15px 0;
+            border-left: 4px solid #2196F3;
+        }
+        .evaluation h3 {
+            margin: 0 0 10px 0;
+            color: #1976D2;
+        }
+        .move-history {
+            background: #fff3e0;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 15px 0;
+            border-left: 4px solid #FF9800;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        .move-history h3 {
+            margin: 0 0 10px 0;
+            color: #F57C00;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            color: #666;
+            font-style: italic;
+            margin: 10px 0;
+        }
+        .loading.show {
+            display: block;
+        }
+        .error {
+            background: #ffebee;
+            color: #c62828;
+            padding: 10px;
+            border-radius: 5px;
+            margin: 10px 0;
+            border-left: 4px solid #f44336;
+        }
+        @media (max-width: 768px) {
+            .game-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            .info-panel {
+                min-width: auto;
+                width: 100%;
+                max-width: 500px;
+            }
         }
     </style>
 </head>
+<body>
+    <div class="container">
+        <h1>🏁 Chess vs Stockfish</h1>
+        <div class="game-container">
+            <div class="board-container">
+                <div id="myBoard" style="width: 400px"></div>
             </div>
+            <div class="info-panel">
+                <div id="status" class="status playing">À vous de jouer !</div>
+                <div class="loading" id="loading">
+                    Stockfish réfléchit... ⏳
                 </div>
+                <div class="evaluation">
+                    <h3>📊 Évaluation</h3>
+                    <div id="evaluation">Position de départ</div>
+                </div>
+                <div class="move-history">
+                    <h3>📝 Derniers coups</h3>
+                    <div id="moveHistory">Nouvelle partie</div>
+                </div>
+                <div class="controls">
+                    <button id="newGameBtn">🔄 Nouvelle partie</button>
+                    <button id="analyzeBtn">🔍 Analyser position</button>
+                    <button id="flipBtn">🔄 Retourner échiquier</button>
+                </div>
+                <div id="error" class="error" style="display: none;"></div>
             </div>
         </div>
     </div>
     <script>
+        let game = new Chess();
+        let board = null;
+        let gameOver = false;
+        let moveHistory = [];
+        // Configuration de l'échiquier
+        const config = {
+            draggable: true,
+            position: 'start',
+            onDragStart: onDragStart,
+            onDrop: onDrop,
+            onSnapEnd: onSnapEnd
+        };
+        board = Chessboard('myBoard', config);
+        function onDragStart(source, piece, position, orientation) {
+            // Ne pas permettre de déplacer les pièces si c'est terminé
+            if (gameOver) return false;
+            // Ne permettre de déplacer que les pièces blanches (joueur)
+            if (piece.search(/^b/) !== -1) return false;
+            // Ne pas permettre de déplacer si ce n'est pas le tour des blancs
+            if (game.turn() === 'b') return false;
+        }
+        function onDrop(source, target) {
+            // Voir si le coup est légal
+            const move = game.move({
+                from: source,
+                to: target,
+                promotion: 'q' // Toujours promouvoir en dame pour simplifier
+            });
+            // Coup illégal
+            if (move === null) return 'snapback';
+            // Coup légal - envoyer au serveur
+            makeMove(move.san);
+        }
+        function onSnapEnd() {
+            board.position(game.fen());
+        }
+        function makeMove(userMove) {
+            if (gameOver) return;
+            showLoading(true);
+            hideError();
+            fetch('/api/move', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    fen: game.fen(),
+                    move: userMove
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                showLoading(false);
+                if (data.error) {
+                    showError(data.error);
+                    // Rétablir la position précédente
+                    game.undo();
+                    board.position(game.fen());
+                    return;
+                }
+                // Mettre à jour le jeu avec la nouvelle position
+                game.load(data.fen);
+                board.position(game.fen());
+                // Ajouter les coups à l'historique
+                if (data.stockfish_move) {
+                    addToMoveHistory(userMove, data.stockfish_move);
+                } else {
+                    addToMoveHistory(userMove, null);
+                }
+                // Mettre à jour l'évaluation
+                updateEvaluation(data.evaluation);
+                // Vérifier si la partie est terminée
+                if (data.game_over) {
+                    gameOver = true;
+                    updateStatus(data.result || 'Partie terminée', true);
+                } else {
+                    updateStatus('À vous de jouer !', false);
+                }
+            })
+            .catch(error => {
+                showLoading(false);
+                showError('Erreur de communication: ' + error.message);
+                // Rétablir la position précédente
+                game.undo();
+                board.position(game.fen());
+            });
+        }
+        function showLoading(show) {
+            const loading = document.getElementById('loading');
+            if (show) {
+                loading.classList.add('show');
             } else {
+                loading.classList.remove('show');
             }
         }
+        function showError(message) {
+            const errorDiv = document.getElementById('error');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
         }
+        function hideError() {
+            document.getElementById('error').style.display = 'none';
         }
+        function updateStatus(message, isGameOver = false) {
+            const statusDiv = document.getElementById('status');
+            statusDiv.textContent = message;
+            statusDiv.className = isGameOver ? 'status game-over' : 'status playing';
+        }
+        function updateEvaluation(evaluation) {
+            const evalDiv = document.getElementById('evaluation');
+            if (evaluation.type === 'cp') {
+                const centipawns = evaluation.value;
+                const pawns = (centipawns / 100).toFixed(2);
+                if (pawns > 0) {
+                    evalDiv.textContent = `Blancs +${pawns}`;
+                } else if (pawns < 0) {
+                    evalDiv.textContent = `Noirs +${Math.abs(pawns)}`;
+                } else {
+                    evalDiv.textContent = 'Position équilibrée';
                 }
+            } else if (evaluation.type === 'mate') {
+                const mateIn = evaluation.value;
+                if (mateIn > 0) {
+                    evalDiv.textContent = `Mat en ${mateIn} pour les blancs`;
+                } else if (mateIn < 0) {
+                    evalDiv.textContent = `Mat en ${Math.abs(mateIn)} pour les noirs`;
+                } else {
+                    evalDiv.textContent = 'Mat ou Pat';
                 }
             }
         }
+        function addToMoveHistory(userMove, stockfishMove) {
+            moveHistory.push({user: userMove, stockfish: stockfishMove});
+            const historyDiv = document.getElementById('moveHistory');
+            const lastMoves = moveHistory.slice(-5); // Garder les 5 derniers coups
+            let historyText = '';
+            lastMoves.forEach((moves, index) => {
+                const moveNum = moveHistory.length - lastMoves.length + index + 1;
+                historyText += `${moveNum}. ${moves.user}`;
+                if (moves.stockfish) {
+                    historyText += ` ${moves.stockfish}`;
+                }
+                historyText += '\n';
+            });
+            historyDiv.textContent = historyText || 'Aucun coup joué';
+        }
+        // Gestionnaires d'événements pour les boutons
+        document.getElementById('newGameBtn').addEventListener('click', function() {
+            fetch('/api/new_game', {method: 'POST'})
+            .then(response => response.json())
+            .then(data => {
+                game = new Chess();
+                board.start();
+                gameOver = false;
+                moveHistory = [];
+                updateStatus('À vous de jouer !', false);
+                updateEvaluation({type: 'cp', value: 0});
+                document.getElementById('moveHistory').textContent = 'Nouvelle partie';
+                hideError();
+            })
+            .catch(error => {
+                showError('Erreur lors du démarrage: ' + error.message);
+            });
+        });
+        document.getElementById('analyzeBtn').addEventListener('click', function() {
+            fetch('/api/analyze', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({fen: game.fen()})
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    showError(data.error);
+                    return;
+                }
+                updateEvaluation(data.evaluation);
+                if (data.best_move) {
+                    showError(`Meilleur coup suggéré: ${data.best_move}`);
+                }
+            })
+            .catch(error => {
+                showError('Erreur d\'analyse: ' + error.message);
+            });
+        });
+        document.getElementById('flipBtn').addEventListener('click', function() {
+            board.flip();
+        });
+        // Initialiser l'évaluation de départ
+        updateEvaluation({type: 'cp', value: 0});
     </script>
 </body>
 </html>