Update index.html

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Arcane Chess Analyzer</title>
     
-    <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
     
     <style>
         :root {
@@ -23,14 +23,14 @@
             flex-direction: column;
             align-items: center;
             margin: 0;
-            padding: 10px; /* Reduced padding for mobile */
+            padding: 10px;
         }
 
         h1 { margin-bottom: 20px; text-align: center; }
 
         .container {
             display: flex;
-            flex-direction: column; /* Stack vertically on mobile */
+            flex-direction: column;
             gap: 20px;
             justify-content: center;
             align-items: center;
@@ -38,28 +38,41 @@
             width: 100%;
         }
 
-        /* --- FORCE BOARD VISIBILITY --- */
+        /* DEBUG / ERROR LOG */
+        #debug-log {
+            width: 100%;
+            max-width: 400px;
+            color: #ff5252;
+            font-family: monospace;
+            font-size: 12px;
+            background: #2a0000;
+            padding: 5px;
+            border-radius: 4px;
+            display: none; /* Hidden unless error */
+            margin-bottom: 10px;
+            white-space: pre-wrap;
+        }
+
         #board {
             width: 100%;
-            max-width: 400px; /* Max size for desktop */
-            aspect-ratio: 1 / 1; /* Forces it to be a square */
+            max-width: 400px;
+            aspect-ratio: 1 / 1;
             margin: 0 auto;
-            background-color: #303030; /* Dark grey placeholder */
+            background-color: #303030;
             border: 2px solid #555;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #777;
-            position: relative; /* Context for pieces */
         }
 
         .panel {
             width: 100%;
-            max-width: 400px; /* Match board width */
+            max-width: 400px;
             background: var(--panel-bg);
             padding: 20px;
             border-radius: 8px;
-            box-sizing: border-box; /* Ensures padding doesn't break width */
+            box-sizing: border-box;
             display: flex;
             flex-direction: column;
             gap: 15px;
@@ -79,7 +92,7 @@
         .controls { display: flex; gap: 10px; margin-top: auto; }
 
         button {
-            flex: 1; /* Make buttons even width */
+            flex: 1;
             padding: 12px;
             border: none;
             border-radius: 4px;
@@ -87,7 +100,7 @@
             font-weight: bold;
             color: white;
             background-color: #555;
-            font-size: 16px; /* Better touch target */
+            font-size: 16px;
         }
         button:hover { opacity: 0.9; }
         #flipBtn { background-color: var(--accent-color); }
@@ -109,8 +122,15 @@
 
     <h1>♟️ Arcane Chess Analyzer</h1>
 
+    <div id="debug-log"></div>
+
     <div class="container">
-        <div id="board">Loading Board...</div>
+        <div id="board">
+            <div style="text-align:center;">
+                Loading Libraries...<br>
+                <small>If this stays here, turn off Brave Shields</small>
+            </div>
+        </div>
 
         <div class="panel">
             <div style="display: flex; align-items: center; justify-content: space-between;">
@@ -140,61 +160,74 @@
         </div>
     </div>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
 
     <script>
+        // GLOBAL ERROR HANDLER
+        window.onerror = function(msg, url, line) {
+            const log = document.getElementById('debug-log');
+            log.style.display = 'block';
+            log.innerHTML += `ERROR: ${msg}<br>Line: ${line}<br>Check your internet or Brave Shields.<br><br>`;
+            return false;
+        };
+
         // --- CONFIGURATION ---
         const STOCKFISH_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.0/stockfish.js';
         
         let board = null;
-        let game = new Chess();
+        let game = null; // initialized in initGame
         let engine = null;
 
         // UI Selectors
-        const $status = $('#gameStatus');
-        const $evaluation = $('#evaluation');
-        const $bestLine = $('#best-line');
-        const $engineStatus = $('#engineStatus');
-        const $engineText = $('#engineText');
+        let $status, $evaluation, $bestLine, $engineStatus, $engineText;
 
         function initGame() {
-            console.log("Initializing Game...");
+            // CHECK DEPENDENCIES
+            if (typeof $ === 'undefined') { throw new Error("jQuery failed to load."); }
+            if (typeof Chess === 'undefined') { throw new Error("Chess.js failed to load."); }
+            if (typeof Chessboard === 'undefined') { throw new Error("Chessboard.js failed to load."); }
+
+            console.log("Libraries loaded. Starting Game...");
+
+            // Init Variables
+            game = new Chess();
+            $status = $('#gameStatus');
+            $evaluation = $('#evaluation');
+            $bestLine = $('#best-line');
+            $engineStatus = $('#engineStatus');
+            $engineText = $('#engineText');
 
             // 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'
             };
             
             // 2. CREATE BOARD
-            // We empty the div first to remove "Loading Board..." text
-            $('#board').empty();
+            $('#board').empty(); // Clear loading text
             board = Chessboard('board', config);
             
-            // Force a resize calculation to ensure pieces appear
-            setTimeout(() => { board.resize(); }, 200);
+            // Resize fix
+            setTimeout(() => { 
+                if(board) board.resize(); 
+            }, 200);
 
             // 3. START ENGINE
             initStockfish();
             updateStatus();
             
-            // Handle window resize
             $(window).resize(board.resize);
         }
 
-        // --- ENGINE LOGIC (BLOB FIX) ---
+        // --- ENGINE LOGIC ---
         function initStockfish() {
             try {
-                // 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);
                 
@@ -202,7 +235,6 @@
                 
                 engine.onmessage = function(event) {
                     const line = event.data;
-                    console.log("Engine:", line);
                     
                     if (line === 'uciok') {
                         $engineStatus.addClass('ready');
@@ -234,7 +266,7 @@
                 engine.postMessage('isready');
             } catch (e) {
                 $engineText.text('Engine Error');
-                console.error("Engine Init Failed:", e);
+                throw new Error("Engine Init: " + e.message);
             }
         }
 
@@ -288,20 +320,30 @@
             $status.text(status);
         }
 
-        $('#resetBtn').on('click', function() {
-            game.reset();
-            board.start();
-            $bestLine.text('...');
-            $evaluation.text('0.00');
-            updateStatus();
-        });
-
-        $('#flipBtn').on('click', board.flip);
+        // --- EVENTS ---
+        // We use window.onload to be absolutely sure images/scripts are done
+        window.addEventListener('load', function() {
+            try {
+                initGame();
+                
+                // Button Listeners
+                document.getElementById('resetBtn').addEventListener('click', function() {
+                    game.reset();
+                    board.start();
+                    document.getElementById('best-line').innerText = '...';
+                    document.getElementById('evaluation').innerText = '0.00';
+                    updateStatus();
+                });
+
+                document.getElementById('flipBtn').addEventListener('click', function() {
+                    board.flip();
+                });
 
-        // Start when document is ready
-        $(document).ready(function() {
-            // Small delay to ensure container is rendered
-            setTimeout(initGame, 100);
+            } catch (e) {
+                // This catches the errors thrown in initGame
+                document.getElementById('debug-log').style.display = 'block';
+                document.getElementById('debug-log').innerHTML += `CRITICAL: ${e.message}<br>`;
+            }
         });
     </script>
 </body>