Update app.py

app.py

@@ -1,213 +1,417 @@
-#!/usr/bin/env python3
-"""
-demineur.py
-Version simple en terminal (ligne de commande).
-
-Commandes :
-  r i j   -> révéler la case (ligne i, colonne j)   (1-based)
-  f i j   -> poser/enlever un drapeau sur la case
-
-Exemple:
-  r 3 4
-  f 2 1
-"""
-
-import random
-import sys
-from typing import List, Set, Tuple
-
-# ---------- Configuration par défaut ----------
-DEFAULT_ROWS = 9
-DEFAULT_COLS = 9
-DEFAULT_MINES = 10
-
-# ---------- Génération du plateau ----------
-def create_board(rows: int, cols: int, mines: int):
-    if mines >= rows * cols:
-        raise ValueError("Le nombre de mines doit être inférieur au nombre total de cases.")
-    # board: -1 = mine, otherwise number of adjacent mines
-    board = [[0 for _ in range(cols)] for _ in range(rows)]
-    # placement aléatoire des mines
-    all_positions = [(r, c) for r in range(rows) for c in range(cols)]
-    mine_positions = set(random.sample(all_positions, mines))
-    for (r, c) in mine_positions:
-        board[r][c] = -1
-    # calcul des voisins
-    for r in range(rows):
-        for c in range(cols):
-            if board[r][c] == -1:
-                continue
-            count = 0
-            for dr in (-1, 0, 1):
-                for dc in (-1, 0, 1):
-                    if dr == 0 and dc == 0:
-                        continue
-                    nr, nc = r + dr, c + dc
-                    if 0 <= nr < rows and 0 <= nc < cols and board[nr][nc] == -1:
-                        count += 1
-            board[r][c] = count
-    return board, mine_positions
-
-# ---------- Affichage ----------
-def display(rows:int, cols:int, revealed: Set[Tuple[int,int]], flags: Set[Tuple[int,int]], board: List[List[int]], show_mines=False):
-    # entêtes colonnes
-    header = "    " + " ".join(f"{c+1:2}" for c in range(cols))
-    sep = "   +" + "---"*cols + "+"
-    print(header)
-    print(sep)
-    for r in range(rows):
-        row_cells = []
-        for c in range(cols):
-            pos = (r, c)
-            if pos in flags:
-                cell = " F"
-            elif pos in revealed:
-                val = board[r][c]
-                if val == -1:
-                    cell = " *"  # mine
-                elif val == 0:
-                    cell = "  "  # vide
-                else:
-                    cell = f" {val}"
-            else:
-                if show_mines and board[r][c] == -1:
-                    cell = " *"
-                else:
-                    cell = " #"
-            row_cells.append(cell)
-        print(f"{r+1:2} |" + "".join(row_cells) + " |")
-    print(sep)
-
-# ---------- Découverte en cascade ----------
-def flood_fill(board: List[List[int]], start_r:int, start_c:int, rows:int, cols:int, revealed: Set[Tuple[int,int]]):
-    stack = [(start_r, start_c)]
-    while stack:
-        r, c = stack.pop()
-        if (r,c) in revealed:
-            continue
-        revealed.add((r,c))
-        if board[r][c] == 0:
-            for dr in (-1, 0, 1):
-                for dc in (-1, 0, 1):
-                    nr, nc = r + dr, c + dc
-                    if 0 <= nr < rows and 0 <= nc < cols and (nr,nc) not in revealed:
-                        if board[nr][nc] != -1:
-                            stack.append((nr,nc))
-
-# ---------- Vérifications de victoire ----------
-def check_victory(rows:int, cols:int, mines:int, revealed:Set[Tuple[int,int]]):
-    # victoire si toutes les cases non-mines sont révélées
-    return len(revealed) == rows*cols - mines
-
-# ---------- Analyse entrée utilisateur ----------
-def parse_command(s: str):
-    parts = s.strip().split()
-    if len(parts) != 3:
-        return None
-    cmd = parts[0].lower()
-    if cmd not in ("r", "f"):
-        return None
-    try:
-        i = int(parts[1])
-        j = int(parts[2])
-        return (cmd, i, j)
-    except ValueError:
-        return None
-
-# ---------- Jeu principal ----------
-def run_game(rows:int, cols:int, mines:int):
-    board, mine_positions = create_board(rows, cols, mines)
-    revealed: Set[Tuple[int,int]] = set()
-    flags: Set[Tuple[int,int]] = set()
-    lost = False
-
-    print(f"\nBienvenue au Démineur ! {rows}x{cols}, mines: {mines}")
-    print("Commandes: 'r i j' pour révéler, 'f i j' pour poser/retirer un drapeau. Coordonnées 1-based (ex: r 3 4).")
-    while True:
-        display(rows, cols, revealed, flags, board if lost else False)
-        if lost:
-            print("💥 BOOM ! Vous avez touché une mine. Partie terminée.")
-            display(rows, cols, revealed.union(mine_positions), flags, board, show_mines=True)
-            break
-        if check_victory(rows, cols, mines, revealed):
-            print("🎉 Félicitations — vous avez gagné ! Toutes les cases sûres ont été révélées.")
-            display(rows, cols, revealed, flags, board, show_mines=True)
-            break
-
-        s = input("Entrée (r/f i j) > ").strip()
-        if s.lower() in ("quit", "exit", "q"):
-            print("Au revoir !")
-            break
-        parsed = parse_command(s)
-        if not parsed:
-            print("Commande invalide — ex: 'r 3 4' ou 'f 2 1'.")
-            continue
-        cmd, i, j = parsed
-        # convertir en 0-based
-        r, c = i - 1, j - 1
-        if not (0 <= r < rows and 0 <= c < cols):
-            print("Coordonnées hors plage.")
-            continue
-        pos = (r, c)
-        if cmd == "f":
-            if pos in revealed:
-                print("Impossible de poser un drapeau sur une case déjà révélée.")
-            else:
-                if pos in flags:
-                    flags.remove(pos)
-                    print(f"Drapeau retiré en ({i},{j}).")
-                else:
-                    flags.add(pos)
-                    print(f"Drapeau posé en ({i},{j}).")
-        elif cmd == "r":
-            if pos in flags:
-                print("Case marquée d'un drapeau — retirez le drapeau avant de révéler.")
-                continue
-            if pos in revealed:
-                print("Case déjà révélée.")
-                continue
-            if board[r][c] == -1:
-                # perdu
-                lost = True
-                revealed.add(pos)
-                continue
-            # si case sans voisins, on fait flood fill, sinon on révèle uniquement
-            if board[r][c] == 0:
-                flood_fill(board, r, c, rows, cols, revealed)
-            else:
-                revealed.add(pos)
-
-# ---------- Interface simple pour lancer ----------
-def main():
-    # possibilité de passer dimensions en argument: python demineur.py rows cols mines
-    rows = DEFAULT_ROWS
-    cols = DEFAULT_COLS
-    mines = DEFAULT_MINES
-    if len(sys.argv) >= 4:
-        try:
-            rows = int(sys.argv[1])
-            cols = int(sys.argv[2])
-            mines = int(sys.argv[3])
-        except Exception:
-            print("Usage: python demineur.py [rows cols mines]")
-            return
-    elif len(sys.argv) == 2:
-        # si un seul argument, on l'interprète comme taille carrée
-        try:
-            rows = cols = int(sys.argv[1])
-        except Exception:
-            print("Usage: python demineur.py [rows cols mines]")
-            return
-
-    # borne simple
-    if rows <= 0 or cols <= 0 or mines <= 0:
-        print("Les valeurs doivent être positives.")
-        return
-    if mines >= rows*cols:
-        print("Trop de mines pour la taille de la grille.")
-        return
-
-    run_game(rows, cols, mines)
-
-if __name__ == "__main__":
-    main()
+import React, { useState, useEffect } from 'react';
+import { Bomb } from 'lucide-react';
+
+const ChessMinesweeper = () => {
+  const [board, setBoard] = useState([]);
+  const [selectedPiece, setSelectedPiece] = useState(null);
+  const [currentPlayer, setCurrentPlayer] = useState('white');
+  const [gameOver, setGameOver] = useState(false);
+  const [message, setMessage] = useState('');
+  const [capturedPieces, setCapturedPieces] = useState({ white: [], black: [] });
+
+  const pieceSymbols = {
+    white: { king: '♔', queen: '♕', rook: '♖', bishop: '♗', knight: '♘', pawn: '♙' },
+    black: { king: '♚', queen: '♛', rook: '♜', bishop: '♝', knight: '♞', pawn: '♟' }
+  };
+
+  useEffect(() => {
+    initBoard();
+  }, []);
+
+  const initBoard = () => {
+    const newBoard = Array(8).fill(null).map(() => Array(8).fill(null));
+    
+    // Placer les pièces blanches (rangée 7 et 6)
+    newBoard[7][0] = { type: 'rook', color: 'white' };
+    newBoard[7][1] = { type: 'knight', color: 'white' };
+    newBoard[7][2] = { type: 'bishop', color: 'white' };
+    newBoard[7][3] = { type: 'queen', color: 'white' };
+    newBoard[7][4] = { type: 'king', color: 'white' };
+    newBoard[7][5] = { type: 'bishop', color: 'white' };
+    newBoard[7][6] = { type: 'knight', color: 'white' };
+    newBoard[7][7] = { type: 'rook', color: 'white' };
+    for (let i = 0; i < 8; i++) {
+      newBoard[6][i] = { type: 'pawn', color: 'white', hasMoved: false };
+    }
+    
+    // Placer les pièces noires (rangée 0 et 1)
+    newBoard[0][0] = { type: 'rook', color: 'black' };
+    newBoard[0][1] = { type: 'knight', color: 'black' };
+    newBoard[0][2] = { type: 'bishop', color: 'black' };
+    newBoard[0][3] = { type: 'queen', color: 'black' };
+    newBoard[0][4] = { type: 'king', color: 'black' };
+    newBoard[0][5] = { type: 'bishop', color: 'black' };
+    newBoard[0][6] = { type: 'knight', color: 'black' };
+    newBoard[0][7] = { type: 'rook', color: 'black' };
+    for (let i = 0; i < 8; i++) {
+      newBoard[1][i] = { type: 'pawn', color: 'black', hasMoved: false };
+    }
+    
+    // Générer les mines dans les rangées du milieu (2-5)
+    const mines = new Set();
+    const mineCount = 12;
+    
+    while (mines.size < mineCount) {
+      const row = 2 + Math.floor(Math.random() * 4);
+      const col = Math.floor(Math.random() * 8);
+      mines.add(`${row},${col}`);
+    }
+    
+    // Ajouter les mines et calculer les nombres adjacents
+    for (let row = 2; row <= 5; row++) {
+      for (let col = 0; col < 8; col++) {
+        const key = `${row},${col}`;
+        if (mines.has(key)) {
+          newBoard[row][col] = { type: 'mine', revealed: false };
+        } else {
+          const adjacentMines = countAdjacentMines(row, col, mines);
+          newBoard[row][col] = { type: 'empty', revealed: false, count: adjacentMines };
+        }
+      }
+    }
+    
+    // Ajouter les indices de mines pour les rangées 1 et 6 (où sont les pions)
+    for (let col = 0; col < 8; col++) {
+      // Rangée 1 (pions noirs)
+      const count1 = countAdjacentMines(1, col, mines);
+      if (count1 > 0) {
+        newBoard[1][col] = { ...newBoard[1][col], mineCount: count1 };
+      }
+      
+      // Rangée 6 (pions blancs)
+      const count6 = countAdjacentMines(6, col, mines);
+      if (count6 > 0) {
+        newBoard[6][col] = { ...newBoard[6][col], mineCount: count6 };
+      }
+    }
+    
+    setBoard(newBoard);
+    setCurrentPlayer('white');
+    setGameOver(false);
+    setMessage('');
+    setCapturedPieces({ white: [], black: [] });
+  };
+
+  const countAdjacentMines = (row, col, mines) => {
+    let count = 0;
+    for (let dr = -1; dr <= 1; dr++) {
+      for (let dc = -1; dc <= 1; dc++) {
+        if (dr === 0 && dc === 0) continue;
+        const nr = row + dr;
+        const nc = col + dc;
+        // Vérifier toutes les cases adjacentes, pas seulement la zone démineur
+        if (nr >= 0 && nr < 8 && nc >= 0 && nc < 8) {
+          if (mines.has(`${nr},${nc}`)) count++;
+        }
+      }
+    }
+    return count;
+  };
+
+  const handleSquareClick = (row, col) => {
+    if (gameOver) return;
+    
+    const cell = board[row][col];
+    const actualPiece = cell?.piece || cell;
+    
+    // Si on clique sur une pièce
+    if (actualPiece && actualPiece.color && ['king', 'queen', 'rook', 'bishop', 'knight', 'pawn'].includes(actualPiece.type)) {
+      if (actualPiece.color === currentPlayer) {
+        setSelectedPiece({ row, col });
+        return;
+      }
+    }
+    
+    // Si on a une pièce sélectionnée, essayer de la déplacer
+    if (selectedPiece) {
+      movePiece(selectedPiece.row, selectedPiece.col, row, col);
+    }
+  };
+
+  const movePiece = (fromRow, fromCol, toRow, toCol) => {
+    const fromCell = board[fromRow][fromCol];
+    const piece = fromCell?.piece || fromCell;
+    const toCell = board[toRow][toCol];
+    const targetPiece = toCell?.piece || toCell;
+    
+    if (!piece || !['king', 'queen', 'rook', 'bishop', 'knight', 'pawn'].includes(piece.type)) {
+      setSelectedPiece(null);
+      return;
+    }
+    
+    // Vérifier que le mouvement est valide
+    if (!isValidMove(fromRow, fromCol, toRow, toCol, piece)) {
+      setSelectedPiece(null);
+      return;
+    }
+    
+    const newBoard = board.map(row => [...row]);
+    let newMessage = '';
+    let pieceCaptured = false;
+    
+    // Si on capture une pièce ennemie
+    if (targetPiece && targetPiece.color && targetPiece.color !== piece.color) {
+      const newCaptured = { ...capturedPieces };
+      newCaptured[targetPiece.color].push(targetPiece.type);
+      setCapturedPieces(newCaptured);
+      pieceCaptured = true;
+      newMessage = `${piece.type} ${piece.color} capture ${targetPiece.type} ${targetPiece.color}!`;
+    }
+    
+    // Si on se déplace sur une case du démineur
+    const isMinesweeperZone = toRow >= 2 && toRow <= 5;
+    if (isMinesweeperZone && toCell && (toCell.type === 'mine' || toCell.type === 'empty')) {
+      // Si c'est une mine (révélée ou non)
+      if (toCell.type === 'mine') {
+        // BOOM! La pièce est éliminée
+        newBoard[fromRow][fromCol] = fromCell.revealed ? { ...fromCell, piece: null } : null;
+        newBoard[toRow][toCol] = { type: 'mine', revealed: true };
+        newMessage = `💥 BOOM! ${piece.type} ${piece.color} a explosé sur une mine!`;
+        
+        const newCaptured = { ...capturedPieces };
+        newCaptured[piece.color].push(piece.type);
+        setCapturedPieces(newCaptured);
+        
+        if (piece.type === 'king') {
+          setGameOver(true);
+          newMessage += ` ${piece.color === 'white' ? 'Noirs' : 'Blancs'} gagnent!`;
+        }
+      } else if (!toCell.revealed) {
+        // Case sûre non révélée, révéler le nombre
+        const updatedPiece = piece.type === 'pawn' ? { ...piece, hasMoved: true } : piece;
+        newBoard[toRow][toCol] = { ...toCell, revealed: true, piece: updatedPiece };
+        newBoard[fromRow][fromCol] = fromCell.revealed ? { ...fromCell, piece: null } : null;
+        if (!pieceCaptured) {
+          newMessage = `Case révélée: ${toCell.count} mine(s) adjacente(s)`;
+        }
+      } else {
+        // Case sûre déjà révélée
+        const updatedPiece = piece.type === 'pawn' ? { ...piece, hasMoved: true } : piece;
+        newBoard[toRow][toCol] = { ...toCell, piece: updatedPiece };
+        newBoard[fromRow][fromCol] = fromCell.revealed ? { ...fromCell, piece: null } : null;
+      }
+    } else if (toCell && toCell.revealed && toCell.type === 'empty') {
+      // Se déplacer sur une case déjà révélée
+      const updatedPiece = piece.type === 'pawn' ? { ...piece, hasMoved: true } : piece;
+      newBoard[toRow][toCol] = { ...toCell, piece: updatedPiece };
+      newBoard[fromRow][fromCol] = fromCell.revealed ? { ...fromCell, piece: null } : null;
+    } else {
+      // Se déplacer sur une case normale (hors zone démineur ou pièce ennemie)
+      const updatedPiece = piece.type === 'pawn' ? { ...piece, hasMoved: true } : piece;
+      newBoard[toRow][toCol] = updatedPiece;
+      newBoard[fromRow][fromCol] = fromCell.revealed ? { ...fromCell, piece: null } : null;
+    }
+    
+    setBoard(newBoard);
+    setSelectedPiece(null);
+    setMessage(newMessage);
+    
+    if (!gameOver) {
+      setCurrentPlayer(currentPlayer === 'white' ? 'black' : 'white');
+    }
+  };
+
+  const isValidMove = (fromRow, fromCol, toRow, toCol, piece) => {
+    if (fromRow === toRow && fromCol === toCol) return false;
+    
+    const toCell = board[toRow][toCol];
+    const targetPiece = toCell?.piece || toCell;
+    
+    // Ne peut pas capturer sa propre pièce
+    if (targetPiece && targetPiece.color === piece.color) return false;
+    
+    const rowDiff = toRow - fromRow;
+    const colDiff = toCol - fromCol;
+    
+    switch (piece.type) {
+      case 'pawn':
+        return isValidPawnMove(fromRow, fromCol, toRow, toCol, piece, targetPiece);
+      case 'rook':
+        return isValidRookMove(fromRow, fromCol, toRow, toCol);
+      case 'knight':
+        return isValidKnightMove(rowDiff, colDiff);
+      case 'bishop':
+        return isValidBishopMove(fromRow, fromCol, toRow, toCol);
+      case 'queen':
+        return isValidQueenMove(fromRow, fromCol, toRow, toCol);
+      case 'king':
+        return isValidKingMove(rowDiff, colDiff);
+      default:
+        return false;
+    }
+  };
+
+  const isValidPawnMove = (fromRow, fromCol, toRow, toCol, piece, targetPiece) => {
+    const direction = piece.color === 'white' ? -1 : 1;
+    const rowDiff = toRow - fromRow;
+    const colDiff = Math.abs(toCol - fromCol);
+    
+    // Capture en diagonale
+    if (rowDiff === direction && colDiff === 1) {
+      return targetPiece && targetPiece.color && targetPiece.color !== piece.color;
+    }
+    
+    // Avancer d'une case
+    if (rowDiff === direction && colDiff === 0) {
+      return !targetPiece || !targetPiece.color;
+    }
+    
+    // Premier mouvement: avancer de 2 cases
+    if (!piece.hasMoved && colDiff === 0 && rowDiff === direction * 2) {
+      const middleRow = fromRow + direction;
+      const middleCell = board[middleRow][fromCol];
+      const middlePiece = middleCell?.piece || middleCell;
+      return (!targetPiece || !targetPiece.color) && (!middlePiece || !middlePiece.color);
+    }
+    
+    return false;
+  };
+
+  const isValidRookMove = (fromRow, fromCol, toRow, toCol) => {
+    if (fromRow !== toRow && fromCol !== toCol) return false;
+    return isPathClear(fromRow, fromCol, toRow, toCol);
+  };
+
+  const isValidKnightMove = (rowDiff, colDiff) => {
+    return (Math.abs(rowDiff) === 2 && Math.abs(colDiff) === 1) ||
+           (Math.abs(rowDiff) === 1 && Math.abs(colDiff) === 2);
+  };
+
+  const isValidBishopMove = (fromRow, fromCol, toRow, toCol) => {
+    if (Math.abs(toRow - fromRow) !== Math.abs(toCol - fromCol)) return false;
+    return isPathClear(fromRow, fromCol, toRow, toCol);
+  };
+
+  const isValidQueenMove = (fromRow, fromCol, toRow, toCol) => {
+    return isValidRookMove(fromRow, fromCol, toRow, toCol) || 
+           isValidBishopMove(fromRow, fromCol, toRow, toCol);
+  };
+
+  const isValidKingMove = (rowDiff, colDiff) => {
+    return Math.abs(rowDiff) <= 1 && Math.abs(colDiff) <= 1;
+  };
+
+  const isPathClear = (fromRow, fromCol, toRow, toCol) => {
+    const rowStep = toRow > fromRow ? 1 : toRow < fromRow ? -1 : 0;
+    const colStep = toCol > fromCol ? 1 : toCol < fromCol ? -1 : 0;
+    
+    let currentRow = fromRow + rowStep;
+    let currentCol = fromCol + colStep;
+    
+    while (currentRow !== toRow || currentCol !== toCol) {
+      const cell = board[currentRow][currentCol];
+      const piece = cell?.piece || cell;
+      if (piece && piece.color) return false;
+      currentRow += rowStep;
+      currentCol += colStep;
+    }
+    
+    return true;
+  };
+
+  const renderSquare = (row, col) => {
+    const cell = board[row][col];
+    const piece = cell?.piece || cell;
+    const isSelected = selectedPiece && selectedPiece.row === row && selectedPiece.col === col;
+    const isDark = (row + col) % 2 === 1;
+    
+    let bgColor = isDark ? 'bg-amber-700' : 'bg-amber-100';
+    if (isSelected) bgColor = 'bg-blue-400';
+    
+    const isMinesweeperZone = row >= 2 && row <= 5;
+    if (isMinesweeperZone && cell && !cell.revealed) {
+      bgColor = isDark ? 'bg-gray-600' : 'bg-gray-400';
+    } else if (isMinesweeperZone && cell && cell.revealed) {
+      // Cases révélées en gris clair comme dans le vrai démineur
+      bgColor = 'bg-gray-300';
+      if (isSelected) bgColor = 'bg-blue-400';
+    }
+    
+    return (
+      <div
+        key={`${row}-${col}`}
+        onClick={() => handleSquareClick(row, col)}
+        className={`w-16 h-16 flex items-center justify-center cursor-pointer border border-gray-800 ${bgColor} hover:opacity-80 transition-all relative`}
+      >
+        {piece && piece.color && pieceSymbols[piece.color][piece.type] && (
+          <>
+            <div className={`text-5xl ${piece.color === 'white' ? 'text-white' : 'text-gray-900'} drop-shadow-lg`}>
+              {pieceSymbols[piece.color][piece.type]}
+            </div>
+            {piece.mineCount > 0 && (row === 1 || row === 6) && (
+              <div className="absolute bottom-1 right-1 text-xs font-bold bg-yellow-400 rounded-full w-5 h-5 flex items-center justify-center">
+                {piece.mineCount}
+              </div>
+            )}
+          </>
+        )}
+        {cell && cell.revealed && cell.type === 'mine' && (
+          <Bomb className="text-red-600" size={32} />
+        )}
+        {cell && cell.revealed && cell.type === 'empty' && cell.count > 0 && !cell.piece && (
+          <div className="text-2xl font-bold text-blue-600">
+            {cell.count}
+          </div>
+        )}
+        {cell && cell.revealed && cell.type === 'empty' && cell.piece && (
+          <div className="absolute bottom-1 right-1 text-xs font-bold bg-yellow-400 rounded-full w-5 h-5 flex items-center justify-center">
+            {cell.count}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
+      <h1 className="text-4xl font-bold text-white mb-4">♔ Échecs Démineur ♚</h1>
+      
+      <div className="mb-4 text-center">
+        <div className="text-xl text-white mb-2">
+          Tour: <span className={currentPlayer === 'white' ? 'text-white font-bold' : 'text-gray-300 font-bold'}>
+            {currentPlayer === 'white' ? 'Blancs ♔' : 'Noirs ♚'}
+          </span>
+        </div>
+        {message && (
+          <div className="bg-yellow-500 text-black px-4 py-2 rounded-lg font-semibold max-w-md">
+            {message}
+          </div>
+        )}
+      </div>
+      
+      <div className="flex gap-8 mb-4">
+        <div className="bg-gray-800 p-3 rounded-lg">
+          <div className="text-white font-bold mb-2">Pièces capturées (Blancs)</div>
+          <div className="text-3xl">{capturedPieces.white.map((p, i) => pieceSymbols.white[p]).join(' ')}</div>
+        </div>
+        <div className="bg-gray-800 p-3 rounded-lg">
+          <div className="text-white font-bold mb-2">Pièces capturées (Noirs)</div>
+          <div className="text-3xl">{capturedPieces.black.map((p, i) => pieceSymbols.black[p]).join(' ')}</div>
+        </div>
+      </div>
+      
+      <div className="inline-block border-4 border-gray-900 shadow-2xl mb-4">
+        {board.map((row, rowIndex) => (
+          <div key={rowIndex} className="flex">
+            {row.map((_, colIndex) => renderSquare(rowIndex, colIndex))}
+          </div>
+        ))}
+      </div>
+      
+      <button
+        onClick={initBoard}
+        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"
+      >
+        Nouvelle Partie
+      </button>
+      
+      <div className="mt-4 text-gray-300 text-sm max-w-md text-center">
+        <p>♟️ Règles complètes des échecs appliquées</p>
+        <p>💣 Attention: Les 4 rangées du milieu cachent des mines!</p>
+        <p>🎯 Capturez le roi ennemi ou faites-le exploser pour gagner</p>
+      </div>
+    </div>
+  );
+};
+
+export default ChessMinesweeper;