Update index.html

index.html

@@ -41,7 +41,7 @@
         .settings-icon.active-ai { color: #4a90e2; }
         .settings-icon.active-ai:hover { color: #6aaeff; }
         .settings-icon svg, .close-btn svg { width: 18px; height: 18px; }
-        
+
         .chess-board-container {
             flex: 1; 
             display: flex; 
@@ -58,13 +58,13 @@
             z-index: 0;
             contain: content;
         }
-        
+
         #game-board { 
             width: 100%; 
             height: 100%;
             aspect-ratio: 1/1;
         }
-        
+
         .bottom-section {
             padding: 16px; border-top: 1px solid #404040; display: flex;
             align-items: center; gap: 12px; min-height: 56px; position: relative; z-index: 2;
@@ -138,7 +138,7 @@
         }
         .new-game-btn:hover { background-color: #3a7bc8; }
         .resign-btn svg, .new-game-btn svg { width: 16px; height: 16px; fill: currentColor; }
-        
+
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: none;
@@ -221,7 +221,7 @@
             transition: top 0.5s ease-in-out; display: flex; align-items: center; gap: 10px;
         }
         .notification.show { top: 20px; }
-        
+
         @media (max-width: 768px) {
             .container { flex-direction: column; }
             .left-panel { 
@@ -260,12 +260,12 @@
                 padding: 2px;
             }
         }
-        
+
         #api-key-input { width: 100%; padding: 10px; background: #404040; border: 1px solid #555; color: #fff; }
         .credit { font-size: 12px; color: #888; margin-left: auto; }
         .credit a { color: #4a90e2; text-decoration: none; }
         .credit a:hover { text-decoration: underline; }
-        
+
         .model-icon {
             width: 20px;
             height: 20px;
@@ -282,7 +282,7 @@
             height: 12px;
             fill: currentColor;
         }
-        
+
         .api-key-warning {
             background-color: #d32f2f;
             color: white;
@@ -327,7 +327,7 @@
                             </div>
                             Blue
                         </button>
-                        
+
                         <div class="settings-section-header">Gemini Model</div>
                         <button id="model-flash-btn" class="model-btn active">
                             <div class="model-icon">
@@ -341,7 +341,7 @@
                             </div>
                             Pro (Powerful)
                         </button>
-                        
+
                         <div class="settings-section-header">API Settings</div>
                         <button id="api-settings-btn" class="model-btn">
                             <div class="model-icon">
@@ -384,7 +384,7 @@
             </div>
         </div>
     </div>
-    
+
     <div class="modal-overlay" id="pgn-modal-overlay">
       <div class="modal">
         <div class="modal-header">
@@ -403,7 +403,7 @@
         </div>
       </div>
     </div>
-    
+
     <div class="modal-overlay" id="ai-modal-overlay">
       <div class="modal">
         <div class="modal-header">
@@ -435,7 +435,7 @@
             API key tidak valid atau kosong. Silakan masukkan API key yang valid.
           </div>
           <button class="modal-action-btn save-ai" id="save-settings-btn"><svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Save API Key</button>
-          
+
           <div class="settings-section-header">Board Theme</div>
           <button id="theme-brown-btn-modal" class="theme-btn"><div class="theme-swatch"><div class="theme-swatch-light" style="background-color: #f0d9b5;"></div><div class="theme-swatch-dark" style="background-color: #b58863;"></div></div>Brown</button>
           <button id="theme-blue-btn-modal" class="theme-btn active"><div class="theme-swatch"><div class="theme-swatch-light" style="background-color: #D8DEE9;"></div><div class="theme-swatch-dark" style="background-color: #819AAE;"></div></div>Blue</button>
@@ -446,7 +446,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.min.js"></script>
-    
+
     <script>
         var board = null, game = new Chess(), $status = $('#status-display');
         var playerColor = 'w', engine = null, isGameOver = false, viewingMoveIndex = -1;
@@ -454,11 +454,11 @@
         document.head.appendChild(boardThemeStyle);
 
         var aiPersonality = '';
-        var geminiApiKey = ''; // Default API key dihapus agar user harus memasukkan
-        var userApiKey = ''; // User-provided key
+        var geminiApiKey = '';
+        var userApiKey = '';
         var isEngineSearching = false;
         var topMovesWithEvals = [];
-        var selectedGeminiModel = 'gemini-1.5-flash-latest'; // Default model
+        var selectedGeminiModel = 'gemini-1.5-flash-latest';
         const useLLM = () => aiPersonality && aiPersonality.trim() !== '' && (userApiKey || geminiApiKey);
 
         const THEMES = {
@@ -469,6 +469,32 @@
         const pieceImagePaths = {'wP': 'https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg','wR': 'https://upload.wikimedia.org/wikipedia/commons/7/72/Chess_rlt45.svg','wN': 'https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg','wB': 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Chess_blt45.svg','wQ': 'https://upload.wikimedia.org/wikipedia/commons/1/15/Chess_qlt45.svg','wK': 'https://upload.wikimedia.org/wikipedia/commons/4/42/Chess_klt45.svg','bP': 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg','bR': 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg','bN': 'https://upload.wikimedia.org/wikipedia/commons/e/ef/Chess_ndt45.svg','bB': 'https://upload.wikimedia.org/wikipedia/commons/9/98/Chess_bdt45.svg','bQ': 'https://upload.wikimedia.org/wikipedia/commons/4/47/Chess_qdt45.svg','bK': 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Chess_kdt45.svg'};
         function pieceTheme(piece) { return pieceImagePaths[piece]; }
 
+        // Resize handling
+        let resizeObserver = null;
+        let resizeRAF = null;
+        function rafResize(cb) {
+            if (resizeRAF) cancelAnimationFrame(resizeRAF);
+            resizeRAF = requestAnimationFrame(cb);
+        }
+        function ensureBoardFits() {
+            const anyModalOpen = $('.modal-overlay:visible').length > 0;
+            if (anyModalOpen) return;
+            const container = $('.chess-board-container');
+            const containerWidth = container.width() - 16;
+            const containerHeight = container.height() - 16;
+            if (containerWidth <= 0 || containerHeight <= 0) return;
+            const maxSize = Math.min(containerWidth, containerHeight);
+            $('#game-board').css({ 'width': maxSize + 'px', 'height': maxSize + 'px' });
+            board.resize();
+        }
+        function startResizeObserver() {
+            const el = document.querySelector('.chess-board-container');
+            if (!el) return;
+            if (resizeObserver) resizeObserver.disconnect();
+            resizeObserver = new ResizeObserver(() => rafResize(ensureBoardFits));
+            resizeObserver.observe(el);
+        }
+
         function setBoardTheme(themeName) {
             const theme = THEMES[themeName];
             boardThemeStyle.innerHTML = `
@@ -491,21 +517,20 @@
             showNotification(`AI Model set to ${modelName.includes('pro') ? 'Pro (Powerful)' : 'Flash (Fast)'}.`, 3000);
         }
 
+        function isAtLatest() {
+            return viewingMoveIndex === game.history().length - 1;
+        }
+
+        function safeSetEngineSearching(v) {
+            isEngineSearching = v;
+            updateStatus();
+        }
+
         function onDragStart(source, piece) {
-            const canMove = !isGameOver && !isEngineSearching && !game.game_over() && game.turn() === playerColor && viewingMoveIndex === game.history().length - 1;
-            
-            if (!canMove) {
-                console.log("Move disallowed. Current state:", {
-                    isGameOver,
-                    isEngineSearching,
-                    isGameTerminated: game.game_over(),
-                    isPlayerTurn: game.turn() === playerColor,
-                    isViewingLatestMove: viewingMoveIndex === game.history().length - 1
-                });
-            }
+            const canMove = !isGameOver && !isEngineSearching && !game.game_over() && game.turn() === playerColor && isAtLatest();
             return canMove;
         }
-        
+
         function createEngineWorker() {
             return fetch(STOCKFISH_WORKER_URL).then(res => res.text()).then(scriptText => {
                 const blob = new Blob([scriptText], { type: 'application/javascript' });
@@ -513,6 +538,11 @@
             });
         }
 
+        let searchTimeoutId = null;
+        function clearSearchTimeout() {
+            if (searchTimeoutId) { clearTimeout(searchTimeoutId); searchTimeoutId = null; }
+        }
+
         function initializeEngine() {
             createEngineWorker().then(worker => {
                 engine = worker;
@@ -525,205 +555,203 @@
                 updateStatus("Error: Could not load engine.");
             });
         }
-        
+
         function showNotification(message, duration = 6000) {
             const notification = $('#ai-notification');
             $('#ai-notification-text').text(message);
             notification.addClass('show');
             setTimeout(() => { notification.removeClass('show'); }, duration);
         }
-        
+
         function handleEngineMessage(event) {
-            const message = event.data;
+            const message = event.data || '';
             if (useLLM()) {
-                if (message.startsWith('info') && message.includes('score cp')) {
-                    const scoreMatch = message.match(/score cp (-?\d+)/);
-                    const moveMatch = message.match(/pv\s+([a-h][1-8][a-h][1-8][qrbn]?)/);
-                    if (scoreMatch && moveMatch) {
-                        const score = parseInt(scoreMatch[1], 10);
-                        const move = moveMatch[1];
-                        if (!topMovesWithEvals.some(item => item.move === move)) {
+                if (message.startsWith('info')) {
+                    const m = message.match(/score\s(cp|mate)\s(-?\d+).*?\spv\s+([a-h][1-8][a-h][1-8][qrbn]?)/);
+                    if (m) {
+                        const type = m[1];
+                        const val = parseInt(m[2], 10);
+                        const move = m[3];
+                        const score = type === 'mate' ? (val > 0 ? 100000 - Math.abs(val) : -100000 + Math.abs(val)) : val;
+                        if (!topMovesWithEvals.some(x => x.move === move)) {
                             topMovesWithEvals.push({ move, score });
+                            if (topMovesWithEvals.length > 8) topMovesWithEvals.length = 8;
                         }
                     }
                 }
                 if (message.startsWith('bestmove')) {
                     const bestMoveFallback = message.split(' ')[1];
-                    decideMoveWithLLM(bestMoveFallback);
+                    const movesSnapshot = topMovesWithEvals.slice();
+                    topMovesWithEvals = [];
+                    decideMoveWithLLM(bestMoveFallback, movesSnapshot).catch(err => {
+                        console.error('LLM error (outer):', err);
+                        $('#ai-reasoning-text').text("Error with AI. Playing fallback.");
+                        makeMoveOnBoard(bestMoveFallback);
+                        safeSetEngineSearching(false);
+                    });
+                    clearSearchTimeout();
                 }
             } else {
                 if (message.startsWith('bestmove')) {
-                    isEngineSearching = false;
-                    makeMoveOnBoard(message.split(' ')[1]);
+                    const bestMove = message.split(' ')[1];
+                    makeMoveOnBoard(bestMove);
+                    safeSetEngineSearching(false);
+                    topMovesWithEvals = [];
+                    clearSearchTimeout();
                 }
             }
         }
 
-        async function decideMoveWithLLM(fallbackMove) {
-            const apiKeyToUse = userApiKey || geminiApiKey; // Use user key if provided
-            
-            // Check if API key is available
-            if (!apiKeyToUse || apiKeyToUse.trim() === '') {
-                console.error("API key is missing or empty");
-                showNotification('API key is required for AI personality. Please set it in Settings.', 8000);
-                isEngineSearching = false;
-                makeMoveOnBoard(fallbackMove);
-                return;
-            }
-            
-            const maxRetries = 2; // Reduced retries to prevent long loops
-            let retryCount = 0;
-
-            while (retryCount < maxRetries) {
-                try {
-                    if (topMovesWithEvals.length === 0) {
-                        console.warn("No top moves were analyzed. Using fallback move:", fallbackMove);
-                        isEngineSearching = false;
-                        makeMoveOnBoard(fallbackMove);
-                        return;
-                    }
-
-                    const fen = game.fen();
-                    const turn = game.turn() === 'w' ? 'White' : 'Black';
-                    const movesData = JSON.stringify(topMovesWithEvals);
-
-                    const prompt = `You are a world-class chess engine and a master role-player. Your goal is to perfectly blend strong chess play with a defined personality. Your priority is 80% playing the best move and 20% fitting your character. You must select a move from the provided list.
+        async function decideMoveWithLLM(fallbackMove, movesSnapshot) {
+            try {
+                const apiKeyToUse = userApiKey || geminiApiKey;
+                if (!apiKeyToUse || apiKeyToUse.trim() === '') {
+                    showNotification('API key is required for AI personality. Please set it in Settings.', 8000);
+                    makeMoveOnBoard(fallbackMove);
+                    safeSetEngineSearching(false);
+                    return;
+                }
 
-Current State:
-- Board (FEN): ${fen}
-- It is ${turn}'s turn to move.
-- Your designated personality is: "${aiPersonality}"
+                if (isGameOver || game.game_over()) {
+                    safeSetEngineSearching(false);
+                    return;
+                }
 
-Your Task:
-I have provided a JSON array of the top moves calculated by a strong chess engine. First, identify the strongest moves that don't lead to a disadvantage. From that small group of good moves, pick the one that best reflects your character. Then, explain your choice from your character's perspective.
+                const movesData = Array.isArray(movesSnapshot) ? movesSnapshot : [];
+                if (movesData.length === 0) {
+                    makeMoveOnBoard(fallbackMove);
+                    safeSetEngineSearching(false);
+                    return;
+                }
 
-Input Moves Data:
-${movesData}
+                const fen = game.fen();
+                const turn = game.turn() === 'w' ? 'White' : 'Black';
+                const prompt = `You are a strong chess engine and role-player. Choose only from moves list.
+Prioritize strength (80%) and personality (20%). Output strict JSON only.
 
-Output Format:
-You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object must have three keys:
-- "bestMove": The chosen move from the list (e.g., "e2e4"). Required.
-- "reasoning": A brief, in-character explanation for your choice. DO NOT mention scores or technical analysis. This should be your character's internal monologue. Required.
-- "deviationWarning": If you were forced to deviate from your personality to avoid a blunder, provide a short message explaining why. If you did not deviate, this MUST be null.`;
+State:
+- FEN: ${fen}
+- Turn: ${turn}
+- Personality: "${aiPersonality}"
 
-                    updateStatus('Consulting AI personality...');
-                    $('#ai-reasoning-text').text('Thinking...');
+Moves (JSON array of {move, score}): ${JSON.stringify(movesData)}
 
-                    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${selectedGeminiModel}:generateContent?key=${apiKeyToUse}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ "contents": [{ "parts": [{ "text": prompt }] }] })
-                    });
-                    
-                    if (response.status === 429) {
-                        const delay = Math.pow(2, retryCount) * 1000 + Math.random() * 1000;
-                        console.warn(`Rate limit hit. Retrying in ${delay.toFixed(2)}ms...`);
-                        await new Promise(resolve => setTimeout(resolve, delay));
-                        retryCount++;
-                        continue;
-                    }
+Output JSON:
+{
+  "bestMove": "e2e4",
+  "reasoning": "short in-character explanation",
+  "deviationWarning": null | "short reason if deviated"
+}`;
 
-                    if (!response.ok) {
-                        throw new Error(`API request failed with status ${response.status}`);
-                    }
+                updateStatus('Consulting AI personality...');
+                $('#ai-reasoning-text').text('Thinking...');
 
-                    const data = await response.json();
+                const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${selectedGeminiModel}:generateContent?key=${apiKeyToUse}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ "contents": [{ "parts": [{ "text": prompt }] }] })
+                });
 
-                    if (!data.candidates || !data.candidates[0]?.content?.parts[0]?.text) {
-                        const reason = data.candidates?.[0]?.finishReason || 'Unknown reason';
-                        console.error("Invalid response structure from Gemini API. Content may be blocked or missing. Finish Reason:", reason, data);
-                        throw new Error(`Invalid response structure from Gemini API. Finish Reason: ${reason}`);
-                    }
+                if (response.status === 429) {
+                    await new Promise(res => setTimeout(res, 1200 + Math.random()*500));
+                }
 
-                    let rawText = data.candidates[0].content.parts[0].text;
-                    const jsonMatch = rawText.match(/```json\s*(\{[\s\S]*\})\s*```|(\{[\s\S]*\})/);
-                    if (!jsonMatch) {
-                        throw new Error("LLM did not return a parsable JSON object.");
+                if (!response.ok) {
+                    if ([400,401,403].includes(response.status)) {
+                        showNotification('Invalid/unauthorized API key. Check Settings.', 8000);
+                    } else {
+                        showNotification('Error with AI service. Using best move.', 5000);
                     }
+                    throw new Error(`API request failed with status ${response.status}`);
+                }
 
-                    const jsonString = jsonMatch[1] || jsonMatch[2];
-                    const result = JSON.parse(jsonString);
-
-                    if (!result.bestMove || typeof result.reasoning === 'undefined') {
-                        throw new Error("Parsed JSON from LLM is missing required keys ('bestMove', 'reasoning').");
-                    }
+                const data = await response.json();
+                const rawText = data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
+                const jsonMatch = rawText.match(/```json\s*([\s\S]*?)```/i) || rawText.match(/(\{[\s\S]*\})/);
+                if (!jsonMatch) throw new Error("LLM did not return a parsable JSON object.");
 
-                    if (result.deviationWarning) {
-                        showNotification(result.deviationWarning);
-                    }
-                    $('#ai-reasoning-text').text(result.reasoning || "I have made my move.");
+                const result = JSON.parse(jsonMatch[1] || jsonMatch[0]);
+                if (!result.bestMove || typeof result.reasoning === 'undefined') {
+                    throw new Error("Parsed JSON from LLM is missing required keys ('bestMove', 'reasoning').");
+                }
 
-                    if (topMovesWithEvals.some(item => item.move === result.bestMove)) {
-                        makeMoveOnBoard(result.bestMove);
-                    } else {
-                        console.warn(`LLM chose a move (${result.bestMove}) not in the valid list. Defaulting to best Stockfish move.`);
-                        makeMoveOnBoard(fallbackMove);
-                    }
-                    isEngineSearching = false;
-                    return;
+                if (result.deviationWarning) showNotification(result.deviationWarning);
+                $('#ai-reasoning-text').text(result.reasoning || "Move chosen.");
 
-                } catch (error) {
-                    console.error("An error occurred while getting the AI's move:", error);
-                    
-                    // If we've exhausted retries, give up and use the fallback.
-                    if (retryCount >= maxRetries - 1) {
-                         $('#ai-reasoning-text').text("An error occurred. I will play the best move as a fallback.");
-                         updateStatus('Error with AI. Using best move.');
-                         
-                         // Show specific error message based on the error
-                         if (error.message.includes('API request failed with status 400')) {
-                             showNotification('Invalid API key. Please check your API key in Settings.', 8000);
-                         } else {
-                             showNotification('Error with AI service. Using best move.', 5000);
-                         }
-                         
-                         makeMoveOnBoard(fallbackMove);
-                         isEngineSearching = false;
-                         break;
-                    }
+                const allowed = movesData.some(item => item.move === result.bestMove);
+                if (allowed) {
+                    makeMoveOnBoard(result.bestMove);
+                } else {
+                    console.warn(`LLM chose a move (${result.bestMove}) not in the valid list. Defaulting to best Stockfish move.`);
+                    makeMoveOnBoard(fallbackMove);
                 }
+            } catch (error) {
+                console.error("An error occurred while getting the AI's move:", error);
+                $('#ai-reasoning-text').text("AI error. Using fallback.");
+                makeMoveOnBoard(fallbackMove);
+            } finally {
+                safeSetEngineSearching(false);
             }
         }
-        
+
+        function stopEngineSearch() {
+            if (!engine) return;
+            try { engine.postMessage('stop'); } catch (e) { console.warn('stop failed:', e); }
+            clearSearchTimeout();
+        }
+
         function makeEngineMove() {
             if (isGameOver || game.game_over() || !engine) return;
-            isEngineSearching = true;
+            if (isEngineSearching) return;
+            safeSetEngineSearching(true);
             updateStatus('Gemifish is thinking...');
 
             topMovesWithEvals = [];
+            stopEngineSearch();
             engine.postMessage('position fen ' + game.fen());
             engine.postMessage('go depth 15');
+
+            clearSearchTimeout();
+            searchTimeoutId = setTimeout(() => {
+                console.warn('Engine search timeout; forcing stop.');
+                stopEngineSearch();
+                safeSetEngineSearching(false);
+            }, 12000);
         }
 
         function makeMoveOnBoard(move) {
-            game.move(move, { sloppy: true });
+            if (!move || isGameOver) return;
+            const res = game.move(move, { sloppy: true });
+            if (!res) return;
             board.position(game.fen());
-            board.resize();
             viewingMoveIndex = game.history().length - 1;
-            updateStatus();
             updateMoveHistory();
-            if (game.game_over()) updateStatus();
+            updateStatus();
+            rafResize(ensureBoardFits);
         }
 
         function onDrop(source, target) {
+            if (isEngineSearching || !isAtLatest()) return 'snapback';
             var move = game.move({ from: source, to: target, promotion: 'q' });
             if (move === null) return 'snapback';
-            
+
             viewingMoveIndex = game.history().length - 1;
             updateMoveHistory();
-            
+            updateStatus();
+
             if (game.game_over()) {
                 updateStatus();
+                safeSetEngineSearching(false);
             } else {
-                window.setTimeout(makeEngineMove, 250);
+                window.setTimeout(makeEngineMove, 200);
             }
         }
 
         function onSnapEnd() { 
             board.position(game.fen()); 
-            setTimeout(() => board.resize(), 10);
+            rafResize(ensureBoardFits);
         }
-        
+
         function updateMoveHistory() {
             const history = game.history({ verbose: false });
             const moveList = $('#moves-list');
@@ -740,13 +768,14 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
             }
             $('.moves-section').scrollTop($('.moves-section')[0].scrollHeight);
             updateHighlighting();
+            updateNavButtons();
         }
 
         function updateHighlighting() {
             $('.move').removeClass('highlighted-move');
             if (viewingMoveIndex > -1) $('.move').eq(viewingMoveIndex).addClass('highlighted-move');
         }
-        
+
         function navigateToMove(index) {
             const history = game.history();
             if (index < -1 || index >= history.length) return;
@@ -754,9 +783,9 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
             const tempGame = new Chess();
             for (let i = 0; i <= viewingMoveIndex; i++) tempGame.move(history[i]);
             board.position(tempGame.fen());
-            setTimeout(() => board.resize(), 10);
             updateHighlighting();
             updateNavButtons();
+            rafResize(ensureBoardFits);
         }
 
         function updateStatus(customStatus) {
@@ -776,11 +805,13 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
             }
             if (game.game_over() || isGameOver) {
                 $('#resign-btn').prop('disabled', true);
+            } else {
+                $('#resign-btn').prop('disabled', false);
             }
             $status.html(status);
             updateNavButtons();
         }
-        
+
         function updateNavButtons() {
             const historyLength = game.history().length;
             const onLatestMove = viewingMoveIndex === historyLength - 1;
@@ -790,32 +821,35 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
             $('#btn-last').prop('disabled', onLatestMove);
         }
 
-        // Function to start a new game
         function newGame() {
+            stopEngineSearch();
             game = new Chess();
             board.position('start');
             viewingMoveIndex = -1;
             isGameOver = false;
-            isEngineSearching = false;
+            safeSetEngineSearching(false);
             topMovesWithEvals = [];
             updateMoveHistory();
             updateStatus();
             $('#ai-reasoning-text').text('Set a personality to see the AI\'s thoughts here.');
             $('#resign-btn').prop('disabled', false);
             showNotification('New game started!', 2000);
+            rafResize(ensureBoardFits);
         }
 
         function openShareModal() {
             $('#fenInput').val(game.fen());
             $('#pgnText').val(game.pgn());
             $('#pgn-modal-overlay').css('display', 'flex');
+            rafResize(ensureBoardFits);
         }
-        function closeShareModal() { $('#pgn-modal-overlay').css('display', 'none'); }
+        function closeShareModal() { $('#pgn-modal-overlay').css('display', 'none'); rafResize(ensureBoardFits); }
         function openAIPersonalityModal() {
             $('#ai-personality-input').val(aiPersonality);
             $('#ai-modal-overlay').css('display', 'flex');
+            rafResize(ensureBoardFits);
         }
-        function closeAIPersonalityModal() { $('#ai-modal-overlay').css('display', 'none'); }
+        function closeAIPersonalityModal() { $('#ai-modal-overlay').css('display', 'none'); rafResize(ensureBoardFits); }
         function saveAIPersonality() {
             aiPersonality = $('#ai-personality-input').val();
             if (useLLM()) {
@@ -851,13 +885,13 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
             document.body.removeChild(a); URL.revokeObjectURL(url);
         }
 
-        // New functions for settings modal
         function openSettingsModal() {
             $('#api-key-input').val(userApiKey);
             $('#api-key-warning').hide();
             $('#settings-modal-overlay').css('display', 'flex');
+            rafResize(ensureBoardFits);
         }
-        function closeSettingsModal() { $('#settings-modal-overlay').css('display', 'none'); }
+        function closeSettingsModal() { $('#settings-modal-overlay').css('display', 'none'); rafResize(ensureBoardFits); }
 
         var config = { 
             draggable: true, 
@@ -869,41 +903,30 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
             showNotation: true
         };
         board = Chessboard('game-board', config);
-        
-        // Fungsi untuk memastikan board menyesuaikan dengan container
-        function ensureBoardFits() {
-            const container = $('.chess-board-container');
-            const containerWidth = container.width() - 16;
-            const containerHeight = container.height() - 16;
-            
-            const maxSize = Math.min(containerWidth, containerHeight);
-            
-            $('#game-board').css({
-                'width': maxSize + 'px',
-                'height': maxSize + 'px'
-            });
-            
-            board.resize();
-        }
-        
-        // Panggil fungsi saat inisialisasi
+
         ensureBoardFits();
-        
-        // Panggil fungsi saat window di-resize
-        $(window).on('resize', ensureBoardFits);
+        $(window).on('resize', () => rafResize(ensureBoardFits));
+        startResizeObserver();
 
         // Event Handlers
         $('#new-game-btn').on('click', newGame);
-        $('#resign-btn').on('click', () => { if (!isGameOver && !game.game_over()) { isGameOver = true; updateStatus(); }});
+        $('#resign-btn').on('click', () => { 
+            if (!isGameOver && !game.game_over()) { 
+                isGameOver = true; 
+                stopEngineSearch();
+                safeSetEngineSearching(false);
+                updateStatus(); 
+            }
+        });
         $('#btn-back').on('click', () => navigateToMove(viewingMoveIndex - 1));
         $('#btn-forward').on('click', () => navigateToMove(viewingMoveIndex + 1));
         $('#btn-first').on('click', () => navigateToMove(-1));
         $('#btn-last').on('click', () => navigateToMove(game.history().length - 1));
-        
+
         $('#share-btn').on('click', openShareModal);
         $('#modal-close-btn').on('click', function(e) { e.stopPropagation(); closeShareModal(); });
         $('#pgn-modal-overlay').on('click', function(e) { if (e.target === this || $(e.target).is('#modal-close-btn, #modal-close-btn *')) closeShareModal(); });
-        
+
         $('#ai-btn').on('click', openAIPersonalityModal);
         $('#ai-modal-close-btn').on('click', function(e) { e.stopPropagation(); closeAIPersonalityModal(); });
         $('#ai-modal-overlay').on('click', function(e) { if (e.target === this || $(e.target).is('#ai-modal-close-btn, #ai-modal-close-btn *')) closeAIPersonalityModal(); });
@@ -913,59 +936,54 @@ You MUST respond in a VALID JSON FORMAT, with no other text. The JSON object mus
         $('#copy-fen-btn').on('click', function() { copyToClipboard('fenInput', this); });
         $('#copy-pgn-btn').on('click', function() { copyToClipboard('pgnText', this); });
         $('#download-pgn-btn').on('click', downloadPGN);
-        
+
         $('#settings-btn').on('click', function(e) { 
             e.stopPropagation(); 
             $('#settings-popover').toggle(); 
         });
-        
+
         $(document).on('click', function() {
             $('#settings-popover').hide();
         });
-        
+
         $('#settings-popover').on('click', e => e.stopPropagation());
-        
+
         $('#api-settings-btn').on('click', function() {
             $('#settings-popover').hide();
             openSettingsModal();
         });
-        
+
         $('#settings-modal-close-btn').on('click', function(e) { e.stopPropagation(); closeSettingsModal(); });
         $('#settings-modal-overlay').on('click', function(e) { if (e.target === this || $(e.target).is('#settings-modal-close-btn, #settings-modal-close-btn *')) closeSettingsModal(); });
-        
+
         $('#save-settings-btn').on('click', () => {
             const newApiKey = $('#api-key-input').val().trim();
-            
-            // Simple validation for API key
             if (!newApiKey || newApiKey.length < 10) {
                 $('#api-key-warning').show();
                 return;
             }
-            
             userApiKey = newApiKey;
             $('#api-key-warning').hide();
             closeSettingsModal();
             showNotification('API key saved successfully!', 3000);
-            
-            // If AI personality is set but no API key was available before, update status
             if (aiPersonality && aiPersonality.trim() !== '') {
                 $('#ai-btn').addClass('active-ai');
                 $('#ai-reasoning-text').text('Personality set. Make your move!');
             }
         });
-        
+
         // Theme buttons in popover
         $('#theme-brown-btn').on('click', () => setBoardTheme('brown'));
         $('#theme-blue-btn').on('click', () => setBoardTheme('blue'));
-        
+
         // Theme buttons in modal
         $('#theme-brown-btn-modal').on('click', () => setBoardTheme('brown'));
         $('#theme-blue-btn-modal').on('click', () => setBoardTheme('blue'));
-        
+
         // Model selection buttons
         $('#model-flash-btn').on('click', () => setAIModel('gemini-1.5-flash-latest'));
         $('#model-pro-btn').on('click', () => setAIModel('gemini-1.5-pro-latest'));
-        
+
         setBoardTheme('blue');
         initializeEngine();
     </script>