Update index.html

index.html

@@ -154,28 +154,12 @@
             cursor: grabbing;
         }
 
-        .coordinates {
-            position: absolute;
-            font-size: 0.8rem;
-            color: #95a5a6;
-        }
-
-        .file {
-            bottom: -1.5rem;
-            left: calc(var(--square-size) * 0.5);
-        }
-
-        .rank {
-            left: -1.5rem;
-            top: calc(var(--square-size) * 0.5);
-        }
-
         @media (max-width: 1024px) {
             .container {
                 grid-template-columns: 1fr;
                 grid-template-rows: auto auto;
             }
-
+            
             .board-container {
                 margin: auto;
             }
@@ -186,13 +170,12 @@
     <div class="container">
         <div class="board-container">
             <div class="chessboard" id="board"></div>
-            <div class="coordinates" id="coordinates"></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>
+                <p id="evaluation">Evaluation: 0.0</p> 
             </div>
             <div class="move-list" id="moveList">
                 <!-- Moves will be inserted here -->
@@ -209,6 +192,18 @@
                 this.currentPlayer = 'white';
                 this.selectedPiece = null;
                 this.moveHistory = [];
+                this.validMoves = [
+                    {type: 'K', move: {dx: [-1,0,1], dy: [-1,0,1]}},
+                    {type: 'Q', move: {dx: [-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7], 
+                                     dy: [-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7]}},
+                    {type: 'R', move: {dx: [-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7], 
+                                     dy: [0]}},
+                    {type: 'B', move: {dx: [-7,-6,-5,-4,-3,-2,-1,1,2,3,4,5,6,7],
+                                     dy: [-7,-6,-5,-4,-3,-2,-1,1,2,3,4,5,6,7]}},
+                    {type: 'N', move: {dx: [-2,-2,-1,-1,1,1,2,2],
+                                     dy: [-1,1,-2,2,-2,2,-1,1]}},
+                    {type: 'P', move: {dx: [0], dy: [-1,1]}}
+                ];
                 this.initializeBoard();
             }
 
@@ -217,7 +212,7 @@
                     ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
                     ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
                     [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],
                     [null, null, null, null, null, null, null, null],
                     ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
@@ -225,6 +220,7 @@
                 ];
             }
 
+            // Initialize the board display
             initializeBoard() {
                 const boardElement = document.getElementById('board');
                 boardElement.innerHTML = '';
@@ -251,6 +247,7 @@
                 this.updateStatus();
             }
 
+            // Handle square clicks
             handleSquareClick(event) {
                 const square = event.target.closest('.square');
                 const row = parseInt(square.dataset.row);
@@ -263,11 +260,11 @@
                 }
             }
 
+            // Select a piece to move
             selectPiece(row, col) {
                 const piece = this.board[row][col];
                 if (!piece) return;
 
-                // Remove previous selection
                 document.querySelectorAll('.square').forEach(sq => {
                     sq.classList.remove('selected');
                     sq.classList.remove('valid-move');
@@ -276,10 +273,10 @@
                 document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
                 this.selectedPiece = { row, col };
 
-                // Show valid moves
                 this.showValidMoves(row, col);
             }
 
+            // Try to make a move
             tryMove(toRow, toCol) {
                 if (this.isValidMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol)) {
                     this.makeMove(this.selectedPiece.row, this.selectedPiece.col, toRow, toCol);
@@ -293,11 +290,14 @@
                 this.selectedPiece = null;
             }
 
+            // Check if move is valid
             isValidMove(fromRow, fromCol, toRow, toCol) {
-                // Basic move validation - can be expanded
-                return true;
+                // Simplified validation
+                const piece = this.board[fromRow][fromCol];
+                return piece !== null;
             }
 
+            // Execute a move
             makeMove(fromRow, fromCol, toRow, toCol) {
                 const piece = this.board[fromRow][fromCol];
                 this.board[fromRow][fromCol] = null;
@@ -314,23 +314,36 @@
                 this.updateMoveList();
             }
 
+            // Show valid moves for selected piece
             showValidMoves(row, col) {
-                // Simplified valid moves - can be expanded
-                for (let i = 0; i < 8; i++) {
-                    for (let j = 0; j < 8; j++) {
-                        if (this.isValidMove(row, col, i, j)) {
-                            document.querySelector(`[data-row="${i}"][data-col="${j}"]`)
-                                .classList.add('valid-move');
-                        }
-                    }
-                }
+                const piece = this.board[row][col];
+                const moves = this.getValidMoves(piece, row, col);
+
+                moves.forEach(move => {
+                    const square = document.querySelector(
+                        `[data-row="${move.row}"][data-col="${move.col}"]`
+                    );
+                    if (square) square.classList.add('valid-move');
+                });
+            }
+
+            // Get valid moves for a piece
+            getValidMoves(piece, row, col) {
+                // Simplified move generation
+                return [{row: row + 1, col}, {row: row - 1, col}, 
+                       {row, col: col + 1}, {row, col: col - 1}]
+                       .filter(pos => pos.row >= 0 && pos.row < 8 && 
+                                    pos.col >= 0 && pos.col < 8);
             }
 
+            // Update game status display
             updateStatus() {
-                document.getElementById('status').textContent = `${this.currentPlayer.charAt(0).toUpperCase() + 
+                document.getElementById('status').textContent = 
+                    `${this.currentPlayer.charAt(0).toUpperCase() + 
                     this.currentPlayer.slice(1)} to move`;
             }
 
+            // Update move list display
             updateMoveList() {
                 const moveList = document.getElementById('moveList');
                 moveList.innerHTML = '';
@@ -359,6 +372,7 @@
                 moveList.scrollTop = moveList.scrollHeight;
             }
 
+            // Format move for display
             formatMove(move) {
                 const files = 'abcdefgh';
                 const ranks = '87654321';
@@ -369,7 +383,6 @@
         const game = new ChessGame();
 
         function analyzePosition() {
-            // Simulated analysis
             const eval = (Math.random() * 2 - 1).toFixed(2);
             document.getElementById('evaluation').textContent = `Evaluation: ${eval}`;
         }