Update index.html

index.html

@@ -13,6 +13,7 @@
             --text-color: #e0e0e0;
             --accent-color: #4caf50;
             --panel-bg: #333;
+            --highlight: #00e5ff;
         }
 
         body {
@@ -24,73 +25,117 @@
             align-items: center;
             margin: 0;
             padding: 10px;
+            user-select: none; /* Prevent text selection while tapping */
         }
 
-        h1 { margin-bottom: 20px; text-align: center; }
+        h1 { margin-bottom: 15px; text-align: center; font-size: 1.5rem; }
 
         .container {
             display: flex;
             flex-direction: column;
-            gap: 20px;
+            gap: 15px;
             justify-content: center;
             align-items: center;
             max-width: 900px;
             width: 100%;
         }
 
-        /* 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 --- */
         #board {
             width: 100%;
-            max-width: 400px;
+            max-width: 380px;
             aspect-ratio: 1 / 1;
             margin: 0 auto;
             background-color: #303030;
-            border: 2px solid #555;
+            border: 3px solid #555;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #777;
         }
 
+        /* --- TURN SWITCHER UI --- */
+        .turn-controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            width: 100%;
+            max-width: 380px;
+            margin-bottom: 5px;
+        }
+
+        .turn-card {
+            flex: 1;
+            background: #444;
+            padding: 10px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            cursor: pointer;
+            border: 2px solid transparent;
+            opacity: 0.5;
+            transition: all 0.3s ease;
+        }
+
+        .turn-card img { height: 35px; }
+        .turn-card span { font-weight: bold; }
+
+        /* Active Turn Styles */
+        .turn-card.active {
+            opacity: 1;
+            background: #505050;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
+        }
+
+        /* --- ANALYSIS PANEL --- */
         .panel {
             width: 100%;
-            max-width: 400px;
+            max-width: 380px;
             background: var(--panel-bg);
-            padding: 20px;
+            padding: 15px;
             border-radius: 8px;
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 12px;
         }
 
-        .stats-box {
-            background: #444;
-            padding: 10px;
-            border-radius: 5px;
-            border-left: 4px solid var(--accent-color);
+        .best-move-box {
+            background: #2a2a2a;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            border: 1px solid #555;
+        }
+        
+        .best-move-label { display: block; color: #888; font-size: 0.8em; margin-bottom: 5px; }
+        .best-move-text { 
+            font-size: 1.8em; 
+            font-weight: bold; 
+            color: var(--highlight); 
+            font-family: monospace;
+            letter-spacing: 2px;
         }
 
-        .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; }
-
-        .controls { display: flex; gap: 10px; margin-top: auto; }
+        .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;
             padding: 12px;
@@ -102,60 +147,52 @@
             background-color: #555;
             font-size: 16px;
         }
-        button:hover { opacity: 0.9; }
-        #flipBtn { background-color: var(--accent-color); }
-
-        .status-indicator {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background-color: #ccc;
-            margin-right: 5px;
-        }
-        .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; } }
+        button:active { transform: scale(0.98); }
+        #flipBtn { background-color: #008CBA; }
+
+        /* Error Log */
+        #debug-log { display:none; color:red; background:#300; padding:10px; width:100%; font-size:12px;}
+
     </style>
 </head>
 <body>
 
-    <h1>♟️ Arcane Chess Analyzer</h1>
+    <h1>♟️ Arcane Chess</h1>
 
     <div id="debug-log"></div>
 
     <div class="container">
-        <div id="board">
-            <div style="text-align:center;">
-                Loading Libraries...<br>
-                <small>If this stays here, turn off Brave Shields</small>
+        
+        <div class="turn-controls">
+            <div id="turn-w" class="turn-card active" onclick="forceTurn('w')">
+                <img src="https://chessboardjs.com/img/chesspieces/wikipedia/wK.png" alt="White">
+                <span>White</span>
             </div>
-        </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">Initializing...</span></div>
-            </div>
-
-            <div class="stats-box">
-                <span class="stats-label">Evaluation</span>
-                <span class="stats-value" id="evaluation">0.00</span>
+            <div id="turn-b" class="turn-card" onclick="forceTurn('b')">
+                <img src="https://chessboardjs.com/img/chesspieces/wikipedia/bK.png" alt="Black">
+                <span>Black</span>
             </div>
+        </div>
 
-            <div class="stats-box">
-                <span class="stats-label">Best Move Sequence</span>
-                <span class="stats-value" id="best-line">Waiting for engine...</span>
-            </div>
+        <div id="board">
+            <div style="text-align:center;">Loading...<br><small>If stuck, check connection</small></div>
+        </div>
 
-            <div class="stats-box">
-                <span class="stats-label">Game Status</span>
-                <span class="stats-value" id="gameStatus">White to move</span>
+        <div class="panel">
+            
+            <div class="best-move-box">
+                <span class="best-move-label">BEST MOVE</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;">
+                    <span>Eval: <span id="eval-score" style="color:white">0.00</span></span>
+                    <span id="engineStatus">Init...</span>
+                </div>
             </div>
 
             <div class="controls">
