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
+29
View File
@@ -0,0 +1,29 @@
import { describe, it, expect, beforeEach } from 'vitest';
import '../../src/components/prop-viewer.js';
describe('<prop-viewer>', () => {
let el;
beforeEach(() => {
document.body.innerHTML = '';
el = document.createElement('prop-viewer');
document.body.appendChild(el);
});
it('starts hidden', () => {
expect(el.isOpen()).toBe(false);
expect(el.hasAttribute('hidden')).toBe(true);
});
it('shows an image when show() is called', () => {
el.show('/art/rain-pier.png', 'Pier in the rain');
expect(el.isOpen()).toBe(true);
const img = el.querySelector('[data-role=prop-img]');
expect(img.getAttribute('src')).toBe('/art/rain-pier.png');
});
it('dismisses when the overlay is clicked', () => {
el.show('/art/x.png', 'x');
el.querySelector('[data-role=overlay]').click();
expect(el.isOpen()).toBe(false);
});
});