Compare commits
2 Commits
d039dfb019
...
4b4e5c14aa
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4b4e5c14aa | ||
|
|
efc19bac1d |
@@ -240,20 +240,20 @@ body {
|
||||
background-position: center;
|
||||
background-color: var(--bg);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#intro-screen.visible { display: flex; }
|
||||
|
||||
.intro-scrim {
|
||||
background: linear-gradient(180deg, rgba(6,6,14,0.55) 0%, rgba(6,6,14,0.88) 70%, rgba(6,6,14,0.96) 100%);
|
||||
background: linear-gradient(180deg, rgba(6,6,14,0) 0%, rgba(6,6,14,0.75) 35%, rgba(6,6,14,0.97) 100%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 10vh;
|
||||
padding: 18vh 20px 8vh;
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -286,19 +286,29 @@ body {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(6, 6, 14, 0.92);
|
||||
background-color: var(--bg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#overlay.visible { display: flex; }
|
||||
|
||||
.overlay-scrim {
|
||||
background: radial-gradient(ellipse 60% 55% at center, rgba(6,6,14,0.94) 0%, rgba(6,6,14,0.8) 55%, rgba(6,6,14,0.35) 80%, transparent 100%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.overlay-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
|
||||
14
src/ui.ts
14
src/ui.ts
@@ -139,9 +139,11 @@ export function initUI(
|
||||
</div>
|
||||
|
||||
<div id="overlay">
|
||||
<div class="overlay-title" id="overlay-title"></div>
|
||||
<div class="overlay-body" id="overlay-body"></div>
|
||||
<button class="overlay-btn" id="overlay-btn">Börja om</button>
|
||||
<div class="overlay-scrim">
|
||||
<div class="overlay-title" id="overlay-title"></div>
|
||||
<div class="overlay-body" id="overlay-body"></div>
|
||||
<button class="overlay-btn" id="overlay-btn">Börja om</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="danger-vignette"></div>
|
||||
@@ -344,17 +346,17 @@ function showOverlay(state: State): void {
|
||||
const title = document.getElementById('overlay-title')!;
|
||||
const body = document.getElementById('overlay-body')!;
|
||||
if (state.phase === 'won') {
|
||||
ov.style.backgroundImage = "linear-gradient(rgba(6,6,14,0.72), rgba(6,6,14,0.85)), url('/img/win.webp')";
|
||||
ov.style.backgroundImage = "url('/img/win.webp')";
|
||||
title.textContent = 'FULLBORDAT';
|
||||
title.className = 'overlay-title won';
|
||||
body.textContent = 'Det är gjort. Turning Torso pekar rakt ned. Havet är stilla — alltför stilla. Malmö fortsätter som vanligt. Det är det värsta.';
|
||||
} else if (state.phase === 'abandoned') {
|
||||
ov.style.backgroundImage = "linear-gradient(rgba(6,6,14,0.72), rgba(6,6,14,0.85)), url('/img/fail.webp')";
|
||||
ov.style.backgroundImage = "url('/img/fail.webp')";
|
||||
title.textContent = 'ÖVERGIVET';
|
||||
title.className = 'overlay-title lost';
|
||||
body.textContent = 'Ni lämnar källaren. Cirkeln bryts. Den Sovande sover vidare, ovetande, ofärdig.';
|
||||
} else {
|
||||
ov.style.backgroundImage = "linear-gradient(rgba(6,6,14,0.72), rgba(6,6,14,0.85)), url('/img/fail.webp')";
|
||||
ov.style.backgroundImage = "url('/img/fail.webp')";
|
||||
title.textContent = 'AVSLÖJAD';
|
||||
title.className = 'overlay-title lost';
|
||||
body.textContent = state.lostReason ?? 'Utredarna kom.';
|
||||
|
||||
Reference in New Issue
Block a user