-                <button id="resetBtn">Reset</button>
-                <button id="flipBtn">Flip Board</button>
+                <button id="resetBtn">Reset Board</button>
+                <button id="flipBtn">Flip View</button>
             </div>
         </div>
     </div>
@@ -165,41 +202,23 @@
     <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;
+        // --- ERROR HANDLING ---
+        window.onerror = function(msg) {
+            $('#debug-log').show().text("Err: " + msg);
         };
 
-        // --- CONFIGURATION ---
+        // --- CONFIG ---
         const STOCKFISH_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.0/stockfish.js';
-        
-        let board = null;
-        let game = null; // initialized in initGame
-        let engine = null;
+        let board, game, engine;
 
-        // UI Selectors
-        let $status, $evaluation, $bestLine, $engineStatus, $engineText;
+        // --- INIT ---
+        $(document).ready(function() {
+            initGame();
+        });
 
         function initGame() {
-            // 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
+            
             const config = {
                 draggable: true,
                 position: 'start',
@@ -209,78 +228,115 @@
                 pieceTheme: 'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png'
             };
             
-            // 2. CREATE BOARD
-            $('#board').empty(); // Clear loading text
+            $('#board').empty();
             board = Chessboard('board', config);
+            $(window).resize(board.resize);
             
-            // Resize fix
-            setTimeout(() => { 
-                if(board) board.resize(); 
-            }, 200);
-
-            // 3. START ENGINE
             initStockfish();
-            updateStatus();
+            updateUI();
+        }
+
+        // --- TURN CONTROL 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(' ');
             
-            $(window).resize(board.resize);
+            // 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) {
+                board.position(newFen);
+                updateUI();
+                analyzePosition(); // Re-analyze for the new player
+            } else {
+                console.log("Cannot switch turn: Illegal position");
+            }
         }
 
-        // --- ENGINE LOGIC ---
+        function updateUI() {
+            // Update Turn Cards
+            $('.turn-card').removeClass('active');
+            if (game.turn() === 'w') {
+                $('#turn-w').addClass('active');
+            } else {
+                $('#turn-b').addClass('active');
+            }
+        }
+
+        // --- ENGINE ---
         function initStockfish() {
             try {
                 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;
                     
                     if (line === 'uciok') {
-                        $engineStatus.addClass('ready');
-                        $engineText.text('Engine Ready');
+                        $('#engineStatus').text('Ready').css('color', '#4caf50');
                     }
 
                     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) {
-                            $evaluation.text(`Mate in ${Math.abs(matchMate[1])}`);
-                            $evaluation.css('color', '#f44336');
+                            $('#eval-score').text(`M${Math.abs(matchMate[1])}`).css('color', '#ff5252');
                         } else if (matchScore) {
                             const score = parseInt(matchScore[1]) / 100;
                             const finalScore = game.turn() === 'b' ? -score : score;
-                            $evaluation.text(finalScore > 0 ? `+${finalScore}` : finalScore);
-                            $evaluation.css('color', finalScore >= 0 ? '#4caf50' : '#f44336');
+                            const sign = finalScore > 0 ? '+' : '';
+                            $('#eval-score').text(`${sign}${finalScore}`).css('color', finalScore >= 0 ? '#4caf50' : '#ff5252');
                         }
 
                         if (matchPv) {
-                            $bestLine.text(matchPv[1]);
+                            // 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)
+                            $('#best-move').html(`➜ ${bestMove}`);
                         }
                     }
                 };
-
                 engine.postMessage('uci');
                 engine.postMessage('isready');
-            } catch (e) {
-                $engineText.text('Engine Error');
-                throw new Error("Engine Init: " + e.message);
+            } catch(e) {
+                $('#engineStatus').text('Offline');
             }
         }
 
         function analyzePosition() {
-            if (!engine) return;
-            $engineStatus.removeClass('ready').addClass('thinking');
-            $engineText.text('Calculating...');
-            engine.postMessage(`position fen ${game.fen()}`);
-            engine.postMessage('go depth 15');
+            $('#best-move').text('...');
+            $('#engineStatus').text('Thinking...');
+            if(engine) {
+                engine.postMessage(`position fen ${game.fen()}`);
+                engine.postMessage('go depth 15');
+            }
         }
 
-        // --- GAME LOGIC ---
+        // --- CHESS LOGIC ---
         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;
@@ -296,7 +352,7 @@
 
             if (move === null) return 'snapback';
 
-            updateStatus();
+            updateUI();
             analyzePosition();
         }
 
@@ -304,47 +360,18 @@
             board.position(game.fen());
         }
 
-        function updateStatus() {
-            let status = '';
-            let moveColor = game.turn() === 'b' ? 'Black' : 'White';
-
-            if (game.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.text(status);
-        }
+        // --- BUTTONS ---
+        $('#resetBtn').click(function() {
+            game.reset();
+            board.start();
+            $('#best-move').text('...');
+            updateUI();
+        });
 
-        // --- 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();
-                });
-
-            } 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>`;
-            }
+        $('#flipBtn').click(function() {
+            board.flip();
         });
+
     </script>
 </body>
 </html>