Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 17, 2024

Commit

54b2acd

verified ·

1 Parent(s): bbbb94b

Update index.html

Browse files

Files changed (1) hide show

index.html +47 -83

index.html CHANGED Viewed

@@ -9,10 +9,8 @@
             --board-size: min(80vh, 600px);
             --square-size: calc(var(--board-size) / 8);
             --primary-dark: #2c3e50;
-            --primary-light: #2d3436;
             --highlight: #f1c40f;
-            --move-highlight: rgba(46, 204, 113, 0.4);
-            --check-highlight: rgba(231, 76, 60, 0.4);
         }
         * {
@@ -43,7 +41,6 @@
         .board-container {
             width: var(--board-size);
             height: var(--board-size);
-            position: relative;
         }
         .chessboard {
@@ -52,9 +49,6 @@
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             grid-template-rows: repeat(8, 1fr);
-            border: 4px solid #2c3e50;
-            border-radius: 4px;
-            overflow: hidden;
         }
         .square {
@@ -63,46 +57,22 @@
             justify-content: center;
             font-size: calc(var(--square-size) * 0.7);
             cursor: pointer;
-            transition: all 0.2s;
-            position: relative;
-            user-select: none;
-        }
-        .white { background: #e0c48f; }
-        .black { background: #b4835a; }
-        .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>
@@ -110,6 +80,11 @@
         <div class="board-container">
             <div class="chessboard" id="board"></div>
         </div>
     </div>
     <script>
@@ -123,14 +98,14 @@
             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']
                 ];
             }
@@ -144,13 +119,13 @@
                         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);
                         }
@@ -159,54 +134,43 @@
                 }
             }
-            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>

             --board-size: min(80vh, 600px);
             --square-size: calc(var(--board-size) / 8);
             --primary-dark: #2c3e50;
+            --primary-light: #34495e;
             --highlight: #f1c40f;
         }
         * {
         .board-container {
             width: var(--board-size);
             height: var(--board-size);
         }
         .chessboard {
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             grid-template-rows: repeat(8, 1fr);
         }
         .square {
             justify-content: center;
             font-size: calc(var(--square-size) * 0.7);
             cursor: pointer;
         }
+        .white { background: #f0d9b5; }
+        .black { background: #b58863; }
+        .selected { background: var(--highlight); }
         .piece {
             font-size: calc(var(--square-size) * 0.7);
+            user-select: none;
         }
+        @media (max-width: 1024px) {
+            .container {
+                grid-template-columns: 1fr;
+            }
+        }
     </style>
 </head>
 <body>
         <div class="board-container">
             <div class="chessboard" id="board"></div>
         </div>
+        <div class="controls">
+            <h3>Position Analysis</h3>
+            <p id="status">White to move</p>
+            <button onclick="resetBoard()">Reset Board</button>
+        </div>
     </div>
     <script>
             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],
+                    ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
+                    ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
                 ];
             }
                         square.className = `square ${(row + col) % 2 === 0 ? 'white' : 'black'}`;
                         square.dataset.row = row;
                         square.dataset.col = col;
+                        square.onclick = () => this.handleSquareClick(row, col);
                         const piece = this.board[row][col];
                         if (piece) {
                             const pieceElement = document.createElement('div');
+                            pieceElement.className = 'piece';
+                            pieceElement.textContent = piece;
                             square.appendChild(pieceElement);
                         }
                 }
             }
+            handleSquareClick(row, col) {
                 if (this.selectedPiece) {
+                    this.movePiece(this.selectedPiece.row, this.selectedPiece.col, row, col);
+                    this.selectedPiece = null;
+                } else if (this.board[row][col]) {
+                    this.selectedPiece = { row, col };
+                    this.highlightSquare(row, col);
                 }
             }
+            highlightSquare(row, col) {
                 document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected'));
+                const square = document.querySelector(`.square[data-row="${row}"][data-col="${col}"]`);
+                square.classList.add('selected');
             }
+            movePiece(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.charAt(0).toUpperCase() + this.currentPlayer.slice(1)} to move`;
                 this.initializeBoard();
             }
         }
+        const game = new ChessGame();
+        function resetBoard() {
+            game.board = game.createInitialBoard();
+            game.currentPlayer = 'white';
+            game.initializeBoard();
+            document.getElementById('status').textContent = 'White to move';
+        }
     </script>
 </body>
 </html>