feat: <prop-viewer> fullscreen prop overlay

Implements fullscreen image overlay component for displaying art to players.
Methods: show(src, label), dismiss(), isOpen(). Starts hidden. Clicking
overlay dismisses. Strict TDD: 3 tests passing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-20 15:30:56 +01:00
co-authored by Claude Opus 4.8
parent e58d833ba2
commit 9a5e4c4ce4
2 changed files with 51 additions and 0 deletions
+22
View File
@@ -0,0 +1,22 @@
export class PropViewer extends HTMLElement {
constructor() { super(); this._src = ''; this._label = ''; }
connectedCallback() { if (!this.hasAttribute('hidden')) this.setAttribute('hidden', ''); this.render(); }
isOpen() { return !this.hasAttribute('hidden'); }
show(src, label = '') {
this._src = src; this._label = label;
this.removeAttribute('hidden');
this.render();
}
dismiss() { this.setAttribute('hidden', ''); }
render() {
this.innerHTML = `
<div class="prop-overlay" data-role="overlay">
<img class="prop-img" data-role="prop-img" src="${this._src}" alt="${this._label}" />
</div>`;
this.querySelector('[data-role=overlay]').addEventListener('click', () => this.dismiss());
}
}
customElements.define('prop-viewer', PropViewer);