ultimatedarktowerdisplay 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-03-22
+
+### Added
+
+- Initial release
+- `TowerDisplay` wrapper class with options-based constructor
+- `TowerStateReadout` core DOM renderer
+- LED grid rendering with per-light effect labels (on, off, breathe, flicker, etc.)
+- Drum position and calibration display with glyph lookup
+- Audio sample name resolution via `TOWER_AUDIO_LIBRARY`
+- Skull drop detection (beam count delta between consecutive states)
+- LED sequence override labels via `TOWER_LIGHT_SEQUENCES`
+- Volume description rendering
+- Automatic CSS injection via `injectStyles()`
+- Interactive example demo page
+- TypeScript type exports (`TowerDisplayOptions`, `ITowerDisplay`)
+- Dual ESM/CJS build via Vite library mode

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ChessMess
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,212 @@
+# UltimateDarkTowerDisplay
+
+DOM-based visual readout for decoded [Ultimate Dark Tower](https://github.com/ChessMess/ultimatedarktower) tower state.
+
+This package renders a live tower dashboard into a DOM element. It is intended for tools that already know how to obtain or decode a `TowerState` and want a compact on-screen display of:
+
+- LED layers and per-light effects
+- Drum positions and calibration status
+- Visible glyph on each calibrated drum
+- Active audio sample, loop flag, and volume
+- Beam/skull count and skull-drop transitions
+- Active LED sequence override
+
+## What This Package Does
+
+`ultimatedarktowerdisplay` is a renderer. It does not talk to the physical tower, decode packets, or create `TowerState` objects on its own.
+
+Use it alongside [`ultimatedarktower`](https://github.com/ChessMess/ultimatedarktower), which provides the `TowerState` type and helpers such as `createDefaultTowerState()`.
+
+This package intentionally keeps a narrow API surface. It exports display components and display-specific types only. Import protocol constants such as `LIGHT_EFFECTS`, `TOWER_AUDIO_LIBRARY`, and `TOWER_LIGHT_SEQUENCES` from `ultimatedarktower`.
+
+## Installation
+
+```bash
+npm install ultimatedarktowerdisplay ultimatedarktower
+```
+
+`ultimatedarktower` is a peer dependency and must be installed by the consuming app.
+
+## Quick Start
+
+```ts
+import { TowerDisplay } from "ultimatedarktowerdisplay";
+import { createDefaultTowerState } from "ultimatedarktower";
+
+const container = document.getElementById("tower");
+
+if (!container) {
+  throw new Error("Missing #tower container");
+}
+
+const display = new TowerDisplay({ container });
+const state = createDefaultTowerState();
+
+display.applyState(state);
+
+// Later, when the tower sends an updated decoded state:
+// display.applyState(nextState);
+
+// Reset to the idle placeholder.
+display.showIdle();
+
+// Remove rendered DOM when tearing down the view.
+display.dispose();
+```
+
+Minimal HTML:
+
+```html
+<div id="tower"></div>
+```
+
+## Typical Integration
+
+In most applications the flow looks like this:
+
+1. Use `ultimatedarktower` to create or decode a `TowerState`.
+2. Create a `TowerDisplay` for a container element.
+3. Call `applyState(state)` whenever a new decoded state arrives.
+4. Call `dispose()` when removing the view.
+
+Example with a manually adjusted state:
+
+```ts
+import { TowerDisplay } from "ultimatedarktowerdisplay";
+import {
+  createDefaultTowerState,
+  LIGHT_EFFECTS,
+  TOWER_AUDIO_LIBRARY,
+} from "ultimatedarktower";
+
+const container = document.getElementById("tower");
+
+if (!container) {
+  throw new Error("Missing #tower container");
+}
+
+const display = new TowerDisplay({ container });
+const state = createDefaultTowerState();
+
+state.layer[0].light[0].effect = LIGHT_EFFECTS.on;
+state.layer[0].light[1].effect = LIGHT_EFFECTS.breathe;
+state.drum[0].position = 1;
+state.drum[0].calibrated = true;
+state.audio.sample = TOWER_AUDIO_LIBRARY.Ashstrider.value;
+state.audio.loop = true;
+state.beam.count = 2;
+
+display.applyState(state);
+```
+
+## Expected `TowerState` Shape
+
+You usually do not construct `TowerState` by hand. Start from `createDefaultTowerState()` and mutate fields you care about.
+
+Conceptually, the renderer expects a state shaped like this:
+
+```ts
+type TowerState = {
+  drum: Array<{
+    calibrated: boolean;
+    position: number;
+  }>;
+  layer: Array<{
+    light: Array<{
+      effect: number;
+      loop: boolean;
+    }>;
+  }>;
+  audio: {
+    sample: number;
+    loop: boolean;
+    volume: number;
+  };
+  beam: {
+    count: number;
+    fault: boolean;
+  };
+  led_sequence: number;
+};
+```
+
+For a valid starting point, prefer:
+
+```ts
+import { createDefaultTowerState } from "ultimatedarktower";
+
+const state = createDefaultTowerState();
+```
+
+The example page in [example/index.html](./example/index.html) follows this pattern.
+
+## Rendering Behavior
+
+- The constructor immediately renders an idle message: `Waiting for tower state…`
+- Styles are injected into `document.head` automatically on first use
+- A skull-drop highlight appears only when `beam.count` increases between successive `applyState()` calls
+- `dispose()` clears the container and resets internal state, including skull-drop tracking
+
+## API
+
+### `TowerDisplay`
+
+Primary entry point. Wraps `TowerStateReadout` with an options object.
+
+```ts
+new TowerDisplay(options: TowerDisplayOptions)
+```
+
+| Option      | Type          | Description                                        |
+| ----------- | ------------- | -------------------------------------------------- |
+| `container` | `HTMLElement` | DOM element that will receive the rendered readout |
+
+Methods:
+
+- `applyState(state: TowerState): void` updates the readout with a decoded tower state
+- `showIdle(): void` replaces the readout with the idle placeholder
+- `dispose(): void` clears the container and resets internal state
+
+### `TowerStateReadout`
+
+Lower-level renderer for callers that want to pass the container directly.
+
+```ts
+new TowerStateReadout(container: HTMLElement)
+```
+
+It exposes the same methods as `TowerDisplay`.
+
+### Exported Types
+
+- `ITowerDisplay` common interface implemented by both classes
+- `TowerDisplayOptions` configuration object for `TowerDisplay`
+
+`ultimatedarktowerdisplay` does not re-export tower protocol constants or helpers from `ultimatedarktower`.
+
+## Development
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Available commands:
+
+```bash
+npm run typecheck
+npm run lint
+npm test
+npm run test:coverage
+npm run build
+npm run dev
+npm run dev:example
+npm run ci
+```
+
+`npm run dev:example` starts the Vite example page and opens [example/index.html](./example/index.html).
+
+## License
+
+MIT

package/dist/TowerDisplay.d.ts

@@ -0,0 +1,23 @@
+import type { TowerState } from 'ultimatedarktower';
+import type { TowerDisplayOptions, ITowerDisplay } from './types';
+/**
+ * TowerDisplay renders decoded tower state into a DOM container.
+ *
+ * @example
+ * ```ts
+ * const display = new TowerDisplay({
+ *   container: document.getElementById('tower')!,
+ * });
+ * display.applyState(state);
+ * ```
+ */
+export declare class TowerDisplay implements ITowerDisplay {
+    private readonly impl;
+    constructor(options: TowerDisplayOptions);
+    /** Update the display with a new decoded tower state. */
+    applyState(state: TowerState): void;
+    /** Reset the display to its idle/waiting state. */
+    showIdle(): void;
+    /** Remove all rendered DOM content and reset internal state. */
+    dispose(): void;
+}

package/dist/TowerStateReadout.d.ts

@@ -0,0 +1,33 @@
+import { type TowerState } from 'ultimatedarktower';
+import type { ITowerDisplay } from './types';
+/**
+ * Core DOM renderer for tower state.
+ *
+ * Renders a live readout of LED grid, drum positions, audio state,
+ * skull drops, and LED sequence overrides.
+ *
+ * @example
+ * ```ts
+ * const readout = new TowerStateReadout(document.getElementById('tower')!);
+ * readout.applyState(state);
+ * ```
+ */
+export declare class TowerStateReadout implements ITowerDisplay {
+    private readonly container;
+    private prevBeamCount;
+    constructor(container: HTMLElement);
+    /** Update the display with a new decoded tower state. */
+    applyState(state: TowerState): void;
+    /** Reset the display to its idle/waiting state. */
+    showIdle(): void;
+    /** Remove all rendered DOM content and reset internal state. */
+    dispose(): void;
+    private render;
+    /**
+     * Find the glyph name on the north-facing side of a drum, if any.
+     * Only valid when the drum is calibrated.
+     */
+    private findGlyph;
+    /** Look up an audio sample name from TOWER_AUDIO_LIBRARY by value. */
+    private lookupAudio;
+}

package/dist/index.cjs.js

@@ -0,0 +1,186 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("ultimatedarktower");let g=!1,f=null;const $=`
+/* ── Tower Display Readout ── */
+
+@keyframes tdr-breathe {
+  0%, 100% { opacity: 0.3; }
+  50%      { opacity: 1; }
+}
+
+@keyframes tdr-flicker {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.2; }
+}
+
+@keyframes tdr-skull-flash {
+  0%   { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}
+
+.tdr-idle {
+  font-size: 0.85rem;
+  color: #888;
+  font-style: italic;
+}
+
+.tdr-section h3 {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #888;
+  margin: 0.6rem 0 0.3rem;
+}
+
+/* ── LED Grid ── */
+
+.tdr-layer {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.15rem 0;
+}
+
+.tdr-layer-label {
+  font-size: 0.65rem;
+  color: #888;
+  width: 7rem;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.tdr-led {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #333;
+  border: 1px solid #555;
+  display: inline-block;
+  transition: background 0.2s;
+}
+
+.tdr-led[data-effect="on"] {
+  background: #f0c040;
+  box-shadow: 0 0 6px rgba(240, 192, 64, 0.5);
+}
+
+.tdr-led[data-effect="breathe"] {
+  background: #80a0ff;
+  animation: tdr-breathe 2s ease-in-out infinite;
+}
+
+.tdr-led[data-effect="breathe-fast"] {
+  background: #80a0ff;
+  animation: tdr-breathe 0.8s ease-in-out infinite;
+}
+
+.tdr-led[data-effect="breathe-50"] {
+  background: #80a0ff;
+  animation: tdr-breathe 2s ease-in-out infinite;
+  opacity: 0.5;
+}
+
+.tdr-led[data-effect="flicker"] {
+  background: #ff6040;
+  animation: tdr-flicker 0.3s step-end infinite;
+}
+
+/* ── Drums ── */
+
+.tdr-drum {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0;
+}
+
+.tdr-drum-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.tdr-drum-pos {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #c0392b;
+}
+
+.tdr-drum-cal {
+  font-size: 0.75rem;
+  color: #888;
+}
+
+.tdr-glyph {
+  font-size: 0.7rem;
+  color: #f39c12;
+  font-style: italic;
+}
+
+/* ── Audio ── */
+
+.tdr-audio {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.tdr-audio-name {
+  color: #e8e8e8;
+  font-weight: 500;
+}
+
+.tdr-audio-loop {
+  font-size: 0.65rem;
+  color: #27ae60;
+  border: 1px solid #27ae60;
+  border-radius: 3px;
+  padding: 0 4px;
+}
+
+.tdr-audio-vol {
+  font-size: 0.65rem;
+  color: #888;
+}
+
+/* ── Skull / Beam ── */
+
+.tdr-skull-drop {
+  color: #e74c3c;
+  font-weight: 700;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  animation: tdr-skull-flash 0.6s ease-out;
+}
+
+.tdr-beam-count {
+  font-size: 0.8rem;
+  color: #888;
+  margin-top: 0.5rem;
+}
+
+/* ── LED Sequence Override ── */
+
+.tdr-led-seq {
+  font-size: 0.75rem;
+  color: #f39c12;
+  margin-top: 0.3rem;
+}
+`;function k(){g||(f=document.createElement("style"),f.textContent=$,document.head.appendChild(f),g=!0)}const _=["N","E","S","W"],w=["north","east","south","west"],C=["Top","Middle","Bottom"],I=["top","middle","bottom"];function r(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}const O={[t.LIGHT_EFFECTS.off]:"off",[t.LIGHT_EFFECTS.on]:"on",[t.LIGHT_EFFECTS.breathe]:"breathe",[t.LIGHT_EFFECTS.breatheFast]:"breathe-fast",[t.LIGHT_EFFECTS.breathe50percent]:"breathe-50",[t.LIGHT_EFFECTS.flicker]:"flicker"},D=Object.fromEntries(Object.entries(t.TOWER_LIGHT_SEQUENCES).map(([o,e])=>[e,o])),x=new Map(Object.values(t.TOWER_AUDIO_LIBRARY).map(o=>[o.value,o.name]));class E{constructor(e){this.prevBeamCount=null,this.container=e,k(),this.showIdle()}applyState(e){const a=this.prevBeamCount!==null&&e.beam.count>this.prevBeamCount;this.prevBeamCount=e.beam.count,this.render(e,a)}showIdle(){this.container.innerHTML='<p class="tdr-idle">Waiting for tower state…</p>'}dispose(){this.container.innerHTML="",this.prevBeamCount=null}render(e,a){const c=e.layer.map((n,s)=>{const d=t.LAYER_TO_POSITION[s]??`L${s}`,m=n.light.map((l,h)=>{const b=O[l.effect]??"off",L=t.LIGHT_INDEX_TO_DIRECTION[h]??h;return`<span class="tdr-led" data-effect="${r(b)}" title="${r(`${d} ${L}: ${b}${l.loop?" (loop)":""}`)}"></span>`}).join("");return`<div class="tdr-layer"><span class="tdr-layer-label">${r(d)}</span>${m}</div>`}).join(""),p=e.drum.map((n,s)=>{const d=_[n.position]??"?",m=n.calibrated?"✓":"—",l=this.findGlyph(s,n.position,n.calibrated);return`<div class="tdr-drum">
+        <span class="tdr-drum-name">${r(C[s])}</span>
+        <span class="tdr-drum-pos">${r(d)}</span>
+        <span class="tdr-drum-cal" title="Calibrated: ${n.calibrated}">${m}</span>
+        ${l?`<span class="tdr-glyph">${r(l)}</span>`:""}
+      </div>`}).join(""),u=this.lookupAudio(e.audio.sample,e.audio.loop),i=t.VOLUME_DESCRIPTIONS[e.audio.volume]??`Vol ${e.audio.volume}`,S=`<div class="tdr-audio">
+      <span class="tdr-audio-name">${r(u)}</span>
+      ${e.audio.loop?'<span class="tdr-audio-loop">loop</span>':""}
+      <span class="tdr-audio-vol">${r(i)}</span>
+    </div>`,v=a?`<div class="tdr-skull-drop">💀 Skull Drop! (${e.beam.count})</div>`:`<div class="tdr-beam-count">Skulls: ${e.beam.count}${e.beam.fault?" ⚠ fault":""}</div>`,y=D[e.led_sequence]??`0x${e.led_sequence.toString(16).padStart(2,"0")}`,T=e.led_sequence!==0?`<div class="tdr-led-seq">LED Sequence: ${r(y)}</div>`:"";this.container.innerHTML=`
+      <div class="tdr-section tdr-leds"><h3>LEDs</h3>${c}</div>
+      <div class="tdr-section tdr-drums"><h3>Drums</h3>${p}</div>
+      <div class="tdr-section tdr-info">
+        ${S}
+        ${v}
+        ${T}
+      </div>
+    `}findGlyph(e,a,c){if(!c)return null;const p=I[e],u=w[a];for(const i of Object.values(t.GLYPHS))if(i.level===p&&i.side===u)return i.name;return null}lookupAudio(e,a){return e===0&&!a?"Silence":x.get(e)??`Sample ${e}`}}class F{constructor(e){this.impl=new E(e.container)}applyState(e){this.impl.applyState(e)}showIdle(){this.impl.showIdle()}dispose(){this.impl.dispose()}}exports.TowerDisplay=F;exports.TowerStateReadout=E;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/styles.ts","../src/TowerStateReadout.ts","../src/TowerDisplay.ts"],"sourcesContent":["let injected = false;\nlet styleElement: HTMLStyleElement | null = null;\n\nconst CSS = `\n/* ── Tower Display Readout ── */\n\n@keyframes tdr-breathe {\n  0%, 100% { opacity: 0.3; }\n  50%      { opacity: 1; }\n}\n\n@keyframes tdr-flicker {\n  0%, 100% { opacity: 1; }\n  50%      { opacity: 0.2; }\n}\n\n@keyframes tdr-skull-flash {\n  0%   { transform: scale(1.3); }\n  100% { transform: scale(1); }\n}\n\n.tdr-idle {\n  font-size: 0.85rem;\n  color: #888;\n  font-style: italic;\n}\n\n.tdr-section h3 {\n  font-size: 0.65rem;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: #888;\n  margin: 0.6rem 0 0.3rem;\n}\n\n/* ── LED Grid ── */\n\n.tdr-layer {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.15rem 0;\n}\n\n.tdr-layer-label {\n  font-size: 0.65rem;\n  color: #888;\n  width: 7rem;\n  text-align: right;\n  flex-shrink: 0;\n}\n\n.tdr-led {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #333;\n  border: 1px solid #555;\n  display: inline-block;\n  transition: background 0.2s;\n}\n\n.tdr-led[data-effect=\"on\"] {\n  background: #f0c040;\n  box-shadow: 0 0 6px rgba(240, 192, 64, 0.5);\n}\n\n.tdr-led[data-effect=\"breathe\"] {\n  background: #80a0ff;\n  animation: tdr-breathe 2s ease-in-out infinite;\n}\n\n.tdr-led[data-effect=\"breathe-fast\"] {\n  background: #80a0ff;\n  animation: tdr-breathe 0.8s ease-in-out infinite;\n}\n\n.tdr-led[data-effect=\"breathe-50\"] {\n  background: #80a0ff;\n  animation: tdr-breathe 2s ease-in-out infinite;\n  opacity: 0.5;\n}\n\n.tdr-led[data-effect=\"flicker\"] {\n  background: #ff6040;\n  animation: tdr-flicker 0.3s step-end infinite;\n}\n\n/* ── Drums ── */\n\n.tdr-drum {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.3rem 0;\n}\n\n.tdr-drum-name {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #e8e8e8;\n}\n\n.tdr-drum-pos {\n  font-size: 0.85rem;\n  font-weight: 700;\n  color: #c0392b;\n}\n\n.tdr-drum-cal {\n  font-size: 0.75rem;\n  color: #888;\n}\n\n.tdr-glyph {\n  font-size: 0.7rem;\n  color: #f39c12;\n  font-style: italic;\n}\n\n/* ── Audio ── */\n\n.tdr-audio {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8rem;\n}\n\n.tdr-audio-name {\n  color: #e8e8e8;\n  font-weight: 500;\n}\n\n.tdr-audio-loop {\n  font-size: 0.65rem;\n  color: #27ae60;\n  border: 1px solid #27ae60;\n  border-radius: 3px;\n  padding: 0 4px;\n}\n\n.tdr-audio-vol {\n  font-size: 0.65rem;\n  color: #888;\n}\n\n/* ── Skull / Beam ── */\n\n.tdr-skull-drop {\n  color: #e74c3c;\n  font-weight: 700;\n  font-size: 0.9rem;\n  margin-top: 0.5rem;\n  animation: tdr-skull-flash 0.6s ease-out;\n}\n\n.tdr-beam-count {\n  font-size: 0.8rem;\n  color: #888;\n  margin-top: 0.5rem;\n}\n\n/* ── LED Sequence Override ── */\n\n.tdr-led-seq {\n  font-size: 0.75rem;\n  color: #f39c12;\n  margin-top: 0.3rem;\n}\n`;\n\n/**\n * Injects the tower display readout stylesheet into `document.head`.\n * Safe to call multiple times — the `<style>` tag is only appended once.\n */\nexport function injectStyles(): void {\n  if (injected) return;\n  styleElement = document.createElement('style');\n  styleElement.textContent = CSS;\n  document.head.appendChild(styleElement);\n  injected = true;\n}\n\n/**\n * Reset the injection guard (for testing only).\n * @internal\n */\nexport function _resetStyleInjection(): void {\n  if (styleElement) {\n    styleElement.remove();\n    styleElement = null;\n  }\n  injected = false;\n}\n","import {\n  type TowerState,\n  GLYPHS,\n  TOWER_AUDIO_LIBRARY,\n  TOWER_LIGHT_SEQUENCES,\n  VOLUME_DESCRIPTIONS,\n  LAYER_TO_POSITION,\n  LIGHT_INDEX_TO_DIRECTION,\n  LIGHT_EFFECTS,\n} from 'ultimatedarktower';\nimport type { ITowerDisplay } from './types';\nimport { injectStyles } from './styles';\n\nconst COMPASS = ['N', 'E', 'S', 'W'] as const;\nconst COMPASS_FULL = ['north', 'east', 'south', 'west'] as const;\nconst DRUM_NAMES = ['Top', 'Middle', 'Bottom'] as const;\nconst DRUM_LEVELS = ['top', 'middle', 'bottom'] as const;\n\n/** Escape HTML special characters to prevent XSS when interpolating into innerHTML. */\nfunction esc(str: string): string {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\n// Build reverse lookup maps once at module level\nconst EFFECT_LABELS: Record<number, string> = {\n  [LIGHT_EFFECTS.off]: 'off',\n  [LIGHT_EFFECTS.on]: 'on',\n  [LIGHT_EFFECTS.breathe]: 'breathe',\n  [LIGHT_EFFECTS.breatheFast]: 'breathe-fast',\n  [LIGHT_EFFECTS.breathe50percent]: 'breathe-50',\n  [LIGHT_EFFECTS.flicker]: 'flicker',\n};\n\nconst SEQUENCE_LABELS: Record<number, string> = Object.fromEntries(\n  Object.entries(TOWER_LIGHT_SEQUENCES).map(([name, val]) => [val, name]),\n);\n\nconst AUDIO_BY_VALUE: Map<number, string> = new Map(\n  Object.values(TOWER_AUDIO_LIBRARY).map((entry) => [entry.value, entry.name]),\n);\n\n/**\n * Core DOM renderer for tower state.\n *\n * Renders a live readout of LED grid, drum positions, audio state,\n * skull drops, and LED sequence overrides.\n *\n * @example\n * ```ts\n * const readout = new TowerStateReadout(document.getElementById('tower')!);\n * readout.applyState(state);\n * ```\n */\nexport class TowerStateReadout implements ITowerDisplay {\n  private readonly container: HTMLElement;\n  private prevBeamCount: number | null = null;\n\n  constructor(container: HTMLElement) {\n    this.container = container;\n    injectStyles();\n    this.showIdle();\n  }\n\n  /** Update the display with a new decoded tower state. */\n  applyState(state: TowerState): void {\n    const skullDrop = this.prevBeamCount !== null && state.beam.count > this.prevBeamCount;\n    this.prevBeamCount = state.beam.count;\n    this.render(state, skullDrop);\n  }\n\n  /** Reset the display to its idle/waiting state. */\n  showIdle(): void {\n    this.container.innerHTML = '<p class=\"tdr-idle\">Waiting for tower state\\u2026</p>';\n  }\n\n  /** Remove all rendered DOM content and reset internal state. */\n  dispose(): void {\n    this.container.innerHTML = '';\n    this.prevBeamCount = null;\n  }\n\n  private render(state: TowerState, skullDrop: boolean): void {\n    // --- LEDs: 6 layers × 4 lights ---\n    const ledRows = state.layer.map((layer, li) => {\n      const layerName = LAYER_TO_POSITION[li as keyof typeof LAYER_TO_POSITION] ?? `L${li}`;\n      const lights = layer.light.map((light, ji) => {\n        const eff = EFFECT_LABELS[light.effect] ?? 'off';\n        const dir = LIGHT_INDEX_TO_DIRECTION[ji as keyof typeof LIGHT_INDEX_TO_DIRECTION] ?? ji;\n        return `<span class=\"tdr-led\" data-effect=\"${esc(eff)}\" title=\"${esc(`${layerName} ${dir}: ${eff}${light.loop ? ' (loop)' : ''}`)}\"></span>`;\n      }).join('');\n      return `<div class=\"tdr-layer\"><span class=\"tdr-layer-label\">${esc(layerName)}</span>${lights}</div>`;\n    }).join('');\n\n    // --- Drums ---\n    const drumRows = state.drum.map((drum, di) => {\n      const dir = COMPASS[drum.position] ?? '?';\n      const cal = drum.calibrated ? '\\u2713' : '\\u2014';\n      const activeGlyph = this.findGlyph(di, drum.position, drum.calibrated);\n      return `<div class=\"tdr-drum\">\n        <span class=\"tdr-drum-name\">${esc(DRUM_NAMES[di])}</span>\n        <span class=\"tdr-drum-pos\">${esc(dir)}</span>\n        <span class=\"tdr-drum-cal\" title=\"Calibrated: ${drum.calibrated}\">${cal}</span>\n        ${activeGlyph ? `<span class=\"tdr-glyph\">${esc(activeGlyph)}</span>` : ''}\n      </div>`;\n    }).join('');\n\n    // --- Audio ---\n    const audioName = this.lookupAudio(state.audio.sample, state.audio.loop);\n    const volLabel = VOLUME_DESCRIPTIONS[state.audio.volume as keyof typeof VOLUME_DESCRIPTIONS] ?? `Vol ${state.audio.volume}`;\n    const audioHtml = `<div class=\"tdr-audio\">\n      <span class=\"tdr-audio-name\">${esc(audioName)}</span>\n      ${state.audio.loop ? '<span class=\"tdr-audio-loop\">loop</span>' : ''}\n      <span class=\"tdr-audio-vol\">${esc(volLabel)}</span>\n    </div>`;\n\n    // --- Skull drop / beam ---\n    const skullHtml = skullDrop\n      ? `<div class=\"tdr-skull-drop\">\\uD83D\\uDC80 Skull Drop! (${state.beam.count})</div>`\n      : `<div class=\"tdr-beam-count\">Skulls: ${state.beam.count}${state.beam.fault ? ' \\u26A0 fault' : ''}</div>`;\n\n    // --- LED sequence override ---\n    const seqLabel = SEQUENCE_LABELS[state.led_sequence] ?? `0x${state.led_sequence.toString(16).padStart(2, '0')}`;\n    const seqHtml = state.led_sequence !== 0\n      ? `<div class=\"tdr-led-seq\">LED Sequence: ${esc(seqLabel)}</div>`\n      : '';\n\n    this.container.innerHTML = `\n      <div class=\"tdr-section tdr-leds\"><h3>LEDs</h3>${ledRows}</div>\n      <div class=\"tdr-section tdr-drums\"><h3>Drums</h3>${drumRows}</div>\n      <div class=\"tdr-section tdr-info\">\n        ${audioHtml}\n        ${skullHtml}\n        ${seqHtml}\n      </div>\n    `;\n  }\n\n  /**\n   * Find the glyph name on the north-facing side of a drum, if any.\n   * Only valid when the drum is calibrated.\n   */\n  private findGlyph(drumIndex: number, position: number, calibrated: boolean): string | null {\n    if (!calibrated) return null;\n    const level = DRUM_LEVELS[drumIndex];\n    const facing = COMPASS_FULL[position];\n    for (const glyph of Object.values(GLYPHS)) {\n      if (glyph.level === level && glyph.side === facing) {\n        return glyph.name;\n      }\n    }\n    return null;\n  }\n\n  /** Look up an audio sample name from TOWER_AUDIO_LIBRARY by value. */\n  private lookupAudio(sample: number, loop: boolean): string {\n    if (sample === 0 && !loop) return 'Silence';\n    return AUDIO_BY_VALUE.get(sample) ?? `Sample ${sample}`;\n  }\n}\n","import type { TowerState } from 'ultimatedarktower';\nimport type { TowerDisplayOptions, ITowerDisplay } from './types';\nimport { TowerStateReadout } from './TowerStateReadout';\n\n/**\n * TowerDisplay renders decoded tower state into a DOM container.\n *\n * @example\n * ```ts\n * const display = new TowerDisplay({\n *   container: document.getElementById('tower')!,\n * });\n * display.applyState(state);\n * ```\n */\nexport class TowerDisplay implements ITowerDisplay {\n  private readonly impl: TowerStateReadout;\n\n  constructor(options: TowerDisplayOptions) {\n    this.impl = new TowerStateReadout(options.container);\n  }\n\n  /** Update the display with a new decoded tower state. */\n  applyState(state: TowerState): void {\n    this.impl.applyState(state);\n  }\n\n  /** Reset the display to its idle/waiting state. */\n  showIdle(): void {\n    this.impl.showIdle();\n  }\n\n  /** Remove all rendered DOM content and reset internal state. */\n  dispose(): void {\n    this.impl.dispose();\n  }\n}\n"],"names":["injected","styleElement","CSS","injectStyles","COMPASS","COMPASS_FULL","DRUM_NAMES","DRUM_LEVELS","esc","str","EFFECT_LABELS","LIGHT_EFFECTS","SEQUENCE_LABELS","TOWER_LIGHT_SEQUENCES","name","val","AUDIO_BY_VALUE","TOWER_AUDIO_LIBRARY","entry","TowerStateReadout","container","state","skullDrop","ledRows","layer","li","layerName","LAYER_TO_POSITION","lights","light","ji","eff","dir","LIGHT_INDEX_TO_DIRECTION","drumRows","drum","di","cal","activeGlyph","audioName","volLabel","VOLUME_DESCRIPTIONS","audioHtml","skullHtml","seqLabel","seqHtml","drumIndex","position","calibrated","level","facing","glyph","GLYPHS","sample","loop","TowerDisplay","options"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { TowerDisplay } from './TowerDisplay';
+export { TowerStateReadout } from './TowerStateReadout';
+export type { TowerDisplayOptions, ITowerDisplay } from './types';

package/dist/index.esm.js

@@ -0,0 +1,275 @@
+import { LIGHT_EFFECTS as n, TOWER_LIGHT_SEQUENCES as k, TOWER_AUDIO_LIBRARY as L, LAYER_TO_POSITION as _, LIGHT_INDEX_TO_DIRECTION as w, VOLUME_DESCRIPTIONS as T, GLYPHS as O } from "ultimatedarktower";
+let g = !1, f = null;
+const x = `
+/* ── Tower Display Readout ── */
+
+@keyframes tdr-breathe {
+  0%, 100% { opacity: 0.3; }
+  50%      { opacity: 1; }
+}
+
+@keyframes tdr-flicker {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.2; }
+}
+
+@keyframes tdr-skull-flash {
+  0%   { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}
+
+.tdr-idle {
+  font-size: 0.85rem;
+  color: #888;
+  font-style: italic;
+}
+
+.tdr-section h3 {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #888;
+  margin: 0.6rem 0 0.3rem;
+}
+
+/* ── LED Grid ── */
+
+.tdr-layer {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.15rem 0;
+}
+
+.tdr-layer-label {
+  font-size: 0.65rem;
+  color: #888;
+  width: 7rem;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.tdr-led {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #333;
+  border: 1px solid #555;
+  display: inline-block;
+  transition: background 0.2s;
+}
+
+.tdr-led[data-effect="on"] {
+  background: #f0c040;
+  box-shadow: 0 0 6px rgba(240, 192, 64, 0.5);
+}
+
+.tdr-led[data-effect="breathe"] {
+  background: #80a0ff;
+  animation: tdr-breathe 2s ease-in-out infinite;
+}
+
+.tdr-led[data-effect="breathe-fast"] {
+  background: #80a0ff;
+  animation: tdr-breathe 0.8s ease-in-out infinite;
+}
+
+.tdr-led[data-effect="breathe-50"] {
+  background: #80a0ff;
+  animation: tdr-breathe 2s ease-in-out infinite;
+  opacity: 0.5;
+}
+
+.tdr-led[data-effect="flicker"] {
+  background: #ff6040;
+  animation: tdr-flicker 0.3s step-end infinite;
+}
+
+/* ── Drums ── */
+
+.tdr-drum {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3rem 0;
+}
+
+.tdr-drum-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.tdr-drum-pos {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #c0392b;
+}
+
+.tdr-drum-cal {
+  font-size: 0.75rem;
+  color: #888;
+}
+
+.tdr-glyph {
+  font-size: 0.7rem;
+  color: #f39c12;
+  font-style: italic;
+}
+
+/* ── Audio ── */
+
+.tdr-audio {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.tdr-audio-name {
+  color: #e8e8e8;
+  font-weight: 500;
+}
+
+.tdr-audio-loop {
+  font-size: 0.65rem;
+  color: #27ae60;
+  border: 1px solid #27ae60;
+  border-radius: 3px;
+  padding: 0 4px;
+}
+
+.tdr-audio-vol {
+  font-size: 0.65rem;
+  color: #888;
+}
+
+/* ── Skull / Beam ── */
+
+.tdr-skull-drop {
+  color: #e74c3c;
+  font-weight: 700;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  animation: tdr-skull-flash 0.6s ease-out;
+}
+
+.tdr-beam-count {
+  font-size: 0.8rem;
+  color: #888;
+  margin-top: 0.5rem;
+}
+
+/* ── LED Sequence Override ── */
+
+.tdr-led-seq {
+  font-size: 0.75rem;
+  color: #f39c12;
+  margin-top: 0.3rem;
+}
+`;
+function C() {
+  g || (f = document.createElement("style"), f.textContent = x, document.head.appendChild(f), g = !0);
+}
+const D = ["N", "E", "S", "W"], I = ["north", "east", "south", "west"], z = ["Top", "Middle", "Bottom"], A = ["top", "middle", "bottom"];
+function t(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+const R = {
+  [n.off]: "off",
+  [n.on]: "on",
+  [n.breathe]: "breathe",
+  [n.breatheFast]: "breathe-fast",
+  [n.breathe50percent]: "breathe-50",
+  [n.flicker]: "flicker"
+}, B = Object.fromEntries(
+  Object.entries(k).map(([r, e]) => [e, r])
+), M = new Map(
+  Object.values(L).map((r) => [r.value, r.name])
+);
+class q {
+  constructor(e) {
+    this.prevBeamCount = null, this.container = e, C(), this.showIdle();
+  }
+  /** Update the display with a new decoded tower state. */
+  applyState(e) {
+    const o = this.prevBeamCount !== null && e.beam.count > this.prevBeamCount;
+    this.prevBeamCount = e.beam.count, this.render(e, o);
+  }
+  /** Reset the display to its idle/waiting state. */
+  showIdle() {
+    this.container.innerHTML = '<p class="tdr-idle">Waiting for tower state…</p>';
+  }
+  /** Remove all rendered DOM content and reset internal state. */
+  dispose() {
+    this.container.innerHTML = "", this.prevBeamCount = null;
+  }
+  render(e, o) {
+    const c = e.layer.map((a, s) => {
+      const d = _[s] ?? `L${s}`, m = a.light.map((l, h) => {
+        const b = R[l.effect] ?? "off", $ = w[h] ?? h;
+        return `<span class="tdr-led" data-effect="${t(b)}" title="${t(`${d} ${$}: ${b}${l.loop ? " (loop)" : ""}`)}"></span>`;
+      }).join("");
+      return `<div class="tdr-layer"><span class="tdr-layer-label">${t(d)}</span>${m}</div>`;
+    }).join(""), p = e.drum.map((a, s) => {
+      const d = D[a.position] ?? "?", m = a.calibrated ? "✓" : "—", l = this.findGlyph(s, a.position, a.calibrated);
+      return `<div class="tdr-drum">
+        <span class="tdr-drum-name">${t(z[s])}</span>
+        <span class="tdr-drum-pos">${t(d)}</span>
+        <span class="tdr-drum-cal" title="Calibrated: ${a.calibrated}">${m}</span>
+        ${l ? `<span class="tdr-glyph">${t(l)}</span>` : ""}
+      </div>`;
+    }).join(""), u = this.lookupAudio(e.audio.sample, e.audio.loop), i = T[e.audio.volume] ?? `Vol ${e.audio.volume}`, v = `<div class="tdr-audio">
+      <span class="tdr-audio-name">${t(u)}</span>
+      ${e.audio.loop ? '<span class="tdr-audio-loop">loop</span>' : ""}
+      <span class="tdr-audio-vol">${t(i)}</span>
+    </div>`, y = o ? `<div class="tdr-skull-drop">💀 Skull Drop! (${e.beam.count})</div>` : `<div class="tdr-beam-count">Skulls: ${e.beam.count}${e.beam.fault ? " ⚠ fault" : ""}</div>`, S = B[e.led_sequence] ?? `0x${e.led_sequence.toString(16).padStart(2, "0")}`, E = e.led_sequence !== 0 ? `<div class="tdr-led-seq">LED Sequence: ${t(S)}</div>` : "";
+    this.container.innerHTML = `
+      <div class="tdr-section tdr-leds"><h3>LEDs</h3>${c}</div>
+      <div class="tdr-section tdr-drums"><h3>Drums</h3>${p}</div>
+      <div class="tdr-section tdr-info">
+        ${v}
+        ${y}
+        ${E}
+      </div>
+    `;
+  }
+  /**
+   * Find the glyph name on the north-facing side of a drum, if any.
+   * Only valid when the drum is calibrated.
+   */
+  findGlyph(e, o, c) {
+    if (!c) return null;
+    const p = A[e], u = I[o];
+    for (const i of Object.values(O))
+      if (i.level === p && i.side === u)
+        return i.name;
+    return null;
+  }
+  /** Look up an audio sample name from TOWER_AUDIO_LIBRARY by value. */
+  lookupAudio(e, o) {
+    return e === 0 && !o ? "Silence" : M.get(e) ?? `Sample ${e}`;
+  }
+}
+class N {
+  constructor(e) {
+    this.impl = new q(e.container);
+  }
+  /** Update the display with a new decoded tower state. */
+  applyState(e) {
+    this.impl.applyState(e);
+  }
+  /** Reset the display to its idle/waiting state. */
+  showIdle() {
+    this.impl.showIdle();
+  }
+  /** Remove all rendered DOM content and reset internal state. */
+  dispose() {
+    this.impl.dispose();
+  }
+}
+export {
+  N as TowerDisplay,
+  q as TowerStateReadout
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/styles.ts","../src/TowerStateReadout.ts","../src/TowerDisplay.ts"],"sourcesContent":["let injected = false;\nlet styleElement: HTMLStyleElement | null = null;\n\nconst CSS = `\n/* ── Tower Display Readout ── */\n\n@keyframes tdr-breathe {\n  0%, 100% { opacity: 0.3; }\n  50%      { opacity: 1; }\n}\n\n@keyframes tdr-flicker {\n  0%, 100% { opacity: 1; }\n  50%      { opacity: 0.2; }\n}\n\n@keyframes tdr-skull-flash {\n  0%   { transform: scale(1.3); }\n  100% { transform: scale(1); }\n}\n\n.tdr-idle {\n  font-size: 0.85rem;\n  color: #888;\n  font-style: italic;\n}\n\n.tdr-section h3 {\n  font-size: 0.65rem;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: #888;\n  margin: 0.6rem 0 0.3rem;\n}\n\n/* ── LED Grid ── */\n\n.tdr-layer {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.15rem 0;\n}\n\n.tdr-layer-label {\n  font-size: 0.65rem;\n  color: #888;\n  width: 7rem;\n  text-align: right;\n  flex-shrink: 0;\n}\n\n.tdr-led {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #333;\n  border: 1px solid #555;\n  display: inline-block;\n  transition: background 0.2s;\n}\n\n.tdr-led[data-effect=\"on\"] {\n  background: #f0c040;\n  box-shadow: 0 0 6px rgba(240, 192, 64, 0.5);\n}\n\n.tdr-led[data-effect=\"breathe\"] {\n  background: #80a0ff;\n  animation: tdr-breathe 2s ease-in-out infinite;\n}\n\n.tdr-led[data-effect=\"breathe-fast\"] {\n  background: #80a0ff;\n  animation: tdr-breathe 0.8s ease-in-out infinite;\n}\n\n.tdr-led[data-effect=\"breathe-50\"] {\n  background: #80a0ff;\n  animation: tdr-breathe 2s ease-in-out infinite;\n  opacity: 0.5;\n}\n\n.tdr-led[data-effect=\"flicker\"] {\n  background: #ff6040;\n  animation: tdr-flicker 0.3s step-end infinite;\n}\n\n/* ── Drums ── */\n\n.tdr-drum {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.3rem 0;\n}\n\n.tdr-drum-name {\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: #e8e8e8;\n}\n\n.tdr-drum-pos {\n  font-size: 0.85rem;\n  font-weight: 700;\n  color: #c0392b;\n}\n\n.tdr-drum-cal {\n  font-size: 0.75rem;\n  color: #888;\n}\n\n.tdr-glyph {\n  font-size: 0.7rem;\n  color: #f39c12;\n  font-style: italic;\n}\n\n/* ── Audio ── */\n\n.tdr-audio {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8rem;\n}\n\n.tdr-audio-name {\n  color: #e8e8e8;\n  font-weight: 500;\n}\n\n.tdr-audio-loop {\n  font-size: 0.65rem;\n  color: #27ae60;\n  border: 1px solid #27ae60;\n  border-radius: 3px;\n  padding: 0 4px;\n}\n\n.tdr-audio-vol {\n  font-size: 0.65rem;\n  color: #888;\n}\n\n/* ── Skull / Beam ── */\n\n.tdr-skull-drop {\n  color: #e74c3c;\n  font-weight: 700;\n  font-size: 0.9rem;\n  margin-top: 0.5rem;\n  animation: tdr-skull-flash 0.6s ease-out;\n}\n\n.tdr-beam-count {\n  font-size: 0.8rem;\n  color: #888;\n  margin-top: 0.5rem;\n}\n\n/* ── LED Sequence Override ── */\n\n.tdr-led-seq {\n  font-size: 0.75rem;\n  color: #f39c12;\n  margin-top: 0.3rem;\n}\n`;\n\n/**\n * Injects the tower display readout stylesheet into `document.head`.\n * Safe to call multiple times — the `<style>` tag is only appended once.\n */\nexport function injectStyles(): void {\n  if (injected) return;\n  styleElement = document.createElement('style');\n  styleElement.textContent = CSS;\n  document.head.appendChild(styleElement);\n  injected = true;\n}\n\n/**\n * Reset the injection guard (for testing only).\n * @internal\n */\nexport function _resetStyleInjection(): void {\n  if (styleElement) {\n    styleElement.remove();\n    styleElement = null;\n  }\n  injected = false;\n}\n","import {\n  type TowerState,\n  GLYPHS,\n  TOWER_AUDIO_LIBRARY,\n  TOWER_LIGHT_SEQUENCES,\n  VOLUME_DESCRIPTIONS,\n  LAYER_TO_POSITION,\n  LIGHT_INDEX_TO_DIRECTION,\n  LIGHT_EFFECTS,\n} from 'ultimatedarktower';\nimport type { ITowerDisplay } from './types';\nimport { injectStyles } from './styles';\n\nconst COMPASS = ['N', 'E', 'S', 'W'] as const;\nconst COMPASS_FULL = ['north', 'east', 'south', 'west'] as const;\nconst DRUM_NAMES = ['Top', 'Middle', 'Bottom'] as const;\nconst DRUM_LEVELS = ['top', 'middle', 'bottom'] as const;\n\n/** Escape HTML special characters to prevent XSS when interpolating into innerHTML. */\nfunction esc(str: string): string {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\n// Build reverse lookup maps once at module level\nconst EFFECT_LABELS: Record<number, string> = {\n  [LIGHT_EFFECTS.off]: 'off',\n  [LIGHT_EFFECTS.on]: 'on',\n  [LIGHT_EFFECTS.breathe]: 'breathe',\n  [LIGHT_EFFECTS.breatheFast]: 'breathe-fast',\n  [LIGHT_EFFECTS.breathe50percent]: 'breathe-50',\n  [LIGHT_EFFECTS.flicker]: 'flicker',\n};\n\nconst SEQUENCE_LABELS: Record<number, string> = Object.fromEntries(\n  Object.entries(TOWER_LIGHT_SEQUENCES).map(([name, val]) => [val, name]),\n);\n\nconst AUDIO_BY_VALUE: Map<number, string> = new Map(\n  Object.values(TOWER_AUDIO_LIBRARY).map((entry) => [entry.value, entry.name]),\n);\n\n/**\n * Core DOM renderer for tower state.\n *\n * Renders a live readout of LED grid, drum positions, audio state,\n * skull drops, and LED sequence overrides.\n *\n * @example\n * ```ts\n * const readout = new TowerStateReadout(document.getElementById('tower')!);\n * readout.applyState(state);\n * ```\n */\nexport class TowerStateReadout implements ITowerDisplay {\n  private readonly container: HTMLElement;\n  private prevBeamCount: number | null = null;\n\n  constructor(container: HTMLElement) {\n    this.container = container;\n    injectStyles();\n    this.showIdle();\n  }\n\n  /** Update the display with a new decoded tower state. */\n  applyState(state: TowerState): void {\n    const skullDrop = this.prevBeamCount !== null && state.beam.count > this.prevBeamCount;\n    this.prevBeamCount = state.beam.count;\n    this.render(state, skullDrop);\n  }\n\n  /** Reset the display to its idle/waiting state. */\n  showIdle(): void {\n    this.container.innerHTML = '<p class=\"tdr-idle\">Waiting for tower state\\u2026</p>';\n  }\n\n  /** Remove all rendered DOM content and reset internal state. */\n  dispose(): void {\n    this.container.innerHTML = '';\n    this.prevBeamCount = null;\n  }\n\n  private render(state: TowerState, skullDrop: boolean): void {\n    // --- LEDs: 6 layers × 4 lights ---\n    const ledRows = state.layer.map((layer, li) => {\n      const layerName = LAYER_TO_POSITION[li as keyof typeof LAYER_TO_POSITION] ?? `L${li}`;\n      const lights = layer.light.map((light, ji) => {\n        const eff = EFFECT_LABELS[light.effect] ?? 'off';\n        const dir = LIGHT_INDEX_TO_DIRECTION[ji as keyof typeof LIGHT_INDEX_TO_DIRECTION] ?? ji;\n        return `<span class=\"tdr-led\" data-effect=\"${esc(eff)}\" title=\"${esc(`${layerName} ${dir}: ${eff}${light.loop ? ' (loop)' : ''}`)}\"></span>`;\n      }).join('');\n      return `<div class=\"tdr-layer\"><span class=\"tdr-layer-label\">${esc(layerName)}</span>${lights}</div>`;\n    }).join('');\n\n    // --- Drums ---\n    const drumRows = state.drum.map((drum, di) => {\n      const dir = COMPASS[drum.position] ?? '?';\n      const cal = drum.calibrated ? '\\u2713' : '\\u2014';\n      const activeGlyph = this.findGlyph(di, drum.position, drum.calibrated);\n      return `<div class=\"tdr-drum\">\n        <span class=\"tdr-drum-name\">${esc(DRUM_NAMES[di])}</span>\n        <span class=\"tdr-drum-pos\">${esc(dir)}</span>\n        <span class=\"tdr-drum-cal\" title=\"Calibrated: ${drum.calibrated}\">${cal}</span>\n        ${activeGlyph ? `<span class=\"tdr-glyph\">${esc(activeGlyph)}</span>` : ''}\n      </div>`;\n    }).join('');\n\n    // --- Audio ---\n    const audioName = this.lookupAudio(state.audio.sample, state.audio.loop);\n    const volLabel = VOLUME_DESCRIPTIONS[state.audio.volume as keyof typeof VOLUME_DESCRIPTIONS] ?? `Vol ${state.audio.volume}`;\n    const audioHtml = `<div class=\"tdr-audio\">\n      <span class=\"tdr-audio-name\">${esc(audioName)}</span>\n      ${state.audio.loop ? '<span class=\"tdr-audio-loop\">loop</span>' : ''}\n      <span class=\"tdr-audio-vol\">${esc(volLabel)}</span>\n    </div>`;\n\n    // --- Skull drop / beam ---\n    const skullHtml = skullDrop\n      ? `<div class=\"tdr-skull-drop\">\\uD83D\\uDC80 Skull Drop! (${state.beam.count})</div>`\n      : `<div class=\"tdr-beam-count\">Skulls: ${state.beam.count}${state.beam.fault ? ' \\u26A0 fault' : ''}</div>`;\n\n    // --- LED sequence override ---\n    const seqLabel = SEQUENCE_LABELS[state.led_sequence] ?? `0x${state.led_sequence.toString(16).padStart(2, '0')}`;\n    const seqHtml = state.led_sequence !== 0\n      ? `<div class=\"tdr-led-seq\">LED Sequence: ${esc(seqLabel)}</div>`\n      : '';\n\n    this.container.innerHTML = `\n      <div class=\"tdr-section tdr-leds\"><h3>LEDs</h3>${ledRows}</div>\n      <div class=\"tdr-section tdr-drums\"><h3>Drums</h3>${drumRows}</div>\n      <div class=\"tdr-section tdr-info\">\n        ${audioHtml}\n        ${skullHtml}\n        ${seqHtml}\n      </div>\n    `;\n  }\n\n  /**\n   * Find the glyph name on the north-facing side of a drum, if any.\n   * Only valid when the drum is calibrated.\n   */\n  private findGlyph(drumIndex: number, position: number, calibrated: boolean): string | null {\n    if (!calibrated) return null;\n    const level = DRUM_LEVELS[drumIndex];\n    const facing = COMPASS_FULL[position];\n    for (const glyph of Object.values(GLYPHS)) {\n      if (glyph.level === level && glyph.side === facing) {\n        return glyph.name;\n      }\n    }\n    return null;\n  }\n\n  /** Look up an audio sample name from TOWER_AUDIO_LIBRARY by value. */\n  private lookupAudio(sample: number, loop: boolean): string {\n    if (sample === 0 && !loop) return 'Silence';\n    return AUDIO_BY_VALUE.get(sample) ?? `Sample ${sample}`;\n  }\n}\n","import type { TowerState } from 'ultimatedarktower';\nimport type { TowerDisplayOptions, ITowerDisplay } from './types';\nimport { TowerStateReadout } from './TowerStateReadout';\n\n/**\n * TowerDisplay renders decoded tower state into a DOM container.\n *\n * @example\n * ```ts\n * const display = new TowerDisplay({\n *   container: document.getElementById('tower')!,\n * });\n * display.applyState(state);\n * ```\n */\nexport class TowerDisplay implements ITowerDisplay {\n  private readonly impl: TowerStateReadout;\n\n  constructor(options: TowerDisplayOptions) {\n    this.impl = new TowerStateReadout(options.container);\n  }\n\n  /** Update the display with a new decoded tower state. */\n  applyState(state: TowerState): void {\n    this.impl.applyState(state);\n  }\n\n  /** Reset the display to its idle/waiting state. */\n  showIdle(): void {\n    this.impl.showIdle();\n  }\n\n  /** Remove all rendered DOM content and reset internal state. */\n  dispose(): void {\n    this.impl.dispose();\n  }\n}\n"],"names":["injected","styleElement","CSS","injectStyles","COMPASS","COMPASS_FULL","DRUM_NAMES","DRUM_LEVELS","esc","str","EFFECT_LABELS","LIGHT_EFFECTS","SEQUENCE_LABELS","TOWER_LIGHT_SEQUENCES","name","val","AUDIO_BY_VALUE","TOWER_AUDIO_LIBRARY","entry","TowerStateReadout","container","state","skullDrop","ledRows","layer","li","layerName","LAYER_TO_POSITION","lights","light","ji","eff","dir","LIGHT_INDEX_TO_DIRECTION","drumRows","drum","di","cal","activeGlyph","audioName","volLabel","VOLUME_DESCRIPTIONS","audioHtml","skullHtml","seqLabel","seqHtml","drumIndex","position","calibrated","level","facing","glyph","GLYPHS","sample","loop","TowerDisplay","options"],"mappings":"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"}

package/dist/styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Injects the tower display readout stylesheet into `document.head`.
+ * Safe to call multiple times — the `<style>` tag is only appended once.
+ */
+export declare function injectStyles(): void;
+/**
+ * Reset the injection guard (for testing only).
+ * @internal
+ */
+export declare function _resetStyleInjection(): void;

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+import type { TowerState } from 'ultimatedarktower';
+/** Configuration options for TowerDisplay. */
+export interface TowerDisplayOptions {
+    /** DOM element to render into. */
+    container: HTMLElement;
+}
+/** Public interface for all display implementations. */
+export interface ITowerDisplay {
+    /** Update the display with a new decoded tower state. */
+    applyState(state: TowerState): void;
+    /** Reset the display to its idle/waiting state. */
+    showIdle(): void;
+    /** Remove all rendered DOM content and reset internal state. */
+    dispose(): void;
+}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "ultimatedarktowerdisplay",
+  "version": "0.1.0",
+  "description": "DOM-based state readout for the Ultimate Dark Tower board game.",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "build:example": "vite build --config vite.config.example.ts",
+    "dev": "vite",
+    "dev:example": "vite --open /example/index.html",
+    "test": "jest --config jest.config.cjs",
+    "test:watch": "jest --config jest.config.cjs --watch",
+    "test:coverage": "jest --config jest.config.cjs --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint 'src/**/*.ts' 'tests/**/*.ts'",
+    "lint:fix": "eslint 'src/**/*.ts' 'tests/**/*.ts' --fix",
+    "format": "prettier --write 'src/**/*.ts' 'tests/**/*.ts'",
+    "clean": "rm -rf dist dist-example coverage",
+    "ci": "npm run typecheck && npm run lint && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "ultimatedarktower": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.4.0",
+    "eslint": "^8.57.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "prettier": "^3.2.0",
+    "ultimatedarktower": "^2.1.0"
+  },
+  "keywords": [
+    "ReturnToDarkTower",
+    "BoardGame",
+    "display",
+    "tower-state",
+    "DOM",
+    "UltimateDarkTower"
+  ],
+  "author": "ChessMess",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ChessMess/UltimateDarkTowerDisplay.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ChessMess/UltimateDarkTowerDisplay/issues"
+  },
+  "homepage": "https://github.com/ChessMess/UltimateDarkTowerDisplay#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=7.0.0"
+  }
+}