Spaces:

Wasghington
/

kakttus-ai

Running

App Files Files Community

Wasghington commited on Apr 22, 2025

Commit

c7f90e2

verified ·

1 Parent(s): d2684e7

Add 2 files

Browse files

Files changed (2) hide show

index.html +337 -1380
prompts.txt +4 -1

index.html CHANGED Viewed

@@ -1,1426 +1,383 @@
 <!DOCTYPE html>
-<html lang="pt-br">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Xadrez Interativo</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        .chess-board {
-            width: min(90vw, 90vh);
-            height: min(90vw, 90vh);
-            display: grid;
-            grid-template-columns: repeat(8, 1fr);
-            grid-template-rows: repeat(8, 1fr);
-            border: 2px solid #333;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         }
-        .square {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            cursor: pointer;
-            transition: all 0.2s ease;
         }
-        .square.light {
-            background-color: #f0d9b5;
         }
-        .square.dark {
-            background-color: #b58863;
         }
-        .square.highlight {
-            background-color: rgba(20, 85, 30, 0.5);
         }
-        .square.capture {
-            background-color: rgba(255, 0, 0, 0.5);
-        }
-        .piece {
-            font-size: 4.5vw;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: grab;
-            user-select: none;
-            transition: transform 0.2s ease;
-        }
-        .piece:active {
-            cursor: grabbing;
-            transform: scale(1.1);
-        }
-        .piece.white {
-            color: #fff;
-            text-shadow: 1px 1px 2px #000;
-        }
-        .piece.black {
-            color: #000;
-            text-shadow: 1px 1px 2px #fff;
-        }
-        .promotion-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 100;
-        }
-        .promotion-options {
-            background-color: white;
-            padding: 2rem;
-            border-radius: 10px;
-            display: flex;
-            gap: 1rem;
-        }
-        .promotion-option {
-            font-size: 3rem;
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 5px;
-            transition: all 0.2s ease;
-        }
-        .promotion-option:hover {
-            background-color: #f0f0f0;
-            transform: scale(1.1);
-        }
-        .move-history {
-            max-height: 300px;
-            overflow-y: auto;
-            border: 1px solid #ddd;
-            padding: 1rem;
-            background-color: #f9f9f9;
-        }
-        .move-entry {
-            padding: 0.3rem 0;
-            border-bottom: 1px solid #eee;
-        }
-        .move-entry:hover {
-            background-color: #f0f0f0;
-        }
-        @media (min-width: 768px) {
-            .piece {
-                font-size: 2.5vw;
             }
         }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen flex flex-col items-center py-8">
-    <div class="container mx-auto px-4">
-        <h1 class="text-4xl font-bold text-center mb-6 text-gray-800">Xadrez Interativo</h1>
-        <div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
-            <div class="chess-board" id="chessBoard"></div>
-            <div class="w-full lg:w-64 mt-6 lg:mt-0">
-                <div class="bg-white rounded-lg shadow-md p-4">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-800">Informações do Jogo</h2>
-                    <div class="flex items-center justify-between mb-4">
                         <div class="flex items-center">
-                            <div id="currentTurn" class="w-6 h-6 rounded-full mr-2"></div>
-                            <span id="turnText" class="font-medium">Vez das Brancas</span>
-                        </div>
-                        <button id="flipBoard" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm">
-                            <i class="fas fa-sync-alt"></i> Girar
-                        </button>
-                    </div>
-                    <div class="mb-4">
-                        <div class="flex justify-between mb-1">
-                            <span class="text-sm font-medium">Tempo Brancas</span>
-                            <span id="whiteTime" class="text-sm">10:00</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div id="whiteTimeBar" class="bg-white h-2 rounded-full" style="width: 100%"></div>
-                        </div>
-                    </div>
-                    <div class="mb-4">
-                        <div class="flex justify-between mb-1">
-                            <span class="text-sm font-medium">Tempo Pretas</span>
-                            <span id="blackTime" class="text-sm">10:00</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div id="blackTimeBar" class="bg-black h-2 rounded-full" style="width: 100%"></div>
                         </div>
                     </div>
-                    <div class="mb-4">
-                        <div class="flex flex-col gap-2">
-                            <button id="newGame" class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded">
-                                <i class="fas fa-plus"></i> Novo Jogo
-                            </button>
-                            <button id="undoMove" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-2 rounded">
-                                <i class="fas fa-undo"></i> Desfazer
-                            </button>
-                            <div class="flex gap-2">
-                                <button id="playHuman" class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-2 rounded">
-                                    <i class="fas fa-user"></i> Humano
-                                </button>
-                                <button id="playAI" class="flex-1 bg-purple-500 hover:bg-purple-600 text-white py-2 rounded">
-                                    <i class="fas fa-robot"></i> IA
-                                </button>
                             </div>
                         </div>
                     </div>
-                    <h3 class="text-lg font-medium mb-2 text-gray-800">Histórico de Jogadas</h3>
-                    <div class="move-history" id="moveHistory"></div>
                 </div>
             </div>
         </div>
