Update index.html

index.html

@@ -78,7 +78,7 @@
         .square.valid-move::after {
             content: '•';
             position: absolute;
-            color: rgba(0,0,0,0.3);
+            color: var(--move-highlight);
             font-size: 2em;
         }
 
@@ -125,7 +125,6 @@
             <div class="status-panel">
                 <h3>Position Analysis</h3>
                 <p id="status">White to move</p>
-                <p id="evaluation">Evaluation: 0.0</p>
             </div>
             <button onclick="resetBoard()">Reset Board</button>
         </div>
@@ -137,6 +136,7 @@
                 this.board = this.createInitialBoard();
                 this.currentPlayer = 'white';
                 this.selectedPiece = null;
+                this.validMoves = [];
                 this.initializeBoard();
             }
 
@@ -163,6 +163,7 @@
                         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';
@@ -172,6 +173,7 @@
                         boardElement.appendChild(square);
                     }
                 }
+                this.highlightValidMoves();
             }
 
             handleSquareClick(event) {
@@ -190,24 +192,37 @@
             }
 
             selectPiece(row, col) {
-                document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected', 'valid-move', 'attack-move'));
-                document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
                 this.selectedPiece = { row, col };
+                this.validMoves = this.getValidMoves(row, col);
+                this.initializeBoard();
+                document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('selected');
             }
 
-            tryMove(toRow, toCol) {
-                const fromRow = this.selectedPiece.row;
-                const fromCol = this.selectedPiece.col;
-                this.makeMove(fromRow, fromCol, toRow, toCol);
-                this.selectedPiece = null;
+            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;
             }
 
-            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';
-                document.getElementById('status').textContent = `${this.currentPlayer} to move`;
-                this.initializeBoard();
+            highlightValidMoves() {
+                for (const [row, col] of this.validMoves) {
+                    document.querySelector(`[data-row="${row}"][data-col="${col}"]`).classList.add('valid-move');
+                }
             }
         }