Pete/internal/web/templates/siege.html

{{define "title"}}{{if .Siege.Active}}The Siege — {{.Siege.BossName}}{{else}}The Siege{{end}} — {{.SiteTitle}}{{end}}

{{/* One row of the defender board. Same shape whether they fought today or are
     still to go; the column they're in is the message. An opted-out defender
     carries no token, so they get no link — their damage still counts and still
     holds its rank, they just aren't named. */}}
{{define "defenderrow"}}
<li class="flex items-baseline gap-3 py-1.5 border-b border-[color:var(--ink)]/5 last:border-0">
  <span class="flex-1 min-w-0">
    {{if .Token}}<a href="/adventure/who/{{.Token}}" class="font-semibold hover:text-theme-adventure transition truncate">{{.Name}}</a>
    {{else}}<span class="font-semibold text-[color:var(--ink)]/55 italic truncate">{{.Name}}</span>{{end}}
    {{if .Level}}<span class="text-xs text-[color:var(--ink)]/40 ml-1.5">lv {{.Level}}</span>{{end}}
  </span>
  {{if .Fights}}
  <span class="text-xs text-[color:var(--ink)]/50 shrink-0 tabular-nums">{{.Damage}} dmg · {{.Fights}} bout{{if ne .Fights 1}}s{{end}}</span>
  {{else}}
  <span class="text-xs text-[color:var(--ink)]/35 shrink-0">not yet in it</span>
  {{end}}
</li>
{{end}}