-    </div>
-    <div id="promotionModal" class="promotion-modal hidden">
-        <div class="promotion-options">
-            <div class="promotion-option queen" data-piece="queen"><i class="fas fa-chess-queen"></i></div>
-            <div class="promotion-option rook" data-piece="rook"><i class="fas fa-chess-rook"></i></div>
-            <div class="promotion-option bishop" data-piece="bishop"><i class="fas fa-chess-bishop"></i></div>
-            <div class="promotion-option knight" data-piece="knight"><i class="fas fa-chess-knight"></i></div>
-        </div>
-    </div>
-    <div id="gameOverModal" class="promotion-modal hidden">
-        <div class="bg-white rounded-lg p-6 max-w-sm w-full text-center">
-            <h2 class="text-2xl font-bold mb-4" id="gameOverTitle">Xeque-Mate!</h2>
-            <p class="mb-6" id="gameOverMessage">As brancas venceram!</p>
-            <button id="newGameModal" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
-                Novo Jogo
-            </button>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // Configuração inicial do jogo
-            const board = document.getElementById('chessBoard');
-            const moveHistory = document.getElementById('moveHistory');
-            const currentTurn = document.getElementById('currentTurn');
-            const turnText = document.getElementById('turnText');
-            const flipBoard = document.getElementById('flipBoard');
-            const newGameBtn = document.getElementById('newGame');
-            const undoMoveBtn = document.getElementById('undoMove');
-            const playHumanBtn = document.getElementById('playHuman');
-            const playAIBtn = document.getElementById('playAI');
-            const promotionModal = document.getElementById('promotionModal');
-            const promotionOptions = document.querySelectorAll('.promotion-option');
-            const gameOverModal = document.getElementById('gameOverModal');
-            const gameOverTitle = document.getElementById('gameOverTitle');
-            const gameOverMessage = document.getElementById('gameOverMessage');
-            const newGameModalBtn = document.getElementById('newGameModal');
-            // Elementos de tempo
-            const whiteTimeDisplay = document.getElementById('whiteTime');
-            const blackTimeDisplay = document.getElementById('blackTime');
-            const whiteTimeBar = document.getElementById('whiteTimeBar');
-            const blackTimeBar = document.getElementById('blackTimeBar');
-            // Estado do jogo
-            let gameState = {
-                board: Array(8).fill().map(() => Array(8).fill(null)),
-                turn: 'white',
-                selectedSquare: null,
-                possibleMoves: [],
-                moveHistory: [],
-                capturedPieces: { white: [], black: [] },
-                whiteKingPos: { row: 7, col: 4 },
-                blackKingPos: { row: 0, col: 4 },
-                whiteCanCastle: { kingside: true, queenside: true },
-                blackCanCastle: { kingside: true, queenside: true },
-                enPassantTarget: null,
-                halfmoveClock: 0,
-                fullmoveNumber: 1,
-                flipped: false,
-                whiteTime: 600, // 10 minutos em segundos
-                blackTime: 600,
-                timerInterval: null,
-                gameOver: false,
-                vsAI: false,
-                playerColor: 'white' // O jogador sempre começa como branco contra a IA
-            };
-            // Inicializa o tabuleiro
-            function initializeBoard() {
-                // Limpa o tabuleiro
-                board.innerHTML = '';
-                // Cria as casas do tabuleiro
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const square = document.createElement('div');
-                        square.className = `square ${(row + col) % 2 === 0 ? 'light' : 'dark'}`;
-                        square.dataset.row = gameState.flipped ? 7 - row : row;
-                        square.dataset.col = gameState.flipped ? 7 - col : col;
-                        // Adiciona rótulos de coordenadas nas bordas
-                        if ((gameState.flipped && row === 7) || (!gameState.flipped && row === 0)) {
-                            const colLabel = document.createElement('div');
-                            colLabel.className = 'absolute bottom-0 right-0 text-xs p-1';
-                            colLabel.textContent = String.fromCharCode(97 + (gameState.flipped ? 7 - col : col));
-                            square.appendChild(colLabel);
-                        }
-                        if ((gameState.flipped && col === 0) || (!gameState.flipped && col === 7)) {
-                            const rowLabel = document.createElement('div');
-                            rowLabel.className = 'absolute top-0 left-0 text-xs p-1';
-                            rowLabel.textContent = 8 - (gameState.flipped ? 7 - row : row);
-                            square.appendChild(rowLabel);
-                        }
-                        board.appendChild(square);
-                    }
-                }
-                updateBoardView();
-            }
-            // Atualiza a visualização do tabuleiro com base no estado do jogo
-            function updateBoardView() {
-                // Remove todas as peças do tabuleiro visual
-                document.querySelectorAll('.piece').forEach(p => p.remove());
-                // Remove todos os destaques
-                document.querySelectorAll('.square').forEach(sq => {
-                    sq.classList.remove('highlight', 'capture');
-                });
-                // Adiciona as peças ao tabuleiro visual
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const piece = gameState.board[row][col];
-                        if (piece) {
-                            const square = document.querySelector(`.square[data-row="${row}"][data-col="${col}"]`);
-                            const pieceElement = document.createElement('div');
-                            pieceElement.className = `piece ${piece.color}`;
-                            pieceElement.innerHTML = getPieceIcon(piece.type);
-                            pieceElement.dataset.row = row;
-                            pieceElement.dataset.col = col;
-                            square.appendChild(pieceElement);
-                        }
-                    }
-                }
-                // Destaca a casa selecionada e movimentos possíveis
-                if (gameState.selectedSquare) {
-                    const { row, col } = gameState.selectedSquare;
-                    const selectedSquare = document.querySelector(`.square[data-row="${row}"][data-col="${col}"]`);
-                    selectedSquare.classList.add('highlight');
-                    gameState.possibleMoves.forEach(move => {
-                        const targetSquare = document.querySelector(`.square[data-row="${move.row}"][data-col="${move.col}"]`);
-                        if (gameState.board[move.row][move.col]) {
-                            targetSquare.classList.add('capture');
-                        } else {
-                            targetSquare.classList.add('highlight');
-                        }
-                    });
-                }
-                // Atualiza a vez atual
-                currentTurn.className = `w-6 h-6 rounded-full mr-2 ${gameState.turn === 'white' ? 'bg-white' : 'bg-black'}`;
-                turnText.textContent = gameState.turn === 'white' ? 'Vez das Brancas' : 'Vez das Pretas';
-                // Atualiza o histórico de jogadas
-                updateMoveHistory();
-                // Atualiza os tempos
-                updateTimeDisplays();
-                // Se for a vez da IA e estiver jogando contra ela, faz a jogada
-                if (gameState.vsAI && gameState.turn !== gameState.playerColor && !gameState.gameOver) {
-                    setTimeout(makeAIMove, 500); // Pequeno atraso para melhor experiência
-                }
-            }
-            // Retorna o ícone da peça
-            function getPieceIcon(type) {
-                const icons = {
-                    pawn: '<i class="fas fa-chess-pawn"></i>',
-                    rook: '<i class="fas fa-chess-rook"></i>',
-                    knight: '<i class="fas fa-chess-knight"></i>',
-                    bishop: '<i class="fas fa-chess-bishop"></i>',
-                    queen: '<i class="fas fa-chess-queen"></i>',
-                    king: '<i class="fas fa-chess-king"></i>'
-                };
-                return icons[type];
-            }
-            // Inicializa o estado do tabuleiro
-            function initializeGameState() {
-                // Posições iniciais das peças
-                const initialSetup = [
-                    ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'],
-                    ['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn'],
-                    [null, null, null, null, null, null, null, null],
-                    [null, null, null, null, null, null, null, null],
-                    [null, null, null, null, null, null, null, null],
-                    [null, null, null, null, null, null, null, null],
-                    ['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn'],
-                    ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']
-                ];
-                // Preenche o tabuleiro
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const pieceType = initialSetup[row][col];
-                        if (pieceType) {
-                            gameState.board[row][col] = {
-                                type: pieceType,
-                                color: row < 2 ? 'black' : 'white',
-                                hasMoved: false
-                            };
-                        } else {
-                            gameState.board[row][col] = null;
-                        }
-                    }
-                }
-                // Reinicia outras variáveis de estado
-                gameState.turn = 'white';
-                gameState.selectedSquare = null;
-                gameState.possibleMoves = [];
-                gameState.moveHistory = [];
-                gameState.capturedPieces = { white: [], black: [] };
-                gameState.whiteKingPos = { row: 7, col: 4 };
-                gameState.blackKingPos = { row: 0, col: 4 };
-                gameState.whiteCanCastle = { kingside: true, queenside: true };
-                gameState.blackCanCastle = { kingside: true, queenside: true };
-                gameState.enPassantTarget = null;
-                gameState.halfmoveClock = 0;
-                gameState.fullmoveNumber = 1;
-                gameState.gameOver = false;
-                gameState.playerColor = 'white'; // Reset para branco
-                // Reinicia o timer
-                if (gameState.timerInterval) {
-                    clearInterval(gameState.timerInterval);
-                }
-                gameState.whiteTime = 600;
-                gameState.blackTime = 600;
-                startTimer();
-                initializeBoard();
-            }
-            // Atualiza o histórico de jogadas
-            function updateMoveHistory() {
-                moveHistory.innerHTML = '';
-                // Agrupa as jogadas em pares (brancas e pretas)
-                for (let i = 0; i < gameState.moveHistory.length; i += 2) {
-                    const moveEntry = document.createElement('div');
-                    moveEntry.className = 'move-entry flex';
-                    const moveNumber = document.createElement('span');
-                    moveNumber.className = 'mr-2 font-medium';
-                    moveNumber.textContent = `${Math.floor(i / 2) + 1}.`;
-                    moveEntry.appendChild(moveNumber);
-                    // Jogada das brancas
-                    const whiteMove = document.createElement('span');
-                    whiteMove.className = 'mr-2';
-                    whiteMove.textContent = gameState.moveHistory[i].notation;
-                    moveEntry.appendChild(whiteMove);
-                    // Jogada das pretas (se existir)
-                    if (i + 1 < gameState.moveHistory.length) {
-                        const blackMove = document.createElement('span');
-                        blackMove.textContent = gameState.moveHistory[i + 1].notation;
-                        moveEntry.appendChild(blackMove);
-                    }
-                    moveHistory.appendChild(moveEntry);
-                }
-                // Rolagem automática para o final
-                moveHistory.scrollTop = moveHistory.scrollHeight;
-            }
-            // Manipulador de evento para selecionar uma peça
-            function handleSquareClick(e) {
-                if (gameState.gameOver || (gameState.vsAI && gameState.turn !== gameState.playerColor)) return;
-                const square = e.target.closest('.square');
-                if (!square) return;
-                const row = parseInt(square.dataset.row);
-                const col = parseInt(square.dataset.col);
-                // Se já tiver uma peça selecionada, tenta mover
-                if (gameState.selectedSquare) {
-                    const move = gameState.possibleMoves.find(m => m.row === row && m.col === col);
-                    if (move) {
-                        makeMove(move);
-                    } else {
-                        // Desseleciona se clicar em outro lugar
-                        gameState.selectedSquare = null;
-                        gameState.possibleMoves = [];
-                        updateBoardView();
-                    }
-                } else {
-                    // Seleciona uma peça se for do jogador atual
-                    const piece = gameState.board[row][col];
-                    if (piece && piece.color === gameState.turn) {
-                        gameState.selectedSquare = { row, col };
-                        gameState.possibleMoves = getPossibleMoves(row, col);
-                        updateBoardView();
-                    }
-                }
-            }
-            // Obtém todos os movimentos possíveis para uma peça
-            function getPossibleMoves(row, col) {
-                const piece = gameState.board[row][col];
-                if (!piece || piece.color !== gameState.turn) return [];
-                const moves = [];
-                switch (piece.type) {
-                    case 'pawn':
-                        getPawnMoves(row, col, piece.color, moves);
-                        break;
-                    case 'rook':
-                        getRookMoves(row, col, piece.color, moves);
-                        break;
-                    case 'knight':
-                        getKnightMoves(row, col, piece.color, moves);
-                        break;
-                    case 'bishop':
-                        getBishopMoves(row, col, piece.color, moves);
-                        break;
-                    case 'queen':
-                        getRookMoves(row, col, piece.color, moves);
-                        getBishopMoves(row, col, piece.color, moves);
-                        break;
-                    case 'king':
-                        getKingMoves(row, col, piece.color, moves);
-                        break;
-                }
-                // Filtra movimentos que deixariam o rei em xeque
-                return moves.filter(move => {
-                    // Faz o movimento temporariamente
-                    const originalPiece = gameState.board[move.row][move.col];
-                    gameState.board[move.row][move.col] = gameState.board[row][col];
-                    gameState.board[row][col] = null;
-                    // Atualiza posição do rei se necessário
-                    let kingPosChanged = false;
-                    let originalKingPos;
-                    if (piece.type === 'king') {
-                        originalKingPos = piece.color === 'white' ? { ...gameState.whiteKingPos } : { ...gameState.blackKingPos };
-                        if (piece.color === 'white') {
-                            gameState.whiteKingPos = { row: move.row, col: move.col };
-                        } else {
-                            gameState.blackKingPos = { row: move.row, col: move.col };
-                        }
-                        kingPosChanged = true;
-                    }
-                    // Verifica se o rei está em xeque
-                    const inCheck = isKingInCheck(piece.color);
-                    // Desfaz o movimento temporário
-                    gameState.board[row][col] = gameState.board[move.row][move.col];
-                    gameState.board[move.row][move.col] = originalPiece;
-                    if (kingPosChanged) {
-                        if (piece.color === 'white') {
-                            gameState.whiteKingPos = originalKingPos;
-                        } else {
-                            gameState.blackKingPos = originalKingPos;
-                        }
-                    }
-                    return !inCheck;
-                });
-            }
-            // Movimentos do peão
-            function getPawnMoves(row, col, color, moves) {
-                const direction = color === 'white' ? -1 : 1;
-                const startRow = color === 'white' ? 6 : 1;
-                // Movimento para frente
-                if (isValidSquare(row + direction, col) && !gameState.board[row + direction][col]) {
-                    moves.push({ row: row + direction, col });
-                    // Movimento duplo do início
-                    if (row === startRow && !gameState.board[row + 2 * direction][col]) {
-                        moves.push({ row: row + 2 * direction, col });
-                    }
-                }
-                // Capturas
-                for (const dc of [-1, 1]) {
-                    if (isValidSquare(row + direction, col + dc)) {
-                        // Captura normal
-                        const targetPiece = gameState.board[row + direction][col + dc];
-                        if (targetPiece && targetPiece.color !== color) {
-                            moves.push({ row: row + direction, col: col + dc });
-                        }
-                        // En passant
-                        if (gameState.enPassantTarget &&
-                            gameState.enPassantTarget.row === row + direction &&
-                            gameState.enPassantTarget.col === col + dc) {
-                            moves.push({ row: row + direction, col: col + dc, isEnPassant: true });
-                        }
-                    }
-                }
-            }
-            // Movimentos da torre
-            function getRookMoves(row, col, color, moves) {
-                const directions = [
-                    { dr: -1, dc: 0 }, // cima
-                    { dr: 1, dc: 0 },  // baixo
-                    { dr: 0, dc: -1 }, // esquerda
-                    { dr: 0, dc: 1 }   // direita
-                ];
-                getSlidingMoves(row, col, color, directions, moves);
-            }
-            // Movimentos do cavalo
-            function getKnightMoves(row, col, color, moves) {
-                const knightMoves = [
-                    { dr: -2, dc: -1 }, { dr: -2, dc: 1 },
-                    { dr: -1, dc: -2 }, { dr: -1, dc: 2 },
-                    { dr: 1, dc: -2 }, { dr: 1, dc: 2 },
-                    { dr: 2, dc: -1 }, { dr: 2, dc: 1 }
-                ];
-                for (const move of knightMoves) {
-                    const newRow = row + move.dr;
-                    const newCol = col + move.dc;
-                    if (isValidSquare(newRow, newCol)) {
-                        const targetPiece = gameState.board[newRow][newCol];
-                        if (!targetPiece || targetPiece.color !== color) {
-                            moves.push({ row: newRow, col: newCol });
-                        }
-                    }
-                }
-            }
-            // Movimentos do bispo
-            function getBishopMoves(row, col, color, moves) {
-                const directions = [
-                    { dr: -1, dc: -1 }, // diagonal superior esquerda
-                    { dr: -1, dc: 1 },  // diagonal superior direita
-                    { dr: 1, dc: -1 },  // diagonal inferior esquerda
-                    { dr: 1, dc: 1 }    // diagonal inferior direita
-                ];
-                getSlidingMoves(row, col, color, directions, moves);
-            }
-            // Movimentos do rei
-            function getKingMoves(row, col, color, moves) {
-                for (let dr = -1; dr <= 1; dr++) {
-                    for (let dc = -1; dc <= 1; dc++) {
-                        if (dr === 0 && dc === 0) continue;
-                        const newRow = row + dr;
-                        const newCol = col + dc;
-                        if (isValidSquare(newRow, newCol)) {
-                        const targetPiece = gameState.board[newRow][newCol];
-                        if (!targetPiece || targetPiece.color !== color) {
-                            moves.push({ row: newRow, col: newCol });
-                        }
-                        }
-                    }
-                }
-                // Roque
-                const canCastle = color === 'white' ? gameState.whiteCanCastle : gameState.blackCanCastle;
-                const kingPos = color === 'white' ? gameState.whiteKingPos : gameState.blackKingPos;
-                // Roque pequeno (kingside)
-                if (canCastle.kingside) {
-                    const pathClear = !gameState.board[kingPos.row][5] &&
-                                     !gameState.board[kingPos.row][6] &&
-                                     gameState.board[kingPos.row][7]?.type === 'rook';
-                    if (pathClear && !isSquareAttacked(kingPos.row, 5, color) &&
-                        !isSquareAttacked(kingPos.row, 6, color)) {
-                        moves.push({
-                            row: kingPos.row,
-                            col: 6,
-                            isCastle: true,
-                            rookFrom: { row: kingPos.row, col: 7 },
-                            rookTo: { row: kingPos.row, col: 5 }
-                        });
-                    }
-                }
-                // Roque grande (queenside)
-                if (canCastle.queenside) {
-                    const pathClear = !gameState.board[kingPos.row][3] &&
-                                     !gameState.board[kingPos.row][2] &&
-                                     !gameState.board[kingPos.row][1] &&
-                                     gameState.board[kingPos.row][0]?.type === 'rook';
-                    if (pathClear && !isSquareAttacked(kingPos.row, 3, color) &&
-                        !isSquareAttacked(kingPos.row, 2, color)) {
-                        moves.push({
-                            row: kingPos.row,
-                            col: 2,
-                            isCastle: true,
-                            rookFrom: { row: kingPos.row, col: 0 },
-                            rookTo: { row: kingPos.row, col: 3 }
-                        });
-                    }
-                }
             }
