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

Flugbahn: gepunktete dezente Stufenlinien, größere deckende Symbole, Sterne über volle Breite in einer Farbe

Browse Source
This commit is contained in:
schmop 2026-05-31 17:41:23 +02:00
parent 6f7f4511d0
commit 48cfc1d0ae
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,13 +45,17 @@
{/each}
<!-- Markierungen -->
<div class="marker" style="bottom: {STAGE_Y[1] * 100}%"><Balloon size={56} /></div>
<div class="marker" style="bottom: {STAGE_Y[2] * 100}%; left: 70%"><Cloud size={64} opacity={0.95} /></div>
<div class="marker" style="bottom: {STAGE_Y[3] * 100}%; left: 30%"><Moon size={56} /></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[3] * 100}%; left: 30%"><Moon size={78} /></div>
<!-- Sterne-Stufe: über die ganze Breite verteilt, einheitliche Farbe. -->
<div class="marker stars" style="bottom: {STAGE_Y[4] * 100}%">
<Star size={26} />
<Star size={32} />
<Star size={22} />
<Star size={30} />
<Star size={24} />
<Star size={28} />
<Star size={20} color="#fff" />
<Star size={24} color="#a8e8ff" />
</div>
<div class="rocket" style="bottom: calc({rocketY * 100}% - 60px)" aria-hidden="true">
@ -83,8 +87,7 @@
position: absolute;
left: 0;
right: 0;
border-top: 2px dashed rgba(255, 255, 255, 0.6);
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
border-top: 2px dotted rgba(255, 255, 255, 0.3);
pointer-events: none;
}
@ -93,9 +96,16 @@
left: 18%;
transform: translate(-50%, 50%);
pointer-events: none;
opacity: 0.85;
}
.marker.stars { display: flex; gap: 6px; left: 60%; }
.marker.stars {
left: 0;
right: 0;
transform: translateY(50%);
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 6px;
}
.rocket {
position: absolute;