{{define "main"}}
<article class="mt-2 mb-10 max-w-3xl mx-auto" id="siege"
         data-active="{{if .Siege.Active}}1{{else}}0{{end}}" data-ends-at="{{.Siege.EndsAt}}">
  {{/* The war room joined the realm nav when the realm pages landed: it is one
       of the four standing pages about this place, not a one-off. */}}
  {{template "realmnav" .}}

  {{if .Siege.Active}}
  <header class="rounded-3xl bg-theme-adventure text-white p-6 sm:p-10 shadow-pete relative overflow-hidden {{if not .Siege.Stale}}siege-live{{end}}">
    <div class="absolute -top-8 -right-4 text-[12rem] opacity-20 select-none" aria-hidden="true">🏰</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] opacity-80">🏰 The Siege · Tier {{.Siege.Tier}}</p>
      <h1 class="font-display text-3xl sm:text-4xl font-bold mt-2 leading-tight">{{.Siege.BossName}}</h1>
      <p class="mt-2 opacity-90">Camped outside town. One bout each, every day, until it falls or the window closes.</p>

      <!-- The bar. This is the page. -->
      <div class="mt-6 siege-track" role="progressbar" aria-label="Siege boss health"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{.Siege.HPPercent}}" id="siege-bar-track">
        <div class="siege-fill" id="siege-bar" style="width: {{.Siege.HPPercent}}%"></div>
      </div>
      <div class="mt-2 flex items-baseline justify-between text-sm">
        <span class="font-semibold tabular-nums"><span id="siege-hp">{{.Siege.HPCurrent}}</span> / <span id="siege-hpmax">{{.Siege.HPMax}}</span> HP</span>
        <span class="opacity-80 tabular-nums"><span id="siege-pct">{{.Siege.HPPercent}}</span>% standing</span>
      </div>

      <div class="mt-5 flex flex-wrap gap-x-6 gap-y-2 text-xs uppercase tracking-wider opacity-85">
        <span>Time left · <span class="font-semibold normal-case tracking-normal" id="siege-countdown">—</span></span>
        <span>Bouts today · <span class="font-semibold tabular-nums" id="siege-bouts">{{.Siege.BoutsToday}}</span></span>
        <span>Mustered · <span class="font-semibold tabular-nums" id="siege-mustered">{{.Siege.Mustered}}</span></span>
      </div>

      {{if .Siege.Stale}}
      <p class="mt-4 text-xs bg-black/25 rounded-xl px-3 py-2">
        We've lost the wire to the field — this is where the pool stood {{.Siege.LastSeenAgo}}. Treat the number as history until it comes back.
      </p>
      {{end}}
    </div>
  </header>

  <!-- How to actually join in. A signed-in adventurer can do it from here; the
       Matrix command stays on the page for everyone else, because it is still
       the only door for a visitor who isn't signed in — and the blow-by-blow of
       the fight arrives there whichever door you came through. -->
  <div id="adv-actions" class="adv-actions mt-6 rounded-3xl bg-[color:var(--card)] border-2 border-theme-adventure/30 p-5 shadow-pete">
    {{if .YouOnBoard}}
      {{if .YouFought}}
      <p class="text-sm text-[color:var(--ink)]/75">
        <span class="font-semibold text-theme-adventure">You've taken your bout today.</span>
        Come back tomorrow. One fight each, per day, and everyone in the right-hand column below still has theirs.
      </p>
      {{else}}
      {{/* data-offer marks the half of this panel that stops being true the
           moment the bout lands. The script hides it on an applied verdict, so
           the page can't go on saying "unspent" over a fight that just
           happened. */}}
      <div data-offer>
        <p class="text-sm text-[color:var(--ink)]/75 mb-3">
          <span class="font-semibold text-theme-adventure">Your bout is unspent.</span>
          Damage counts whether you win the fight or not. Turning up is the mechanic, and the blow-by-blow lands in Matrix.
        </p>
        <button type="button"
                class="adv-action-btn rounded-full bg-theme-adventure text-white px-4 py-1.5 text-sm font-semibold hover:opacity-90 transition"
                data-action="siege_join"
                data-label="Take your bout"
                data-confirm-label="Yes, take my bout"
                data-confirm="Take your bout against this boss now? It's the only one you get today, and it costs real HP, though you can't die from it. The damage comes off the pool whether you win or lose.">Take your bout</button>
      </div>
      {{end}}
    {{else}}
      <p class="text-sm text-[color:var(--ink)]/75">
        <span class="font-semibold text-theme-adventure">Taking your bout:</span>
        say <code class="rounded bg-[color:var(--ink)]/8 px-1.5 py-0.5 font-mono text-xs">!adventure siege fight</code>
        to me in Matrix. One a day, each. Damage counts whether you win the fight or not; turning up is the mechanic.
      </p>
    {{end}}

    <div id="adv-action-orders-box" class="mt-4 hidden">
      <ul id="adv-action-orders" class="space-y-1.5 text-xs"></ul>
    </div>
  </div>

  <!-- The muster. Two columns, and the right-hand one is the point: a bout not
       taken today is damage the pool never sees. -->
  <section class="mt-6 grid gap-6 sm:grid-cols-2">
    <div class="rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 shadow-pete">
      <div class="flex items-baseline justify-between mb-3">
        <h2 class="font-display text-xl font-bold">In it today</h2>
        <span class="siege-chip siege-chip-fought">{{len .Siege.Fought}}</span>
      </div>
      {{if .Siege.Fought}}
      <ul class="text-sm">{{range .Siege.Fought}}{{template "defenderrow" .}}{{end}}</ul>
      {{else}}
      <p class="text-sm text-[color:var(--ink)]/50">Nobody's swung at it yet today. The pool doesn't move on its own.</p>
      {{end}}
    </div>

    <div class="rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 shadow-pete">
      <div class="flex items-baseline justify-between mb-3">
        <h2 class="font-display text-xl font-bold">Bout still going spare</h2>
        <span class="siege-chip siege-chip-waiting">{{len .Siege.Waiting}}</span>
      </div>
      {{if .Siege.Waiting}}
      <ul class="text-sm">{{range .Siege.Waiting}}{{template "defenderrow" .}}{{end}}</ul>
      <p class="mt-3 text-xs text-[color:var(--ink)]/45">Each of these is a free hit the town hasn't taken.</p>
      {{else}}
      <p class="text-sm text-[color:var(--ink)]/50">Everyone's been out. Good turnout.</p>
      {{end}}
    </div>
  </section>

  {{else}}
  <header class="rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 sm:p-10 shadow-pete relative overflow-hidden">
    <div class="absolute -top-8 -right-4 text-[12rem] opacity-10 select-none" aria-hidden="true">🏰</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] text-[color:var(--ink)]/50">🏰 The Siege</p>
      <h1 class="font-display text-3xl sm:text-4xl font-bold mt-2 leading-tight">Nothing's camped outside town.</h1>
      <p class="mt-3 text-[color:var(--ink)]/70">
        {{if .Siege.Known}}
        Quiet month so far. One comes for the town every month — a named thing with a shared health pool, and everybody gets a swing a day at it.
        {{else}}
        I haven't heard from the field about a Siege yet. When one turns up, the bar lives here.
        {{end}}
      </p>
    </div>
  </header>
  {{end}}

  {{if .Siege.History}}
  <!-- The history is what makes the live bar mean something. A won siege ends
       at zero and draws as an empty track; a lost one shows exactly how much
       was left standing when the window shut. -->
  <section class="mt-8 rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 shadow-pete">
    <h2 class="font-display text-xl font-bold mb-4">Sieges past</h2>
    <ul class="space-y-4">
      {{range .Siege.History}}
      <li>
        <div class="flex items-baseline justify-between gap-3">
          <span class="font-semibold flex-1 min-w-0 truncate">{{.BossName}} <span class="text-xs font-normal text-[color:var(--ink)]/40">T{{.Tier}}</span></span>
          <span class="siege-chip {{if .Won}}siege-chip-held{{else}}siege-chip-fell{{end}} shrink-0">{{if .Won}}town held{{else}}broke through{{end}}</span>
        </div>
        <div class="mt-1.5 siege-track siege-track-sm">
          <div class="siege-fill {{if .Won}}siege-fill-spent{{end}}" style="width: {{.HPPercent}}%"></div>
        </div>
        <div class="mt-1.5 flex flex-wrap items-baseline justify-between gap-x-3 text-xs text-[color:var(--ink)]/50">
          <span>
            {{if .Won}}Felled by {{.Defenders}} defender{{if ne .Defenders 1}}s{{end}}{{else}}{{.HPRemaining}} HP still standing when the window shut{{end}}{{if .MVP}} · most bouts: <span class="font-semibold text-[color:var(--ink)]/70">{{.MVP}}</span>{{if .MVPFights}} ({{.MVPFights}}){{end}}{{end}}
          </span>
          {{if .When}}<span class="shrink-0">{{.When}}</span>{{end}}
        </div>
      </li>
      {{end}}
    </ul>
  </section>
  {{end}}