-            // Função auxiliar para movimentos deslizantes (torre, bispo, rainha)
-            function getSlidingMoves(row, col, color, directions, moves) {
-                for (const dir of directions) {
-                    let newRow = row + dir.dr;
-                    let newCol = col + dir.dc;
-                    while (isValidSquare(newRow, newCol)) {
-                        const targetPiece = gameState.board[newRow][newCol];
-                        if (!targetPiece) {
-                            moves.push({ row: newRow, col: newCol });
-                        } else {
-                            if (targetPiece.color !== color) {
-                                moves.push({ row: newRow, col: newCol });
-                            }
-                            break;
-                        }
-                        newRow += dir.dr;
-                        newCol += dir.dc;
-                    }
                 }
             }
-            // Verifica se uma casa está dentro do tabuleiro
-            function isValidSquare(row, col) {
-                return row >= 0 && row < 8 && col >= 0 && col < 8;
             }
-            // Executa um movimento
-            function makeMove(move) {
-                const { row: fromRow, col: fromCol } = gameState.selectedSquare;
-                const { row: toRow, col: toCol } = move;
-                const piece = gameState.board[fromRow][fromCol];
-                // Cria uma cópia do estado atual para o histórico
-                const moveCopy = {
-                    from: { row: fromRow, col: fromCol },
-                    to: { row: toRow, col: toCol },
-                    piece: { ...piece },
-                    captured: gameState.board[toRow][toCol] ? { ...gameState.board[toRow][toCol] } : null,
-                    whiteCanCastle: { ...gameState.whiteCanCastle },
-                    blackCanCastle: { ...gameState.blackCanCastle },
-                    enPassantTarget: gameState.enPassantTarget,
-                    halfmoveClock: gameState.halfmoveClock,
-                    fullmoveNumber: gameState.fullmoveNumber
-                };
-                // Atualiza o relógio de meio movimento
-                if (piece.type === 'pawn' || moveCopy.captured) {
-                    gameState.halfmoveClock = 0;
                 } else {
-                    gameState.halfmoveClock++;
-                }
-                // Movimento especial: Roque
-                if (move.isCastle) {
-                    // Move a torre
-                    const rook = gameState.board[move.rookFrom.row][move.rookFrom.col];
-                    gameState.board[move.rookFrom.row][move.rookFrom.col] = null;
-                    gameState.board[move.rookTo.row][move.rookTo.col] = rook;
-                    rook.hasMoved = true;
-                    moveCopy.isCastle = true;
-                    moveCopy.rookFrom = move.rookFrom;
-                    moveCopy.rookTo = move.rookTo;
-                }
-                // Movimento especial: En passant
-                if (move.isEnPassant) {
-                    const capturedPawnRow = piece.color === 'white' ? toRow + 1 : toRow - 1;
-                    moveCopy.captured = { ...gameState.board[capturedPawnRow][toCol] };
-                    gameState.board[capturedPawnRow][toCol] = null;
-                    moveCopy.isEnPassant = true;
-                    moveCopy.capturedAt = { row: capturedPawnRow, col: toCol };
-                }
-                // Move a peça
-                gameState.board[toRow][toCol] = piece;
-                gameState.board[fromRow][fromCol] = null;
-                piece.hasMoved = true;
-                // Atualiza posição do rei se necessário
-                if (piece.type === 'king') {
-                    if (piece.color === 'white') {
-                        gameState.whiteKingPos = { row: toRow, col: toCol };
-                    } else {
-                        gameState.blackKingPos = { row: toRow, col: toCol };
-                    }
-                    // Perde direito ao roque
-                    if (piece.color === 'white') {
-                        gameState.whiteCanCastle = { kingside: false, queenside: false };
-                    } else {
-                        gameState.blackCanCastle = { kingside: false, queenside: false };
-                    }
-                }
-                // Atualiza direito ao roque se torre for movida
-                if (piece.type === 'rook') {
-                    if (piece.color === 'white') {
-                        if (fromRow === 7 && fromCol === 0) gameState.whiteCanCastle.queenside = false;
-                        if (fromRow === 7 && fromCol === 7) gameState.whiteCanCastle.kingside = false;
-                    } else {
-                        if (fromRow === 0 && fromCol === 0) gameState.blackCanCastle.queenside = false;
-                        if (fromRow === 0 && fromCol === 7) gameState.blackCanCastle.kingside = false;
-                    }
-                }
-                // Se torre for capturada, atualiza direito ao roque
-                if (moveCopy.captured?.type === 'rook') {
-                    if (moveCopy.captured.color === 'white') {
-                        if (toRow === 7 && toCol === 0) gameState.whiteCanCastle.queenside = false;
-                        if (toRow === 7 && toCol === 7) gameState.whiteCanCastle.kingside = false;
-                    } else {
-                        if (toRow === 0 && toCol === 0) gameState.blackCanCastle.queenside = false;
-                        if (toRow === 0 && toCol === 7) gameState.blackCanCastle.kingside = false;
-                    }
-                }
-                // Define alvo en passant se peão avançar duas casas
-                gameState.enPassantTarget = null;
-                if (piece.type === 'pawn' && Math.abs(toRow - fromRow) === 2) {
-                    gameState.enPassantTarget = {
-                        row: fromRow + (toRow - fromRow) / 2,
-                        col: fromCol
-                    };
-                }
-                // Promoção de peão
-                if (piece.type === 'pawn' && (toRow === 0 || toRow === 7)) {
-                    showPromotionModal(toRow, toCol, piece.color);
-                    moveCopy.promotionPending = true;
-                }
-                // Adiciona peça capturada à lista
-                if (moveCopy.captured) {
-                    gameState.capturedPieces[piece.color].push(moveCopy.captured);
-                }
-                // Incrementa o número de movimento completo se for a vez das pretas
-                if (gameState.turn === 'black') {
-                    gameState.fullmoveNumber++;
-                }
-                // Alterna o turno
-                gameState.turn = gameState.turn === 'white' ? 'black' : 'white';
-                // Adiciona ao histórico
-                moveCopy.notation = getMoveNotation(moveCopy);
-                gameState.moveHistory.push(moveCopy);
-                // Verifica xeque-mate ou afogamento
-                checkGameEnd();
-                // Limpa seleção e atualiza tabuleiro
-                gameState.selectedSquare = null;
-                gameState.possibleMoves = [];
-                updateBoardView();
-            }
-            // Mostra modal de promoção de peão
-            function showPromotionModal(row, col, color) {
-                gameState.gameOver = true; // Pausa o jogo até a promoção ser feita
-                promotionModal.classList.remove('hidden');
-                // Configura os ícones de acordo com a cor
-                promotionOptions.forEach(option => {
-                    option.className = `promotion-option ${option.dataset.piece} ${color}`;
-                    option.innerHTML = getPieceIcon(option.dataset.piece);
-                });
-                // Armazena informações da promoção
-                promotionModal.dataset.row = row;
-                promotionModal.dataset.col = col;
-                promotionModal.dataset.color = color;
-            }
-            // Completa a promoção de peão
-            function completePromotion(pieceType) {
-                const row = parseInt(promotionModal.dataset.row);
-                const col = parseInt(promotionModal.dataset.col);
-                const color = promotionModal.dataset.color;
-                // Atualiza a peça
-                gameState.board[row][col].type = pieceType;
-                // Atualiza o último movimento no histórico
-                const lastMove = gameState.moveHistory[gameState.moveHistory.length - 1];
-                lastMove.promotion = pieceType;
-                lastMove.notation = getMoveNotation(lastMove);
-                promotionModal.classList.add('hidden');
-                gameState.gameOver = false;
-                updateBoardView();
-                checkGameEnd(); // Verifica novamente o fim do jogo após promoção
-            }
-            // Verifica se o jogo terminou (xeque-mate ou afogamento)
-            function checkGameEnd() {
-                // Verifica se o rei atual está em xeque
-                const inCheck = isKingInCheck(gameState.turn);
-                // Verifica se há movimentos legais disponíveis
-                const hasLegalMoves = hasAnyLegalMove(gameState.turn);
-                if (inCheck && !hasLegalMoves) {
-                    // Xeque-mate
-                    endGame('mate', gameState.turn === 'white' ? 'black' : 'white');
-                } else if (!inCheck && !hasLegalMoves) {
-                    // Afogamento
-                    endGame('stalemate');
-                } else if (isDrawByMaterial()) {
-                    // Empate por material insuficiente
-                    endGame('insufficient');
-                } else if (gameState.halfmoveClock >= 50) {
-                    // Regra dos 50 movimentos
-                    endGame('50move');
-                }
-            }
-            // Verifica se o rei está em xeque
-            function isKingInCheck(color) {
-                const kingPos = color === 'white' ? gameState.whiteKingPos : gameState.blackKingPos;
-                return isSquareAttacked(kingPos.row, kingPos.col, color);
-            }
-            // Verifica se uma casa está sendo atacada
-            function isSquareAttacked(row, col, defenderColor) {
-                for (let r = 0; r < 8; r++) {
-                    for (let c = 0; c < 8; c++) {
-                        const piece = gameState.board[r][c];
-                        if (piece && piece.color !== defenderColor) {
-                            const moves = getRawMoves(r, c, piece.color);
-                            if (moves.some(m => m.row === row && m.col === col)) {
-                                return true;
-                            }
-                        }
-                    }
-                }
-                return false;
-            }
-            // Obtém movimentos sem verificar xeque (para verificação de ataques)
-            function getRawMoves(row, col, color) {
-                const piece = gameState.board[row][col];
-                if (!piece || piece.color !== color) return [];
-                const moves = [];
-                switch (piece.type) {
-                    case 'pawn':
-                        // Peões atacam de forma diferente do que se movem
-                        const direction = color === 'white' ? -1 : 1;
-                        for (const dc of [-1, 1]) {
-                            if (isValidSquare(row + direction, col + dc)) {
-                                moves.push({ row: row + direction, col: col + dc });
-                            }
-                        }
-                        break;
-                    case 'rook':
-                        getRookMoves(row, col, color, moves);
-                        break;
-                    case 'knight':
-                        getKnightMoves(row, col, color, moves);
-                        break;
-                    case 'bishop':
-                        getBishopMoves(row, col, color, moves);
-                        break;
-                    case 'queen':
-                        getRookMoves(row, col, color, moves);
-                        getBishopMoves(row, col, color, moves);
-                        break;
-                    case 'king':
-                        getKingMoves(row, col, color, moves);
-                        break;
-                }
-                return moves;
-            }
-            // Verifica se há algum movimento legal disponível
-            function hasAnyLegalMove(color) {
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const piece = gameState.board[row][col];
-                        if (piece && piece.color === color) {
-                            const moves = getPossibleMoves(row, col);
-                            if (moves.length > 0) {
-                                return true;
-                            }
-                        }
-                    }
-                }
-                return false;
-            }
-            // Verifica empate por material insuficiente
-            function isDrawByMaterial() {
-                let whitePieces = [];
-                let blackPieces = [];
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const piece = gameState.board[row][col];
-                        if (piece) {
-                            if (piece.color === 'white') {
-                                whitePieces.push(piece.type);
-                            } else {
-                                blackPieces.push(piece.type);
-                            }
-                        }
-                    }
-                }
-                // Filtra peões, torres, rainhas e bispos/cavalos
-                whitePieces = whitePieces.filter(p => p !== 'king');
-                blackPieces = blackPieces.filter(p => p !== 'king');
-                // Caso 1: Rei vs Rei
-                if (whitePieces.length === 0 && blackPieces.length === 0) {
-                    return true;
-                }
-                // Caso 2: Rei e bispo vs Rei
-                if ((whitePieces.length === 1 && whitePieces[0] === 'bishop' && blackPieces.length === 0) ||
-                    (blackPieces.length === 1 && blackPieces[0] === 'bishop' && whitePieces.length === 0)) {
-                    return true;
-                }
-                // Caso 3: Rei e cavalo vs Rei
-                if ((whitePieces.length === 1 && whitePieces[0] === 'knight' && blackPieces.length === 0) ||
-                    (blackPieces.length === 1 && blackPieces[0] === 'knight' && whitePieces.length === 0)) {
-                    return true;
-                }
-                // Caso 4: Rei e bispo vs Rei e bispo (mesma cor)
-                if (whitePieces.length === 1 && whitePieces[0] === 'bishop' &&
-                    blackPieces.length === 1 && blackPieces[0] === 'bishop') {
-                    // Verifica cor dos bispos (complexo, vamos simplificar)
-                    return true;
-                }
-                return false;
-            }
-            // Finaliza o jogo
-            function endGame(reason, winner) {
-                gameState.gameOver = true;
-                if (gameState.timerInterval) {
-                    clearInterval(gameState.timerInterval);
-                    gameState.timerInterval = null;
-                }
-                let title, message;
-                switch (reason) {
-                    case 'mate':
-                        title = 'Xeque-Mate!';
-                        message = `As ${winner === 'white' ? 'brancas' : 'pretas'} venceram!`;
-                        break;
-                    case 'stalemate':
-                        title = 'Afogamento!';
-                        message = 'Empate por afogamento.';
-                        break;
-                    case 'insufficient':
-                        title = 'Empate!';
-                        message = 'Empate por material insuficiente.';
-                        break;
-                    case '50move':
-                        title = 'Empate!';
-                        message = 'Empate pela regra dos 50 movimentos.';
-                        break;
-                    case 'time':
-                        title = 'Tempo Esgotado!';
-                        message = `As ${winner === 'white' ? 'brancas' : 'pretas'} venceram por tempo!`;
-                        break;
-                }
-                gameOverTitle.textContent = title;
-                gameOverMessage.textContent = message;
-                gameOverModal.classList.remove('hidden');
-            }
-            // Gera notação algébrica para o movimento
-            function getMoveNotation(move) {
-                const piece = move.piece;
-                const from = move.from;
-                const to = move.to;
-                const captured = move.captured;
-                let notation = '';
-                // Peões
-                if (piece.type === 'pawn') {
-                    if (captured) {
-                        notation += String.fromCharCode(97 + from.col) + 'x';
-                    }
-                    notation += String.fromCharCode(97 + to.col) + (8 - to.row);
-                    // Promoção
-                    if (move.promotion) {
-                        notation += '=' + move.promotion[0].toUpperCase();
-                    }
-                    return notation;
-                }
-                // Outras peças
-                notation += piece.type[0].toUpperCase();
-                // Para peças que podem ter ambiguidade (duas torres/cavalos/bispos podem ir para mesma casa)
-                const ambiguousPieces = [];
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const p = gameState.board[row][col];
-                        if (p && p.type === piece.type && p.color === piece.color &&
-                            !(row === from.row && col === from.col)) {
-                            const moves = getPossibleMoves(row, col);
-                            if (moves.some(m => m.row === to.row && m.col === to.col)) {
-                                ambiguousPieces.push({ row, col });
-                            }
-                        }
-                    }
-                }
-                // Adiciona informação de desambiguação se necessário
-                if (ambiguousPieces.length > 0) {
-                    const sameCol = ambiguousPieces.some(p => p.col === from.col);
-                    const sameRow = ambiguousPieces.some(p => p.row === from.row);
-                    if (!sameCol) {
-                        notation += String.fromCharCode(97 + from.col);
-                    } else if (!sameRow) {
-                        notation += (8 - from.row);
-                    } else {
-                        notation += String.fromCharCode(97 + from.col) + (8 - from.row);
-                    }
-                }
-                // Captura
-                if (captured) {
-                    notation += 'x';
-                }
-                // Casa de destino
-                notation += String.fromCharCode(97 + to.col) + (8 - to.row);
-                // Roque
-                if (move.isCastle) {
-                    if (to.col === 6) return 'O-O'; // Roque pequeno
-                    if (to.col === 2) return 'O-O-O'; // Roque grande
-                }
-                return notation;
-            }
-            // Desfaz o último movimento
-            function undoLastMove() {
-                if (gameState.moveHistory.length === 0 || gameState.gameOver) return;
-                const lastMove = gameState.moveHistory.pop();
-                // Restaura a peça movida
-                gameState.board[lastMove.from.row][lastMove.from.col] = lastMove.piece;
-                gameState.board[lastMove.to.row][lastMove.to.col] = lastMove.captured;
-                // Restaura posição do rei se necessário
-                if (lastMove.piece.type === 'king') {
-                    if (lastMove.piece.color === 'white') {
-                        gameState.whiteKingPos = { row: lastMove.from.row, col: lastMove.from.col };
-                    } else {
-                        gameState.blackKingPos = { row: lastMove.from.row, col: lastMove.from.col };
-                    }
-                }
-                // Restaura roque se necessário
-                if (lastMove.isCastle) {
-                    const rook = gameState.board[lastMove.rookTo.row][lastMove.rookTo.col];
-                    gameState.board[lastMove.rookTo.row][lastMove.rookTo.col] = null;
-                    gameState.board[lastMove.rookFrom.row][lastMove.rookFrom.col] = rook;
-                    rook.hasMoved = false;
-                }
-                // Restaura en passant se necessário
-                if (lastMove.isEnPassant) {
-                    gameState.board[lastMove.capturedAt.row][lastMove.capturedAt.col] = lastMove.captured;
-                }
-                // Restaura direitos de roque
-                gameState.whiteCanCastle = lastMove.whiteCanCastle;
-                gameState.blackCanCastle = lastMove.blackCanCastle;
-                // Restaura alvo en passant
-                gameState.enPassantTarget = lastMove.enPassantTarget;
-                // Restaura relógios
-                gameState.halfmoveClock = lastMove.halfmoveClock;
-                gameState.fullmoveNumber = lastMove.fullmoveNumber;
-                // Remove peça capturada da lista
-                if (lastMove.captured) {
-                    gameState.capturedPieces[lastMove.piece.color].pop();
                 }
-                // Alterna o turno de volta
-                gameState.turn = lastMove.piece.color;
-                // Se estava em promoção, cancela
-                promotionModal.classList.add('hidden');
-                gameState.gameOver = false;
-                // Atualiza a visualização
-                gameState.selectedSquare = null;
-                gameState.possibleMoves = [];
-                updateBoardView();
-            }
-            // Inicia o timer
-            function startTimer() {
-                if (gameState.timerInterval) {
-                    clearInterval(gameState.timerInterval);
                 }
-                gameState.timerInterval = setInterval(() => {
-                    if (gameState.gameOver) return;
-                    if (gameState.turn === 'white') {
-                        gameState.whiteTime--;
-                        if (gameState.whiteTime <= 0) {
-                            endGame('time', 'black');
-                        }
-                    } else {
-                        gameState.blackTime--;
-                        if (gameState.blackTime <= 0) {
-                            endGame('time', 'white');
-                        }
-                    }
-                    updateTimeDisplays();
-                }, 1000);
             }
