dndkit 0.4.0__py3-none-any.whl

dndkit/ui/components.css

@@ -0,0 +1,283 @@
+/* Component looks, each scoped by its root class (combat, party, sheet,
+   dicebox, journal, join, backstage): a web page shows several at once.
+   Then the web pages' own layout, under body.web. */
+
+[hidden] { display: none !important; }
+.head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.section { margin-top: 12px; }
+.section h4 { margin: 0 0 6px; font: 600 11px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+.list { display: flex; flex-wrap: wrap; gap: 4px; }
+.slot { margin-right: 10px; white-space: nowrap; }
+
+/* Combat tracker */
+.combat .head { margin-bottom: 8px; }
+.combat .order { display: flex; flex-direction: column; gap: 6px; }
+.combat .fighter {
+  display: grid; grid-template-columns: 34px 1fr minmax(110px, 38%); gap: 4px 10px; align-items: center;
+  padding: 7px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid transparent;
+  transition: background .4s, border-color .4s, transform .3s;
+}
+.combat .fighter.pc { box-shadow: inset 3px 0 0 var(--gold); }
+.combat .fighter.current { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--card-2)); transform: scale(1.01); }
+.combat .fighter.hurt { animation: hurt .7s; }
+.combat .fighter.healed { animation: healed .7s; }
+.combat .init {
+  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
+  font: 700 13px var(--serif); background: var(--card); border: 1.5px solid var(--line); font-variant-numeric: tabular-nums;
+}
+.combat .current .init { border-color: var(--gold); color: var(--gold-hi); }
+.combat .name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.combat .name .arrow { color: var(--gold-hi); margin-right: 4px; }
+.combat .ac { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }
+.combat .fighter .chips { grid-column: 2 / 4; }
+.combat .down .name { color: var(--red); }
+.combat .defeated { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.combat .defeated:empty { display: none; }
+.combat .defeated .gone { text-decoration: line-through; }
+.combat .pos { font-size: 11px; color: var(--gold); margin-left: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.combat .map { margin: 2px 0 8px; }
+
+/* Battle map */
+.battlemap { display: block; width: 100%; height: auto; max-height: 70vh; }
+.battlemap .floor { fill: var(--card-2); }
+.battlemap .grid { stroke: var(--line); stroke-width: 1; fill: none; }
+.battlemap .wall { fill: color-mix(in srgb, var(--text) 62%, var(--card)); }
+.battlemap .rough { fill: url(#gm-rough); }
+.battlemap .hatch { stroke: color-mix(in srgb, var(--amber) 60%, transparent); stroke-width: 1.4; }
+.battlemap .reach { fill: color-mix(in srgb, var(--gold) 13%, transparent); }
+.battlemap .label { fill: var(--muted); font: 600 11px var(--sans); text-anchor: middle; }
+.battlemap .label.row { text-anchor: end; }
+.battlemap .token circle { stroke: var(--card); stroke-width: 2.5; }
+.battlemap .token text { font: 700 13px var(--sans); text-anchor: middle; pointer-events: none; }
+.battlemap .token.party circle { fill: var(--gold); }
+.battlemap .token.party text { fill: #1d1a22; }
+.battlemap .token.foe circle { fill: var(--red); }
+.battlemap .token.foe text { fill: #fff; }
+.battlemap .token.foe.hurt circle { fill: color-mix(in srgb, var(--red) 80%, #000); }
+.battlemap .token.foe.bloodied circle { fill: color-mix(in srgb, var(--red) 60%, #000); }
+.battlemap .token.current circle { stroke: var(--gold-hi); stroke-width: 4; animation: turn 1.4s ease-in-out infinite; }
+.battlemap .token.me circle { stroke: var(--text); stroke-width: 3; stroke-dasharray: 5 3; }
+.battlemap .token.down { opacity: .35; }
+.battlemap .token.hidden { opacity: .5; }
+.battlemap .token.boss circle { stroke: var(--gold-hi); stroke-width: 3.5; }
+.battlemap .token text.crown { fill: var(--gold-hi); font-size: 16px; paint-order: stroke; stroke: #1d1a22; stroke-width: 2px; }
+.combat .crown { color: var(--gold-hi); margin-right: 4px; }
+.combat .legendary { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px 14px; }
+.combat .legendary:empty { display: none; }
+.battlemap .token.hidden circle { stroke-dasharray: 3 3; stroke: var(--text); }
+.battlemap .area { fill: color-mix(in srgb, #ff7a2f 32%, transparent); stroke: #ff7a2f; stroke-width: .5; }
+.battlemap .life { fill: rgba(0,0,0,.35); }
+.battlemap .life-left { fill: var(--green); }
+.battlemap .life-left.mid { fill: var(--amber); }
+.battlemap .life-left.low { fill: #fff; }
+@keyframes turn { 50% { stroke-opacity: .35; } }
+@media (prefers-reduced-motion: reduce) { .battlemap .token.current circle { animation: none; } }
+
+.health { padding: 1px 8px; border-radius: 999px; font-size: 11px; }
+.health.unhurt { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
+.health.hurt { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
+.health.bloodied { background: color-mix(in srgb, var(--red) 22%, transparent); color: var(--red); }
+.health.down { background: var(--card); color: var(--muted); }
+@keyframes hurt { 30% { background: color-mix(in srgb, var(--red) 35%, var(--card-2)); transform: translateX(-3px); } }
+@keyframes healed { 30% { background: color-mix(in srgb, var(--green) 30%, var(--card-2)); } }
+
+/* Party board */
+.party .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 10px; }
+.party .facts span b { color: var(--text); font-weight: 600; }
+.party .banner { margin-bottom: 10px; padding: 6px 10px; border-radius: 8px; color: var(--gold-hi);
+  background: color-mix(in srgb, var(--red) 18%, transparent); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
+.party .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
+.party .pc { background: var(--card-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
+.party .pc.down { box-shadow: inset 0 0 0 1px var(--red); }
+.party .pc .top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
+.party .pc .top b { font-family: var(--serif); font-size: 15px; }
+.party .quest { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; padding: 3px 0; }
+.party .quest .bar { height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
+.party .quest .bar i { display: block; height: 100%; background: var(--gold); }
+
+.party .pc.away { opacity: .55; }
+.party .chip.away { margin-left: 6px; }
+
+/* The table: players seated around it */
+.seating .round { position: relative; aspect-ratio: 16 / 9; min-height: 230px; max-height: 320px; margin: 6px 0 4px; }
+.seating .round > .top {
+  position: absolute; inset: 22% 24%; border-radius: 50%; display: grid; place-items: center; text-align: center;
+  background: radial-gradient(ellipse at 40% 35%, color-mix(in srgb, var(--gold) 26%, var(--card-2)), var(--card-2) 70%);
+  border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: inset 0 0 18px rgba(0,0,0,.18);
+  font: italic 13px var(--serif); color: var(--muted); padding: 0 10%;
+}
+.seating .seat {
+  position: absolute; transform: translate(-50%, -50%); max-width: 120px; min-width: 76px; box-sizing: border-box;
+  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 10px; text-align: center;
+  background: var(--card); border: 1.5px solid var(--gold); border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
+}
+.seating .seat b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
+.seating .seat .plays { font: 600 13px var(--serif); color: var(--gold-hi); }
+.seating .seat.new { border-style: dashed; border-color: var(--muted); }
+.seating .round.list { aspect-ratio: auto; min-height: 0; display: flex; flex-wrap: wrap; gap: 8px; }
+.seating .round.list > .top { display: none; }
+.seating .round.list .seat { position: static; transform: none; max-width: none; }
+.seating .others { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+.seating .others:empty { display: none; }
+.seating .row { flex-wrap: wrap; gap: 4px; }
+
+/* Character sheet */
+.sheet .vitals { margin-top: 8px; }
+.sheet .vitals + .small { margin-top: 6px; }
+.sheet .stats { display: flex; gap: 8px; margin: 10px 0; }
+.sheet .stat { flex: 1; background: var(--card-2); border-radius: 10px; padding: 6px 8px; text-align: center; }
+.sheet .stat b { display: block; font: 700 18px var(--serif); }
+.sheet .stat span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+.sheet .abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0; }
+.sheet .ability { background: var(--card-2); border-radius: 10px; padding: 6px 2px; text-align: center; }
+.sheet .ability .key { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
+.sheet .ability .mod { font: 700 18px var(--serif); color: var(--gold-hi); }
+.sheet .ability .score { font-size: 11px; color: var(--muted); }
+.sheet .identity { margin-top: 2px; }
+.sheet .stats { flex-wrap: wrap; }
+.sheet .stat { min-width: 64px; }
+.sheet .stats.casting .stat { background: color-mix(in srgb, var(--violet) 14%, var(--card-2)); }
+.sheet .spells { display: flex; flex-direction: column; gap: 4px; }
+.sheet .spell { background: var(--card-2); border-radius: 8px; padding: 4px 8px; }
+.sheet .spell summary { cursor: pointer; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
+.sheet .spell p { margin: 4px 0 2px; }
+.sheet .spell.prepared { box-shadow: inset 3px 0 0 var(--amber); }
+.sheet .item { padding: 2px 0; }
+.sheet .appearance { font-style: italic; }
+.sheet .section p { margin: 0 0 6px; }
+.sheet .xp { height: 5px; background: var(--card-2); border-radius: 3px; overflow: hidden; margin-top: 4px; }
+.sheet .xp i { display: block; height: 100%; background: var(--gold); }
+
+/* Dice tray */
+.dicebox .tray {
+  position: relative; overflow: hidden;
+  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%), var(--card);
+}
+.dicebox .dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 14px 0 6px; min-height: 64px; }
+.dicebox .die { position: relative; width: 58px; height: 58px; animation: tumble 0.9s cubic-bezier(.2,.9,.3,1.2) both; }
+.dicebox .die svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
+.dicebox .die .face {
+  position: absolute; inset: 0; display: grid; place-items: center;
+  font: 700 20px/1 var(--serif); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-variant-numeric: tabular-nums;
+}
+.dicebox .die.d4 .face { padding-top: 12px; }
+.dicebox .die .kind { position: absolute; left: 0; bottom: -14px; width: 100%; text-align: center; font-size: 10px; color: var(--muted); }
+.dicebox .die.dropped { opacity: .35; transition: opacity .4s; }
+.dicebox .die.dropped .face { text-decoration: line-through; }
+.dicebox .die.crit svg { animation: glow 1.2s ease-in-out infinite alternate; }
+.dicebox .die.fumble { animation: tumble .9s cubic-bezier(.2,.9,.3,1.2) both, shake .5s .95s; }
+.dicebox .die.fumble svg { filter: drop-shadow(0 0 8px rgba(227,88,79,.9)); }
+.dicebox .const { align-self: center; font: 600 18px var(--serif); color: var(--muted); }
+.dicebox .total { text-align: center; padding-top: 14px; }
+.dicebox .total b { display: block; font: 700 40px/1 var(--serif); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
+.dicebox .total.crit b { color: var(--gold-hi); text-shadow: 0 0 18px rgba(245,216,137,.8); }
+.dicebox .total.fumble b { color: var(--red); }
+.dicebox .history { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
+.dicebox .history:empty { display: none; }
+@keyframes tumble {
+  0% { transform: translate(-60px, -40px) rotate(-280deg) scale(.4); opacity: 0; }
+  55% { transform: translate(0, 6px) rotate(18deg) scale(1.08); opacity: 1; }
+  75% { transform: translate(0, -5px) rotate(-8deg) scale(.97); }
+  100% { transform: none; }
+}
+@keyframes glow { from { filter: drop-shadow(0 0 4px rgba(245,216,137,.5)); } to { filter: drop-shadow(0 0 16px rgba(245,216,137,1)); } }
+@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
+@media (prefers-reduced-motion: reduce) { .dicebox .die, .dicebox .die.fumble, .dicebox .die.crit svg { animation: none; } }
+
+/* Journal */
+.journal .section:first-child { margin-top: 0; }
+.journal .questlog { padding: 4px 0 6px; }
+.journal .questlog ul { margin: 4px 0 0; padding-left: 20px; }
+.journal .questlog li.done { color: var(--muted); text-decoration: line-through; }
+.journal .event { padding: 4px 0 6px; border-top: 1px solid var(--line); }
+.journal .event:first-child { border-top: 0; }
+
+/* Join codes */
+.join .codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
+.join .code { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 10px;
+  background: var(--card-2); color: var(--text); text-decoration: none; text-align: center; }
+.join .code img { width: 100%; max-width: 150px; border-radius: 6px; image-rendering: pixelated; }
+
+/* Backstage */
+.backstage .entry { padding: 5px 0 7px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
+.backstage .section > div > .entry:first-child { border-top: 0; }
+.backstage .row { flex-wrap: wrap; gap: 6px; }
+.backstage .note { color: var(--muted); }
+.backstage .note b { color: var(--text); font-weight: 600; }
+.backstage .chip.friendly, .backstage .chip.easy { color: var(--green); }
+.backstage .chip.hostile, .backstage .chip.deadly { color: var(--red); }
+.backstage .chip.hard { color: var(--amber); }
+
+/* Campaign heading (web pages) */
+.campaign { margin: 2px 2px 14px; }
+.campaign h1 { margin: 0; font: 600 30px/1.15 var(--serif); color: var(--gold); letter-spacing: .01em; }
+.campaign .pitch {
+  margin: 6px 0 8px; max-width: 75ch; font: italic 15px/1.45 var(--serif); color: var(--text); opacity: .85;
+  white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; cursor: pointer;
+}
+.campaign .pitch.open { -webkit-line-clamp: unset; }
+.campaign .facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
+.campaign .facts b { color: var(--text); font-weight: 600; }
+
+.backstage .objectives { margin: 2px 0; padding-left: 20px; }
+.backstage .objectives li.done { color: var(--muted); text-decoration: line-through; }
+
+/* The world, on the backstage */
+.worldgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 12px; align-items: start; }
+.world .entry { border-top: 1px solid var(--line); padding: 5px 0; }
+.world .entry:first-of-type { border-top: 0; }
+.world summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
+.world details[open] summary { margin-bottom: 4px; }
+.world p { margin: 4px 0; }
+.world .actions { white-space: pre-line; }
+.world .note { color: var(--muted); }
+.world .note b, .world .small b { color: var(--text); font-weight: 600; }
+.world .chip.here { color: var(--gold-hi); }
+.world .chip.friendly { color: var(--green); }
+.world .chip.hostile { color: var(--red); }
+.world .crown { color: var(--gold-hi); }
+
+.combat .lastfight { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: var(--card-2); }
+.journal .stars { color: var(--gold); font-size: 11px; }
+.backstage .entry.done { opacity: .6; }
+
+/* The desk, on the backstage */
+.activity .calls { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; }
+.activity .call { border-top: 1px solid var(--line); padding: 3px 0; }
+.activity .call:first-child { border-top: 0; }
+.activity summary { cursor: pointer; display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; font-size: 12px; }
+.activity .when, .activity .ms { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
+.activity .tool { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
+.activity .gist { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.activity .call.failed .tool, .activity .call.failed .gist { color: var(--red); }
+.activity .call.skill .tool { color: var(--violet); }
+.activity pre { margin: 4px 0 2px; padding: 6px 8px; border-radius: 6px; background: var(--card-2); font: 11px/1.4 ui-monospace, Menlo, monospace;
+  white-space: pre-wrap; word-break: break-word; }
+.activity pre.args { color: var(--muted); }
+.notebook .prose { white-space: pre-line; margin: 0 0 4px; }
+.notebook .session summary { cursor: pointer; font-size: 13px; }
+.notebook .server { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 6px; word-break: break-all; }
+.sheets { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); margin-top: 12px; align-items: start; }
+.sheetbox .note { color: var(--muted); padding: 6px 4px 0; }
+.sheetbox .note b { color: var(--text); }
+
+/* Web pages */
+body.web { background: var(--page); min-height: 100vh; box-sizing: border-box; padding: 16px; font-size: 14px; }
+.toggle {
+  font: inherit; font-size: 12px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line);
+  border-radius: 999px; padding: 2px 10px; cursor: pointer;
+}
+.board { display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
+.board.three { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
+.board .col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.yourturn {
+  padding: 12px; border-radius: var(--radius); text-align: center; font: 700 22px var(--serif); color: #1d1a22;
+  background: linear-gradient(90deg, var(--gold), var(--gold-hi)); animation: pulse 1.6s ease-in-out infinite;
+}
+@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 30%, transparent); } }
+@media (max-width: 1100px) { .board.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
+@media (max-width: 760px) {
+  body.web { padding: 10px 16px; }
+  .campaign h1 { font-size: 24px; }
+  .board, .board.three { grid-template-columns: minmax(0, 1fr); }
+}

dndkit/ui/components.js

@@ -0,0 +1,261 @@
+/* dndkit views: one renderer per kind of game data, shared by the
+ * MCP widgets (one view each) and the web pages (several at once).
+ * Each factory returns { el, render(data) } and keeps what it needs between
+ * updates: the last hit points (to flash a hit or a heal), the last roll. */
+"use strict";
+
+import { GM } from "./shared.js";
+import { DiceTray } from "./dicetray.js";
+import { BattleMap } from "./battlemap.js";
+import { Backstage } from "./backstage.js";
+import { World } from "./world.js";
+import { Activity, Notebook, Sheets } from "./desk.js";
+import { CharacterSheet } from "./sheet.js";
+
+export const Views = (() => {
+  const { h, fill, t } = GM;
+  const signed = (n) => (n >= 0 ? `+${n}` : `${n}`);
+  const section = (title, ...content) => h("div", { class: "section" }, h("h4", {}, title), ...content);
+  const empty = (key) => h("div", { class: "empty small" }, t(key));
+  const head = (...children) => h("div", { class: "head" }, ...children);
+  const HEALTH = { down: 0, bloodied: 1, hurt: 2, unhurt: 3 };
+
+  const deathSaves = (c) => h("div", { class: "small" }, `${t("deathSaves")} `,
+    GM.pips(c.death_saves[0], 3, "good"), " ", GM.pips(c.death_saves[1], 3, "bad"));
+  const slots = (c) => c.slots.map(([level, left, max]) =>
+    h("span", { class: "slot" }, `${t("lvl")} ${level} `, GM.pips(left, max)));
+
+  /** The battle map, if any, and the initiative order with hit points; for the players,
+   *  how hurt a monster looks. *me*: the name of the player's own token, to ring it. */
+  function combat({ me = () => null } = {}) {
+    const title = h("span", { class: "title" }, "⚔");
+    const turn = h("span", { class: "muted small" });
+    const map = h("div", { class: "map" });
+    const order = h("div", { class: "order" });
+    const defeated = h("div", { class: "defeated" });
+    const el = h("div", { class: "card combat" }, head(title, turn), map, order, defeated);
+    const last = new Map();
+
+    function vitals(f) {
+      if (f.health === undefined) return GM.hpBar(f.hp, f.hp_max, f.temp);
+      return h("div", {}, f.health ? h("span", { class: `health ${f.health}` }, t(f.health)) : null);
+    }
+
+    function fighter(f) {
+      const value = f.health === undefined ? f.hp : HEALTH[f.health];
+      const before = last.get(f.name);
+      last.set(f.name, value);
+      const known = before !== undefined && before !== null && value !== undefined && value !== null;
+      const change = !known ? "" : value < before ? " hurt" : value > before ? " healed" : "";
+      const down = f.hp === 0 || f.health === "down";
+      const classes = "fighter" + (f.pc ? " pc" : "") + (f.current ? " current" : "") + (down ? " down" : "") + change;
+      return h("div", { class: classes },
+        h("div", { class: "init" }, f.initiative),
+        h("div", { class: "name" }, f.current ? h("span", { class: "arrow" }, "▶") : null,
+          f.boss ? h("span", { class: "crown", title: t("boss") }, "♛") : null, f.name,
+          f.ac !== null && f.ac !== undefined ? h("span", { class: "ac" }, `${t("ac")} ${f.ac}`) : null,
+          f.position ? h("span", { class: "pos" }, f.position) : null,
+          f.hidden ? h("span", { class: "chip away" }, t("hidden")) : null,
+          f.reaction_used ? h("span", { class: "chip", title: t("reactionUsed") }, "↺") : null),
+        vitals(f),
+        GM.conditions(f),
+        legendary(f));
+    }
+
+    /** The fight that ended last, when none is running (the game master's views send it). */
+    const lastFight = (last) => h("div", { class: "lastfight small" },
+      h("b", {}, t("lastFight", { rounds: last.rounds })), " ", last.fighters.join(", "),
+      last.defeated.length ? h("div", { class: "muted" }, `${t("defeated")}: ${last.defeated.join(", ")} · ${last.xp} ${t("xp")}`) : null);
+
+    /** The game master's count of legendary actions and resistances. */
+    function legendary(f) {
+      if (!f.legendary || !(f.legendary[1] || f.resistances)) return null;
+      return h("div", { class: "legendary small muted" },
+        f.legendary[1] ? h("span", {}, `${t("legendaryActions")} `, GM.pips(f.legendary[0], f.legendary[1])) : null,
+        f.resistances ? h("span", {}, `${t("legendaryResistances")} `, GM.pips(f.resistances, f.resistances)) : null);
+    }
+
+    function render(data) {
+      const current = data.order.find((f) => f.current);
+      if (!data.in_combat) last.clear(); // the next fight's "Goblin 1" is another goblin
+      title.textContent = data.in_combat ? `⚔ ${t("round")} ${data.round}` : "⚔";
+      turn.textContent = current ? t("turnOf", { name: current.name }) : "";
+      fill(map, data.map ? BattleMap(data.map, me()) : null);
+      map.hidden = !data.map;
+      fill(order, data.order.length ? data.order.map(fighter) : h("div", { class: "empty" }, t("noCombat")),
+        data.last ? lastFight(data.last) : null);
+      fill(defeated, data.defeated.length ? [
+        h("span", { class: "muted small" }, `${t("defeated")}:`),
+        data.defeated.map((name) => h("span", { class: "chip gone" }, name)),
+        data.xp ? h("span", { class: "chip warn" }, `${data.xp} ${t("xp")}`) : null,
+      ] : null);
+    }
+
+    return { el, render };
+  }
+
+  /** A web page's heading: the campaign's name and pitch, the session, where and when. */
+  function campaign() {
+    const name = h("h1", {});
+    const pitch = h("p", { class: "pitch" });
+    const facts = h("div", { class: "facts muted" });
+    const el = h("header", { class: "campaign" }, name, pitch, facts);
+    pitch.addEventListener("click", () => pitch.classList.toggle("open"));
+
+    function render(data) {
+      name.textContent = data.campaign;
+      pitch.textContent = data.description || "";
+      pitch.hidden = !data.description;
+      fill(facts, [[t("session"), data.session], ["📍", data.location], ["📅", data.date]]
+        .filter(([, value]) => value)
+        .map(([label, value]) => h("span", {}, `${label} `, h("b", {}, value))));
+    }
+
+    return { el, render };
+  }
+
+  /** Each character's vitals. *campaign*: under the campaign's name, with where and
+   *  when (a widget), else under "Party" (a web page, whose heading says the rest).
+   *  *quests* adds their progress. */
+  function party({ quests = true, campaign = true } = {}) {
+    const name = h("span", { class: "title" }, "🛡");
+    const session = h("span", { class: "muted small" });
+    const facts = h("div", { class: "facts muted small" });
+    const banner = h("div");
+    const grid = h("div", { class: "grid" });
+    const questList = h("div");
+    const el = h("div", { class: "card party" }, head(name, session), facts, banner, grid,
+      quests ? section(t("quests"), questList) : null);
+
+    const member = (c) => h("div", { class: "pc" + (c.hp === 0 ? " down" : "") + (c.present === false ? " away" : "") },
+      h("div", { class: "top" }, h("b", {}, c.name), h("span", { class: "muted small" }, `${t("ac")} ${c.ac}`)),
+      h("div", { class: "muted small" }, c.summary + (c.player ? ` — ${c.player}` : ""),
+        c.present === false ? h("span", { class: "chip away" }, t(c.player ? "away" : "unplayed")) : null),
+      GM.hpBar(c.hp, c.hp_max, c.temp),
+      c.hp === 0 ? deathSaves(c) : null,
+      c.slots.length ? h("div", { class: "small muted" }, slots(c)) : null,
+      GM.conditions(c));
+
+    const progress = (q) => h("div", { class: "quest" }, h("span", {}, q.title),
+      h("div", { class: "bar", title: `${q.done}/${q.total}` },
+        h("i", { style: `width:${(q.total ? q.done / q.total : 0) * 100}%` })));
+
+    function render(data) {
+      name.textContent = campaign ? data.campaign : `🛡 ${t("party")}`;
+      session.textContent = campaign ? `${t("session")} ${data.session}` : "";
+      const place = campaign ? [["📍", data.location], ["📅", data.date]] : [];
+      fill(facts, [...place, [t("funds"), data.funds]]
+        .filter(([, value]) => value)
+        .map(([label, value]) => h("span", {}, `${label} `, h("b", {}, value))));
+      fill(banner, data.in_combat
+        ? h("div", { class: "banner" }, `⚔ ${t("inCombat")} — ${t("round")} ${data.round}` +
+            (data.current ? ` — ${t("turnOf", { name: data.current })}` : ""))
+        : null);
+      fill(grid, data.characters.length ? data.characters.map(member) : h("div", { class: "empty" }, t("noParty")));
+      fill(questList, data.quests.length ? data.quests.map(progress) : empty("noQuest"));
+    }
+
+    return { el, render };
+  }
+
+  /** Who sits at the table: the players around it with their characters, then who is
+   *  missing. A narrow screen or a big table lists them instead. */
+  function seating() {
+    const session = h("span", { class: "muted small" });
+    const round = h("div", { class: "round" });
+    const others = h("div", { class: "others" });
+    const el = h("div", { class: "card seating" },
+      head(h("span", { class: "title" }, t("theTable")), session), round, others);
+    let seats = 0;
+    const layout = () => round.classList.toggle("list", seats > 8 || el.clientWidth < 440);
+    // Deferred: toggling the layout inside the observer would resize it again in the
+    // same frame, and roomkit shows the browser's loop warning under the widget.
+    new ResizeObserver(() => requestAnimationFrame(layout)).observe(el);
+
+    function seat(s, index) {
+      const angle = (index / seats) * 2 * Math.PI - Math.PI / 2;  // clockwise from the top
+      const style = `left:${50 + 37 * Math.cos(angle)}%;top:${50 + 38 * Math.sin(angle)}%`;
+      return h("div", { class: "seat" + (s.characters.length ? "" : " new"), style },
+        h("b", {}, s.player),
+        s.characters.length
+          ? s.characters.map((c) => h("span", { class: "plays", title: c.summary }, c.name))
+          : h("span", { class: "muted small" }, t("noCharacter")));
+    }
+
+    const chips = (label, items) => (items.length
+      ? h("div", { class: "row small" }, h("span", { class: "muted" }, `${t(label)}:`), items.map((text) => h("span", { class: "chip" }, text)))
+      : null);
+
+    function render(data) {
+      seats = data.seats.length;
+      session.textContent = `${t("session")} ${data.session}`;
+      fill(round, seats ? [h("div", { class: "top" }, h("span", {}, data.campaign)), data.seats.map(seat)] : null);
+      round.hidden = !seats;
+      layout();
+      fill(others,
+        data.called ? null : h("div", { class: "empty small" }, t("nobodySeated")),
+        chips(data.called ? "absentees" : "knownPlayers", data.absent.map((a) => `${a.player} (${a.name})`)),
+        chips("noPlayer", data.unplayed));
+    }
+
+    return { el, render };
+  }
+
+  /** Active quests and their objectives, and the latest moments of the adventure log. */
+  function journal() {
+    const quests = h("div", { class: "quests" });
+    const events = h("div", { class: "events" });
+    const el = h("div", { class: "card journal" }, section(t("quests"), quests), section(t("journal"), events));
+
+    const quest = (q) => h("div", { class: "questlog" },
+      h("div", {}, h("b", {}, q.title), q.giver ? h("span", { class: "muted small" }, ` — ${t("from", { name: q.giver })}`) : null),
+      q.objectives.length ? h("ul", {}, q.objectives.map((o) => h("li", { class: o.done ? "done" : "" }, o.text))) : null);
+
+    // The game master's log adds the session, importance (1-5), who and tags.
+    const event = (e) => h("div", { class: "event" },
+      h("div", {}, h("span", { class: "chip" }, t(e.type)), " ", h("b", {}, e.title),
+        e.importance ? h("span", { class: "stars", title: `${e.importance}/5` }, " " + "★".repeat(e.importance)) : null,
+        e.location ? h("span", { class: "muted small" }, ` — ${e.location}`) : null),
+      e.description ? h("div", { class: "muted small" }, e.description) : null,
+      e.characters && (e.characters.length || e.tags.length || e.session) ? h("div", { class: "muted small" },
+        [e.session ? `${t("session")} ${e.session}` : "", e.characters.join(", "), e.tags.map((tag) => `#${tag}`).join(" ")]
+          .filter(Boolean).join(" · ")) : null);
+
+    function render(data) {
+      fill(quests, data.quests.length ? data.quests.map(quest) : empty("noQuest"));
+      fill(events, data.events.length ? data.events.map(event) : empty("noEvent"));
+    }
+
+    return { el, render };
+  }
+
+  /** The players' links as QR codes, for the table screen; they fold away once scanned. */
+  function join() {
+    const hint = h("div", { class: "muted small" });
+    const codes = h("div", { class: "codes" });
+    const toggle = h("button", { type: "button", class: "toggle" });
+    const el = h("div", { class: "card join" }, head(h("span", { class: "title" }, t("players")), toggle), hint, codes);
+    const remembered = () => { try { return localStorage.getItem("gm-codes"); } catch (_) { return null; } };
+
+    function unfold(visible) {
+      hint.hidden = codes.hidden = !visible;
+      toggle.textContent = t(visible ? "hideCodes" : "showCodes");
+      try { localStorage.setItem("gm-codes", visible ? "shown" : "hidden"); } catch (_) { /* storage off */ }
+    }
+    toggle.addEventListener("click", () => unfold(codes.hidden));
+    unfold(remembered() !== "hidden");
+
+    function render(data) {
+      hint.textContent = t(data.reachable ? "scanToJoin" : "unreachable");
+      fill(codes, data.players.length ? data.players.map((p) =>
+        h("a", { class: "code", href: p.url, target: "_blank", rel: "noopener" },
+          h("img", { src: p.qr, alt: p.name }), h("b", {}, p.name),
+          p.player ? h("span", { class: "muted small" }, p.player) : null)) : empty("noParty"));
+    }
+
+    return { el, render };
+  }
+
+  return { campaign, combat, party, seating, character: CharacterSheet, journal, join, backstage: Backstage,
+    world: World, activity: Activity, notebook: Notebook, sheets: Sheets, dice: DiceTray };
+})();

dndkit/ui/desk.js

@@ -0,0 +1,91 @@
+/* The game master's desk, on the backstage: what the model called (to follow
+ * and debug it), the campaign's notebook, and every full sheet with its notes. */
+"use strict";
+
+import { GM } from "./shared.js";
+import { CharacterSheet } from "./sheet.js";
+
+/** The model's calls, newest first: tool, arguments, answer or error, time taken. */
+export function Activity() {
+  const { h, fill, t } = GM;
+  const count = h("span", { class: "muted small" });
+  const calls = h("div", { class: "calls" });
+  const el = h("div", { class: "card activity" },
+    h("div", { class: "head" }, h("span", { class: "title" }, t("activity")), count), calls);
+  const firstLine = (text) => (text || "").split("\n")[0];
+
+  const call = (c) => h("details", { class: "call" + (c.failed ? " failed" : "") + (c.kind === "skill" ? " skill" : "") },
+    h("summary", {},
+      h("span", { class: "when" }, c.time),
+      h("b", { class: "tool" }, c.name),
+      h("span", { class: "gist" }, firstLine(c.failed ? `⚠ ${c.outcome}` : c.outcome)),
+      h("span", { class: "ms" }, `${c.ms} ms`)),
+    c.arguments ? h("pre", { class: "args" }, c.arguments) : null,
+    c.outcome ? h("pre", { class: "outcome" }, c.outcome) : null);
+
+  function render(data) {
+    count.textContent = data.failures ? t("failures", { n: data.failures }) : "";
+    fill(calls, data.calls.length ? data.calls.map(call) : h("div", { class: "empty small" }, t("noCall")));
+  }
+
+  return { el, render };
+}
+
+/** Situation, world notes, setting, past sessions, and where the campaign lives. */
+export function Notebook() {
+  const { h, fill, t } = GM;
+  const section = (title, ...content) => h("div", { class: "section" }, h("h4", {}, title), ...content);
+  const body = h("div");
+  const el = h("div", { class: "card notebook" },
+    h("div", { class: "head" }, h("span", { class: "title" }, t("notebook"))), body);
+  const text = (value) => h("p", { class: "small prose" }, value);
+
+  function render(n) {
+    const server = n.server;
+    fill(body,
+      n.situation ? section(t("situation"), text(n.situation)) : null,
+      n.world_notes ? section(t("worldNotes"), text(n.world_notes)) : null,
+      n.setting ? section(t("setting"), h("details", {}, h("summary", { class: "small" }, t("show")), text(n.setting))) : null,
+      n.sessions.length ? section(t("sessions"), n.sessions.map((s) => h("details", { class: "session" },
+        h("summary", {}, h("b", {}, `${t("session")} ${s.number}`), s.title ? ` — ${s.title}` : ""),
+        text(s.summary),
+        s.moments.length ? h("ul", { class: "small" }, s.moments.map((m) => h("li", {}, m))) : null,
+        h("div", { class: "muted small" }, [s.present.join(", "), s.xp ? `${s.xp} ${t("xp")}` : "",
+          s.treasure.length ? `${t("treasure")}: ${s.treasure.join(", ")}` : ""].filter(Boolean).join(" · ")),
+        s.notes ? text(s.notes) : null))) : null,
+      !n.situation && !n.world_notes && !n.setting && !n.sessions.length
+        ? h("div", { class: "empty small" }, t("noNotes")) : null,
+      h("div", { class: "server muted small" },
+        n.dm ? [`${t("dm")} ${n.dm}`, h("br")] : null,
+        `dndkit ${server.version} · ${server.file || "—"} · ${t("saved")} ${server.saved}`, h("br"),
+        `${server.data_dir} · ${t("skills")}: ${server.skills.join(", ") || "—"}`));
+  }
+
+  return { el, render };
+}
+
+/** Every character's full sheet, with the game master's notes under it. */
+export function Sheets() {
+  const { h, fill, t } = GM;
+  const el = h("div", { class: "sheets" });
+  const shown = new Map();
+
+  function render(data) {
+    const cards = data.sheets.map((sheet) => {
+      if (!shown.has(sheet.name)) {
+        const view = CharacterSheet();
+        const notes = h("div", { class: "note small" });
+        shown.set(sheet.name, { view, notes, box: h("div", { class: "sheetbox" }, view.el, notes) });
+      }
+      const { view, notes, box } = shown.get(sheet.name);
+      view.render(sheet);
+      fill(notes, sheet.notes ? [h("b", {}, `${t("notes")} `), sheet.notes] : null);
+      return box;
+    });
+    const names = new Set(data.sheets.map((sheet) => sheet.name));
+    [...shown.keys()].filter((name) => !names.has(name)).forEach((name) => shown.delete(name));
+    fill(el, cards);
+  }
+
+  return { el, render };
+}