Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 17, 2024

Commit

3dd7884

verified ·

1 Parent(s): 066a426

Update index.html

Browse files

Files changed (1) hide show

index.html +78 -125

index.html CHANGED Viewed

@@ -11,8 +11,7 @@
             --primary-dark: #2c3e50;
             --primary-light: #34495e;
             --highlight: #f1c40f;
-            --move-highlight: rgba(46, 204, 113, 0.4);
-            --check-highlight: rgba(231, 76, 60, 0.4);
         }
         * {
@@ -22,39 +21,20 @@
         }
         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 {
@@ -62,74 +42,24 @@
             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: var(--move-highlight);
-            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>
-            </div>
-            <button onclick="resetBoard()">Reset Board</button>
-        </div>
-    </div>
     <script>
         class ChessGame {
             constructor() {
@@ -137,7 +67,7 @@
                 this.currentPlayer = 'white';
                 this.selectedPiece = null;
                 this.validMoves = [];
-                this.initializeBoard();
             }
             createInitialBoard() {
@@ -153,81 +83,104 @@
                 ];
             }
-            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);
                     }
                 }
-                this.highlightValidMoves();
             }
-            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) {
-                this.selectedPiece = { row, col };
-                this.validMoves = this.getValidMoves(row, col);
-                this.initializeBoard();
-                document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
             }
             getValidMoves(row, col) {
                 const piece = this.board[row][col];
                 const moves = [];
                 const directions = {
-                    '♖': [[-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]]
-                };
-                if (piece in directions) {
-                    for (const [dx, dy] of directions[piece]) {
-                        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;
-                        }
                     }
                 }
                 return moves;
             }
-            highlightValidMoves() {
-                for (const [row, col] of this.validMoves) {
-                    document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('valid-move');
-                }
             }
         }
         const game = new ChessGame();
-        function resetBoard() { new ChessGame(); }
     </script>
 </body>
 </html>

             --primary-dark: #2c3e50;
             --primary-light: #34495e;
             --highlight: #f1c40f;
+            --move-highlight: rgba(46, 204, 113, 0.4);
         }
         * {
         }
         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 {
             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.currentPlayer = 'white';
                 this.selectedPiece = null;
                 this.validMoves = [];
+                this.renderBoard();
             }
             createInitialBoard() {
                 ];
             }
+            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>