-            // Atualiza os displays de tempo
-            function updateTimeDisplays() {
-                const whiteMinutes = Math.floor(gameState.whiteTime / 60);
-                const whiteSeconds = gameState.whiteTime % 60;
-                whiteTimeDisplay.textContent = `${whiteMinutes}:${whiteSeconds < 10 ? '0' : ''}${whiteSeconds}`;
-                const blackMinutes = Math.floor(gameState.blackTime / 60);
-                const blackSeconds = gameState.blackTime % 60;
-                blackTimeDisplay.textContent = `${blackMinutes}:${blackSeconds < 10 ? '0' : ''}${blackSeconds}`;
-                // Atualiza barras de progresso
-                const maxTime = 600; // 10 minutos
-                whiteTimeBar.style.width = `${(gameState.whiteTime / maxTime) * 100}%`;
-                blackTimeBar.style.width = `${(gameState.blackTime / maxTime) * 100}%`;
             }
-            // Função para a IA fazer uma jogada
-            function makeAIMove() {
-                if (gameState.gameOver || !gameState.vsAI || gameState.turn === gameState.playerColor) return;
-                // Encontra todas as peças da IA
-                const aiPieces = [];
-                for (let row = 0; row < 8; row++) {
-                    for (let col = 0; col < 8; col++) {
-                        const piece = gameState.board[row][col];
-                        if (piece && piece.color === gameState.turn) {
-                            aiPieces.push({ row, col });
-                        }
-                    }
-                }
-                // Coleta todos os movimentos possíveis
-                const allMoves = [];
-                for (const piece of aiPieces) {
-                    const moves = getPossibleMoves(piece.row, piece.col);
-                    for (const move of moves) {
-                        allMoves.push({
-                            from: { row: piece.row, col: piece.col },
-                            to: { row: move.row, col: move.col },
-                            moveData: move
-                        });
-                    }
-                }
-                if (allMoves.length === 0) return;
-                // Avalia os movimentos e escolhe o melhor
-                const evaluatedMoves = allMoves.map(move => {
-                    return {
-                        ...move,
-                        score: evaluateMove(move)
-                    };
-                });
-                // Ordena os movimentos por pontuação (melhores primeiro)
-                evaluatedMoves.sort((a, b) => b.score - a.score);
-                // Escolhe um movimento aleatório entre os melhores (para variar)
-                const topMoves = evaluatedMoves.slice(0, Math.max(3, Math.floor(evaluatedMoves.length / 2)));
-                const selectedMove = topMoves[Math.floor(Math.random() * topMoves.length)];
-                // Faz o movimento selecionado
-                gameState.selectedSquare = selectedMove.from;
-                gameState.possibleMoves = [selectedMove.moveData];
-                // Pequeno atraso para melhor experiência visual
                 setTimeout(() => {
-                    makeMove(selectedMove.moveData);
-                }, 300);
             }
