Turn Clock — <mv-turn-clock>

node scripts/add.mjs turn-clock --out ./src/marvelous

<div id="tc-demo" style="width:min(100%,56rem);margin-inline:auto">
  <style>
    #tc-demo { display:grid; gap:1.25rem; align-content:start }
    #tc-demo .tc-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; padding:.875rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #tc-demo .tc-field { display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--mv-fg-muted) }
    #tc-demo .tc-field .mv-select { width:auto; min-width:10.5rem }
    #tc-demo .mv-choice { font-size:.8125rem }
    #tc-demo .tc-spacer { flex:1 1 0 }
    #tc-demo .tc-log { display:flex; align-items:center; gap:.625rem; min-height:1.5rem; margin:0; color:var(--mv-fg-muted); font:.75rem/1.4 var(--mv-font-mono) }
    #tc-demo .tc-sub { display:grid; gap:.625rem }
    #tc-demo .tc-sub h4 { margin:0; font-size:.875rem; font-weight:600 }
    #tc-demo .tc-sub p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem }
  </style>

  <!-- Main: a daily standup, already under way (restored from a snapshot below) -->
  <mv-turn-clock id="tc-standup" label="Daily standup · Platform team" bank="2m" planned="13m" rounds="1" hotkeys="global">
    <span data-person="amara" data-role="Backend · payments">Amara Okafor</span>
    <span data-person="kenji" data-role="Frontend · checkout">Kenji Watanabe</span>
    <span data-person="priya" data-role="Product design">Priya Raman</span>
    <span data-person="lucas" data-role="QA automation">Lucas Moreau</span>
    <span data-person="sofia" data-role="Data engineering">Sofia Almeida</span>
    <span data-person="daniel" data-role="Engineering lead" data-bank="3m">Daniel Kim</span>
  </mv-turn-clock>

  <div class="tc-controls">
    <label class="tc-field">Order
      <select class="mv-select" id="tc-order" data-size="sm">
        <option value="round-robin">Round robin</option>
        <option value="random">Random</option>
        <option value="least-spoken">Quietest first</option>
      </select>
    </label>
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tc-inc"> +10 s per turn</label>
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tc-auto"> Auto-pass at zero</label>
    <span class="tc-spacer"></span>
    <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tc-ff">Skip ahead 45 s</button>
    <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="tc-replay">Replay demo</button>
  </div>
  <p class="tc-log"><span class="mv-badge" data-variant="secondary" id="tc-event">mv-turn</span><span id="tc-log">Priya Raman took the floor from Kenji Watanabe.</span></p>

  <!-- Two-sided debate: equal banks, a 15-second increment, paused mid-way -->
  <div class="tc-sub">
    <div>
      <h4>Architecture review · two-sided debate</h4>
      <p>A true chess clock: 3 minutes per side, 15 seconds back on every hand-over. Shortcuts work while focus is inside it.</p>
    </div>
    <mv-turn-clock id="tc-debate" label="Proposal: move billing to event sourcing" bank="3m" increment="15s" warn="30s">
      <span data-person="for" data-role="For the proposal">Lucía Fernández</span>
      <span data-person="against" data-role="Against the proposal">Tomás Novak</span>
    </mv-turn-clock>
  </div>

  <script type="module">
    const standup = document.getElementById("tc-standup");
    const debate = document.getElementById("tc-debate");
    const log = document.getElementById("tc-log");
    const badge = document.getElementById("tc-event");
    const say = (event, text) => { badge.textContent = event; log.textContent = text; };
    const s = (n) => n * 1000;

    // A standup that started 4 min 44 s ago: Amara and Kenji are done, Priya is speaking.
    function seedStandup() {
      const now = Date.now();
      standup.restore({
        state: "running", current: "priya", elapsed: s(52), savedAt: now, startedAt: now - s(94 + 138 + 52),
        people: [
          { id: "amara", bank: s(26), spent: s(94), turns: 1, longest: s(94) },
          { id: "kenji", bank: -s(18), spent: s(138), turns: 1, longest: s(138), overtime: s(18) },
          { id: "priya", bank: s(120) }, { id: "lucas", bank: s(120) }, { id: "sofia", bank: s(120) }, { id: "daniel", bank: s(180) },
        ],
        log: [
          { id: "amara", name: "Amara Okafor", start: 0, duration: s(94) },
          { id: "kenji", name: "Kenji Watanabe", start: s(94), duration: s(138) },
        ],
      });
    }

    // Debate: Lucía opened (two turns), Tomás holds the floor, the moderator paused.
    function seedDebate() {
      const now = Date.now();
      debate.restore({
        state: "paused", current: "against", elapsed: s(41), savedAt: now, startedAt: now - s(260),
        people: [
          { id: "for", bank: s(180 - 71 - 58 + 30), spent: s(129), turns: 2, longest: s(71) },
          { id: "against", bank: s(180 - 49 + 15), spent: s(49), turns: 1, longest: s(49) },
        ],
        log: [
          { id: "for", name: "Lucía Fernández", start: 0, duration: s(71) },
          { id: "against", name: "Tomás Novak", start: s(71), duration: s(49) },
          { id: "for", name: "Lucía Fernández", start: s(120), duration: s(58) },
        ],
      });
    }

    const who = (p) => (p ? p.name : "nobody");
    standup.addEventListener("mv-turn", (e) => {
      const { from, to, reason } = e.detail;
      say("mv-turn", reason === "start" ? `${who(to)} opened the session.` : reason === "undo" ? `Undo: back to ${who(to)}.` : `${who(to)} took the floor from ${who(from)}${reason === "timeout" ? " (time ran out)" : ""}.`);
    });
    standup.addEventListener("mv-warn", (e) => say("mv-warn", `${e.detail.person.name} has 1 minute left.`));
    standup.addEventListener("mv-overtime", (e) => say("mv-overtime", `${e.detail.person.name} is over time. Nothing flashes: the clock just goes negative.`));
    standup.addEventListener("mv-finish", (e) => {
      const { summary } = e.detail;
      say("mv-finish", `Finished in ${Math.round(summary.duration / 1000)} s · airtime balance ${summary.balance === null ? "n/a" : Math.round(summary.balance * 100) + "%"}.`);
    });
    standup.addEventListener("mv-away", (e) => say("mv-away", `${e.detail.person.name} is ${e.detail.away ? "away" : "back"}.`));

    document.getElementById("tc-order").addEventListener("change", (e) => { standup.order = e.target.value; });
    document.getElementById("tc-inc").addEventListener("change", (e) => { standup.increment = e.target.checked ? "10s" : "0"; });
    document.getElementById("tc-auto").addEventListener("change", (e) => { standup.onEmpty = e.target.checked ? "pass" : "continue"; });
    document.getElementById("tc-ff").addEventListener("click", () => {
      // Fast-forward the running turn by resuming a snapshot 45 s older.
      if (standup.state !== "running" && standup.state !== "paused") return;
      const snap = standup.getSnapshot();
      snap.elapsed += 45_000;
      snap.startedAt -= 45_000;
      standup.restore(snap);
    });
    document.getElementById("tc-replay").addEventListener("click", () => {
      standup.reset();
      seedStandup();
      say("mv-turn", "Priya Raman took the floor from Kenji Watanabe.");
    });

    customElements.whenDefined("mv-turn-clock").then(() => { seedStandup(); seedDebate(); });
  </script>
</div>