Update index.html

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arcane Chess Analyzer</title>
+    <title>Arcane Fast Analyzer</title>
     
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
     
@@ -12,7 +12,7 @@
             --bg-color: #212121;
             --text-color: #e0e0e0;
             --accent-color: #4caf50;
-            --highlight: #00e5ff; /* Cyan for Best Move */
+            --highlight: #00e5ff;
             --panel-bg: #333;
         }
 
@@ -28,7 +28,7 @@
             user-select: none;
         }
 
-        h1 { margin-bottom: 15px; text-align: center; font-size: 1.5rem; }
+        h1 { margin-bottom: 10px; text-align: center; font-size: 1.5rem; }
 
         .container {
             display: flex;
@@ -54,7 +54,7 @@
             color: #777;
         }
 
-        /* --- HIGHLIGHT CLASS (Applied by JS) --- */
+        /* --- HIGHLIGHT CLASS --- */
         .highlight-best {
             box-shadow: inset 0 0 3px 3px var(--highlight) !important;
             background-color: rgba(0, 229, 255, 0.3) !important;
@@ -73,7 +73,7 @@
         .turn-card {
             flex: 1;
             background: #444;
-            padding: 10px;
+            padding: 8px;
             border-radius: 8px;
             display: flex;
             align-items: center;
@@ -82,11 +82,11 @@
             cursor: pointer;
             border: 2px solid transparent;
             opacity: 0.5;
-            transition: all 0.3s ease;
+            transition: all 0.2s ease;
         }
 
-        .turn-card img { height: 35px; }
-        .turn-card span { font-weight: bold; }
+        .turn-card img { height: 30px; }
+        .turn-card span { font-weight: bold; font-size: 0.9em; }
 
         .turn-card.active {
             opacity: 1;
@@ -114,6 +114,19 @@
             border-radius: 8px;
             text-align: center;
             border: 1px solid #555;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Loading Bar Animation */
+        .loading-bar {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 4px;
+            background: var(--highlight);
+            width: 0%;
+            transition: width 0.1s linear;
         }
         
         .best-move-label { display: block; color: #888; font-size: 0.8em; margin-bottom: 5px; }
@@ -147,7 +160,7 @@
 </head>
 <body>
 
-    <h1>♟️ Arcane Chess</h1>
+    <h1>⚡ Arcane Fast Analyzer</h1>
 
     <div id="debug-log"></div>
 
@@ -165,13 +178,14 @@
         </div>
 
         <div id="board">
-            <div style="text-align:center;">Loading...<br><small>If stuck, check connection</small></div>
+            <div style="text-align:center;">Loading...</div>
         </div>
 
         <div class="panel">
             
             <div class="best-move-box">
-                <span class="best-move-label">BEST MOVE</span>
+                <div id="loading-bar" class="loading-bar"></div>
+                <span class="best-move-label">BEST MOVE (2s Limit)</span>
                 <div id="best-move" class="best-move-text">...</div>
                 
                 <div style="display:flex; justify-content:space-between; margin-top:10px; font-size:0.9em; color:#aaa;">
@@ -219,17 +233,11 @@
             updateUI();
         }
 
-        // --- VISUAL HIGHLIGHT LOGIC ---
+        // --- HIGHLIGHTS ---
         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');
         }
@@ -290,14 +298,16 @@
                         if (matchPv) {
                             let moves = matchPv[1].split(' ');
                             let bestMove = moves[0];
-                            
-                            // UPDATE TEXT
                             $('#best-move').html(`➜ ${bestMove}`);
-                            
-                            // UPDATE BOARD HIGHLIGHTS
                             highlightSquares(bestMove);
                         }
                     }
+                    
+                    // Detect when engine is done (bestmove command)
+                    if (line.startsWith('bestmove')) {
+                        $('#loading-bar').css('width', '0%'); // Hide bar
+                        $('#engineStatus').text('Done');
+                    }
                 };
                 engine.postMessage('uci');
                 engine.postMessage('isready');
@@ -307,14 +317,20 @@
         }
 
         function analyzePosition() {
+            // Visual Reset
             $('#best-move').text('...');
-            // Clear highlights while thinking so we don't show old info
             removeHighlights(); 
-            
             $('#engineStatus').text('Thinking...');
+            
+            // Start Loading Bar Animation
+            $('#loading-bar').css('width', '0%').animate({width: '100%'}, 2000);
+
             if(engine) {
                 engine.postMessage(`position fen ${game.fen()}`);
-                engine.postMessage('go depth 15');
+                
+                // --- THE SPEED FIX ---
+                // "movetime 2000" means: Think for exactly 2000 milliseconds (2 seconds)
+                engine.postMessage('go movetime 2000');
             }
         }
 
@@ -355,7 +371,6 @@
 
         $('#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('➜ ', '');