-            // Avalia um movimento para a IA
-            function evaluateMove(move) {
-                const from = move.from;
-                const to = move.to;
-                const piece = gameState.board[from.row][from.col];
-                const targetPiece = gameState.board[to.row][to.col];
-                let score = 0;
-                // Valor da peça capturada
-                if (targetPiece) {
-                    score += getPieceValue(targetPiece.type) * 1.5;
-                }
-                // Valor da peça que está se movendo (evitar perder peças valiosas)
-                score -= getPieceValue(piece.type) * 0.1;
-                // Movimentos especiais
-                if (move.moveData.isEnPassant) {
-                    score += getPieceValue('pawn') * 1.5;
-                }
-                if (move.moveData.isCastle) {
-                    score += 0.5; // Roque é geralmente bom
-                }
-                // Promoção de peão
-                if (piece.type === 'pawn' && (to.row === 0 || to.row === 7)) {
-                    score += getPieceValue('queen') - getPieceValue('pawn'); // Assume promoção para rainha
-                }
-                // Controle do centro
-                const centerSquares = [[3, 3], [3, 4], [4, 3], [4, 4]];
-                if (centerSquares.some(sq => sq[0] === to.row && sq[1] === to.col)) {
-                    score += 0.3;
-                }
-                // Desenvolvimento de peças (movimentar peças no início do jogo)
-                if (!piece.hasMoved) {
-                    score += 0.2;
-                }
-                // Segurança do rei (evitar colocar o rei em xeque)
-                // Isso já é verificado em getPossibleMoves, então não precisamos verificar aqui
-                return score;
-            }
-            // Retorna o valor relativo de cada peça
-            function getPieceValue(type) {
-                const values = {
-                    pawn: 1,
-                    knight: 3,
-                    bishop: 3,
-                    rook: 5,
-                    queen: 9,
-                    king: 100 // O rei é muito valioso para ser capturado
-                };
-                return values[type];
-            }
-            // Alterna entre jogar contra humano ou IA
-            function toggleAIMode(playAgainstAI) {
-                gameState.vsAI = playAgainstAI;
-                // Atualiza botões
-                if (playAgainstAI) {
-                    playHumanBtn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
-                    playHumanBtn.classList.add('bg-gray-400', 'hover:bg-gray-500');
-                    playAIBtn.classList.remove('bg-gray-400', 'hover:bg-gray-500');
-                    playAIBtn.classList.add('bg-purple-500', 'hover:bg-purple-600');
                 } else {
-                    playHumanBtn.classList.remove('bg-gray-400', 'hover:bg-gray-500');
-                    playHumanBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
-                    playAIBtn.classList.remove('bg-purple-500', 'hover:bg-purple-600');
-                    playAIBtn.classList.add('bg-gray-400', 'hover:bg-gray-500');
-                }
-                // Se estiver jogando contra IA e for a vez dela, faz a jogada
-                if (gameState.vsAI && gameState.turn !== gameState.playerColor && !gameState.gameOver) {
-                    setTimeout(makeAIMove, 500);
-                }
             }
