Actually fix click-outside-to-close (previous fix only worked by luck)
Root cause: #app carries a CSS filter for the dread color effect, and a filter on an ancestor creates a new containing block for any position:fixed descendant. Every modal (and the overlay) lived inside #app, so they were clipping to #app's own box — max-width: 1200px, centered — instead of the real viewport. On screens wider than that, clicking in the resulting side margins did nothing, because the click never actually landed inside the fixed element's clipped box. The earlier "fix" only added Escape support; click-outside code was already correct and simply never got exercised at the actual edges of a wide window, which is exactly where a real "click outside" gesture lands. Real fix: overlay, help-modal, characters-modal, event-modal, and the lightbox are now appended directly to <body>, as siblings of #app, so they're never affected by #app's filter regardless of viewport width. Everything else (game grid, danger-vignette) stays inside #app as before. Verified via headless browser at the exact point that failed before the fix (top-left corner of a 1300px-wide viewport, well outside #app's 1200px content area): help, characters, and the lightbox all now close correctly. Also confirmed no regression — normal gameplay screen and the game-over overlay both render identically, and the overlay now correctly covers the full viewport instead of leaving a gap on wide screens. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
666b64e748
commit
c23bd369f1
@@ -37,63 +37,6 @@ export function initUI(
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="help-modal" class="help-modal">
|
|
||||||
<div class="help-modal-inner" id="help-modal-inner">
|
|
||||||
<div class="help-modal-header">
|
|
||||||
<span class="help-modal-title">DJUPET — Hjälp & Ändringslogg</span>
|
|
||||||
<button id="help-close" class="help-close">✕</button>
|
|
||||||
</div>
|
|
||||||
<div class="help-modal-body">
|
|
||||||
<section class="help-section">
|
|
||||||
<div class="help-section-title">Hur man spelar</div>
|
|
||||||
<ul class="help-list">
|
|
||||||
<li><strong>Andakt</strong> ackumuleras passivt. Använd den för att köpa åtgärder i vänsterpanelen.</li>
|
|
||||||
<li><strong>Dread</strong> ökar när ritualen fördjupas. Hög dread låser upp nya platser och händelser.</li>
|
|
||||||
<li><strong>Hemlighet</strong> sjunker när ni blir för uppenbara. Når den noll är det slut.</li>
|
|
||||||
<li><strong>Kaos</strong> byggs upp naturligt och utlöser kaotiska händelser när det når 100.</li>
|
|
||||||
<li><strong>Ritual</strong> låses upp via Skriften. Nå 100 för att fullborda ceremonin.</li>
|
|
||||||
<li>Klicka på <em>platser på kartan</em> för att besöka dem. Varje besök lämnar spår.</li>
|
|
||||||
<li>Händelser inträffar automatiskt. De flesta är dåliga. En del är värre.</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section class="help-section">
|
|
||||||
<div class="help-section-title">Om spelet</div>
|
|
||||||
<p class="help-flavor">
|
|
||||||
Djupet är ett idle-spel om en kult i Malmö, Sverige.<br>
|
|
||||||
Inspirerat av Anders Fager, Kult och Call of Cthulhu.<br>
|
|
||||||
Den Sovande är inte vaken ännu. Jobba på det.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section class="help-section">
|
|
||||||
<div class="help-section-title">Ändringslogg</div>
|
|
||||||
${CHANGELOG.map(e => `
|
|
||||||
<div class="help-changelog-entry">
|
|
||||||
<div class="help-changelog-version">v${e.version} <span class="help-changelog-date">${e.date}</span></div>
|
|
||||||
<ul class="help-list">${e.changes.map(c => `<li>${c}</li>`).join('')}</ul>
|
|
||||||
</div>
|
|
||||||
`).join('')}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="characters-modal" class="help-modal">
|
|
||||||
<div class="help-modal-inner" id="characters-modal-inner">
|
|
||||||
<div class="help-modal-header">
|
|
||||||
<span class="help-modal-title">Sällskapet</span>
|
|
||||||
<button id="characters-close" class="help-close">✕</button>
|
|
||||||
</div>
|
|
||||||
<div class="help-modal-body">
|
|
||||||
<div class="archive-toggle" role="group" aria-label="Visningsläge">
|
|
||||||
<button type="button" class="archive-toggle-btn active" data-archive="story">Under spelets gång</button>
|
|
||||||
<button type="button" class="archive-toggle-btn" data-archive="full">Fullständigt arkiv</button>
|
|
||||||
</div>
|
|
||||||
<p class="help-flavor" id="characters-hint" style="margin-bottom:14px;">De som suttit vid bordet. Vissa längre än andra.</p>
|
|
||||||
<div id="characters-grid" class="characters-grid"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel" id="panel-left">
|
<div class="panel" id="panel-left">
|
||||||
<div class="panel-title">Resurser</div>
|
<div class="panel-title">Resurser</div>
|
||||||
|
|
||||||
@@ -168,6 +111,18 @@ export function initUI(
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="danger-vignette"></div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Overlays live as siblings of #app, appended directly to <body>, not
|
||||||
|
// inside it. #app carries a `filter` (for the dread color effect),
|
||||||
|
// and CSS filter on an ancestor creates a new containing block for any
|
||||||
|
// `position: fixed` descendant — so these would clip to #app's own box
|
||||||
|
// (max-width: 1200px, centered) instead of the real viewport. On wider
|
||||||
|
// screens that left a dead margin on each side where "click outside to
|
||||||
|
// close" silently did nothing, because the click never actually landed
|
||||||
|
// inside the fixed element's clipped box.
|
||||||
|
document.body.insertAdjacentHTML('beforeend', `
|
||||||
<div id="overlay">
|
<div id="overlay">
|
||||||
<div class="overlay-scrim">
|
<div class="overlay-scrim">
|
||||||
<div class="overlay-title" id="overlay-title"></div>
|
<div class="overlay-title" id="overlay-title"></div>
|
||||||
@@ -176,7 +131,62 @@ export function initUI(
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="danger-vignette"></div>
|
<div id="help-modal" class="help-modal">
|
||||||
|
<div class="help-modal-inner" id="help-modal-inner">
|
||||||
|
<div class="help-modal-header">
|
||||||
|
<span class="help-modal-title">DJUPET — Hjälp & Ändringslogg</span>
|
||||||
|
<button id="help-close" class="help-close">✕</button>
|
||||||
|
</div>
|
||||||
|
<div class="help-modal-body">
|
||||||
|
<section class="help-section">
|
||||||
|
<div class="help-section-title">Hur man spelar</div>
|
||||||
|
<ul class="help-list">
|
||||||
|
<li><strong>Andakt</strong> ackumuleras passivt. Använd den för att köpa åtgärder i vänsterpanelen.</li>
|
||||||
|
<li><strong>Dread</strong> ökar när ritualen fördjupas. Hög dread låser upp nya platser och händelser.</li>
|
||||||
|
<li><strong>Hemlighet</strong> sjunker när ni blir för uppenbara. Når den noll är det slut.</li>
|
||||||
|
<li><strong>Kaos</strong> byggs upp naturligt och utlöser kaotiska händelser när det når 100.</li>
|
||||||
|
<li><strong>Ritual</strong> låses upp via Skriften. Nå 100 för att fullborda ceremonin.</li>
|
||||||
|
<li>Klicka på <em>platser på kartan</em> för att besöka dem. Varje besök lämnar spår.</li>
|
||||||
|
<li>Händelser inträffar automatiskt. De flesta är dåliga. En del är värre.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section class="help-section">
|
||||||
|
<div class="help-section-title">Om spelet</div>
|
||||||
|
<p class="help-flavor">
|
||||||
|
Djupet är ett idle-spel om en kult i Malmö, Sverige.<br>
|
||||||
|
Inspirerat av Anders Fager, Kult och Call of Cthulhu.<br>
|
||||||
|
Den Sovande är inte vaken ännu. Jobba på det.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section class="help-section">
|
||||||
|
<div class="help-section-title">Ändringslogg</div>
|
||||||
|
${CHANGELOG.map(e => `
|
||||||
|
<div class="help-changelog-entry">
|
||||||
|
<div class="help-changelog-version">v${e.version} <span class="help-changelog-date">${e.date}</span></div>
|
||||||
|
<ul class="help-list">${e.changes.map(c => `<li>${c}</li>`).join('')}</ul>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="characters-modal" class="help-modal">
|
||||||
|
<div class="help-modal-inner" id="characters-modal-inner">
|
||||||
|
<div class="help-modal-header">
|
||||||
|
<span class="help-modal-title">Sällskapet</span>
|
||||||
|
<button id="characters-close" class="help-close">✕</button>
|
||||||
|
</div>
|
||||||
|
<div class="help-modal-body">
|
||||||
|
<div class="archive-toggle" role="group" aria-label="Visningsläge">
|
||||||
|
<button type="button" class="archive-toggle-btn active" data-archive="story">Under spelets gång</button>
|
||||||
|
<button type="button" class="archive-toggle-btn" data-archive="full">Fullständigt arkiv</button>
|
||||||
|
</div>
|
||||||
|
<p class="help-flavor" id="characters-hint" style="margin-bottom:14px;">De som suttit vid bordet. Vissa längre än andra.</p>
|
||||||
|
<div id="characters-grid" class="characters-grid"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="event-modal" class="help-modal">
|
<div id="event-modal" class="help-modal">
|
||||||
<div class="help-modal-inner" id="event-modal-inner">
|
<div class="help-modal-inner" id="event-modal-inner">
|
||||||
@@ -193,7 +203,7 @@ export function initUI(
|
|||||||
<div id="lightbox-caption" class="lightbox-caption"></div>
|
<div id="lightbox-caption" class="lightbox-caption"></div>
|
||||||
<p id="lightbox-blurb" class="lightbox-blurb"></p>
|
<p id="lightbox-blurb" class="lightbox-blurb"></p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`);
|
||||||
|
|
||||||
document.getElementById('overlay-btn')!.addEventListener('click', onRestart);
|
document.getElementById('overlay-btn')!.addEventListener('click', onRestart);
|
||||||
document.getElementById('start-btn')!.addEventListener('click', onStart);
|
document.getElementById('start-btn')!.addEventListener('click', onStart);
|
||||||
|
|||||||
Reference in New Issue
Block a user