UX: auto-start emulator, stop button, cleanup on navigate away

- Emulator auto-starts when Play page loads (no intermediate launch screen)
- Added ⏹ Stop button while game is running
- Back arrow and Stop both kill the emulator (js-dos CI.exit())
- Cleanup on unmount prevents background emulation
- Loading state shown while js-dos CDN loads
- Manual "Start Game" fallback if auto-start fails

frontend/src/pages/Play.svelte

@@ -7,9 +7,12 @@
   let game = $state(null);
   let loading = $state(true);
   let error = $state("");
-  let emulatorReady = $state(false);
+  let booting = $state(false);
+  let running = $state(false);
+  let started = false;
 
   let dosContainer;
+  let dosCI = null;
 
   async function load() {
     loading = true;
@@ -21,34 +24,83 @@
     loading = false;
   }
 
-  function startEmulator() {
+  async function startEmulator() {
-    if (!game || !game.ready) return;
+    if (!dosContainer || !game?.ready || running || started) return;
+    started = true;
+    booting = true;
 
-    // Load js-dos from CDN dynamically
+    // Load js-dos CSS
-    const css = document.createElement("link");
+    const link = document.createElement("link");
-    css.rel = "stylesheet";
+    link.rel = "stylesheet";
-    css.href = "https://v8.js-dos.com/latest/js-dos.css";
+    link.href = "https://v8.js-dos.com/latest/js-dos.css";
-    document.head.appendChild(css);
+    document.head.appendChild(link);
 
-    const script = document.createElement("script");
+    // Load js-dos script from CDN if not already loaded
-    script.src = "https://v8.js-dos.com/latest/js-dos.js";
+    if (!window.Dos) {
-    script.onload = () => {
+      try {
+        await new Promise((resolve, reject) => {
+          const s = document.createElement("script");
+          s.src = "https://v8.js-dos.com/latest/js-dos.js";
+          s.onload = resolve;
+          s.onerror = reject;
+          document.head.appendChild(s);
+        });
+      } catch {
+        error = "Failed to load emulator. Check your internet connection.";
+        booting = false;
+        return;
+      }
+    }
+
+    // Start the DOS emulator
+    try {
       const url = bundleUrl(game);
-      if (window.Dos && dosContainer && url) {
+      if (!url || !window.Dos) {
-        window.Dos(dosContainer, { url });
+        throw new Error("Failed to resolve game bundle");
-        emulatorReady = true;
       }
-    };
+      dosCI = await window.Dos(dosContainer, { url });
-    document.head.appendChild(script);
+      running = true;
-    emulatorReady = true;
+    } catch (e) {
+      error = "Failed to start emulator: " + e.message;
+    }
+    booting = false;
   }
 
+  function stopEmulator() {
+    // Kill the emulator process
+    if (dosCI) {
+      try { dosCI.exit(); } catch (_) {}
+      dosCI = null;
+    }
+    if (dosContainer) {
+      dosContainer.innerHTML = "";
+    }
+    running = false;
+    // Navigate back to game detail
+    push(`/game/${game.id}`);
+  }
+
+  // Load game data on mount
   $effect(() => { load(); });
 
-  // Cleanup on unmount
+  // Auto-start emulator once game data and DOM are ready
+  $effect(() => {
+    if (game?.ready && dosContainer && !started) {
+      startEmulator();
+    }
+  });
+
+  // Cleanup on unmount (navigating away, browser back, etc.)
   $effect(() => {
     return () => {
-      // js-dos handles its own cleanup
+      if (dosCI) {
+        try { dosCI.exit(); } catch (_) {}
+        dosCI = null;
+      }
+      if (dosContainer) {
+        dosContainer.innerHTML = "";
+      }
+      running = false;
     };
   });
 </script>
@@ -56,31 +108,47 @@
 {#if loading}
   <div class="loading">Loading...</div>
 {:else if error}
-  <div class="error">{error}</div>
+  <div class="play-page">
     <a href="#/" class="back-link">← Back to Library</a>
+    <div class="error-msg">{error}</div>
+  </div>
 {:else if game}
   <div class="play-page">
+    <!-- Top bar -->
     <div class="play-header">
-      <a href={`#/game/${game.id}`} class="back-link">← {game.title}</a>
+      <button class="link-button" onclick={stopEmulator}>← {game.title}</button>
-      {#if !emulatorReady}
+      {#if running}
-        <button class="btn btn-primary" onclick={startEmulator}>
+        <button class="btn stop-btn" onclick={stopEmulator}>⏹ Stop</button>
-          ▶ Launch Emulator
-        </button>
       {/if}
     </div>
 
-    {#if emulatorReady}
+    <!-- Booting state -->
+    {#if booting && !running}
+      <div class="booting">
+        <div class="booting-icon">⚙️</div>
+        <h2>{game.title}</h2>
+        <p>Starting emulator...</p>
+        <p class="save-hint">💾 Game saves are stored automatically in your browser</p>
+      </div>
+    {/if}
+
+    <!-- Emulator canvas -->
+    {#if running}
       <div class="emulator-wrapper">
         <div bind:this={dosContainer} class="dos-container"></div>
       </div>
-    {:else}
+    {/if}
-      <div class="launch-screen">
+
-        <div class="launch-icon">🕹️</div>
+    <!-- Empty state (shouldn't normally show) -->
+    {#if !booting && !running}
+      <div class="booting">
+        <div class="booting-icon">🕹️</div>
         <h2>{game.title}</h2>
-        <p class="launch-info">
+        {#if game.ready}
-          {game.year ? `${game.year} · ` : ""}{game.genre || ""}
+          <button class="btn btn-primary" onclick={startEmulator}>▶ Start Game</button>
-        </p>
+        {:else}
-        <p class="launch-hint">Click "Launch Emulator" above to start playing</p>
+          <p>This game is not ready yet.</p>
+        {/if}
         <p class="save-hint">💾 Game saves are stored automatically in your browser</p>
       </div>
     {/if}
@@ -89,16 +157,75 @@
 
 <style>
   .play-page { padding: 16px 0; }
-  .loading { text-align: center; padding: 60px; color: var(--text-dim); }
+  .loading {
-  .error { background: #331111; border: 1px solid #cc3333; color: #ff6666; padding: 12px; border-radius: var(--radius-sm); margin-bottom: 16px; }
+    text-align: center;
-  .back-link { display: inline-block; color: var(--text-dim); }
+    padding: 60px;
+    color: var(--text-dim);
+  }
+  .error-msg {
+    background: #331111;
+    border: 1px solid #cc3333;
+    color: #ff6666;
+    padding: 12px 16px;
+    border-radius: var(--radius-sm);
+    margin-top: 16px;
+  }
+  .back-link {
+    display: inline-block;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+  }
   .back-link:hover { color: var(--phosphor); }
+  .link-button {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+    cursor: pointer;
+    padding: 0;
+    font-family: var(--font-sans);
+  }
+  .link-button:hover { color: var(--phosphor); }
   .play-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
   }
+  .stop-btn {
+    border-color: #cc3333;
+    color: #ff4444;
+  }
+  .stop-btn:hover {
+    background: #331111;
+    box-shadow: 0 0 12px #331111;
+  }
+
+  /* Booting / transitional state */
+  .booting {
+    text-align: center;
+    padding: 60px 20px;
+    border: 1px dashed var(--border);
+    border-radius: var(--radius);
+  }
+  .booting-icon { font-size: 3rem; margin-bottom: 16px; }
+  .booting h2 {
+    color: var(--phosphor);
+    font-family: var(--font-mono);
+    margin-bottom: 8px;
+  }
+  .booting p { color: var(--text-dim); }
+  .save-hint {
+    display: inline-block;
+    margin-top: 16px;
+    padding: 6px 16px;
+    border-radius: 12px;
+    background: var(--phosphor-burn);
+    color: var(--phosphor-dim);
+    font-size: 0.85rem;
+  }
+
+  /* Emulator */
   .emulator-wrapper {
     background: #000;
     border-radius: var(--radius);
@@ -114,23 +241,4 @@
     width: 100% !important;
     height: 100% !important;
   }
-  .launch-screen {
-    text-align: center;
-    padding: 80px 20px;
-    border: 1px dashed var(--border);
-    border-radius: var(--radius);
-  }
-  .launch-icon { font-size: 4rem; margin-bottom: 16px; }
-  .launch-screen h2 { color: var(--phosphor); font-family: var(--font-mono); margin-bottom: 8px; }
-  .launch-info { color: var(--text-dim); margin-bottom: 24px; }
-  .launch-hint { color: var(--text-dim); margin-bottom: 8px; }
-  .save-hint {
-    color: var(--phosphor-dim);
-    font-size: 0.85rem;
-    margin-top: 16px;
-    background: var(--phosphor-burn);
-    display: inline-block;
-    padding: 6px 16px;
-    border-radius: 12px;
-  }
 </style>