Pete/internal/web/templates/channel.html

{{define "title"}}{{.Channel.Title}} — {{.SiteTitle}}{{end}}

{{define "main"}}
<section class="mt-2 mb-8">
  <div class="rounded-3xl bg-theme-{{.Channel.Theme}} text-white p-6 sm:p-10 shadow-pete relative overflow-hidden">
    <div class="absolute -top-6 -right-6 text-[12rem] opacity-20 select-none" aria-hidden="true">{{.Channel.Emoji}}</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] opacity-80">section</p>
      <h1 class="font-display text-4xl sm:text-5xl font-bold mt-1">{{.Channel.Title}}</h1>
      <p class="mt-2 max-w-xl text-white/85">{{.Channel.Blurb}}</p>
      <p class="mt-4 text-xs uppercase tracking-wider opacity-75">{{.Total}} stories archived</p>
    </div>
  </div>
</section>

{{if .ShowRoster}}
{{/* While you were away. First thing on the page when it renders at all, and it
     renders for exactly one reader: the signed-in owner of an adventurer something
     has happened to since their last visit. Above the Siege because everything
     below this line is the realm's news and this is the reader's own. */}}
{{if .Away.Has}}
<section class="mb-6 rounded-3xl bg-card border-2 border-theme-adventure/30 p-5 sm:p-6 shadow-pete">
  <div class="flex items-baseline justify-between gap-3 flex-wrap">
    <h2 class="font-display text-xl font-bold">While you were away</h2>
    <span class="text-xs uppercase tracking-wider text-muted">{{.Away.Name}} · past {{.Away.Since}}</span>
  </div>
  <ul class="mt-3 space-y-2">
    {{range .Away.Lines}}
    <li class="away-line{{if .Notable}} away-line-notable{{end}}">
      <a href="{{.Permalink}}" class="flex items-baseline gap-2.5 group">
        <span class="shrink-0" aria-hidden="true">{{.Emoji}}</span>
        <span class="flex-1 text-sm">
          <span class="font-semibold group-hover:text-theme-adventure group-hover:underline">{{.Label}}</span>
          {{if .Line}}<span class="text-muted"> — {{.Line}}</span>{{end}}
        </span>
        <span class="text-xs text-muted shrink-0 tabular-nums">{{.When}}</span>
      </a>
    </li>
    {{end}}
  </ul>
  {{if .Away.Token}}
  <a href="/adventure/who/{{.Away.Token}}" class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-theme-adventure hover:opacity-80 transition">
    {{if .Away.HasMore}}More, and the rest of the trail{{else}}Your adventurer{{end}} <span aria-hidden="true">→</span>
  </a>
  {{end}}
</section>
{{end}}

{{/* The Siege strip. Above the board on purpose: the board is where everyone is,
     the Siege is where everyone should be. When one is camped this is a live bar
     and a door into the war room; when none is, it stays as the quiet doorway to
     the history, which is the other half of making the next one feel like it
     counts. */}}
{{if .Siege.Active}}
<a href="/adventure/siege" class="block mb-6 rounded-3xl bg-theme-adventure text-white p-5 sm:p-6 shadow-pete relative overflow-hidden group {{if not .Siege.Stale}}siege-live{{end}}">
  <div class="absolute -top-6 -right-4 text-[8rem] opacity-20 select-none" aria-hidden="true">🏰</div>
  <div class="relative">
    <p class="text-xs uppercase tracking-[0.2em] opacity-80">🏰 The Siege · now</p>
    <h2 class="font-display text-2xl font-bold mt-1 group-hover:underline">{{.Siege.BossName}} is at the gates</h2>
    <div class="mt-3 siege-track">
      <div class="siege-fill" style="width: {{.Siege.HPPercent}}%"></div>
    </div>
    <p class="mt-2 text-sm opacity-90 tabular-nums">{{.Siege.HPCurrent}} / {{.Siege.HPMax}} HP · {{.Siege.HPPercent}}% standing · {{len .Siege.Waiting}} bout{{if ne (len .Siege.Waiting) 1}}s{{end}} still going spare</p>
  </div>
</a>
{{else if .Siege.History}}
<a href="/adventure/siege" class="flex items-center gap-3 mb-6 rounded-2xl bg-card border-2 border-ink/10 px-5 py-3 shadow-pete hover:border-theme-adventure/40 transition">
  <span class="text-lg" aria-hidden="true">🏰</span>
  <span class="text-sm text-muted">Nothing camped outside town right now — <span class="font-semibold text-theme-adventure">the sieges we've fought</span></span>
</a>
{{end}}

