ultimatedarktowerdisplay 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -6,6 +6,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-04-15
+
+### Fixed
+
+- `TowerSideView` now calls `injectStyles()` so side-view-only mode gets CSS
+- JSDoc for `TowerDisplayOptions.renderers` now correctly documents the default as `['readout', 'side-view']`
+
+### Added
+
+- Tests for seal overlay injection, double-dispose safety, and multi-button side selection
+- `applySeals(brokenSeals: SealIdentifier[])` method on `TowerDisplay`, `TowerSideView`, and `ITowerDisplay` — hides seal SVG overlays for broken seals on the currently displayed side; re-evaluates when switching sides
+- `SealIdentifier` re-exported from the package public API
+- `clickToToggleSeals` option on `TowerDisplayOptions` (default `true`) — clicking a seal in the side view toggles its visibility independently of game state; user-toggled state and game-broken state are merged so either alone can hide a seal; toggle state is per-side and is cleared on `dispose()`
+- `clickToToggleSeals` public property on `TowerSideView` for consumers using the class directly
+- Console logging on seal click: logs the side, level, and new visibility state (or notes when toggle is disabled)
+
 ## [0.1.0] - 2026-03-22
 
 ### Added

package/README.md

@@ -2,6 +2,8 @@
 
 DOM-based visual readout for decoded [Ultimate Dark Tower](https://github.com/ChessMess/ultimatedarktower) tower state.
 
+**[Live Demo](https://chessmess.github.io/UltimateDarkTowerDisplay/)**
+
 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
@@ -30,13 +32,13 @@ npm install ultimatedarktowerdisplay ultimatedarktower
 ## Quick Start
 
 ```ts
-import { TowerDisplay } from "ultimatedarktowerdisplay";
-import { createDefaultTowerState } from "ultimatedarktower";
+import { TowerDisplay } from 'ultimatedarktowerdisplay';
+import { createDefaultTowerState } from 'ultimatedarktower';
 
-const container = document.getElementById("tower");
+const container = document.getElementById('tower');
 
 if (!container) {
-  throw new Error("Missing #tower container");
+  throw new Error('Missing #tower container');
 }
 
 const display = new TowerDisplay({ container });
@@ -72,17 +74,13 @@ In most applications the flow looks like this:
 Example with a manually adjusted state:
 
 ```ts
-import { TowerDisplay } from "ultimatedarktowerdisplay";
-import {
-  createDefaultTowerState,
-  LIGHT_EFFECTS,
-  TOWER_AUDIO_LIBRARY,
-} from "ultimatedarktower";
+import { TowerDisplay } from 'ultimatedarktowerdisplay';
+import { createDefaultTowerState, LIGHT_EFFECTS, TOWER_AUDIO_LIBRARY } from 'ultimatedarktower';
 
-const container = document.getElementById("tower");
+const container = document.getElementById('tower');
 
 if (!container) {
-  throw new Error("Missing #tower container");
+  throw new Error('Missing #tower container');
 }
 
 const display = new TowerDisplay({ container });
@@ -133,7 +131,7 @@ type TowerState = {
 For a valid starting point, prefer:
 
 ```ts
-import { createDefaultTowerState } from "ultimatedarktower";
+import { createDefaultTowerState } from 'ultimatedarktower';
 
 const state = createDefaultTowerState();
 ```
@@ -151,36 +149,58 @@ The example page in [example/index.html](./example/index.html) follows this patt
 
 ### `TowerDisplay`
 
-Primary entry point. Wraps `TowerStateReadout` with an options object.
+Primary entry point. Composes one or both renderers into a container.
 
 ```ts
 new TowerDisplay(options: TowerDisplayOptions)
 ```
 
-| Option      | Type          | Description                                        |
-| ----------- | ------------- | -------------------------------------------------- |
-| `container` | `HTMLElement` | DOM element that will receive the rendered readout |
+| Option               | Type                             | Default                    | Description                                                                                             |
+| -------------------- | -------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `container`          | `HTMLElement`                    | —                          | DOM element that will receive the rendered output                                                       |
+| `renderers`          | `RendererType \| RendererType[]` | `['readout', 'side-view']` | Which renderer(s) to show: `'readout'`, `'side-view'`, or both                                          |
+| `onSealClick`        | `(seal: SealIdentifier) => void` | —                          | Called whenever the user clicks a seal overlay in the side view                                         |
+| `clickToToggleSeals` | `boolean`                        | `true`                     | When true, clicking a seal toggles its visibility independent of game state. Set to `false` to disable. |
 
 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
+- `applyState(state: TowerState): void` — update all renderers with a new decoded tower state
+- `applySeals(brokenSeals: SealIdentifier[]): void` — hide seal overlays for broken seals; pass the current list of broken seals each time it changes
+- `showIdle(): void` — reset all renderers to their idle placeholder
+- `dispose(): void` — remove all rendered DOM and reset internal state
+
+### `TowerSideView`
+
+SVG side-view renderer. Shows a rotatable view of one tower face with seal overlays and LED markers. Can be used standalone or composed via `TowerDisplay`.
+
+```ts
+const view = new TowerSideView(container);
+view.onSealClick = (seal) => console.log(seal);
+view.clickToToggleSeals = true; // default
+```
+
+| Property             | Type                             | Default | Description                                                  |
+| -------------------- | -------------------------------- | ------- | ------------------------------------------------------------ |
+| `onSealClick`        | `(seal: SealIdentifier) => void` | —       | Callback fired on every seal click                           |
+| `clickToToggleSeals` | `boolean`                        | `true`  | Enables built-in click-to-toggle visibility on seal overlays |
 
 ### `TowerStateReadout`
 
-Lower-level renderer for callers that want to pass the container directly.
+Text-based readout renderer. Lower-level; takes a container directly.
 
 ```ts
 new TowerStateReadout(container: HTMLElement)
 ```
 
-It exposes the same methods as `TowerDisplay`.
+Exposes the same methods as `TowerDisplay` (`applyState`, `applySeals`, `showIdle`, `dispose`).
 
 ### Exported Types
 
-- `ITowerDisplay` common interface implemented by both classes
-- `TowerDisplayOptions` configuration object for `TowerDisplay`
+- `ITowerDisplay` — common interface implemented by all renderers
+- `TowerDisplayOptions` — configuration object for `TowerDisplay`
+- `RendererType` — `'readout' | 'side-view'`
+- `TowerSide` — `'north' | 'east' | 'south' | 'west'`
+- `SealIdentifier` — `{ side: TowerSide, level: TowerLevels }`
 
 `ultimatedarktowerdisplay` does not re-export tower protocol constants or helpers from `ultimatedarktower`.
 

package/dist/TowerDisplay.d.ts

@@ -1,4 +1,4 @@
-import type { TowerState } from 'ultimatedarktower';
+import type { TowerState, SealIdentifier } from 'ultimatedarktower';
 import type { TowerDisplayOptions, ITowerDisplay } from './types';
 /**
  * TowerDisplay renders decoded tower state into a DOM container.
@@ -7,15 +7,19 @@ import type { TowerDisplayOptions, ITowerDisplay } from './types';
  * ```ts
  * const display = new TowerDisplay({
  *   container: document.getElementById('tower')!,
+ *   renderers: ['readout', 'side-view'],
  * });
  * display.applyState(state);
  * ```
  */
 export declare class TowerDisplay implements ITowerDisplay {
-    private readonly impl;
+    private readonly renderers;
+    private readonly root;
     constructor(options: TowerDisplayOptions);
     /** Update the display with a new decoded tower state. */
     applyState(state: TowerState): void;
+    /** Update seal visibility — pass the current list of broken seals. */
+    applySeals(brokenSeals: SealIdentifier[]): void;
     /** Reset the display to its idle/waiting state. */
     showIdle(): void;
     /** Remove all rendered DOM content and reset internal state. */

package/dist/TowerSideView.d.ts

@@ -0,0 +1,32 @@
+import { type TowerState, type SealIdentifier } from 'ultimatedarktower';
+import type { ITowerDisplay } from './types';
+export declare class TowerSideView implements ITowerDisplay {
+    private readonly container;
+    private wrapper;
+    private currentSide;
+    private latestState;
+    private buttons;
+    private ledNodes;
+    private sealNodes;
+    private latestBrokenSeals;
+    /** Optional callback fired when a user clicks a seal overlay. */
+    onSealClick?: (seal: SealIdentifier) => void;
+    /**
+     * When true (the default), clicking a seal toggles its visibility independently
+     * of game state. Set to false to disable the built-in toggle.
+     */
+    clickToToggleSeals: boolean;
+    private userToggledSeals;
+    constructor(container: HTMLElement);
+    applyState(state: TowerState): void;
+    applySeals(brokenSeals: SealIdentifier[]): void;
+    showIdle(): void;
+    dispose(): void;
+    private detectSealSide;
+    private updateSealVisibility;
+    private build;
+    private injectSeals;
+    private cacheLedNodes;
+    private applyLedState;
+    private selectSide;
+}

package/dist/TowerStateReadout.d.ts

@@ -1,5 +1,5 @@
 import { type TowerState } from 'ultimatedarktower';
-import type { ITowerDisplay } from './types';
+import type { ITowerDisplay, SealIdentifier } from './types';
 /**
  * Core DOM renderer for tower state.
  *
@@ -18,6 +18,7 @@ export declare class TowerStateReadout implements ITowerDisplay {
     constructor(container: HTMLElement);
     /** Update the display with a new decoded tower state. */
     applyState(state: TowerState): void;
+    applySeals(_brokenSeals: SealIdentifier[]): void;
     /** Reset the display to its idle/waiting state. */
     showIdle(): void;
     /** Remove all rendered DOM content and reset internal state. */

package/dist/effectLabels.d.ts

@@ -0,0 +1 @@
+export declare const EFFECT_LABELS: Record<number, string>;