Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 17, 2024

Commit

7ad8ecd

verified ·

1 Parent(s): 2fcf273

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -224

index.html CHANGED Viewed

@@ -1,275 +1,224 @@
 <!DOCTYPE html>
-<html>
 <head>
     <title>Chess Game</title>
     <style>
         body {
             display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background: #f0f0f0;
         }
-        #chessboard {
             display: grid;
-            grid-template-columns: repeat(8, 60px);
-            grid-template-rows: repeat(8, 60px);
-            border: 2px solid #333;
         }
         .square {
-            width: 60px;
-            height: 60px;
             display: flex;
-            justify-content: center;
             align-items: center;
-            position: relative;
             cursor: pointer;
         }
-        .white {
-            background-color: #EEEED2;
         }
-        .black {
-            background-color: #769656;
         }
         .piece {
-            font-size: 45px;
-            user-select: none;
         }
-        .highlight {
-            background-color: yellow !important;
-        }
-        .possible-move {
-            background-color: rgba(144, 238, 144, 0.5) !important;
         }
     </style>
 </head>
 <body>
-    <div id="chessboard"></div>
     <script>
-        const pieces = {
-            'white': {
-                'king': '♔',
-                'queen': '♕',
-                'rook': '♖',
-                'bishop': '♗',
-                'knight': '♘',
-                'pawn': '♙'
-            },
-            'black': {
-                'king': '♚',
-                'queen': '♛',
-                'rook': '♜',
-                'bishop': '♝',
-                'knight': '♞',
-                'pawn': '♟'
             }
-        };
-        let selectedPiece = null;
-        let currentTurn = 'white';
-        function createBoard() {
-            const board = document.getElementById('chessboard');
-            for (let row = 0; row < 8; row++) {
-                for (let col = 0; col < 8; col++) {
-                    const square = document.createElement('div');
-                    square.classList.add('square', (row + col) % 2 === 0 ? 'white' : 'black');
-                    square.dataset.row = row;
-                    square.dataset.col = col;
-                    if (row === 1 || row === 6) {
-                        const color = row === 1 ? 'black' : 'white';
-                        addPiece(square, color, 'pawn');
-                    } else if (row === 0 || row === 7) {
-                        const color = row === 0 ? 'black' : 'white';
-                        const pieceOrder = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'];
-                        addPiece(square, color, pieceOrder[col]);
                     }
-                    square.addEventListener('click', handleClick);
-                    board.appendChild(square);
                 }
             }
-        }
-        function addPiece(square, color, pieceType) {
-            const piece = document.createElement('span');
-            piece.classList.add('piece');
-            piece.dataset.piece = pieceType;
-            piece.dataset.color = color;
-            piece.textContent = pieces[color][pieceType];
-            square.appendChild(piece);
-        }
-        function handleClick(event) {
-            const square = event.currentTarget;
-            const piece = square.querySelector('.piece');
-            clearHighlights();
-            if (selectedPiece) {
-                if (square.classList.contains('possible-move')) {
-                    movePiece(selectedPiece, square);
-                    selectedPiece = null;
-                    currentTurn = currentTurn === 'white' ? 'black' : 'white';
-                } else {
-                    selectedPiece = null;
                 }
-            } else if (piece && piece.dataset.color === currentTurn) {
-                selectedPiece = square;
-                showPossibleMoves(square);
             }
-        }
-        function movePiece(fromSquare, toSquare) {
-            const piece = fromSquare.querySelector('.piece');
-            toSquare.innerHTML = '';
-            toSquare.appendChild(piece);
-        }
-        function showPossibleMoves(square) {
-            const piece = square.querySelector('.piece');
-            const pieceType = piece.dataset.piece;
-            const color = piece.dataset.color;
-            const row = parseInt(square.dataset.row);
-            const col = parseInt(square.dataset.col);
-            switch (pieceType) {
-                case 'pawn':
-                    showPawnMoves(row, col, color);
-                    break;
-                case 'knight':
-                    showKnightMoves(row, col, color);
-                    break;
-                case 'bishop':
-                    showBishopMoves(row, col, color);
-                    break;
-                case 'rook':
-                    showRookMoves(row, col, color);
-                    break;
-                case 'queen':
-                    showQueenMoves(row, col, color);
-                    break;
-                case 'king':
-                    showKingMoves(row, col, color);
-                    break;
             }
-        }
-        function showPawnMoves(row, col, color) {
-            const direction = color === 'white' ? -1 : 1;
-            const startRow = color === 'white' ? 6 : 1;
-            // Forward move
-            let nextRow = row + direction;
-            if (isEmpty(nextRow, col)) {
-                highlightSquare(nextRow, col);
-                if (row === startRow && isEmpty(nextRow + direction, col)) {
-                    highlightSquare(nextRow + direction, col);
                 }
             }
-            // Captures
-            [-1, 1].forEach(offset => {
-                const captureRow = row + direction;
-                const captureCol = col + offset;
-                if (isOpponent(captureRow, captureCol, color)) {
-                    highlightSquare(captureRow, captureCol);
-                }
-            });
-        }
-        function showKnightMoves(row, col, color) {
-            const moves = [[-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1]];
-            moves.forEach(([dr, dc]) => {
-                const r = row + dr;
-                const c = col + dc;
-                if (isValidMove(r, c, color)) {
-                    highlightSquare(r, c);
-                }
-            });
-        }
-        function showBishopMoves(row, col, color) {
-            showLineMoves(row, col, color, [[-1, -1], [-1, 1], [1, -1], [1, 1]]);
-        }
-        function showRookMoves(row, col, color) {
-            showLineMoves(row, col, color, [[-1, 0], [1, 0], [0, -1], [0, 1]]);
-        }
-        function showQueenMoves(row, col, color) {
-            showBishopMoves(row, col, color);
-            showRookMoves(row, col, color);
-        }
-        function showKingMoves(row, col, color) {
-            const moves = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
-            moves.forEach(([dr, dc]) => {
-                const r = row + dr;
-                const c = col + dc;
-                if (isValidMove(r, c, color)) {
-                    highlightSquare(r, c);
-                }
-            });
-        }
-        function showLineMoves(row, col, color, directions) {
-            directions.forEach(([dr, dc]) => {
-                let r = row + dr;
-                let c = col + dc;
-                while (isValidMove(r, c, color)) {
-                    highlightSquare(r, c);
-                    if (isOpponent(r, c, color)) break;
-                    r += dr;
-                    c += dc;
-                }
-            });
-        }
-        function isValidMove(row, col, color) {
-            return isOnBoard(row, col) && !isAlly(row, col, color);
-        }
-        function isEmpty(row, col) {
-            return isOnBoard(row, col) && !document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`);
-        }
-        function isOpponent(row, col, color) {
-            const piece = document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`);
-            return piece && piece.dataset.color !== color;
-        }
-        function isAlly(row, col, color) {
-            const piece = document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`);
-            return piece && piece.dataset.color === color;
-        }
-        function isOnBoard(row, col) {
-            return row >= 0 && row < 8 && col >= 0 && col < 8;
-        }
-        function highlightSquare(row, col) {
-            const square = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
-            square.classList.add('possible-move');
-        }
-        function clearHighlights() {
-            document.querySelectorAll('.square').forEach(square => {
-                square.classList.remove('highlight', 'possible-move');
-            });
         }
-        createBoard();
     </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chess Game</title>
     <style>
+        :root {
+            --board-size: min(80vh, 600px);
+            --square-size: calc(var(--board-size) / 8);
+            --primary-dark: #2c3e50;
+            --primary-light: #34495e;
+            --highlight: #f1c40f;
+            --move-highlight: rgba(46, 204, 113, 0.4);
+            --check-highlight: rgba(231, 76, 60, 0.4);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+            background: var(--primary-dark);
+            color: #ecf0f1;
+            min-height: 100vh;
             display: flex;
         }
+        .container {
+            display: grid;
+            grid-template-columns: var(--board-size) 300px;
+            gap: 2rem;
+            margin: auto;
+            padding: 2rem;
+            background: var(--primary-light);
+            border-radius: 1rem;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .board-container {
+            width: var(--board-size);
+            height: var(--board-size);
+            position: relative;
+        }
+        .chessboard {
+            width: 100%;
+            height: 100%;
             display: grid;
+            grid-template-columns: repeat(8, 1fr);
+            grid-template-rows: repeat(8, 1fr);
+            border: 4px solid #2c3e50;
+            border-radius: 4px;
+            overflow: hidden;
         }
         .square {
             display: flex;
             align-items: center;
+            justify-content: center;
+            font-size: calc(var(--square-size) * 0.7);
             cursor: pointer;
+            transition: all 0.2s;
+            position: relative;
+            user-select: none;
+        }
+        .white { background: #f0d9b5; }
+        .black { background: #b58863; }
+        .square.selected {
+            background: var(--highlight) !important;
         }
+        .square.valid-move::after {
+            content: '•';
+            position: absolute;
+            color: rgba(0,0,0,0.3);
+            font-size: 2em;
         }
+        .square.attack-move::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border: 2px solid rgba(231, 76, 60, 0.6);
+            border-radius: 50%;
         }
         .piece {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: calc(var(--square-size) * 0.7);
+            cursor: grab;
+            color: #000;
         }
+        .piece.white { color: #fff; }
+        @media (max-width: 1024px) {
+            .container {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+            }
+            .board-container {
+                margin: auto;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <div class="board-container">
+            <div class="chessboard" id="board"></div>
+        </div>
+        <div class="controls">
+            <div class="status-panel">
+                <h3>Position Analysis</h3>
+                <p id="status">White to move</p>
+                <p id="evaluation">Evaluation: 0.0</p>
+            </div>
+            <button onclick="resetBoard()">Reset Board</button>
+        </div>
+    </div>
     <script>
+        class ChessGame {
+            constructor() {
+                this.board = this.createInitialBoard();
+                this.currentPlayer = 'white';
+                this.selectedPiece = null;
+                this.initializeBoard();
             }
+            createInitialBoard() {
+                return [
+                    ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
+                    ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
+                    [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],
+                    ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
+                    ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
+                ];
+            }
+            initializeBoard() {
+                const boardElement = document.getElementById('board');
+                boardElement.innerHTML = '';
+                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 ? 'white' : 'black'}`;
+                        square.dataset.row = row;
+                        square.dataset.col = col;
+                        square.onclick = (e) => this.handleSquareClick(e);
+                        if (this.board[row][col]) {
+                            const piece = document.createElement('div');
+                            piece.className = 'piece';
+                            piece.textContent = this.board[row][col];
+                            square.appendChild(piece);
+                        }
+                        boardElement.appendChild(square);
                     }
                 }
             }
