Add stop battle functionality

- Add stop button that appears during battle

- Add stopBattle() method to handle battle interruption

- Show 'Battle stopped' status when user stops

- Reset shouldStop flag and hide progress bar in finally block

- Add i18n messages for stop/stopping/stopped (EN/CN)

Author: kaolayu

examples/src/i18n/locales.ts

@@ -65,6 +65,7 @@ export const en = {
   custom: {
     title: "⚙️ Battle Configuration",
     start: "Start Battle",
+    stop: "Stop Battle",
     running: "Fighting...",
     simCount: "Simulations:",
     hero: "🦸 Hero",
@@ -93,6 +94,8 @@ export const en = {
   status: {
     running: "🔄 Running {scenario} simulation...",
     simulating: "🔄 Simulating battles... {current}/{total} ({percent}%)",
+    stopping: "⏹️ Stopping battle...",
+    stopped: "⏹️ Battle stopped",
     success: "✅ Simulation complete! Click on any chart point to see detailed battle data.",
     error: "❌ Simulation failed: {message}",
     cannotModifyLevel: "⚠️ Cannot modify level during battle!",
@@ -173,6 +176,7 @@ export const zhCN = {
   custom: {
     title: "⚙️ 战斗配置",
     start: "开始战斗",
+    stop: "停止战斗",
     running: "战斗中...",
     simCount: "模拟次数:",
     hero: "🦸 英雄",
@@ -201,6 +205,8 @@ export const zhCN = {
   status: {
     running: "🔄 正在运行 {scenario} 模拟...",
     simulating: "🔄 正在模拟战斗... {current}/{total} ({percent}%)",
+    stopping: "⏹️ 正在停止战斗...",
+    stopped: "⏹️ 战斗已停止",
     success: "✅ 模拟完成！点击图表上的任意点查看详细战斗数据。",
     error: "❌ 模拟失败: {message}",
     cannotModifyLevel: "⚠️ 战斗中不能修改等级！",

examples/src/ui/DemoApp.ts

@@ -111,8 +111,13 @@ export class DemoApp {
             startCustomBtn.addEventListener('click', (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                console.log('Start Custom Battle clicked');
-                if (!this.isRunning) {
+                if (this.isRunning) {
+                    // Stop battle
+                    console.log('Stop Battle clicked');
+                    this.stopBattle();
+                } else {
+                    // Start battle
+                    console.log('Start Custom Battle clicked');
                     this.runCustomBattle();
                 }
             });
@@ -435,11 +440,11 @@ export class DemoApp {
         this.setStatus('loading', i18n.t('status.running', { scenario: 'Custom' }));
         this.clearOutput();
 
-        // Update button state to show running
+        // Update button state to show stop option
         const startBtn = document.getElementById('startCustomBattle');
         if (startBtn) {
             startBtn.classList.add('running');
-            startBtn.querySelector('.label')!.textContent = '⚔️ ' + i18n.t('custom.running');
+            startBtn.querySelector('.label')!.textContent = '⏹️ ' + i18n.t('custom.stop');
         }
 
         // Show and update character view
@@ -486,6 +491,7 @@ export class DemoApp {
                 // Check if should stop
                 if (this.shouldStop) {
                     console.log('Simulation stopped by user');
+                    this.setStatus('success', i18n.t('status.stopped'));
                     return;
                 }
 
@@ -515,6 +521,7 @@ export class DemoApp {
                     // Check if stopped during animation
                     if (this.shouldStop) {
                         console.log('Simulation stopped during battle animation');
+                        this.setStatus('success', i18n.t('status.stopped'));
                         return;
                     }
                 } else {
@@ -619,12 +626,16 @@ ${i18n.t('status.battleDetails.hp', { hp: Math.round(lastResult.battleData[lastR
              if (progressContainer) progressContainer.style.display = 'none';
         } finally {
             this.isRunning = false;
+            this.shouldStop = false;
             // Reset button state
             const startBtn = document.getElementById('startCustomBattle');
             if (startBtn) {
                 startBtn.classList.remove('running');
                 startBtn.querySelector('.label')!.textContent = '⚔️ ' + i18n.t('custom.start');
             }
+            // Hide progress bar
+            const progressContainer = document.getElementById('customProgress');
+            if (progressContainer) progressContainer.style.display = 'none';
         }
     }
 
@@ -903,6 +914,15 @@ ${i18n.t('status.battleDetails.footer')}
         }
     }
 
+    private stopBattle() {
+        if (!this.isRunning) return;
+        
+        this.shouldStop = true;
+        this.setStatus('loading', i18n.t('status.stopping'));
+        
+        // Button will be reset when the battle loop detects shouldStop
+    }
+
     private levelWarningToast: HTMLElement | null = null;
     private levelWarningTimer: number | null = null;