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:
@@ -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);
|
||||
Reference in New Issue
Block a user