Give the win ending its own background image

Previously reused gameover.webp for both win and loss states since it
was deliberately mood-neutral. Now has a dedicated photo: same desk,
chair pushed back in rather than empty, stamp/ink/letters back in
place, a fresh unopened stack waiting — continuation, not triumph,
matching the ending copy's own restraint. .end-screen now carries a
victory/failure class the same way .end-card already did, so CSS can
target the right background per outcome.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-07-27 19:51:30 +02:00
parent 31a6770dfd
commit f71878861c
4 changed files with 9 additions and 2 deletions

2
.gitignore vendored
View File

@@ -7,3 +7,5 @@ dist
# actually ship; no need to bloat the repo with the 1.7MB originals. # actually ship; no need to bloat the repo with the 1.7MB originals.
/intro.png /intro.png
/gameover.png /gameover.png
/win.png
/win2.png

BIN
public/win.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

@@ -176,7 +176,7 @@ function renderEnding(): void {
? 'Misstanken nådde taket innan avvikelserna gjorde det. Ingen kartong står vid din plats — bara ett formulär om att du aldrig anställdes. Det är redan ifyllt.' ? 'Misstanken nådde taket innan avvikelserna gjorde det. Ingen kartong står vid din plats — bara ett formulär om att du aldrig anställdes. Det är redan ifyllt.'
: 'För många avvikelser. En kartong står redan vid din plats. Den är adresserad till din efterträdare, med ditt namn överstruket en gång.'; : 'För många avvikelser. En kartong står redan vid din plats. Den är adresserad till din efterträdare, med ditt namn överstruket en gång.';
shell(`<main class="end-screen"><div class="end-card ${won ? 'victory' : 'failure'}"> shell(`<main class="end-screen ${won ? 'victory' : 'failure'}"><div class="end-card ${won ? 'victory' : 'failure'}">
<div class="panel-title">SLUTLIG PERSONALAKT</div> <div class="panel-title">SLUTLIG PERSONALAKT</div>
<div class="audit-stamp">${stamp}</div> <div class="audit-stamp">${stamp}</div>
<h1>${title}</h1> <h1>${title}</h1>

View File

@@ -81,7 +81,12 @@ button { font: inherit; }
linear-gradient(rgba(13, 13, 26, 0.6), rgba(13, 13, 26, 0.88)), linear-gradient(rgba(13, 13, 26, 0.6), rgba(13, 13, 26, 0.88)),
url('/intro.webp') center / cover no-repeat; url('/intro.webp') center / cover no-repeat;
} }
.end-screen { .end-screen.victory {
background:
linear-gradient(rgba(13, 13, 26, 0.55), rgba(13, 13, 26, 0.85)),
url('/win.webp') center / cover no-repeat;
}
.end-screen.failure {
background: background:
linear-gradient(rgba(13, 13, 26, 0.55), rgba(13, 13, 26, 0.85)), linear-gradient(rgba(13, 13, 26, 0.55), rgba(13, 13, 26, 0.85)),
url('/gameover.webp') center / cover no-repeat; url('/gameover.webp') center / cover no-repeat;