schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ergebnis-Ansicht: Highscore zentrieren, Rakete und Zielzahl entfernen

Browse Source
This commit is contained in:
schmop 2026-05-31 16:48:31 +02:00
parent 02c11c4d4b
commit b54effef25
1 changed files with 13 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/lib/screens/ResultScreen.svelte
View File

@ -5,7 +5,6 @@
import { startGame } from '../stores/game'; import { startGame } from '../stores/game';
import { goHome, goGame } from '../stores/route'; import { goHome, goGame } from '../stores/route';
import { play, unlockAudio } from '../audio/soundManager'; import { play, unlockAudio } from '../audio/soundManager';
import Rocket from '../components/svg/Rocket.svelte';
import Rainbow from '../components/svg/Rainbow.svelte'; import Rainbow from '../components/svg/Rainbow.svelte';
import HighscoreColumn from '../components/home/HighscoreColumn.svelte'; import HighscoreColumn from '../components/home/HighscoreColumn.svelte';
@ -32,27 +31,17 @@
</script> </script>
<div class="screen" in:fade={{ duration: 240 }}> <div class="screen" in:fade={{ duration: 240 }}>
<header>
<h2 class="target-label">
<span class="num">{target}</span>
</h2>
</header>
<div class="celebration"> <div class="celebration">
{#if isWin} {#if isWin}
<div class="rainbow-wrap" in:fly={{ y: 30, duration: 600 }}> <div class="rainbow-wrap" in:fly={{ y: 30, duration: 600 }}>
<Rainbow size={260} /> <Rainbow size={300} />
</div> </div>
{/if} {/if}
<div class="rocket-wrap" in:fly={{ y: 60, duration: 700 }}> <div class="scores" in:fly={{ y: 40, duration: 500 }}>
<Rocket size={160} flameAnimated={false} /> <HighscoreColumn {target} highlightDate={lastRunDate} />
</div> </div>
</div> </div>
<aside class="scores">
<HighscoreColumn {target} highlightDate={lastRunDate} />
</aside>
<footer class="actions"> <footer class="actions">
<button class="action retry" type="button" onclick={retry} aria-label="Nochmal"> <button class="action retry" type="button" onclick={retry} aria-label="Nochmal">
<svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true"> <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
@ -72,43 +61,31 @@
.screen { .screen {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-rows: 1fr auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header header'
'celebration scores'
'actions actions';
padding: 16px; padding: 16px;
gap: 12px; gap: 12px;
} }
header { grid-area: header; display: flex; justify-content: center; }
.target-label .num {
font-size: clamp(48px, 8vw, 80px);
font-weight: 900;
color: var(--c-text-on-dark);
background: rgba(255,255,255,0.18);
border-radius: 18px;
padding: 6px 28px;
}
.celebration { .celebration {
grid-area: celebration;
display: grid; display: grid;
place-items: center; place-items: center;
position: relative; position: relative;
min-height: 0;
} }
.rocket-wrap { z-index: 2; }
.rainbow-wrap { .rainbow-wrap {
position: absolute; position: absolute;
bottom: 12%; top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1; z-index: 1;
opacity: 0.85;
} }
.scores { .scores {
grid-area: scores; position: relative;
width: 110px; z-index: 2;
height: 100%; width: 120px;
height: min(82%, 460px);
} }
.actions { .actions {
grid-area: actions;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;