Add Run in BBC emulator button

Opens bbc.xania.org in a new tab with the current ENVELOPE and SOUND
statements embedded as a two-line BASIC program via the embedBasic URL
parameter, plus autorun so jsbeeb tokenises and RUNs immediately. Lets
you A/B local Web Audio playback against real BBC behaviour with one
click.

Author: kieranhj

index.html

@@ -46,6 +46,7 @@ <h2>Visualisation</h2>
             <div class="transport">
               <button id="play">Play</button>
               <button id="stop">Stop</button>
+              <button id="run-emulator" title="Open bbc.xania.org with the current ENVELOPE and SOUND auto-running">Run in BBC emulator ↗</button>
             </div>
             <h3>Presets</h3>
             <div class="presets" id="presets"></div>

src/main.ts

@@ -231,6 +231,15 @@ document.getElementById("stop")!.addEventListener("click", () => {
   render(canvas, currentSamples, sound.pitch, null);
 });
 
+document.getElementById("run-emulator")!.addEventListener("click", () => {
+  // jsbeeb (bbc.xania.org) takes URL-encoded BASIC via embedBasic, with
+  // &autorun to type RUN after tokenising. Two numbered lines are enough:
+  // ENVELOPE registers the envelope, SOUND queues the note.
+  const program = `10 ${formatBasic(env)}\n20 ${formatSound(sound.channel, sound.amplitude, sound.pitch, sound.duration)}\n`;
+  const url = `https://bbc.xania.org/?embedBasic=${encodeURIComponent(program)}&autorun`;
+  window.open(url, "_blank", "noopener,noreferrer");
+});
+
 for (const btn of document.querySelectorAll<HTMLButtonElement>(".copy-btn")) {
   btn.addEventListener("click", async () => {
     const targetId = btn.dataset["copy"];

src/style.css

@@ -82,7 +82,7 @@ code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
 }
 .field input:focus { outline: 1px solid #58a6ff; }
 
-#play, #stop {
+#play, #stop, #run-emulator {
   color: white;
   border: none;
   border-radius: 4px;
@@ -95,6 +95,8 @@ code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
 #play:hover { background: #2ea043; }
 #stop { background: #6e7681; }
 #stop:hover { background: #8b949e; }
+#run-emulator { background: #1f6feb; margin-left: auto; margin-right: 0; }
+#run-emulator:hover { background: #388bfd; }
 
 .basic-row {
   display: flex;