Spaces:

Raven7
/

HuggingChess

Running

App Files Files Community

Raven7 commited on Dec 17, 2024

Commit

4ebde63

verified ·

1 Parent(s): 54b2acd

Update index.html

Browse files

Files changed (1) hide show

index.html +30 -31

index.html CHANGED Viewed

@@ -20,32 +20,28 @@
         }
         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);
-        }
-        .chessboard {
-            width: 100%;
-            height: 100%;
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             grid-template-rows: repeat(8, 1fr);
@@ -56,7 +52,6 @@
             align-items: center;
             justify-content: center;
             font-size: calc(var(--square-size) * 0.7);
-            cursor: pointer;
         }
         .white { background: #f0d9b5; }
@@ -68,19 +63,14 @@
             user-select: none;
         }
-        @media (max-width: 1024px) {
-            .container {
-                grid-template-columns: 1fr;
-            }
-        }
     </style>
 </head>
 <body>
     <div class="container">
-        <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>
@@ -119,12 +109,13 @@
                         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);
                         }
@@ -135,30 +126,38 @@
             }
             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();
             }
         }

         }
         body {
+            font-family: Arial, sans-serif;
             background: var(--primary-dark);
             color: #ecf0f1;
             display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
         }
         .container {
             display: grid;
             grid-template-columns: var(--board-size) 300px;
             gap: 2rem;
             background: var(--primary-light);
+            padding: 2rem;
             border-radius: 1rem;
             box-shadow: 0 10px 20px rgba(0,0,0,0.2);
         }
+        .chessboard {
             width: var(--board-size);
             height: var(--board-size);
             display: grid;
             grid-template-columns: repeat(8, 1fr);
             grid-template-rows: repeat(8, 1fr);
             align-items: center;
             justify-content: center;
             font-size: calc(var(--square-size) * 0.7);
         }
         .white { background: #f0d9b5; }
             user-select: none;
         }
+        .piece.white { color: #fff; }
+        .piece.black { color: #000; }
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="chessboard" id="board"></div>
+        <div>
             <h3>Position Analysis</h3>
             <p id="status">White to move</p>
             <button onclick="resetBoard()">Reset Board</button>
                         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 ${row < 2 ? 'black' : 'white'}`;
                             pieceElement.textContent = piece;
                             square.appendChild(pieceElement);
                         }
             }
             handleSquareClick(row, col) {
+                const square = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+                const piece = this.board[row][col];
+                const pieceColor = row < 2 ? 'black' : row > 5 ? 'white' : null;
                 if (this.selectedPiece) {
+                    this.tryMove(this.selectedPiece.row, this.selectedPiece.col, row, col);
                     this.selectedPiece = null;
+                    document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected'));
+                } else if (piece && pieceColor === this.currentPlayer) {
                     this.selectedPiece = { row, col };
+                    document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected'));
+                    square.classList.add('selected');
                 }
             }
+            tryMove(fromRow, fromCol, toRow, toCol) {
+                const targetPiece = this.board[toRow][toCol];
+                const targetColor = toRow < 2 ? 'black' : toRow > 5 ? 'white' : null;
+                if (targetColor !== this.currentPlayer) {
+                    this.movePiece(fromRow, fromCol, toRow, toCol);
+                }
             }
             movePiece(fromRow, fromCol, toRow, toCol) {
+                this.board[toRow][toCol] = this.board[fromRow][fromCol];
                 this.board[fromRow][fromCol] = null;
                 this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
                 document.getElementById('status').textContent =
                     `${this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1)} to move`;
                 this.initializeBoard();
             }
         }