-            // Event listeners
-            board.addEventListener('click', handleSquareClick);
-            flipBoard.addEventListener('click', () => {
-                gameState.flipped = !gameState.flipped;
-                initializeBoard();
-            });
-            newGameBtn.addEventListener('click', initializeGameState);
-            undoMoveBtn.addEventListener('click', undoLastMove);
-            playHumanBtn.addEventListener('click', () => toggleAIMode(false));
-            playAIBtn.addEventListener('click', () => toggleAIMode(true));
-            promotionOptions.forEach(option => {
-                option.addEventListener('click', () => {
-                    completePromotion(option.dataset.piece);
-                });
-            });
-            newGameModalBtn.addEventListener('click', () => {
-                gameOverModal.classList.add('hidden');
-                initializeGameState();
-            });
-            // Inicializa o jogo
-            initializeGameState();
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Wasghington/kakttus-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <!DOCTYPE html>
+<html lang="pt-BR">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aprendendo a Ler - Jogo Infantil</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
         }
+        .bounce-animation {
+            animation: bounce 1s infinite;
         }
+        .word-card {
+            transition: all 0.3s ease;
         }
+        .word-card:hover {
+            transform: scale(1.05);
         }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #f00;
+            border-radius: 50%;
+            animation: fall 3s linear forwards;
         }
