Update index.html

index.html

@@ -23,35 +23,43 @@
             flex-direction: column;
             align-items: center;
             margin: 0;
-            padding: 20px;
+            padding: 10px; /* Reduced padding for mobile */
         }
 
-        h1 { margin-bottom: 20px; }
+        h1 { margin-bottom: 20px; text-align: center; }
 
         .container {
             display: flex;
-            flex-wrap: wrap;
+            flex-direction: column; /* Stack vertically on mobile */
             gap: 20px;
             justify-content: center;
+            align-items: center;
             max-width: 900px;
             width: 100%;
         }
 
-        /* FORCE BOARD SIZE */
+        /* --- FORCE BOARD VISIBILITY --- */
         #board {
             width: 100%;
-            max-width: 400px;
+            max-width: 400px; /* Max size for desktop */
+            aspect-ratio: 1 / 1; /* Forces it to be a square */
             margin: 0 auto;
-            /* Fallback border to see the box if JS fails */
-            border: 2px solid #555; 
+            background-color: #303030; /* Dark grey placeholder */
+            border: 2px solid #555;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #777;
+            position: relative; /* Context for pieces */
         }
 
         .panel {
-            flex: 1;
-            min-width: 300px;
+            width: 100%;
+            max-width: 400px; /* Match board width */
             background: var(--panel-bg);
             padding: 20px;
             border-radius: 8px;
+            box-sizing: border-box; /* Ensures padding doesn't break width */
             display: flex;
             flex-direction: column;
             gap: 15px;
@@ -71,13 +79,15 @@
         .controls { display: flex; gap: 10px; margin-top: auto; }
 
         button {
-            padding: 10px 20px;
+            flex: 1; /* Make buttons even width */
+            padding: 12px;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             font-weight: bold;
             color: white;
             background-color: #555;
+            font-size: 16px; /* Better touch target */
         }
         button:hover { opacity: 0.9; }
         #flipBtn { background-color: var(--accent-color); }
@@ -100,12 +110,12 @@
     <h1>♟️ Arcane Chess Analyzer</h1>
 
     <div class="container">
-        <div id="board"></div>
+        <div id="board">Loading Board...</div>
 
         <div class="panel">
             <div style="display: flex; align-items: center; justify-content: space-between;">
                 <h3>Engine Analysis</h3>
-                <div><span id="engineStatus" class="status-indicator"></span><span id="engineText">Loading...</span></div>
+                <div><span id="engineStatus" class="status-indicator"></span><span id="engineText">Initializing...</span></div>
             </div>
 
             <div class="stats-box">
@@ -115,7 +125,7 @@
 
             <div class="stats-box">
                 <span class="stats-label">Best Move Sequence</span>
-                <span class="stats-value" id="best-line">WAITING FOR MOVE...</span>
+                <span class="stats-value" id="best-line">Waiting for engine...</span>
             </div>
 
             <div class="stats-box">
@@ -150,34 +160,49 @@
         const $engineText = $('#engineText');
 
         function initGame() {
-            // --- FIX IS HERE: pieceTheme points to online images ---
+            console.log("Initializing Game...");
+
+            // 1. CONFIGURE BOARD
+            // We use a responsive width calculation
             const config = {
                 draggable: true,
                 position: 'start',
                 onDragStart: onDragStart,
                 onDrop: onDrop,
                 onSnapEnd: onSnapEnd,
+                // FORCE PIECE IMAGES FROM WIKIPEDIA
                 pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png'
             };
             
-            // Create board
+            // 2. CREATE BOARD
+            // We empty the div first to remove "Loading Board..." text
+            $('#board').empty();
             board = Chessboard('board', config);
+            
+            // Force a resize calculation to ensure pieces appear
+            setTimeout(() => { board.resize(); }, 200);
 
-            // Start Engine
+            // 3. START ENGINE
             initStockfish();
             updateStatus();
             
-            // Handle window resize for responsiveness
+            // Handle window resize
             $(window).resize(board.resize);
         }
 
-        // --- ENGINE LOGIC ---
+        // --- ENGINE LOGIC (BLOB FIX) ---
         function initStockfish() {
             try {
-                engine = new Worker(STOCKFISH_PATH);
+                // THE BLOB FIX: Creates a local URL for the worker
+                // This bypasses the security restriction on Hugging Face Spaces
+                const blob = new Blob([`importScripts('${STOCKFISH_PATH}')`], {type: 'application/javascript'});
+                const url = URL.createObjectURL(blob);
+                
+                engine = new Worker(url);
                 
                 engine.onmessage = function(event) {
                     const line = event.data;
+                    console.log("Engine:", line);
                     
                     if (line === 'uciok') {
                         $engineStatus.addClass('ready');
@@ -208,8 +233,8 @@
                 engine.postMessage('uci');
                 engine.postMessage('isready');
             } catch (e) {
-                $engineText.text('Engine Error (CORS)');
-                console.error(e);
+                $engineText.text('Engine Error');
+                console.error("Engine Init Failed:", e);
             }
         }
 
@@ -273,8 +298,11 @@
 
         $('#flipBtn').on('click', board.flip);
 
-        // Start
-        $(document).ready(initGame);
+        // Start when document is ready
+        $(document).ready(function() {
+            // Small delay to ensure container is rendered
+            setTimeout(initGame, 100);
+        });
     </script>
 </body>
 </html>