From b6d9af1bf09d8e5a2fbf5751c2cdd34df1adca82 Mon Sep 17 00:00:00 2001
From: Matt <59450879+mattppal@users.noreply.github.com>
Date: Thu, 11 Jun 2026 09:11:22 -0700
Subject: [PATCH 1/3] Add selectable train dispatch sounds with localStorage
 persistence.

Let users pick between choo-choo and SF Muni chime sounds, and document how to add more in the README.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 README.md  |   7 +++
 index.html | 126 +++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 114 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index bac938e..35f737a 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,13 @@ open index.html
 
 Edit `index.html`, then refresh the browser.
 
+### Train Sounds
+
+Train dispatch sounds are configured in the `TRAIN_SOUNDS` array in `index.html`.
+Add new sound files to `public/`, then add another object with an `id`, `label`,
+`src`, and `volume`. The selected sound is saved in the browser with
+`localStorage`, so it persists after refreshes.
+
 ## Project Structure
 
 - `index.html` contains the UI, styling, and interaction logic.
diff --git a/index.html b/index.html
index ca20e5e..df1001a 100644
--- a/index.html
+++ b/index.html
@@ -134,22 +134,26 @@
         will-change: transform, opacity;
       }
 
-      .mute-toggle {
+      .audio-controls {
         position: fixed;
         top: 16px;
         right: 16px;
         z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .sound-select,
+      .mute-toggle {
         display: inline-flex;
-        width: 38px;
         height: 38px;
         align-items: center;
         justify-content: center;
         border: 1px solid var(--faint);
-        border-radius: 999px;
         background: var(--panel);
         color: var(--ink);
         cursor: pointer;
-        font-size: 16px;
         backdrop-filter: blur(14px);
         transition:
           border-color 150ms ease,
@@ -157,12 +161,40 @@
           transform 150ms ease;
       }
 
+      .sound-select {
+        max-width: min(44vw, 180px);
+        border-radius: 999px;
+        padding: 0 34px 0 14px;
+        appearance: none;
+        background-image:
+          linear-gradient(45deg, transparent 50%, var(--muted) 50%),
+          linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+        background-position:
+          calc(100% - 17px) 16px,
+          calc(100% - 12px) 16px;
+        background-size:
+          5px 5px,
+          5px 5px;
+        background-repeat: no-repeat;
+        font: inherit;
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      .mute-toggle {
+        width: 38px;
+        border-radius: 999px;
+        font-size: 16px;
+      }
+
+      .sound-select:hover,
       .mute-toggle:hover {
         background: #fff;
         border-color: #b8b8b8;
         transform: translateY(-1px);
       }
 
+      .sound-select:focus-visible,
       .mute-toggle:focus-visible {
         outline: 2px solid var(--accent);
         outline-offset: 3px;
@@ -273,15 +305,19 @@
         </div>
       </div>
 
-      <button
-        class="mute-toggle"
-        id="mute"
-        type="button"
-        aria-label="Mute"
-        aria-pressed="false"
-      >
-        🔊
-      </button>
+      <div class="audio-controls" role="group" aria-label="Train audio controls">
+        <select class="sound-select" id="sound" aria-label="Train sound"></select>
+
+        <button
+          class="mute-toggle"
+          id="mute"
+          type="button"
+          aria-label="Mute"
+          aria-pressed="false"
+        >
+          🔊
+        </button>
+      </div>
 
       <div class="counter" id="counter" aria-live="polite">0 trains dispatched</div>
     </main>
@@ -294,13 +330,33 @@
       const PUFF_COUNT = 4;
       const MIN_DURATION_MS = 4500;
       const MAX_DURATION_MS = 7500;
+      const TRAIN_SOUNDS = [
+        {
+          id: "choo-choo",
+          label: "Choo choo",
+          src: "./public/choo-choo.mp3",
+          volume: 0.28,
+        },
+        {
+          id: "sf-muni",
+          label: "SF Muni chime",
+          src: "./public/sf-muni-inbound-train-chime.mp3",
+          volume: 0.55,
+        },
+      ];
 
       const dispatcher = document.querySelector("#dispatcher");
       const hero = document.querySelector("#hero");
       const muteButton = document.querySelector("#mute");
+      const soundSelect = document.querySelector("#sound");
       const counter = document.querySelector("#counter");
-      const choo = new Audio("./public/choo-choo.mp3");
-      choo.preload = "auto";
+      const sounds = new Map(
+        TRAIN_SOUNDS.map((sound) => {
+          const audio = new Audio(sound.src);
+          audio.preload = "auto";
+          return [sound.id, { ...sound, audio }];
+        }),
+      );
 
       let count = 0;
       let nextId = 1;
@@ -308,6 +364,9 @@
       let lastLane = -1;
       let lastDirection = "rtl";
       let muted = localStorage.getItem("wtc:muted") === "1";
+      let selectedSoundId = sounds.has(localStorage.getItem("wtc:sound"))
+        ? localStorage.getItem("wtc:sound")
+        : TRAIN_SOUNDS[0].id;
 
       function pick(items) {
         return items[Math.floor(Math.random() * items.length)];
@@ -320,6 +379,16 @@
         localStorage.setItem("wtc:muted", muted ? "1" : "0");
       }
 
+      function syncSoundSelect() {
+        soundSelect.value = selectedSoundId;
+        localStorage.setItem("wtc:sound", selectedSoundId);
+      }
+
+      function isControlElement(element) {
+        return element instanceof Element
+          && Boolean(element.closest("button, select, input, textarea, a"));
+      }
+
       function updateCounter() {
         const noun = count === 1 ? "train" : "trains";
         counter.textContent = `${count} ${noun} dispatched`;
@@ -327,10 +396,11 @@
           count === 0 ? "welcome to conductor" : `welcome to conductor (${count})`;
       }
 
-      function playChoo() {
+      function playTrainSound() {
         if (muted) return;
-        const node = choo.cloneNode(true);
-        node.volume = 0.28;
+        const sound = sounds.get(selectedSoundId) ?? sounds.get(TRAIN_SOUNDS[0].id);
+        const node = sound.audio.cloneNode(true);
+        node.volume = sound.volume;
         node.play().catch(() => {});
       }
 
@@ -390,7 +460,7 @@
         count += 1;
         hero.classList.add("dispatched");
         updateCounter();
-        playChoo();
+        playTrainSound();
 
         for (let i = 0; i < PUFF_COUNT; i += 1) {
           createSteam(train, (durationMs / (PUFF_COUNT + 1)) * (i + 1));
@@ -403,8 +473,18 @@
         muted = !muted;
         syncMuteButton();
       });
+      soundSelect.addEventListener("click", (event) => {
+        event.stopPropagation();
+      });
+      soundSelect.addEventListener("change", (event) => {
+        event.stopPropagation();
+        selectedSoundId = event.currentTarget.value;
+        syncSoundSelect();
+      });
 
       window.addEventListener("keydown", (event) => {
+        if (isControlElement(event.target)) return;
+
         if (event.code === "Space" || event.code === "Enter") {
           event.preventDefault();
           dispatchTrain();
@@ -414,7 +494,15 @@
         }
       });
 
+      for (const sound of TRAIN_SOUNDS) {
+        const option = document.createElement("option");
+        option.value = sound.id;
+        option.textContent = sound.label;
+        soundSelect.append(option);
+      }
+
       syncMuteButton();
+      syncSoundSelect();
       updateCounter();
     </script>
   </body>

From 40e64c36096aa49523b9faea3ade52928907499e Mon Sep 17 00:00:00 2001
From: Matt <59450879+mattppal@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:19:53 -0700
Subject: [PATCH 2/3] Add large train dispatch counter

---
 index.html | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 140 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index ca20e5e..77c30e2 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" id="theme-color" content="#fbfbfa" />
     <meta
       name="description"
       content="A tiny train dispatcher. Click anywhere to send a train chugging across the screen."
@@ -15,13 +15,53 @@
     <title>welcome to conductor</title>
     <style>
       :root {
-        color-scheme: light;
+        color-scheme: light dark;
         --ink: #151515;
         --muted: #7a7a7a;
         --faint: #d9d9d9;
         --paper: #fbfbfa;
         --panel: rgba(255, 255, 255, 0.72);
+        --panel-hover: #fff;
+        --panel-hover-border: #b8b8b8;
         --accent: #111;
+        --steam: #c9c9c7;
+        --background-counter: #111;
+        --background-counter-opacity: 0.045;
+        --background-counter-bump-opacity: 0.075;
+      }
+
+      :root[data-theme="dark"] {
+        color-scheme: dark;
+        --ink: #f0f0ee;
+        --muted: #9a9a9a;
+        --faint: #333332;
+        --paper: #111110;
+        --panel: rgba(30, 30, 30, 0.78);
+        --panel-hover: rgba(44, 44, 44, 0.92);
+        --panel-hover-border: #555554;
+        --accent: #f0f0ee;
+        --steam: #4a4a48;
+        --background-counter: #f5f5f3;
+        --background-counter-opacity: 0.06;
+        --background-counter-bump-opacity: 0.1;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-theme="light"]) {
+          color-scheme: dark;
+          --ink: #f0f0ee;
+          --muted: #9a9a9a;
+          --faint: #333332;
+          --paper: #111110;
+          --panel: rgba(30, 30, 30, 0.78);
+          --panel-hover: rgba(44, 44, 44, 0.92);
+          --panel-hover-border: #555554;
+          --accent: #f0f0ee;
+          --steam: #4a4a48;
+          --background-counter: #f5f5f3;
+          --background-counter-opacity: 0.06;
+          --background-counter-bump-opacity: 0.1;
+        }
       }
 
       * {
@@ -64,6 +104,7 @@
       .hero {
         position: absolute;
         inset: 0;
+        z-index: 2;
         display: grid;
         place-items: center;
         gap: 18px;
@@ -107,7 +148,7 @@
       .train {
         position: fixed;
         left: 0;
-        z-index: 1;
+        z-index: 4;
         font-size: clamp(38px, 6vw, 56px);
         line-height: 1;
         pointer-events: none;
@@ -126,18 +167,18 @@
 
       .steam {
         position: fixed;
-        z-index: 0;
-        color: #c9c9c7;
+        z-index: 3;
+        color: var(--steam);
         font-size: 18px;
         pointer-events: none;
         animation: puff 1400ms ease-out forwards;
         will-change: transform, opacity;
       }
 
+      .theme-toggle,
       .mute-toggle {
         position: fixed;
         top: 16px;
-        right: 16px;
         z-index: 10;
         display: inline-flex;
         width: 38px;
@@ -157,17 +198,27 @@
           transform 150ms ease;
       }
 
+      .theme-toggle:hover,
       .mute-toggle:hover {
-        background: #fff;
-        border-color: #b8b8b8;
+        background: var(--panel-hover);
+        border-color: var(--panel-hover-border);
         transform: translateY(-1px);
       }
 
+      .theme-toggle:focus-visible,
       .mute-toggle:focus-visible {
         outline: 2px solid var(--accent);
         outline-offset: 3px;
       }
 
+      .theme-toggle {
+        right: 62px;
+      }
+
+      .mute-toggle {
+        right: 16px;
+      }
+
       .counter {
         position: fixed;
         bottom: 16px;
@@ -180,6 +231,31 @@
         pointer-events: none;
       }
 
+      .background-counter {
+        position: fixed;
+        inset: 0;
+        z-index: 0;
+        display: grid;
+        place-items: center;
+        color: var(--background-counter);
+        font-size: clamp(180px, 42vw, 760px);
+        font-weight: 900;
+        letter-spacing: 0;
+        line-height: 0.78;
+        opacity: var(--background-counter-opacity);
+        pointer-events: none;
+        text-align: center;
+        transform: translateY(-1.5vh);
+        transition:
+          opacity 180ms ease,
+          transform 240ms ease;
+      }
+
+      .background-counter.bump {
+        opacity: var(--background-counter-bump-opacity);
+        transform: translateY(-1.5vh) scale(1.025);
+      }
+
       @keyframes wiggle {
         0%,
         100% {
@@ -273,6 +349,15 @@
         </div>
       </div>
 
+      <button
+        class="theme-toggle"
+        id="theme"
+        type="button"
+        aria-label="Switch to dark mode"
+      >
+        🌙
+      </button>
+
       <button
         class="mute-toggle"
         id="mute"
@@ -283,6 +368,7 @@
         🔊
       </button>
 
+      <div class="background-counter" id="background-counter" aria-hidden="true">0</div>
       <div class="counter" id="counter" aria-live="polite">0 trains dispatched</div>
     </main>
 
@@ -297,8 +383,11 @@
 
       const dispatcher = document.querySelector("#dispatcher");
       const hero = document.querySelector("#hero");
+      const themeButton = document.querySelector("#theme");
+      const themeColorMeta = document.querySelector("#theme-color");
       const muteButton = document.querySelector("#mute");
       const counter = document.querySelector("#counter");
+      const backgroundCounter = document.querySelector("#background-counter");
       const choo = new Audio("./public/choo-choo.mp3");
       choo.preload = "auto";
 
@@ -307,12 +396,34 @@
       let lastDispatch = 0;
       let lastLane = -1;
       let lastDirection = "rtl";
+      let backgroundCounterPulseTimer;
       let muted = localStorage.getItem("wtc:muted") === "1";
+      let theme = localStorage.getItem("wtc:theme");
 
       function pick(items) {
         return items[Math.floor(Math.random() * items.length)];
       }
 
+      function resolveTheme() {
+        if (theme === "light" || theme === "dark") return theme;
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+      }
+
+      function syncTheme() {
+        const resolved = resolveTheme();
+        document.documentElement.dataset.theme = resolved;
+        themeButton.textContent = resolved === "dark" ? "☀️" : "🌙";
+        themeButton.setAttribute(
+          "aria-label",
+          resolved === "dark" ? "Switch to light mode" : "Switch to dark mode",
+        );
+        if (themeColorMeta) {
+          themeColorMeta.content = resolved === "dark" ? "#111110" : "#fbfbfa";
+        }
+      }
+
       function syncMuteButton() {
         muteButton.textContent = muted ? "🔇" : "🔊";
         muteButton.setAttribute("aria-label", muted ? "Unmute" : "Mute");
@@ -323,6 +434,7 @@
       function updateCounter() {
         const noun = count === 1 ? "train" : "trains";
         counter.textContent = `${count} ${noun} dispatched`;
+        backgroundCounter.textContent = count;
         document.title =
           count === 0 ? "welcome to conductor" : `welcome to conductor (${count})`;
       }
@@ -390,6 +502,13 @@
         count += 1;
         hero.classList.add("dispatched");
         updateCounter();
+        backgroundCounter.classList.remove("bump");
+        void backgroundCounter.offsetWidth;
+        backgroundCounter.classList.add("bump");
+        window.clearTimeout(backgroundCounterPulseTimer);
+        backgroundCounterPulseTimer = window.setTimeout(() => {
+          backgroundCounter.classList.remove("bump");
+        }, 260);
         playChoo();
 
         for (let i = 0; i < PUFF_COUNT; i += 1) {
@@ -398,6 +517,12 @@
       }
 
       dispatcher.addEventListener("click", dispatchTrain);
+      themeButton.addEventListener("click", (event) => {
+        event.stopPropagation();
+        theme = resolveTheme() === "dark" ? "light" : "dark";
+        localStorage.setItem("wtc:theme", theme);
+        syncTheme();
+      });
       muteButton.addEventListener("click", (event) => {
         event.stopPropagation();
         muted = !muted;
@@ -414,6 +539,13 @@
         }
       });
 
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", () => {
+          if (theme !== "light" && theme !== "dark") syncTheme();
+        });
+
+      syncTheme();
       syncMuteButton();
       updateCounter();
     </script>

From f6f315ad4365dbd90b67ac001701d8eeb41cf62c Mon Sep 17 00:00:00 2001
From: vbonaci <vbonaci@gmail.com>
Date: Fri, 31 Jul 2026 20:32:25 -0700
Subject: [PATCH 3/3] Make train dispatch flow visible

---
 index.html | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)

diff --git a/index.html b/index.html
index ffbd3e4..a3e3e56 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,9 @@
         --background-counter: #111;
         --background-counter-opacity: 0.045;
         --background-counter-bump-opacity: 0.075;
+        --track: rgba(17, 17, 17, 0.08);
+        --track-active: rgba(17, 17, 17, 0.22);
+        --flow: rgba(17, 17, 17, 0.52);
       }
 
       :root[data-theme="dark"] {
@@ -44,6 +47,9 @@
         --background-counter: #f5f5f3;
         --background-counter-opacity: 0.06;
         --background-counter-bump-opacity: 0.1;
+        --track: rgba(245, 245, 243, 0.1);
+        --track-active: rgba(245, 245, 243, 0.26);
+        --flow: rgba(245, 245, 243, 0.58);
       }
 
       @media (prefers-color-scheme: dark) {
@@ -61,6 +67,9 @@
           --background-counter: #f5f5f3;
           --background-counter-opacity: 0.06;
           --background-counter-bump-opacity: 0.1;
+          --track: rgba(245, 245, 243, 0.1);
+          --track-active: rgba(245, 245, 243, 0.26);
+          --flow: rgba(245, 245, 243, 0.58);
         }
       }
 
@@ -165,6 +174,88 @@
         animation-name: train-rtl;
       }
 
+      .track-layer {
+        position: fixed;
+        inset: 0;
+        z-index: 1;
+        pointer-events: none;
+      }
+
+      .track-lane {
+        position: absolute;
+        right: 24px;
+        left: 24px;
+        height: 16px;
+        opacity: 0.72;
+        transform: translateY(20px);
+        transition:
+          opacity 180ms ease,
+          transform 180ms ease;
+      }
+
+      .track-lane::before,
+      .track-lane::after {
+        position: absolute;
+        right: 0;
+        left: 0;
+        height: 2px;
+        border-radius: 999px;
+        background:
+          linear-gradient(90deg, transparent, var(--track), transparent),
+          repeating-linear-gradient(
+            90deg,
+            transparent 0 22px,
+            var(--track) 22px 26px
+          );
+        content: "";
+      }
+
+      .track-lane::before {
+        top: 3px;
+      }
+
+      .track-lane::after {
+        bottom: 3px;
+      }
+
+      .track-lane.active {
+        opacity: 1;
+        transform: translateY(20px) scaleX(1.01);
+      }
+
+      .track-lane.active::before,
+      .track-lane.active::after {
+        background:
+          linear-gradient(90deg, transparent, var(--track-active), transparent),
+          repeating-linear-gradient(
+            90deg,
+            transparent 0 22px,
+            var(--track-active) 22px 26px
+          );
+      }
+
+      .flow-trail {
+        position: fixed;
+        left: 0;
+        z-index: 3;
+        width: min(280px, 28vw);
+        height: 4px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, transparent, var(--flow));
+        opacity: 0;
+        pointer-events: none;
+        will-change: transform, opacity;
+      }
+
+      .flow-trail.ltr {
+        animation-name: flow-ltr;
+      }
+
+      .flow-trail.rtl {
+        animation-name: flow-rtl;
+        background: linear-gradient(270deg, transparent, var(--flow));
+      }
+
       .steam {
         position: fixed;
         z-index: 3;
@@ -317,6 +408,40 @@
         }
       }
 
