From c23bd369f1b7b73d566ad5c6afe3b288f7f491b7 Mon Sep 17 00:00:00 2001 From: Fredrik Johansson Date: Mon, 3 Aug 2026 18:57:21 +0200 Subject: [PATCH] Actually fix click-outside-to-close (previous fix only worked by luck) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 , 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 --- src/ui.ts | 128 +++++++++++++++++++++++++++++------------------------- 1 file changed, 69 insertions(+), 59 deletions(-) diff --git a/src/ui.ts b/src/ui.ts index 5c0b3a1..fb5c84c 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -37,63 +37,6 @@ export function initUI( -
-
-
- DJUPET — Hjälp & Ändringslogg - -
-
-
-
Hur man spelar
-
    -
  • Andakt ackumuleras passivt. Använd den för att köpa åtgärder i vänsterpanelen.
    • -
  • Dread ökar när ritualen fördjupas. Hög dread låser upp nya platser och händelser.
    • -
  • Hemlighet sjunker när ni blir för uppenbara. Når den noll är det slut.
    • -
  • Kaos byggs upp naturligt och utlöser kaotiska händelser när det når 100.
    • -
  • Ritual låses upp via Skriften. Nå 100 för att fullborda ceremonin.
    • -
  • Klicka på platser på kartan för att besöka dem. Varje besök lämnar spår.
    • -
  • Händelser inträffar automatiskt. De flesta är dåliga. En del är värre.
    • -
-
-
-
Om spelet
-

- Djupet är ett idle-spel om en kult i Malmö, Sverige.
- Inspirerat av Anders Fager, Kult och Call of Cthulhu.
- Den Sovande är inte vaken ännu. Jobba på det. -

-
-
-
Ändringslogg
- ${CHANGELOG.map(e => ` -
-
v${e.version} ${e.date}
-
    ${e.changes.map(c => `
  • ${c}
    • `).join('')}
-
- `).join('')} -
-
-
-
- -
-
-
- Sällskapet - -
-
-
- - -
-

De som suttit vid bordet. Vissa längre än andra.

-
-
-
-
-
Resurser
@@ -168,6 +111,18 @@ export function initUI(
+
+ `; + + // Overlays live as siblings of #app, appended directly to , 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', `
@@ -176,7 +131,62 @@ export function initUI(
-
+
+
+
+ DJUPET — Hjälp & Ändringslogg + +
+
+
+
Hur man spelar
+
    +
  • Andakt ackumuleras passivt. Använd den för att köpa åtgärder i vänsterpanelen.
    • +
  • Dread ökar när ritualen fördjupas. Hög dread låser upp nya platser och händelser.
    • +
  • Hemlighet sjunker när ni blir för uppenbara. Når den noll är det slut.
    • +
  • Kaos byggs upp naturligt och utlöser kaotiska händelser när det når 100.
    • +
  • Ritual låses upp via Skriften. Nå 100 för att fullborda ceremonin.
    • +
  • Klicka på platser på kartan för att besöka dem. Varje besök lämnar spår.
    • +
  • Händelser inträffar automatiskt. De flesta är dåliga. En del är värre.
    • +
+
+
+
Om spelet
+

+ Djupet är ett idle-spel om en kult i Malmö, Sverige.
+ Inspirerat av Anders Fager, Kult och Call of Cthulhu.
+ Den Sovande är inte vaken ännu. Jobba på det. +

+
+
+
Ändringslogg
+ ${CHANGELOG.map(e => ` +
+
v${e.version} ${e.date}
+
    ${e.changes.map(c => `
  • ${c}
    • `).join('')}
+
+ `).join('')} +
+
+
+
+ +
+
+
+ Sällskapet + +
+
+
+ + +
+

De som suttit vid bordet. Vissa längre än andra.

+
+
+
+
@@ -193,7 +203,7 @@ export function initUI(
- `; + `); document.getElementById('overlay-btn')!.addEventListener('click', onRestart); document.getElementById('start-btn')!.addEventListener('click', onStart);