+            handleSquareClick(event) {
+                const square = event.target.closest('.square');
+                const row = parseInt(square.dataset.row);
+                const col = parseInt(square.dataset.col);
+                const piece = this.board[row][col];
+                const isWhitePiece = '♔♕♖♗♘♙'.includes(piece);
+                if (piece && ((this.currentPlayer === 'white' && isWhitePiece) ||
+                              (this.currentPlayer === 'black' && !isWhitePiece))) {
+                    this.selectPiece(row, col);
+                } else if (this.selectedPiece) {
+                    this.tryMove(row, col);
                 }
             }
+            selectPiece(row, col) {
+                document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected', 'valid-move', 'attack-move'));
+                document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
+                this.selectedPiece = { row, col };
+                this.showValidMoves(row, col);
             }
+            tryMove(toRow, toCol) {
+                const moves = this.getPieceMoves(this.selectedPiece.row, this.selectedPiece.col);
+                const isValidMove = moves.some(move => move.row === toRow && move.col === toCol);
+                if (isValidMove) {
+                    this.makeMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol);
                 }
+                document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected', 'valid-move', 'attack-move'));
+                this.selectedPiece = null;
             }
+            makeMove(fromRow, fromCol, toRow, toCol) {
+                const piece = this.board[fromRow][fromCol];
+                this.board[fromRow][fromCol] = null;
+                this.board[toRow][toCol] = piece;
+                this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
+                document.getElementById('status').textContent = `${this.currentPlayer} to move`;
+                this.initializeBoard();
+            }
         }
+        const game = new ChessGame();
+        function resetBoard() { new ChessGame(); }
     </script>
 </body>
+</html>