Fix map overlay icons not showing in area view

Two issues prevented interactive map markers from appearing:

1. overflow:hidden on .imap-container clipped markers and popups that
   extended beyond the container boundary. Moved border-radius to the
   img element instead so the map image stays rounded without clipping
   overlay elements.

2. innerHTML += pattern in renderMapDetail destroyed and recreated
   all DOM elements (including the map img) on each append, aborting
   image loads repeatedly. Replaced with insertAdjacentHTML which
   appends without destroying existing elements, so the img element
   and its load event survive the section-building process.

https://claude.ai/code/session_016Boc373F7gpM9ED6L5LE9U
This commit is contained in:
Claude 2026-03-21 19:42:29 +00:00
parent 033b98b1d1
commit 3f817404d4
No known key found for this signature in database
2 changed files with 11 additions and 11 deletions

View File

@ -2515,24 +2515,24 @@ async function renderMapDetail(dirName) {
// ═══════════════════════════════════════════
// TIER 1: AREA — about the place itself
// ═══════════════════════════════════════════
sections.innerHTML += `<div class="section-tier">Area</div>`;
sections.innerHTML += buildMapPreviewSection(map);
sections.innerHTML += buildPropertiesSection(map);
sections.innerHTML += buildNavigationSection(map);
sections.insertAdjacentHTML('beforeend', `<div class="section-tier">Area</div>`);
sections.insertAdjacentHTML('beforeend', buildMapPreviewSection(map));
sections.insertAdjacentHTML('beforeend', buildPropertiesSection(map));
sections.insertAdjacentHTML('beforeend', buildNavigationSection(map));
// ═══════════════════════════════════════════
// TIER 2: NPCs — who's here
// ═══════════════════════════════════════════
sections.innerHTML += `<div class="section-tier">NPCs</div>`;
sections.innerHTML += buildUnifiedNPCSection(map, trainers, scriptText);
sections.insertAdjacentHTML('beforeend', `<div class="section-tier">NPCs</div>`);
sections.insertAdjacentHTML('beforeend', buildUnifiedNPCSection(map, trainers, scriptText));
// ═══════════════════════════════════════════
// TIER 3: WORLD — things in the environment
// ═══════════════════════════════════════════
sections.innerHTML += `<div class="section-tier">World</div>`;
sections.innerHTML += buildEncounterSection(enc, encounterRates, map);
sections.innerHTML += buildItemSection(itemBalls, hiddenItems, map);
sections.innerHTML += buildSignsAndTriggersSection(map);
sections.insertAdjacentHTML('beforeend', `<div class="section-tier">World</div>`);
sections.insertAdjacentHTML('beforeend', buildEncounterSection(enc, encounterRates, map));
sections.insertAdjacentHTML('beforeend', buildItemSection(itemBalls, hiddenItems, map));
sections.insertAdjacentHTML('beforeend', buildSignsAndTriggersSection(map));
// Wire up section toggles
$$('.map-area-section-header').forEach(header => {

View File

@ -1796,7 +1796,6 @@ tbody tr:last-child td { border-bottom: none; }
width: 100%;
border-radius: 6px;
border: 1px solid var(--border);
overflow: hidden;
background: var(--bg);
}
.imap-container img {
@ -1804,6 +1803,7 @@ tbody tr:last-child td { border-bottom: none; }
width: 100%;
height: auto;
image-rendering: pixelated;
border-radius: 5px;
}
.imap-markers {
position: absolute;