<section class="mb-10" id="roster" data-stale="{{.RosterStale}}">
  <div class="flex items-baseline justify-between mb-3">
    <h2 class="font-display text-2xl font-bold">Out there right now</h2>
    <p class="text-xs uppercase tracking-wider text-muted" id="roster-status">
      {{if .RosterStale}}last known — the wire's gone quiet{{else}}live{{end}}
    </p>
  </div>

  <div class="rounded-3xl bg-card border-2 border-ink/10 shadow-pete overflow-hidden {{if .RosterStale}}opacity-60{{end}}" id="roster-card">
    <ul class="divide-y divide-ink/10" id="roster-list">
      {{range .Roster}}
      {{/* The layout is .roster-row, not utilities: this markup has a twin in the
           script below that re-renders the same list on every poll, and the two
           have to agree at every width. See the .roster-row block in input.css. */}}
      <li class="roster-row" data-token="{{.Token}}" data-name="{{.Name}}">
        <span class="roster-row-icon" aria-hidden="true">{{if .OnRun}}⚔{{else}}🏠{{end}}</span>
        <a href="/adventure/who/{{.Token}}" class="roster-row-name font-semibold truncate hover:text-theme-adventure hover:underline">{{.Name}}</a>
        <span class="roster-row-meta text-sm text-muted">lv {{.Level}} {{.ClassRace}}</span>
        <span class="roster-row-where text-sm {{if .OnRun}}font-semibold{{else}}text-muted{{end}}">
          {{.Where}}{{if .Idle}} <span class="text-muted">· {{.Idle}}</span>{{end}}
        </span>
        {{if and $.User .OnRun}}
        <button type="button" class="mischief-send roster-row-act shrink-0 rounded-full bg-ink/5 hover:bg-red-500 hover:text-white border border-ink/15 px-3 py-1 text-xs font-semibold transition" data-token="{{.Token}}" data-name="{{.Name}}">send trouble</button>
        {{end}}
      </li>
      {{else}}
      <li class="px-5 py-8 text-center text-muted">Nobody's out at the moment. Quiet week in the realm.</li>
      {{end}}
    </ul>
  </div>

  {{if not .User}}
  <p class="mt-3 text-xs text-muted">
    <a href="/auth/login?next={{.Path}}" class="underline hover:text-red-500">Sign in</a> to send something unpleasant their way.
  </p>
  {{end}}

  {{if .User}}
  <!-- Your open contracts. Rendered from filed facts, never from live game state:
       Pete only knows what gogobee told it happened. -->
  <div id="mischief-orders" class="mt-4 hidden">
    <h3 class="text-xs uppercase tracking-wider text-muted mb-2">Trouble you've paid for</h3>
    <ul id="mischief-orders-list" class="space-y-2 text-sm"></ul>
  </div>

  <!-- The buy dialog. Prices are gogobee's, pulled live from /api/mischief/catalog;
       nothing here asserts a number of its own. -->
  <div id="mischief-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-md rounded-3xl bg-card border-2 border-ink/10 shadow-pete overflow-hidden">
      <div class="flex items-center justify-between px-5 py-4 border-b border-ink/10">
        <h3 class="font-display text-xl font-bold">Send trouble to <span id="mischief-target">—</span></h3>
        <button type="button" id="mischief-close" class="text-2xl leading-none text-muted hover:text-ink" aria-label="close">×</button>
      </div>
      <div class="px-5 py-4 space-y-3">
        <p class="text-sm text-muted">Pick how bad. They won't know who sent it — unless you sign it, or they live to read the receipt.</p>
        <div id="mischief-tiers" class="space-y-2"></div>
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" id="mischief-signed" class="rounded border-ink/30">
          <span>Sign my name to it <span class="text-muted">(+25%, and they'll know)</span></span>
        </label>
        <p id="mischief-balance" class="text-xs text-muted"></p>
        <p id="mischief-result" class="text-sm hidden"></p>
      </div>
      <div class="flex items-center justify-end gap-2 px-5 py-4 border-t border-ink/10">
        <button type="button" id="mischief-cancel" class="rounded-full px-4 py-2 text-sm font-semibold text-muted hover:text-ink">Never mind</button>
        <button type="button" id="mischief-confirm" class="rounded-full bg-red-500 text-white px-5 py-2 text-sm font-semibold shadow-pete hover:-translate-y-0.5 transition disabled:opacity-40 disabled:translate-y-0" disabled>Put the word out</button>
      </div>
    </div>
  </div>
  {{end}}
</section>

<script>
// The board is state, not a story: an open tab should keep telling the truth
// without a reload. Cheap poll — a handful of rows, no auth, no cache.
(function () {
  var list = document.getElementById('roster-list');
  var status = document.getElementById('roster-status');
  var card = document.getElementById('roster-card');
  if (!list) return;

  var signedIn = {{if .User}}true{{else}}false{{end}};

  function esc(s) {
    var d = document.createElement('div');
    d.textContent = s == null ? '' : String(s);
    return d.innerHTML;
  }

  function row(a) {
    var idle = a.Idle ? ' <span class="text-muted">· ' + esc(a.Idle) + '</span>' : '';
    // The server-rendered twin of this row is above, in the {{"{{range .Roster}}"}}
    // block. Keep the class names identical: the layout is all in .roster-row.
    var button = (signedIn && a.OnRun)
      ? '<button type="button" class="mischief-send roster-row-act shrink-0 rounded-full bg-ink/5 hover:bg-red-500 hover:text-white border border-ink/15 px-3 py-1 text-xs font-semibold transition" data-token="' + esc(a.Token) + '" data-name="' + esc(a.Name) + '">send trouble</button>'
      : '';
    return '<li class="roster-row" data-token="' + esc(a.Token) + '" data-name="' + esc(a.Name) + '">' +
      '<span class="roster-row-icon" aria-hidden="true">' + (a.OnRun ? '⚔' : '🏠') + '</span>' +
      '<a href="/adventure/who/' + esc(a.Token) + '" class="roster-row-name font-semibold truncate hover:text-theme-adventure hover:underline">' + esc(a.Name) + '</a>' +
      '<span class="roster-row-meta text-sm text-muted">lv ' + esc(a.Level) + ' ' + esc(a.ClassRace) + '</span>' +
      '<span class="roster-row-where text-sm ' + (a.OnRun ? 'font-semibold' : 'text-muted') + '">' +
      esc(a.Where) + idle + '</span>' + button + '</li>';
  }

  function refresh() {
    fetch('/api/roster', { headers: { 'Accept': 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (data) {
        if (!data) return;
        var rows = data.adventurers || [];
        list.innerHTML = rows.length
          ? rows.map(row).join('')
          : '<li class="px-5 py-8 text-center text-muted">Nobody\'s out at the moment. Quiet week in the realm.</li>';
        status.textContent = data.stale ? "last known — the wire's gone quiet" : 'live';
        card.classList.toggle('opacity-60', !!data.stale);
      })
      .catch(function () { /* transient — the next tick will do */ });
  }

  setInterval(refresh, 60000);
  document.addEventListener('visibilitychange', function () {
    if (!document.hidden) refresh();
  });

  if (signedIn) initMischief(list, esc);
})();

// The storefront: pick a mark, pick how bad, pay. The only thing this code is
// authoritative about is the buyer's intent — every price, every yes/no, and the
// buyer's actual balance are gogobee's, reached through the API.
function initMischief(list, esc) {
  var modal = document.getElementById('mischief-modal');
  if (!modal) return;
  var targetEl = document.getElementById('mischief-target');
  var tiersEl = document.getElementById('mischief-tiers');
  var signedEl = document.getElementById('mischief-signed');
  var balanceEl = document.getElementById('mischief-balance');
  var resultEl = document.getElementById('mischief-result');
  var confirmEl = document.getElementById('mischief-confirm');
  var ordersWrap = document.getElementById('mischief-orders');
  var ordersList = document.getElementById('mischief-orders-list');

  var catalog = null;   // {tiers, euro, has_balance}
  var chosen = null;    // selected tier key
  var current = null;   // {token, name}

  function euros(n) { return '€' + Number(n).toLocaleString(); }

  function loadCatalog() {
    return fetch('/api/mischief/catalog', { headers: { 'Accept': 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (c) { catalog = c; return c; });
  }

  function drawTiers() {
    if (!catalog || !catalog.tiers || !catalog.tiers.length) {
      tiersEl.innerHTML = '<p class="text-sm text-muted">The catalogue is between snapshots. Try again in a moment.</p>';
      return;
    }
    var signed = signedEl.checked;
    var known = catalog.has_balance;
    var euro = catalog.euro;
    tiersEl.innerHTML = catalog.tiers.map(function (t) {
      var price = signed ? t.signed_fee : t.fee;
      var tooDear = known && euro < price;
      return '<button type="button" class="mischief-tier w-full text-left rounded-2xl border-2 px-4 py-2 transition ' +
        (chosen === t.key ? 'border-red-500 bg-red-500/10' : 'border-ink/10 hover:border-ink/25') +
        (tooDear ? ' opacity-40 cursor-not-allowed' : '') + '" data-key="' + esc(t.key) + '"' + (tooDear ? ' disabled' : '') + '>' +
        '<span class="flex items-baseline justify-between"><span class="font-semibold">' + esc(t.display) + '</span>' +
        '<span class="font-semibold">' + euros(price) + '</span></span>' +
        (t.blurb ? '<span class="block text-xs text-muted mt-0.5">' + esc(t.blurb) + '</span>' : '') +
        '</button>';
    }).join('');
    balanceEl.textContent = known ? 'You have about ' + euros(euro) + ' to spend.' : '';
    Array.prototype.forEach.call(tiersEl.querySelectorAll('.mischief-tier'), function (b) {
      b.addEventListener('click', function () {
        chosen = b.getAttribute('data-key');
        confirmEl.disabled = false;
        drawTiers();
      });
    });
  }

  function open(token, name) {
    current = { token: token, name: name };
    chosen = null;
    confirmEl.disabled = true;
    resultEl.classList.add('hidden');
    resultEl.textContent = '';
    signedEl.checked = false;
    targetEl.textContent = name;
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    (catalog ? Promise.resolve() : loadCatalog()).then(drawTiers);
  }

  function close() {
    modal.classList.add('hidden');
    modal.classList.remove('flex');
  }

  function badge(statusText) {
    var map = {
      pending: ['on its way', 'bg-amber-500/15 text-amber-700'],
      placed: ['out for delivery', 'bg-red-500/15 text-red-600'],
      bounced_funds: ["couldn't afford it", 'bg-ink/10 text-muted'],
      bounced_ineligible: ['no longer a mark', 'bg-ink/10 text-muted']
    };
    var m = map[statusText] || [statusText, 'bg-ink/10 text-muted'];
    return '<span class="rounded-full px-2 py-0.5 text-xs font-semibold ' + m[1] + '">' + esc(m[0]) + '</span>';
  }

  function loadOrders() {
    fetch('/api/mischief/orders', { headers: { 'Accept': 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (orders) {
        if (!orders || !orders.length) { ordersWrap.classList.add('hidden'); return; }
        ordersWrap.classList.remove('hidden');
        ordersList.innerHTML = orders.map(function (o) {
          var detail = o.detail ? ' <span class="text-muted">· ' + esc(o.detail) + '</span>' : '';
          return '<li class="flex items-center gap-3">' +
            '<span class="font-semibold">' + esc(o.target_name) + '</span>' +
            '<span class="text-muted">' + esc(o.tier) + (o.signed ? ', signed' : '') + '</span>' +
            '<span class="ml-auto">' + badge(o.status) + '</span>' + detail + '</li>';
        }).join('');
      })
      .catch(function () {});
  }

  list.addEventListener('click', function (e) {
    var b = e.target.closest('.mischief-send');
    if (!b) return;
    open(b.getAttribute('data-token'), b.getAttribute('data-name'));
  });
  signedEl.addEventListener('change', drawTiers);
  document.getElementById('mischief-close').addEventListener('click', close);
  document.getElementById('mischief-cancel').addEventListener('click', close);
  modal.addEventListener('click', function (e) { if (e.target === modal) close(); });

  confirmEl.addEventListener('click', function () {
    if (!current || !chosen) return;
    confirmEl.disabled = true;
    resultEl.classList.add('hidden');
    fetch('/api/mischief/order', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ target_token: current.token, tier: chosen, signed: signedEl.checked })
    })
      .then(function (r) { return r.json().then(function (b) { return { ok: r.ok, body: b }; }); })
      .then(function (res) {
        resultEl.classList.remove('hidden');
        if (res.ok) {
          resultEl.className = 'text-sm text-red-600 font-semibold';
          resultEl.textContent = 'The word is out. Watch the board.';
          catalog = null; // balance moved; refetch next open
          loadOrders();
          setTimeout(close, 1200);
        } else {
          resultEl.className = 'text-sm text-muted';
          resultEl.textContent = (res.body && res.body.error) || 'That didn\'t take. Try again.';
          confirmEl.disabled = false;
        }
      })
      .catch(function () {
        resultEl.classList.remove('hidden');
        resultEl.className = 'text-sm text-muted';
        resultEl.textContent = 'The line dropped. Try again.';
        confirmEl.disabled = false;
      });
  });

  loadOrders();
  setInterval(loadOrders, 60000);
}
</script>
{{end}}

{{if .Stories}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
  {{range .Stories}}
    {{template "card" dict "Story" . "Theme" $.Channel.Theme}}
  {{end}}
</div>

<nav class="mt-10 flex items-center justify-between">
  {{if .HasPrev}}
    <a href="{{.PrevURL}}" class="rounded-full bg-card border-2 border-ink/10 px-5 py-2 font-semibold shadow-pete hover:-translate-y-0.5 transition">← newer</a>
  {{else}}<span></span>{{end}}
  <span class="text-sm text-muted">page {{.Page}}</span>
  {{if .HasNext}}
    <a href="{{.NextURL}}" class="rounded-full bg-theme-{{.Channel.Theme}} text-white px-5 py-2 font-semibold shadow-pete hover:-translate-y-0.5 transition">older →</a>
  {{else}}<span></span>{{end}}
</nav>
{{else}}
<div class="rounded-3xl bg-card border-2 border-dashed border-ink/15 p-10 text-center text-muted">
  Pete hasn't catalogued anything for {{.Channel.Title}} yet.
</div>
{{end}}
{{end}}