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

Flugbahn: Sterne im oberen Bereich über der letzten Linie verteilen statt in einer Reihe

Browse Source
This commit is contained in:
schmop 2026-05-31 17:46:02 +02:00
parent 48cfc1d0ae
commit 2adcd0d545
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/lib/components/game/HeightTrack.svelte
View File

@ -30,6 +30,20 @@
return STAGE_Y[4]; return STAGE_Y[4];
} }
const rocketY = $derived(won ? WIN_Y : yFor(correct)); const rocketY = $derived(won ? WIN_Y : yFor(correct));
// Sterne der obersten Stufe: oberhalb der letzten Linie (>85%) frei im ganzen
// oberen Bereich verteilt, unterschiedliche Höhen, einheitliche Farbe. l/b in %.
const STARS = [
{ l: 11, b: 97, s: 26 },
{ l: 27, b: 90, s: 32 },
{ l: 45, b: 98, s: 22 },
{ l: 62, b: 91, s: 30 },
{ l: 80, b: 97, s: 24 },
{ l: 89, b: 88, s: 26 },
{ l: 19, b: 87, s: 20 },
{ l: 71, b: 87, s: 22 },
{ l: 38, b: 89, s: 18 },
];
</script> </script>
<div class="track" class:won> <div class="track" class:won>
@ -48,15 +62,10 @@
<div class="marker" style="bottom: {STAGE_Y[1] * 100}%"><Balloon size={78} /></div> <div class="marker" style="bottom: {STAGE_Y[1] * 100}%"><Balloon size={78} /></div>
<div class="marker" style="bottom: {STAGE_Y[2] * 100}%; left: 70%"><Cloud size={92} /></div> <div class="marker" style="bottom: {STAGE_Y[2] * 100}%; left: 70%"><Cloud size={92} /></div>
<div class="marker" style="bottom: {STAGE_Y[3] * 100}%; left: 30%"><Moon size={78} /></div> <div class="marker" style="bottom: {STAGE_Y[3] * 100}%; left: 30%"><Moon size={78} /></div>
<!-- Sterne-Stufe: über die ganze Breite verteilt, einheitliche Farbe. --> <!-- Sterne-Stufe: oberhalb der letzten Linie im ganzen oberen Bereich verteilt, einheitliche Farbe. -->
<div class="marker stars" style="bottom: {STAGE_Y[4] * 100}%"> {#each STARS as s, i (i)}
<Star size={26} /> <div class="star" style="left: {s.l}%; bottom: {s.b}%"><Star size={s.s} /></div>
<Star size={32} /> {/each}
<Star size={22} />
<Star size={30} />
<Star size={24} />
<Star size={28} />
</div>
<div class="rocket" style="bottom: calc({rocketY * 100}% - 60px)" aria-hidden="true"> <div class="rocket" style="bottom: calc({rocketY * 100}% - 60px)" aria-hidden="true">
<Rocket size={120} /> <Rocket size={120} />
@ -97,14 +106,10 @@
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
pointer-events: none; pointer-events: none;
} }
.marker.stars { .star {
left: 0; position: absolute;
right: 0; transform: translate(-50%, 50%);
transform: translateY(50%); pointer-events: none;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 6px;
} }
.rocket { .rocket {