@crockery/fellowship-components 0.1.0 → 0.3.0

package/dist/chunks/dungeon-cast-browser-Cyh519NI.js

@@ -0,0 +1,705 @@
+import { t as e } from "./data-source-C-Gs7kRl.js";
+import { n as t, r as n, t as r } from "./decorate-B_ZTN9li.js";
+import { createPackageFellowshipDataClient as i } from "@crockery/fellowship-data/client";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
+import { repeat as f } from "lit/directives/repeat.js";
+//#region src/data/package-cast-data-source.ts
+var p = (e = {}) => {
+	let t = i(e);
+	return {
+		loadDungeonCasts: (e, n) => t.loadDungeonCasts(e, n),
+		resolveAssetUrl: (e) => t.resolveAssetUrl(e)
+	};
+}, m = o`
+  :host {
+    --fellowship-cast-canvas: var(--_fellowship-field-canvas);
+    --fellowship-cast-surface: var(--_fellowship-field-surface);
+    --fellowship-cast-raised: var(--_fellowship-field-surface-raised);
+    --fellowship-cast-ink: var(--_fellowship-field-ink);
+    --fellowship-cast-muted: var(--_fellowship-field-muted);
+    --fellowship-cast-tertiary: var(--_fellowship-field-tertiary);
+    --fellowship-cast-border: var(--_fellowship-field-border);
+    --fellowship-cast-border-strong: var(--_fellowship-field-border-strong);
+    --fellowship-cast-interrupt: var(--_fellowship-field-accent);
+    --fellowship-cast-stop: var(--_fellowship-field-brass);
+    --fellowship-cast-focus: var(--_fellowship-field-focus);
+    --fellowship-cast-font-family: var(--_fellowship-field-font-family);
+    --fellowship-cast-tactical-font-family: var(--_fellowship-field-mono-font-family);
+
+    display: block;
+    inline-size: 100%;
+    min-block-size: 320px;
+    color: var(--fellowship-cast-ink);
+    font-family: var(--fellowship-cast-font-family);
+    container-type: inline-size;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([fill]) {
+    min-block-size: 0;
+    block-size: 100%;
+    overflow: hidden;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .browser {
+    min-block-size: inherit;
+    overflow: hidden;
+    border: 1px solid var(--fellowship-cast-border);
+    border-radius: calc(var(--_fellowship-field-radius) + 2px);
+    background: var(--fellowship-cast-canvas);
+  }
+
+  :host([fill]) .browser {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    min-block-size: 0;
+    block-size: 100%;
+  }
+
+  .toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: end;
+    padding: 16px;
+    border-block-end: 1px solid var(--fellowship-cast-border);
+    background: var(--fellowship-cast-surface);
+  }
+
+  .eyebrow,
+  .summary,
+  .enemy-id,
+  .ability-id,
+  .capability,
+  .marker {
+    font-family: var(--fellowship-cast-tactical-font-family);
+  }
+
+  .eyebrow {
+    margin: 0 0 4px;
+    color: var(--fellowship-cast-interrupt);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: clamp(18px, 3cqi, 24px);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    line-height: 1.08;
+  }
+
+  .summary {
+    margin: 6px 0 0;
+    color: var(--fellowship-cast-tertiary);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
+  }
+
+  .search-label {
+    display: grid;
+    gap: 4px;
+    min-inline-size: min(240px, 38cqi);
+    color: var(--fellowship-cast-muted);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+
+  .search-input {
+    min-block-size: 44px;
+    inline-size: 100%;
+    border: 1px solid var(--fellowship-cast-border-strong);
+    border-radius: var(--_fellowship-field-radius);
+    background: var(--_fellowship-field-inset);
+    color: var(--fellowship-cast-ink);
+    font: inherit;
+    font-size: 14px;
+    padding-inline: 12px;
+  }
+
+  .search-input::placeholder {
+    color: var(--fellowship-cast-tertiary);
+  }
+
+  .search-input:focus-visible,
+  .cast-row:focus-visible,
+  .retry-button:focus-visible {
+    outline: 2px solid var(--fellowship-cast-focus);
+    outline-offset: 2px;
+  }
+
+  .enemy-list {
+    display: grid;
+  }
+
+  :host([fill]) .enemy-list {
+    min-block-size: 0;
+    align-content: start;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .enemy {
+    min-inline-size: 0;
+    border-block-end: 1px solid var(--fellowship-cast-border);
+  }
+
+  .enemy:last-child {
+    border-block-end: 0;
+  }
+
+  .enemy-header {
+    display: grid;
+    grid-template-columns: 4px minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    min-block-size: 52px;
+    padding: 8px 16px;
+    background: color-mix(in srgb, var(--fellowship-cast-raised) 72%, transparent);
+  }
+
+  .enemy-rule {
+    align-self: stretch;
+    background: var(--fellowship-cast-interrupt);
+  }
+
+  .enemy-name {
+    overflow: hidden;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.15;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .enemy-id {
+    overflow: hidden;
+    margin: 3px 0 0;
+    color: var(--fellowship-cast-tertiary);
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .enemy-count {
+    color: var(--fellowship-cast-muted);
+    font-family: var(--fellowship-cast-tactical-font-family);
+    font-size: 10px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cast-list {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .cast-list > li + li {
+    border-block-start: 1px solid var(--fellowship-cast-border);
+  }
+
+  .cast-row {
+    position: relative;
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr) auto auto;
+    gap: 12px;
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: 64px;
+    padding: 8px 16px 8px 28px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .cast-row:not(:disabled):hover {
+    background: color-mix(in srgb, var(--fellowship-cast-interrupt) 7%, transparent);
+  }
+
+  .cast-row[aria-pressed="true"] {
+    background: color-mix(in srgb, var(--fellowship-cast-interrupt) 11%, transparent);
+  }
+
+  .cast-row[aria-pressed="true"]::before {
+    position: absolute;
+    inset: 12px auto 12px 0;
+    inline-size: 3px;
+    background: var(--fellowship-cast-interrupt);
+    content: "";
+  }
+
+  .cast-row:disabled {
+    color: var(--fellowship-cast-tertiary);
+    cursor: not-allowed;
+  }
+
+  .ability-image,
+  .ability-fallback {
+    inline-size: 40px;
+    block-size: 40px;
+    border: 1px solid var(--fellowship-cast-border-strong);
+    border-radius: 4px;
+    background: var(--fellowship-cast-raised);
+  }
+
+  .ability-image {
+    display: block;
+    object-fit: cover;
+  }
+
+  .ability-fallback {
+    display: grid;
+    place-items: center;
+    color: var(--fellowship-cast-muted);
+    font-family: var(--fellowship-cast-tactical-font-family);
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  .ability-image[hidden],
+  .ability-fallback[hidden] {
+    display: none;
+  }
+
+  .ability-copy {
+    min-inline-size: 0;
+  }
+
+  .ability-name {
+    display: block;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.15;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ability-id {
+    display: block;
+    overflow: hidden;
+    margin-block-start: 4px;
+    color: var(--fellowship-cast-tertiary);
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .capability {
+    min-inline-size: 102px;
+    padding: 5px 8px;
+    border: 1px solid currentColor;
+    border-radius: 999px;
+    color: var(--fellowship-cast-interrupt);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .capability[data-kind="varies"] {
+    border-style: dashed;
+  }
+
+  .capability[data-kind="stop"] {
+    color: var(--fellowship-cast-stop);
+  }
+
+  .capability[data-kind="none"] {
+    color: var(--fellowship-cast-tertiary);
+  }
+
+  .marker {
+    min-inline-size: 72px;
+    color: var(--fellowship-cast-stop);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-align: end;
+    text-transform: uppercase;
+  }
+
+  .marker[data-empty="true"] {
+    visibility: hidden;
+  }
+
+  .status {
+    display: grid;
+    min-block-size: 280px;
+    padding: 32px;
+    place-items: center;
+    text-align: center;
+  }
+
+  :host([fill]) .status {
+    min-block-size: 0;
+  }
+
+  .status-card {
+    display: grid;
+    max-inline-size: 360px;
+    gap: 8px;
+    justify-items: center;
+  }
+
+  .status-mark {
+    inline-size: 32px;
+    block-size: 4px;
+    margin-block-end: 8px;
+    background: var(--fellowship-cast-interrupt);
+  }
+
+  .status-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .status-copy {
+    margin: 0;
+    color: var(--fellowship-cast-muted);
+    font-size: 14px;
+    line-height: 1.45;
+  }
+
+  .retry-button {
+    min-block-size: 44px;
+    margin-block-start: 8px;
+    padding-inline: 16px;
+    border: 1px solid var(--fellowship-cast-interrupt);
+    border-radius: var(--_fellowship-field-radius);
+    background: transparent;
+    color: var(--fellowship-cast-ink);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  @container (max-width: 560px) {
+    .toolbar {
+      grid-template-columns: 1fr;
+    }
+
+    .search-label {
+      min-inline-size: 0;
+    }
+
+    .cast-row {
+      grid-template-columns: 40px minmax(0, 1fr) auto;
+      padding-inline: 16px;
+    }
+
+    .marker {
+      position: absolute;
+      inset: 5px 8px auto auto;
+      min-inline-size: 0;
+      font-size: 8px;
+    }
+
+    .ability-id,
+    .enemy-id {
+      display: none;
+    }
+
+    .capability {
+      min-inline-size: 0;
+      padding-inline: 6px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cast-row {
+      transition: none;
+    }
+  }
+`, h = ({ enemyId: e, abilityId: t }) => `${e}\u0000${t}`, g = (e) => e.images.find(({ size: e }) => e === "200") ?? e.images[0] ?? null, _ = (e, t, n) => t ? "Interrupt varies" : e ? "Interrupt" : n ? "Stop" : "No response", v = (e, t) => {
+	let n = /* @__PURE__ */ new Set(), r = [];
+	for (let i of e.dungeon.enemies) {
+		if (n.has(i.id)) continue;
+		n.add(i.id);
+		let a = e.enemies.get(i.id);
+		if (!a) continue;
+		let o = (e.abilitiesByEnemy.get(a.id) ?? []).filter((e) => e.castInterruptibility !== void 0).map((e) => {
+			let n = e.castInterruptibility !== "never", r = e.castInterruptibility === "sometimes", i = a.canBeControlled, o = g(e), s = null;
+			if (o) try {
+				s = t.resolveAssetUrl(o);
+			} catch {
+				s = null;
+			}
+			return {
+				identity: {
+					enemyId: a.id,
+					abilityId: e.id
+				},
+				ability: e,
+				enemy: a,
+				canInterrupt: n,
+				interruptVaries: r,
+				canStop: i,
+				actionable: n || i,
+				capabilityLabel: _(n, r, i),
+				imageUrl: s
+			};
+		});
+		o.some(({ actionable: e }) => e) && r.push({
+			enemy: a,
+			casts: o
+		});
+	}
+	return {
+		dungeon: e.dungeon,
+		enemies: r,
+		castCount: r.reduce((e, t) => e + t.casts.length, 0)
+	};
+}, y = {
+	bubbles: !0,
+	composed: !0
+}, b = class extends a {
+	constructor(...e) {
+		super(...e), this.dungeonId = "", this.selectedCast = null, this.configuredCasts = [], this.configuredFilter = "all", this.fill = !1, this.assetBaseUrl = null, this.dataSource = null, this._status = "empty", this._error = null, this._model = null, this._query = "", this.#e = null, this.#t = 0, this.#d = (e) => {
+			this._query = e.currentTarget.value;
+		}, this.#f = (e) => {
+			let t = e.currentTarget;
+			t.hidden = !0;
+			let n = t.nextElementSibling;
+			n instanceof HTMLElement && (n.hidden = !1);
+		}, this.#p = (e) => {
+			let t = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 0;
+			if (t === 0 && e.key !== "Home" && e.key !== "End") return;
+			let n = [...this.renderRoot.querySelectorAll(".cast-row:not(:disabled)")];
+			if (n.length === 0) return;
+			let r = n.indexOf(e.currentTarget);
+			n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : (r + t + n.length) % n.length]?.focus(), e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [n, m];
+	}
+	#e;
+	#t;
+	connectedCallback() {
+		super.connectedCallback(), t(this.ownerDocument);
+	}
+	disconnectedCallback() {
+		this.#e?.abort(), super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), (e.has("dungeonId") || e.has("dataSource") || e.has("assetBaseUrl")) && queueMicrotask(() => {
+			this.isConnected && this.#n();
+		});
+	}
+	retry() {
+		this.#n();
+	}
+	get renderModel() {
+		return this._model;
+	}
+	render() {
+		if (this._status !== "ready" || !this._model) return s`<section class="browser" aria-label="Dungeon cast browser">${this.#o()}</section>`;
+		let e = this.#r(this._model);
+		return s`
+      <section class="browser" aria-label=${`${this._model.dungeon.name ?? this._model.dungeon.id} casts`}>
+        <header class="toolbar" part="toolbar">
+          <div>
+            <p class="eyebrow">Dungeon cast index</p>
+            <h2>${this._model.dungeon.name ?? this._model.dungeon.id}</h2>
+            <p class="summary">
+              ${this._model.enemies.length} enemies · ${this._model.castCount} cast-bearing abilities
+            </p>
+          </div>
+          <label class="search-label">
+            Search casts
+            <input
+              class="search-input"
+              type="search"
+              placeholder="Enemy or ability"
+              .value=${this._query}
+              @input=${this.#d}
+            />
+          </label>
+        </header>
+        ${e.length > 0 ? s`<div class="enemy-list" part="enemy-list">${f(e, ({ enemy: e }) => e.id, (e) => this.#i(e))}</div>` : this.#s()}
+      </section>
+    `;
+	}
+	async #n() {
+		let t = this.dungeonId.trim(), n = ++this.#t;
+		if (this.#e?.abort(), this.#e = new AbortController(), this._model = null, this._error = null, this._query = "", !t) {
+			this._status = "empty";
+			return;
+		}
+		this._status = "loading";
+		let r = this.dataSource ?? p(this.assetBaseUrl ? { assetBaseUrl: this.assetBaseUrl } : {});
+		try {
+			let i = await r.loadDungeonCasts(t, this.#e.signal);
+			if (n !== this.#t || this.#e.signal.aborted) return;
+			if (i.manifest.schemaVersion !== 1) throw new e("unsupported-schema", `Unsupported fellowship-data schema version: ${String(i.manifest.schemaVersion)}.`);
+			let a = v(i, r);
+			this._model = a, this._status = "ready", this.dispatchEvent(new CustomEvent("fellowship-cast-browser-ready", {
+				...y,
+				detail: {
+					model: a,
+					data: i
+				}
+			}));
+		} catch (t) {
+			if (n !== this.#t || this.#e.signal.aborted) return;
+			let r = {
+				code: t instanceof e ? t.code : t.code ?? "data-load-failed",
+				message: t instanceof Error ? t.message : String(t),
+				...t instanceof Error && t.cause !== void 0 ? { cause: t.cause } : {}
+			};
+			this._error = r, this._status = "error", this.dispatchEvent(new CustomEvent("fellowship-cast-browser-error", {
+				...y,
+				detail: r
+			}));
+		}
+	}
+	#r(e) {
+		let t = this._query.trim().toLocaleLowerCase(), n = this.configuredFilter === "configured" || this.configuredFilter === "unconfigured" ? this.configuredFilter : "all";
+		return e.enemies.flatMap((e) => {
+			let r = `${e.enemy.name ?? ""} ${e.enemy.id}`.toLocaleLowerCase().includes(t), i = e.casts.filter((e) => {
+				if (!(!t || r || `${e.ability.name ?? ""} ${e.ability.id}`.toLocaleLowerCase().includes(t))) return !1;
+				let i = this.configuredCasts.some((t) => this.#l(t, e.identity));
+				return n === "all" || n === "configured" && i || n === "unconfigured" && !i;
+			});
+			return i.length > 0 ? [{
+				...e,
+				casts: i
+			}] : [];
+		});
+	}
+	#i(e) {
+		return s`
+      <article class="enemy" part="enemy">
+        <header class="enemy-header" part="enemy-header">
+          <span class="enemy-rule" aria-hidden="true"></span>
+          <div>
+            <h3 class="enemy-name">${e.enemy.name ?? e.enemy.id}</h3>
+            <p class="enemy-id">${e.enemy.id}</p>
+          </div>
+          <span class="enemy-count">${e.casts.length} ${e.casts.length === 1 ? "cast" : "casts"}</span>
+        </header>
+        <ul class="cast-list">
+          ${f(e.casts, ({ identity: e }) => h(e), (e) => s`<li>${this.#a(e)}</li>`)}
+        </ul>
+      </article>
+    `;
+	}
+	#a(e) {
+		let t = this.#l(this.selectedCast, e.identity), n = this.configuredCasts.some((t) => this.#l(t, e.identity)), r = e.interruptVaries ? "varies" : e.canInterrupt ? "interrupt" : e.canStop ? "stop" : "none", i = (e.ability.name ?? e.ability.id).split(/\s+/).map((e) => e[0]).join("").slice(0, 2).toUpperCase();
+		return s`
+      <button
+        class="cast-row"
+        part="cast"
+        type="button"
+        ?disabled=${!e.actionable}
+        aria-pressed=${String(t)}
+        data-configured=${String(n)}
+        @click=${() => this.#u(e)}
+        @keydown=${this.#p}
+      >
+        ${e.imageUrl ? s`<img
+                  class="ability-image"
+                  part="cast-icon"
+                  src=${e.imageUrl}
+                  alt=""
+                  @error=${this.#f}
+                /><span
+                  class="ability-fallback"
+                  part="cast-icon-fallback"
+                  aria-hidden="true"
+                  hidden
+                  >${i}</span
+                >` : s`<span class="ability-fallback" part="cast-icon-fallback" aria-hidden="true">${i}</span>`}
+        <span class="ability-copy">
+          <span class="ability-name">${e.ability.name ?? e.ability.id}</span>
+          <span class="ability-id">${e.ability.id}</span>
+        </span>
+        <span class="capability" data-kind=${r}>${e.capabilityLabel}</span>
+        <span class="marker" data-empty=${String(!n)}>${n ? "Configured" : c}</span>
+      </button>
+    `;
+	}
+	#o() {
+		return this._status === "loading" ? this.#c("Loading cast index", "Joining dungeon enemies with their cast data.") : this._status === "error" ? s`
+        <div class="status" role="alert">
+          <div class="status-card">
+            <span class="status-mark" aria-hidden="true"></span>
+            <h2 class="status-title">Cast data unavailable</h2>
+            <p class="status-copy">${this._error?.message ?? "The dungeon cast index could not be loaded."}</p>
+            <button class="retry-button" type="button" @click=${this.retry}>Retry</button>
+          </div>
+        </div>
+      ` : this._status === "ready" ? this.#c("No actionable casts", "This dungeon has no enemies with casts that can be interrupted or stopped.") : this.#c("Select a dungeon", "Choose a dungeon to inspect enemy casts.");
+	}
+	#s() {
+		return this.#c("No matching casts", `No enemy or ability matches “${this._query.trim()}”.`);
+	}
+	#c(e, t) {
+		return s`
+      <div class="status">
+        <div class="status-card">
+          <span class="status-mark" aria-hidden="true"></span>
+          <h2 class="status-title">${e}</h2>
+          <p class="status-copy">${t}</p>
+        </div>
+      </div>
+    `;
+	}
+	#l(e, t) {
+		return e?.enemyId === t.enemyId && e.abilityId === t.abilityId;
+	}
+	#u(e) {
+		e.actionable && this.dispatchEvent(new CustomEvent("fellowship-cast-selected", {
+			...y,
+			detail: { cast: e }
+		}));
+	}
+	#d;
+	#f;
+	#p;
+};
+r([u({
+	type: String,
+	attribute: "dungeon-id"
+})], b.prototype, "dungeonId", void 0), r([u({ attribute: !1 })], b.prototype, "selectedCast", void 0), r([u({ attribute: !1 })], b.prototype, "configuredCasts", void 0), r([u({
+	type: String,
+	attribute: "configured-filter"
+})], b.prototype, "configuredFilter", void 0), r([u({
+	type: Boolean,
+	reflect: !0
+})], b.prototype, "fill", void 0), r([u({
+	type: String,
+	attribute: "asset-base-url"
+})], b.prototype, "assetBaseUrl", void 0), r([u({ attribute: !1 })], b.prototype, "dataSource", void 0), r([d()], b.prototype, "_status", void 0), r([d()], b.prototype, "_error", void 0), r([d()], b.prototype, "_model", void 0), r([d()], b.prototype, "_query", void 0), b = r([l("fellowship-dungeon-cast-browser")], b);
+var x = () => {
+	globalThis.customElements !== void 0 && !globalThis.customElements.get("fellowship-dungeon-cast-browser") && globalThis.customElements.define("fellowship-dungeon-cast-browser", b);
+};
+//#endregion
+export { p as a, v as i, x as n, h as r, b as t };
+
+//# sourceMappingURL=dungeon-cast-browser-Cyh519NI.js.map