+      @keyframes flow-ltr {
+        0% {
+          opacity: 0;
+          transform: translateX(-30vw);
+        }
+
+        12%,
+        76% {
+          opacity: 0.8;
+        }
+
+        100% {
+          opacity: 0;
+          transform: translateX(130vw);
+        }
+      }
+
+      @keyframes flow-rtl {
+        0% {
+          opacity: 0;
+          transform: translateX(130vw);
+        }
+
+        12%,
+        76% {
+          opacity: 0.8;
+        }
+
+        100% {
+          opacity: 0;
+          transform: translateX(-30vw);
+        }
+      }
+
       @keyframes puff {
         0% {
           opacity: 0.7;
@@ -340,6 +465,10 @@
           display: none;
         }
 
+        .flow-trail {
+          display: none;
+        }
+
         .train.ltr,
         .train.rtl {
           left: 50%;
@@ -375,6 +504,8 @@
         </div>
       </div>
 
+      <div class="track-layer" id="tracks" aria-hidden="true"></div>
+
       <div class="top-controls" role="group" aria-label="Train controls">
         <button
           class="theme-toggle"
@@ -433,6 +564,7 @@
       const soundSelect = document.querySelector("#sound");
       const counter = document.querySelector("#counter");
       const backgroundCounter = document.querySelector("#background-counter");
+      const tracks = document.querySelector("#tracks");
       const sounds = new Map(
         TRAIN_SOUNDS.map((sound) => {
           const audio = new Audio(sound.src);
@@ -502,6 +634,34 @@
           count === 0 ? "welcome to conductor" : `welcome to conductor (${count})`;
       }
 
+      function buildTracks() {
+        for (let lane = 0; lane < LANE_COUNT; lane += 1) {
+          const track = document.createElement("span");
+          track.className = "track-lane";
+          track.dataset.lane = String(lane);
+          track.style.top = `${10 + lane * 16}vh`;
+          tracks.append(track);
+        }
+      }
+
+      function pulseTrack(lane) {
+        const track = tracks.querySelector(`[data-lane="${lane}"]`);
+        if (!track) return;
+        track.classList.add("active");
+        window.setTimeout(() => {
+          track.classList.remove("active");
+        }, 900);
+      }
+
+      function createFlowTrail(train) {
+        const trail = document.createElement("span");
+        trail.className = `flow-trail ${train.direction}`;
+        trail.style.top = `${10 + train.lane * 16}vh`;
+        trail.style.animationDuration = `${train.durationMs}ms`;
+        trail.addEventListener("animationend", removeNode, { once: true });
+        dispatcher.append(trail);
+      }
+
       function playTrainSound() {
         if (muted) return;
         const sound = sounds.get(selectedSoundId) ?? sounds.get(TRAIN_SOUNDS[0].id);
@@ -562,10 +722,12 @@
         trainNode.style.animationDuration = `${durationMs}ms`;
         trainNode.addEventListener("animationend", removeNode, { once: true });
         dispatcher.append(trainNode);
+        createFlowTrail(train);
 
         count += 1;
         hero.classList.add("dispatched");
         updateCounter();
+        pulseTrack(lane);
         backgroundCounter.classList.remove("bump");
         void backgroundCounter.offsetWidth;
         backgroundCounter.classList.add("bump");
@@ -626,6 +788,7 @@
           if (theme !== "light" && theme !== "dark") syncTheme();
         });
 
+      buildTracks();
       syncTheme();
       syncMuteButton();
       syncSoundSelect();