+        @keyframes fall {
+            to {
+                transform: translateY(100vh) rotate(360deg);
+                opacity: 0;
             }
         }
+        #wordImage {
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            width: 200px;
+            height: 200px;
+        }
     </style>
 </head>
+<body class="bg-gradient-to-b from-blue-100 to-purple-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-purple-600 mb-2">Aprendendo a Ler</h1>
+            <p class="text-lg text-gray-600">Um jogo divertido para crianças aprenderem palavras novas!</p>
+        </header>
+        <!-- Game Mode Selection -->
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 max-w-md mx-auto">
+            <h2 class="text-2xl font-semibold text-center mb-4 text-blue-600">Escolha como jogar</h2>
+            <div class="flex flex-col space-y-4">
+                <button id="singlePlayerBtn" class="bg-green-500 hover:bg-green-600 text-white py-3 px-6 rounded-lg text-lg font-medium transition flex items-center justify-center">
+                    <i class="fas fa-child mr-2"></i> Jogar Sozinho
+                </button>
+                <button id="vsAiBtn" class="bg-purple-500 hover:bg-purple-600 text-white py-3 px-6 rounded-lg text-lg font-medium transition flex items-center justify-center">
+                    <i class="fas fa-robot mr-2"></i> Jogar contra a IA
+                </button>
+            </div>
+        </div>
+        <!-- Game Area (initially hidden) -->
+        <div id="gameArea" class="hidden">
+            <!-- Word Display -->
+            <div class="bg-white rounded-xl shadow-lg p-6 mb-6 text-center">
+                <h2 id="currentWord" class="text-5xl font-bold text-blue-600 mb-4">PALAVRA</h2>
+                <div id="wordImage" class="mx-auto mb-4 w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-image text-gray-300 text-6xl"></i>
+                </div>
+                <button id="speakBtn" class="bg-yellow-400 hover:bg-yellow-500 text-white py-2 px-6 rounded-full text-lg font-medium transition">
+                    <i class="fas fa-volume-up mr-2"></i> Ouvir a Palavra
+                </button>
+            </div>
+            <!-- Options (for single player) -->
+            <div id="singlePlayerOptions" class="hidden grid grid-cols-2 gap-4 mb-8">
+                <!-- Options will be filled by JavaScript -->
+            </div>
+            <!-- VS AI Section -->
+            <div id="vsAiSection" class="hidden">
+                <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
+                    <div class="flex justify-between items-center mb-4">
                         <div class="flex items-center">
+                            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-child text-purple-600 text-xl"></i>
+                            </div>
+                            <span class="font-medium">Você</span>
                         </div>
+                        <div class="text-2xl font-bold text-purple-600" id="playerScore">0</div>
                     </div>
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-robot text-blue-600 text-xl"></i>
                             </div>
+                            <span class="font-medium">IA</span>
                         </div>
+                        <div class="text-2xl font-bold text-blue-600" id="aiScore">0</div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
+                    <h3 class="text-xl font-semibold mb-4 text-center">Escreva a palavra que você ouvir:</h3>
+                    <div class="flex flex-col items-center">
+                        <input type="text" id="userInput" class="border-2 border-gray-300 rounded-lg px-4 py-3 w-full max-w-md text-center text-xl mb-4" placeholder="Digite aqui">
+                        <button id="checkAnswerBtn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-6 rounded-lg text-lg font-medium transition">
+                            Verificar <i class="fas fa-check ml-2"></i>
+                        </button>
                     </div>
+                </div>
+            </div>
+            <!-- Feedback Messages -->
+            <div id="feedback" class="hidden fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+                <div class="bg-white rounded-xl p-8 max-w-md mx-4 text-center">
+                    <div id="feedbackIcon" class="text-6xl mb-4"></div>
+                    <h3 id="feedbackMessage" class="text-2xl font-bold mb-4"></h3>
+                    <button id="nextWordBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg text-lg font-medium transition">
+                        Próxima Palavra <i class="fas fa-arrow-right ml-2"></i>
+                    </button>
                 </div>
             </div>
         </div>
+        <!-- Progress -->
+        <div id="progressSection" class="hidden bg-white rounded-xl shadow-lg p-6 mt-8">
+            <h3 class="text-xl font-semibold mb-4 text-center">Seu Progresso</h3>
+            <div class="flex justify-between items-center mb-2">
+                <span class="text-gray-600">Palavras aprendidas:</span>
+                <span id="wordsLearned" class="font-bold">0/10</span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-4">
+                <div id="progressBar" class="bg-green-500 h-4 rounded-full" style="width: 0%"></div>
+            </div>
         </div>
     </div>
     <script>
