Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 17, 2024

Commit

1d5467d

verified ·

1 Parent(s): 3dd7884

Update index.html

Browse files

Files changed (1) hide show

index.html +108 -82

index.html CHANGED Viewed

@@ -12,6 +12,7 @@
             --primary-light: #34495e;
             --highlight: #f1c40f;
             --move-highlight: rgba(46, 204, 113, 0.4);
         }
         * {
@@ -21,20 +22,39 @@
         }
         body {
             background: var(--primary-dark);
             color: #ecf0f1;
             min-height: 100vh;
             display: flex;
-            align-items: center;
-            justify-content: center;
         }
         .board-container {
             width: var(--board-size);
             height: var(--board-size);
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             grid-template-rows: repeat(8, 1fr);
         }
         .square {
@@ -42,145 +62,151 @@
             align-items: center;
             justify-content: center;
             font-size: calc(var(--square-size) * 0.7);
-            user-select: none;
             position: relative;
         }
         .white { background: #f0d9b5; }
         .black { background: #b58863; }
-        .valid-move::after {
-            content: '●';
-            font-size: 1.5rem;
-            color: var(--move-highlight);
             position: absolute;
         }
-        .selected { background-color: var(--highlight); }
     </style>
 </head>
 <body>
-    <div class="board-container" id="board"></div>
     <script>
         class ChessGame {
             constructor() {
                 this.board = this.createInitialBoard();
                 this.currentPlayer = 'white';
                 this.selectedPiece = null;
-                this.validMoves = [];
-                this.renderBoard();
             }
             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],
-                    ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
-                    ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
                 ];
             }
-            renderBoard() {
-                const boardContainer = document.getElementById('board');
-                boardContainer.innerHTML = '';
                 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;
-                        square.addEventListener('click', () => this.handleSquareClick(row, col));
                         const piece = this.board[row][col];
                         if (piece) {
-                            const pieceElem = document.createElement('div');
-                            pieceElem.textContent = piece;
-                            square.appendChild(pieceElem);
                         }
-                        if (this.isValidMove(row, col)) {
-                            square.classList.add('valid-move');
-                        }
-                        if (this.selectedPiece && this.selectedPiece.row === row && this.selectedPiece.col === col) {
-                            square.classList.add('selected');
-                        }
-                        boardContainer.appendChild(square);
                     }
                 }
             }
-            handleSquareClick(row, col) {
                 const piece = this.board[row][col];
                 if (this.selectedPiece) {
-                    if (this.isValidMove(row, col)) {
-                        this.makeMove(this.selectedPiece.row, this.selectedPiece.col, row, col);
-                        this.selectedPiece = null;
-                        this.validMoves = [];
-                    } else {
-                        this.selectedPiece = null;
-                        this.validMoves = [];
-                    }
                 } else if (piece && this.isCurrentPlayerPiece(piece)) {
-                    this.selectedPiece = { row, col };
-                    this.validMoves = this.getValidMoves(row, col);
                 }
-                this.renderBoard();
             }
             isCurrentPlayerPiece(piece) {
-                return this.currentPlayer === 'white' ? '♙♖♘♗♕♔'.includes(piece) : '♟♜♞♝♛♚'.includes(piece);
             }
-            getValidMoves(row, col) {
-                const piece = this.board[row][col];
-                const moves = [];
-                const directions = {
-                    '♖': [[-1, 0], [1, 0], [0, -1], [0, 1]],
-                    '♜': [[-1, 0], [1, 0], [0, -1], [0, 1]],
-                    '♗': [[-1, -1], [-1, 1], [1, -1], [1, 1]],
-                    '♝': [[-1, -1], [-1, 1], [1, -1], [1, 1]],
-                    '♕': [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]],
-                    '♛': [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]],
-                    '♘': [
-                        [-2, -1], [-2, 1], [2, -1], [2, 1],
-                        [-1, -2], [-1, 2], [1, -2], [1, 2]
-                    ],
-                    '♞': [
-                        [-2, -1], [-2, 1], [2, -1], [2, 1],
-                        [-1, -2], [-1, 2], [1, -2], [1, 2]
-                    ]
-                }[piece] || [];
-                for (const [dx, dy] of directions) {
-                    let r = row + dx, c = col + dy;
-                    while (r >= 0 && r < 8 && c >= 0 && c < 8 && !this.board[r][c]) {
-                        moves.push([r, c]);
-                        r += dx; c += dy;
-                        if ('♖♜♗♝♕♛'.includes(piece)) break;
-                    }
-                }
-                return moves;
-            }
-            isValidMove(row, col) {
-                return this.validMoves.some(move => move[0] === row && move[1] === col);
             }
-            makeMove(fromRow, fromCol, toRow, toCol) {
-                this.board[toRow][toCol] = this.board[fromRow][fromCol];
-                this.board[fromRow][fromCol] = null;
                 this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
             }
         }
-        const game = new ChessGame();
     </script>
 </body>
 </html>

             --primary-light: #34495e;
             --highlight: #f1c40f;
             --move-highlight: rgba(46, 204, 113, 0.4);
+            --check-highlight: rgba(231, 76, 60, 0.4);
         }
         * {
         }
         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 {
             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;
+        }
+        .piece.white { color: #fff; }
+        .piece.black { color: #000; }
     </style>
 </head>
 <body>
+    <div class="container">
+        <div class="board-container">
+            <div class="chessboard" id="board"></div>
+        </div>
+    </div>
     <script>
         class ChessGame {
             constructor() {
                 this.board = this.createInitialBoard();
                 this.currentPlayer = 'white';
                 this.selectedPiece = null;
+                this.initializeBoard();
             }
             createInitialBoard() {
                 return [
+                    ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'],
+                    ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
                     [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],
+                    ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
+                    ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R']
                 ];
             }
+            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);
                         const piece = this.board[row][col];
                         if (piece) {
+                            const pieceElement = document.createElement('div');
+                            pieceElement.className = `piece ${piece === piece.toUpperCase() ? 'white' : 'black'}`;
+                            pieceElement.textContent = this.getPieceSymbol(piece);
+                            square.appendChild(pieceElement);
                         }
+                        boardElement.appendChild(square);
                     }
                 }
             }
+            getPieceSymbol(piece) {
+                const symbols = {
+                    'P': '♙', 'p': '♟',
+                    'R': '♖', 'r': '♜',
+                    'N': '♘', 'n': '♞',
+                    'B': '♗', 'b': '♝',
+                    'Q': '♕', 'q': '♛',
+                    'K': '♔', 'k': '♚'
+                };
+                return symbols[piece] || '';
+            }
+            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];
                 if (this.selectedPiece) {
+                    this.tryMove(row, col);
                 } else if (piece && this.isCurrentPlayerPiece(piece)) {
+                    this.selectPiece(row, col);
                 }
             }
             isCurrentPlayerPiece(piece) {
+                return (this.currentPlayer === 'white' && piece === piece.toUpperCase()) ||
+                       (this.currentPlayer === 'black' && piece === piece.toLowerCase());
             }
+            selectPiece(row, col) {
+                this.selectedPiece = { row, col };
+                document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected'));
+                document.querySelector(`[data-row='${row}'][data-col='${col}']`).classList.add('selected');
             }
+            tryMove(toRow, toCol) {
+                const { row, col } = this.selectedPiece;
+                this.board[toRow][toCol] = this.board[row][col];
+                this.board[row][col] = null;
                 this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
+                this.selectedPiece = null;
+                this.initializeBoard();
             }
         }
+        new ChessGame();
     </script>
 </body>
 </html>