</article>

<script>
// The war room is state, like the board — an open tab should stay honest without
// a reload. Two moving parts:
//
//   1. The countdown, which ticks locally every second off the pushed ends_at.
//      No network for that; the deadline is fixed the moment the Siege spawns.
//   2. The pool, re-polled every 15s. The bar's width is set here and CSS does
//      the animating (a width transition), so a poll that lands a lower pool
//      *slides* rather than snapping. That slide is the whole reason this page
//      exists: it is what turns a number into the town chipping something down.
(function () {
  var root = document.getElementById('siege');
  if (!root) return;
  var active = root.getAttribute('data-active') === '1';
  var endsAt = parseInt(root.getAttribute('data-ends-at') || '0', 10);

  function txt(id, v) { var el = document.getElementById(id); if (el && v != null) el.textContent = v; }

  function tickCountdown() {
    var el = document.getElementById('siege-countdown');
    if (!el) return;
    if (!endsAt) { el.textContent = '—'; return; }
    var left = endsAt - Math.floor(Date.now() / 1000);
    if (left <= 0) { el.textContent = 'window closed'; return; }
    var h = Math.floor(left / 3600), m = Math.floor((left % 3600) / 60), s = left % 60;
    el.textContent = h > 0 ? (h + 'h ' + m + 'm') : (m + 'm ' + s + 's');
  }

  if (!active) return; // nothing camped: no countdown, no poll, nothing to move
  tickCountdown();
  setInterval(tickCountdown, 1000);

  var pollTimer = null;
  function refresh() {
    fetch('/api/adventure/siege', { headers: { 'Accept': 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (data) {
        if (!data) return;
        if (!data.active) {
          // It resolved while we were watching. The page we're holding is now a
          // different page — reload rather than fake an ending, so the result and
          // the fresh history come from the server that knows them.
          if (pollTimer) clearInterval(pollTimer);
          window.location.reload();
          return;
        }
        var bar = document.getElementById('siege-bar');
        if (bar) bar.style.width = data.hp_percent + '%';
        var track = document.getElementById('siege-bar-track');
        if (track) track.setAttribute('aria-valuenow', data.hp_percent);
        txt('siege-hp', data.hp_current);
        txt('siege-hpmax', data.hp_max);
        txt('siege-pct', data.hp_percent);
        txt('siege-bouts', data.bouts_today);
        txt('siege-mustered', data.mustered);
        if (data.ends_at) endsAt = data.ends_at;
      })
      .catch(function () { /* transient — the next tick will do */ });
  }
  pollTimer = setInterval(refresh, 15000);
})();
</script>
{{end}}

{{define "scripts"}}<script src="/static/js/adventure-actions.js" defer></script>{{end}}