Update index.html

index.html

@@ -12,8 +12,8 @@
             --bg-color: #212121;
             --text-color: #e0e0e0;
             --accent-color: #4caf50;
+            --highlight: #00e5ff; /* Cyan for Best Move */
             --panel-bg: #333;
-            --highlight: #00e5ff;
         }
 
         body {
@@ -25,7 +25,7 @@
             align-items: center;
             margin: 0;
             padding: 10px;
-            user-select: none; /* Prevent text selection while tapping */
+            user-select: none;
         }
 
         h1 { margin-bottom: 15px; text-align: center; font-size: 1.5rem; }
@@ -40,7 +40,7 @@
             width: 100%;
         }
 
-        /* --- BOARD --- */
+        /* --- BOARD STYLES --- */
         #board {
             width: 100%;
             max-width: 380px;
@@ -54,6 +54,12 @@
             color: #777;
         }
 
+        /* --- HIGHLIGHT CLASS (Applied by JS) --- */
+        .highlight-best {
+            box-shadow: inset 0 0 3px 3px var(--highlight) !important;
+            background-color: rgba(0, 229, 255, 0.3) !important;
+        }
+
         /* --- TURN SWITCHER UI --- */
         .turn-controls {
             display: flex;
@@ -82,7 +88,6 @@
         .turn-card img { height: 35px; }
         .turn-card span { font-weight: bold; }
 
-        /* Active Turn Styles */
         .turn-card.active {
             opacity: 1;
             background: #505050;
@@ -120,21 +125,6 @@
             letter-spacing: 2px;
         }
 
-        .eval-bar {
-            height: 6px;
-            background: #555;
-            border-radius: 3px;
-            overflow: hidden;
-            margin-top: 5px;
-            position: relative;
-        }
-        .eval-fill {
-            height: 100%;
-            width: 50%;
-            background: var(--highlight);
-            transition: width 0.5s ease;
-        }
-
         .controls { display: flex; gap: 10px; margin-top: 5px; }
         button {
             flex: 1;
@@ -202,19 +192,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
 
     <script>
-        // --- ERROR HANDLING ---
-        window.onerror = function(msg) {
-            $('#debug-log').show().text("Err: " + msg);
-        };
+        window.onerror = function(msg) { $('#debug-log').show().text("Err: " + msg); };
 
-        // --- CONFIG ---
         const STOCKFISH_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.0/stockfish.js';
         let board, game, engine;
 
-        // --- INIT ---
-        $(document).ready(function() {
-            initGame();
-        });
+        $(document).ready(function() { initGame(); });
 
         function initGame() {
             game = new Chess();
@@ -236,44 +219,44 @@
             updateUI();
         }
 
-        // --- TURN CONTROL LOGIC ---
+        // --- VISUAL HIGHLIGHT LOGIC ---
+        function highlightSquares(move) {
+            // 1. Remove old highlights (Note: 'square-55d63' is the class chessboard.js uses for all squares)
+            $('#board .square-55d63').removeClass('highlight-best');
+
+            // 2. Parse the move (e.g., "e2e4")
+            let source = move.substring(0, 2);
+            let target = move.substring(2, 4);
+
+            // 3. Add highlight class to source and target squares
+            // Chessboard.js adds classes like .square-e2, .square-a4, etc.
+            $('#board .square-' + source).addClass('highlight-best');
+            $('#board .square-' + target).addClass('highlight-best');
+        }
+
+        function removeHighlights() {
+            $('#board .square-55d63').removeClass('highlight-best');
+        }
+
+        // --- TURN LOGIC ---
         function forceTurn(color) {
-            // Only switch if it's not already that color's turn
             if (game.turn() === color) return;
-
-            // 1. Get current FEN
             let fen = game.fen();
             let parts = fen.split(' ');
-            
-            // 2. Manipulate the active color (2nd part of FEN string)
             parts[1] = color; 
-            
-            // 3. Clear En Passant target (3rd part) to avoid logic errors when swapping turns
             parts[3] = '-'; 
-            
-            // 4. Rebuild FEN
             let newFen = parts.join(' ');
-
-            // 5. Load into game
-            let result = game.load(newFen);
-            
-            if(result) {
+            if(game.load(newFen)) {
                 board.position(newFen);
                 updateUI();
-                analyzePosition(); // Re-analyze for the new player
-            } else {
-                console.log("Cannot switch turn: Illegal position");
+                analyzePosition(); 
             }
         }
 
         function updateUI() {
-            // Update Turn Cards
             $('.turn-card').removeClass('active');
-            if (game.turn() === 'w') {
-                $('#turn-w').addClass('active');
-            } else {
-                $('#turn-b').addClass('active');
-            }
+            if (game.turn() === 'w') $('#turn-w').addClass('active');
+            else $('#turn-b').addClass('active');
         }
 
         // --- ENGINE ---
@@ -291,11 +274,8 @@
                     }
 
                     if (line.startsWith('info') && line.includes('score cp')) {
-                        // Parse Score
                         const matchScore = line.match(/score cp (-?\d+)/);
                         const matchMate = line.match(/score mate (-?\d+)/);
-                        
-                        // Parse Best Move
                         const matchPv = line.match(/ pv (.+)/);
 
                         if (matchMate) {
@@ -308,12 +288,14 @@
                         }
 
                         if (matchPv) {
-                            // SPLIT the line and take only the first move
                             let moves = matchPv[1].split(' ');
                             let bestMove = moves[0];
                             
-                            // Make it look pretty (e.g., e2e4)
+                            // UPDATE TEXT
                             $('#best-move').html(`➜ ${bestMove}`);
+                            
+                            // UPDATE BOARD HIGHLIGHTS
+                            highlightSquares(bestMove);
                         }
                     }
                 };
@@ -326,6 +308,9 @@
 
         function analyzePosition() {
             $('#best-move').text('...');
+            // Clear highlights while thinking so we don't show old info
+            removeHighlights(); 
+            
             $('#engineStatus').text('Thinking...');
             if(engine) {
                 engine.postMessage(`position fen ${game.fen()}`);
@@ -333,10 +318,9 @@
             }
         }
 
-        // --- CHESS LOGIC ---
+        // --- GAME MOVEMENT ---
         function onDragStart(source, piece) {
             if (game.game_over()) return false;
-            // Strict movement: only allow moving the piece whose turn it is
             if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
                 (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
                 return false;
@@ -360,16 +344,23 @@
             board.position(game.fen());
         }
 
-        // --- BUTTONS ---
         $('#resetBtn').click(function() {
             game.reset();
             board.start();
             $('#best-move').text('...');
+            $('#eval-score').text('0.00');
+            removeHighlights();
             updateUI();
         });
 
         $('#flipBtn').click(function() {
             board.flip();
+            // Re-apply highlights after flip because DOM is redrawn
+            let currentText = $('#best-move').text();
+            if(currentText.includes('➜')) {
+                let move = currentText.replace('➜ ', '');
+                highlightSquares(move);
+            }
         });
 
     </script>