+        // Game data - CORRIGIDO: Imagens corretas para cada palavra
+        const words = [
+            { word: "CASA", image: "https://cdn-icons-png.flaticon.com/512/619/619153.png", sound: "casa" },
+            { word: "BOLA", image: "https://cdn-icons-png.flaticon.com/512/2826/2826184.png", sound: "bola" }, // Imagem corrigida para bola
+            { word: "GATO", image: "https://cdn-icons-png.flaticon.com/512/616/616408.png", sound: "gato" },
+            { word: "SOL", image: "https://cdn-icons-png.flaticon.com/512/172/172818.png", sound: "sol" },
+            { word: "ÁRVORE", image: "https://cdn-icons-png.flaticon.com/512/2824/2824906.png", sound: "arvore" },
+            { word: "FLOR", image: "https://cdn-icons-png.flaticon.com/512/2824/2824977.png", sound: "flor" },
+            { word: "LIVRO", image: "https://cdn-icons-png.flaticon.com/512/1573/1573711.png", sound: "livro" },
+            { word: "ÁGUA", image: "https://cdn-icons-png.flaticon.com/512/2824/2824996.png", sound: "agua" },
+            { word: "PÃO", image: "https://cdn-icons-png.flaticon.com/512/2276/2276931.png", sound: "pao" },
+            { word: "LUZ", image: "https://cdn-icons-png.flaticon.com/512/2489/2489076.png", sound: "luz" }
+        ];
+        // Game state
+        let currentWordIndex = 0;
+        let correctAnswers = 0;
+        let playerScore = 0;
+        let aiScore = 0;
+        let gameMode = null;
+        const speechSynthesis = window.speechSynthesis;
+        // DOM elements
+        const gameArea = document.getElementById('gameArea');
+        const singlePlayerOptions = document.getElementById('singlePlayerOptions');
+        const vsAiSection = document.getElementById('vsAiSection');
+        const currentWordElement = document.getElementById('currentWord');
+        const wordImageElement = document.getElementById('wordImage');
+        const speakBtn = document.getElementById('speakBtn');
+        const feedback = document.getElementById('feedback');
+        const feedbackIcon = document.getElementById('feedbackIcon');
+        const feedbackMessage = document.getElementById('feedbackMessage');
+        const nextWordBtn = document.getElementById('nextWordBtn');
+        const progressSection = document.getElementById('progressSection');
+        const wordsLearned = document.getElementById('wordsLearned');
+        const progressBar = document.getElementById('progressBar');
+        const playerScoreElement = document.getElementById('playerScore');
+        const aiScoreElement = document.getElementById('aiScore');
+        const userInput = document.getElementById('userInput');
+        const checkAnswerBtn = document.getElementById('checkAnswerBtn');
+        // Mode selection buttons
+        document.getElementById('singlePlayerBtn').addEventListener('click', () => {
+            gameMode = 'single';
+            startGame();
+        });
+        document.getElementById('vsAiBtn').addEventListener('click', () => {
+            gameMode = 'ai';
+            startGame();
+        });
+        // Start the game
+        function startGame() {
+            gameArea.classList.remove('hidden');
+            progressSection.classList.remove('hidden');
+            if (gameMode === 'single') {
+                singlePlayerOptions.classList.remove('hidden');
+                vsAiSection.classList.add('hidden');
+                loadWordWithOptions();
+            } else {
+                singlePlayerOptions.classList.add('hidden');
+                vsAiSection.classList.remove('hidden');
+                loadWordForAI();
             }
+        }
+        // Load word with multiple choice options (single player)
+        function loadWordWithOptions() {
+            const currentWord = words[currentWordIndex];
+            currentWordElement.textContent = currentWord.word;
+            wordImageElement.style.backgroundImage = `url(${currentWord.image})`;
+            wordImageElement.innerHTML = '';
+            // Generate options (1 correct + 3 random incorrect)
+            const options = [currentWord.word];
+            while (options.length < 4) {
+                const randomWord = words[Math.floor(Math.random() * words.length)].word;
+                if (!options.includes(randomWord)) {
+                    options.push(randomWord);
                 }
             }
+            // Shuffle options
+            options.sort(() => Math.random() - 0.5);
+            // Clear previous options
+            singlePlayerOptions.innerHTML = '';
+            // Create option buttons
+            options.forEach(option => {
+                const optionBtn = document.createElement('button');
+                optionBtn.className = 'word-card bg-blue-100 hover:bg-blue-200 text-blue-800 py-8 px-4 rounded-xl text-2xl font-bold transition';
+                optionBtn.textContent = option;
+                optionBtn.addEventListener('click', () => checkAnswer(option === currentWord.word));
+                singlePlayerOptions.appendChild(optionBtn);
+            });
+        }
+        // Load word for AI mode
+        function loadWordForAI() {
+            const currentWord = words[currentWordIndex];
+            currentWordElement.textContent = '?';
+            wordImageElement.style.backgroundImage = 'none';
+            wordImageElement.innerHTML = '<i class="fas fa-question text-gray-300 text-6xl"></i>';
+            userInput.value = '';
+            // Speak the word after a short delay
+            setTimeout(() => {
+                speakWord(currentWord.word);
+            }, 500);
+        }
+        // Speak the word
+        function speakWord(word) {
+            if (speechSynthesis) {
+                const utterance = new SpeechSynthesisUtterance(word);
+                utterance.lang = 'pt-BR';
+                utterance.rate = 0.8;
+                speechSynthesis.speak(utterance);
             }
+        }
+        // Check the answer
+        function checkAnswer(isCorrect) {
+            if (isCorrect) {
+                correctAnswers++;
+                playerScore++;
+                if (gameMode === 'single') {
+                    showFeedback(true, 'Parabéns! Você acertou!');
                 } else {
+                    playerScoreElement.textContent = playerScore;
+                    showFeedback(true, `Correto! A palavra era "${words[currentWordIndex].word}"`);
                 }
+            } else {
+                if (gameMode === 'ai') {
+                    aiScore++;
+                    aiScoreElement.textContent = aiScore;
                 }
+                showFeedback(false, `Ops! A palavra correta era "${words[currentWordIndex].word}"`);
             }
+            // Update progress
+            updateProgress();
+        }
+        // Show feedback
+        function showFeedback(isCorrect, message) {
+            feedback.classList.remove('hidden');
+            if (isCorrect) {
+                feedbackIcon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>';
+                feedbackMessage.textContent = message;
+                feedbackMessage.className = 'text-2xl font-bold mb-4 text-green-600';
+                createConfetti();
+            } else {
+                feedbackIcon.innerHTML = '<i class="fas fa-times-circle text-red-500"></i>';
+                feedbackMessage.textContent = message;
+                feedbackMessage.className = 'text-2xl font-bold mb-4 text-red-600';
             }
+        }
+        // Create confetti effect
+        function createConfetti() {
+            for (let i = 0; i < 50; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                confetti.style.left = Math.random() * 100 + 'vw';
+                confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                confetti.style.width = Math.random() * 10 + 5 + 'px';
+                confetti.style.height = confetti.style.width;
+                document.body.appendChild(confetti);
+                // Remove confetti after animation
                 setTimeout(() => {
+                    confetti.remove();
+                }, 3000);
             }
+        }
+        // Update progress
+        function updateProgress() {
+            const progress = (correctAnswers / words.length) * 100;
+            wordsLearned.textContent = `${correctAnswers}/${words.length}`;
+            progressBar.style.width = `${progress}%`;
+        }
+        // Next word button
+        nextWordBtn.addEventListener('click', () => {
+            feedback.classList.add('hidden');
+            currentWordIndex++;
+            if (currentWordIndex < words.length) {
+                if (gameMode === 'single') {
+                    loadWordWithOptions();
                 } else {
+                    loadWordForAI();
+                }
+            } else {
+                // Game over
+                gameArea.innerHTML = `
+                    <div class="bg-white rounded-xl shadow-lg p-8 text-center">
+                        <div class="text-6xl text-green-500 mb-4">
+                            <i class="fas fa-trophy"></i>
+                        </div>
+                        <h2 class="text-3xl font-bold text-green-600 mb-4">Parabéns!</h2>
+                        <p class="text-xl mb-6">Você completou todas as palavras!</p>
+                        <p class="text-2xl font-bold mb-6">Pontuação: ${playerScore}/${words.length}</p>
+                        ${gameMode === 'ai' ? `<p class="text-xl mb-6">IA: ${aiScore} pontos</p>` : ''}
+                        <button onclick="location.reload()" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-lg text-lg font-medium transition">
+                            Jogar Novamente <i class="fas fa-redo ml-2"></i>
+                        </button>
+                    </div>
+                `;
+            }
+        });
+        // Speak button
+        speakBtn.addEventListener('click', () => {
+            speakWord(words[currentWordIndex].word);
+        });
+        // Check answer button (AI mode)
+        checkAnswerBtn.addEventListener('click', () => {
+            const userAnswer = userInput.value.trim().toUpperCase();
+            checkAnswer(userAnswer === words[currentWordIndex].word);
+        });
+        // Allow pressing Enter to submit in AI mode
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                const userAnswer = userInput.value.trim().toUpperCase();
+                checkAnswer(userAnswer === words[currentWordIndex].word);
             }
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Wasghington/kakttus-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -1,2 +1,5 @@
 monte um jogo de xadrez
-coloque um opção para jogar com a ia

 monte um jogo de xadrez
+coloque um opção para jogar com a ia
+crie o jogo para criança aprender a ler
+a imagem não está aparecendo completa, corrija, por favor
+agora aparece uma cenoura e a palavra é bola, corrija