Click a map marker to see its art at full size
Reuses the lightbox already built for the character gallery. Clicking any location still triggers the visit as before, but now also probes for that location's art and, if it exists, pops it up full-size with a caption — no modal for locations that don't have art yet, the visit still happens either way. Also added a standing "about this place" blurb per location (map.ts's new LOCATION_INFO), shown under the art. This is distinct from LOCATION_VISITS' randomized per-visit outcome text in engine.ts, which still changes every time — the blurb is a fixed description of the place itself, not what just happened there. Verified via headless browser: clicking Turning Torso's marker pops the lightbox with its real art, label, and blurb, no console errors. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
d2a8b71ffc
commit
1aa9eb2ce8
@@ -191,6 +191,7 @@ export function initUI(
|
||||
<button id="lightbox-close" class="lightbox-close" aria-label="Stäng">✕</button>
|
||||
<img id="lightbox-img" alt="">
|
||||
<div id="lightbox-caption" class="lightbox-caption"></div>
|
||||
<p id="lightbox-blurb" class="lightbox-blurb"></p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -237,6 +238,7 @@ export function initUI(
|
||||
const lightbox = document.getElementById('lightbox')!;
|
||||
const lightboxImg = document.getElementById('lightbox-img') as HTMLImageElement;
|
||||
const lightboxCaption = document.getElementById('lightbox-caption')!;
|
||||
const lightboxBlurb = document.getElementById('lightbox-blurb')!;
|
||||
document.getElementById('characters-grid')!.addEventListener('click', (e) => {
|
||||
const portrait = (e.target as Element).closest('.character-card:not(.locked) .character-portrait');
|
||||
if (!portrait) return;
|
||||
@@ -245,6 +247,7 @@ export function initUI(
|
||||
if (!card || !img?.src) return;
|
||||
lightboxImg.src = img.src;
|
||||
lightboxCaption.textContent = card.querySelector('.character-name')?.textContent ?? '';
|
||||
lightboxBlurb.textContent = '';
|
||||
lightbox.classList.add('visible');
|
||||
});
|
||||
document.getElementById('lightbox-close')!.addEventListener('click', () => lightbox.classList.remove('visible'));
|
||||
@@ -518,6 +521,26 @@ function showOverlay(state: State): void {
|
||||
}
|
||||
}
|
||||
|
||||
// Called on every map marker click, alongside the actual visit — a way to
|
||||
// see the location's art at a readable size instead of the 40px tooltip
|
||||
// thumbnail. Probes the image first so a location with no art yet doesn't
|
||||
// pop an empty modal; the visit itself always happens regardless.
|
||||
export function showLocationArt(id: string, label: string, blurb: string): void {
|
||||
const src = `/img/locations/${id}.png`;
|
||||
const probe = new Image();
|
||||
probe.onload = () => {
|
||||
const lightbox = document.getElementById('lightbox')!;
|
||||
const lightboxImg = document.getElementById('lightbox-img') as HTMLImageElement;
|
||||
const lightboxCaption = document.getElementById('lightbox-caption')!;
|
||||
const lightboxBlurb = document.getElementById('lightbox-blurb')!;
|
||||
lightboxImg.src = src;
|
||||
lightboxCaption.textContent = label;
|
||||
lightboxBlurb.textContent = blurb;
|
||||
lightbox.classList.add('visible');
|
||||
};
|
||||
probe.src = src;
|
||||
}
|
||||
|
||||
export function setPausedUI(paused: boolean): void {
|
||||
const btn = document.getElementById('pause-btn')!;
|
||||
btn.textContent = paused ? 'Fortsätt' : 'Pausa';
|
||||
|
||||
Reference in New Issue
Block a user