Update index.html

index.html

@@ -12,7 +12,7 @@
             --bg-color: #212121;
             --text-color: #e0e0e0;
             --accent-color: #4caf50;
-            --danger-color: #f44336;
+            --panel-bg: #333;
         }
 
         body {
@@ -26,7 +26,7 @@
             padding: 20px;
         }
 
-        h1 { margin-bottom: 10px; }
+        h1 { margin-bottom: 20px; }
 
         .container {
             display: flex;
@@ -37,14 +37,19 @@
             width: 100%;
         }
 
+        /* FORCE BOARD SIZE */
         #board {
-            width: 400px;
+            width: 100%;
+            max-width: 400px;
+            margin: 0 auto;
+            /* Fallback border to see the box if JS fails */
+            border: 2px solid #555; 
         }
 
         .panel {
             flex: 1;
             min-width: 300px;
-            background: #333;
+            background: var(--panel-bg);
             padding: 20px;
             border-radius: 8px;
             display: flex;
@@ -61,17 +66,9 @@
 
         .stats-label { font-size: 0.85em; color: #aaa; display: block; margin-bottom: 5px; }
         .stats-value { font-size: 1.1em; font-weight: bold; }
+        #best-line { font-family: monospace; color: #81c784; word-break: break-all; }
 
-        #best-line {
-            font-family: monospace;
-            color: #81c784;
-        }
-
-        .controls {
-            display: flex;
-            gap: 10px;
-            margin-top: auto;
-        }
+        .controls { display: flex; gap: 10px; margin-top: auto; }
 
         button {
             padding: 10px 20px;
@@ -79,14 +76,11 @@
             border-radius: 4px;
             cursor: pointer;
             font-weight: bold;
-            transition: opacity 0.2s;
+            color: white;
+            background-color: #555;
         }
-
         button:hover { opacity: 0.9; }
-        
-        #analyzeBtn { background-color: var(--accent-color); color: white; }
-        #resetBtn { background-color: #555; color: white; }
-        #flipBtn { background-color: #555; color: white; }
+        #flipBtn { background-color: var(--accent-color); }
 
         .status-indicator {
             display: inline-block;
@@ -98,7 +92,6 @@
         }
         .status-indicator.ready { background-color: var(--accent-color); }
         .status-indicator.thinking { background-color: #ffeb3b; animation: pulse 1s infinite; }
-
         @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
     </style>
 </head>
@@ -121,7 +114,7 @@
             </div>
 
             <div class="stats-box">
-                <span class="stats-label">Best Route (Best Move & Continuation)</span>
+                <span class="stats-label">Best Move Sequence</span>
                 <span class="stats-value" id="best-line">WAITING FOR MOVE...</span>
             </div>
 
@@ -131,12 +124,9 @@
             </div>
 
             <div class="controls">
-                <button id="resetBtn">Reset Board</button>
+                <button id="resetBtn">Reset</button>
                 <button id="flipBtn">Flip Board</button>
             </div>
-            <p style="font-size: 0.8em; color: #777; margin-top: 10px;">
-                Drag pieces to play. The engine analyzes automatically.
-            </p>
         </div>
     </div>
 
@@ -151,50 +141,49 @@
         let board = null;
         let game = new Chess();
         let engine = null;
-        let evaluation = 0;
 
-        // --- UI ELEMENTS ---
+        // UI Selectors
         const $status = $('#gameStatus');
-        const $fen = $('#fen');
         const $evaluation = $('#evaluation');
         const $bestLine = $('#best-line');
         const $engineStatus = $('#engineStatus');
         const $engineText = $('#engineText');
 
-        // --- INITIALIZATION ---
         function initGame() {
-            // Initialize Board
+            // --- FIX IS HERE: pieceTheme points to online images ---
             const config = {
                 draggable: true,
                 position: 'start',
                 onDragStart: onDragStart,
                 onDrop: onDrop,
-                onSnapEnd: onSnapEnd
+                onSnapEnd: onSnapEnd,
+                pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png'
             };
+            
+            // Create board
             board = Chessboard('board', config);
 
-            // Initialize Engine
+            // Start Engine
             initStockfish();
-            
             updateStatus();
+            
+            // Handle window resize for responsiveness
+            $(window).resize(board.resize);
         }
 
-        // --- STOCKFISH ENGINE LOGIC ---
+        // --- ENGINE LOGIC ---
         function initStockfish() {
-            // Note: Web Workers require the file to be served, not local file://
             try {
                 engine = new Worker(STOCKFISH_PATH);
                 
                 engine.onmessage = function(event) {
                     const line = event.data;
                     
-                    // Allow the engine to start
                     if (line === 'uciok') {
                         $engineStatus.addClass('ready');
                         $engineText.text('Engine Ready');
                     }
 
-                    // Parse Analysis info (Depth, Score, PV)
                     if (line.startsWith('info') && line.includes('score cp')) {
                         const matchScore = line.match(/score cp (-?\d+)/);
                         const matchMate = line.match(/score mate (-?\d+)/);
@@ -204,9 +193,7 @@
                             $evaluation.text(`Mate in ${Math.abs(matchMate[1])}`);
                             $evaluation.css('color', '#f44336');
                         } else if (matchScore) {
-                            // Centipawns to standard pawn value
                             const score = parseInt(matchScore[1]) / 100;
-                            // If black to move, negate score for absolute evaluation
                             const finalScore = game.turn() === 'b' ? -score : score;
                             $evaluation.text(finalScore > 0 ? `+${finalScore}` : finalScore);
                             $evaluation.css('color', finalScore >= 0 ? '#4caf50' : '#f44336');
@@ -220,34 +207,23 @@
 
                 engine.postMessage('uci');
                 engine.postMessage('isready');
-                
             } catch (e) {
-                console.error("Stockfish failed to load. Are you running on a local server?");
                 $engineText.text('Engine Error (CORS)');
+                console.error(e);
             }
         }
 
         function analyzePosition() {
             if (!engine) return;
-            
             $engineStatus.removeClass('ready').addClass('thinking');
             $engineText.text('Calculating...');
-            
-            // Get current FEN
-            const fen = game.fen();
-            
-            // Send to Stockfish
-            engine.postMessage(`position fen ${fen}`);
-            // Search to depth 15 (good balance of speed/strength for web)
+            engine.postMessage(`position fen ${game.fen()}`);
             engine.postMessage('go depth 15');
         }
 
-        // --- CHESS LOGIC (Chess.js) ---
-        function onDragStart(source, piece, position, orientation) {
-            // Do not pick up pieces if the game is over
+        // --- GAME LOGIC ---
+        function onDragStart(source, piece) {
             if (game.game_over()) return false;
-
-            // Only pick up pieces for the side to move
             if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
                 (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
                 return false;
@@ -255,18 +231,16 @@
         }
 
         function onDrop(source, target) {
-            // see if the move is legal
             const move = game.move({
                 from: source,
                 to: target,
-                promotion: 'q' // NOTE: always promote to a queen for simplicity
+                promotion: 'q'
             });
 
-            // illegal move
             if (move === null) return 'snapback';
 
             updateStatus();
-            analyzePosition(); // Trigger analysis after move
+            analyzePosition();
         }
 
         function onSnapEnd() {
@@ -275,26 +249,20 @@
 
         function updateStatus() {
             let status = '';
-            let moveColor = 'White';
-            if (game.turn() === 'b') {
-                moveColor = 'Black';
-            }
+            let moveColor = game.turn() === 'b' ? 'Black' : 'White';
 
             if (game.in_checkmate()) {
-                status = 'Game over, ' + moveColor + ' is in checkmate.';
+                status = `Game over, ${moveColor} is in checkmate.`;
             } else if (game.in_draw()) {
                 status = 'Game over, drawn position';
             } else {
-                status = moveColor + ' to move';
-                if (game.in_check()) {
-                    status += ', ' + moveColor + ' is in check';
-                }
+                status = `${moveColor} to move`;
+                if (game.in_check()) status += `, ${moveColor} is in check`;
             }
 
             $status.text(status);
         }
 
-        // --- BUTTONS ---
         $('#resetBtn').on('click', function() {
             game.reset();
             board.start();
@@ -305,9 +273,8 @@
 
         $('#flipBtn').on('click', board.flip);
 
-        // Start everything
+        // Start
         $(document).ready(initGame);
-
     </script>
 </body>
 </html>