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} {/each}
<!-- Markierungen --> <!-- Markierungen -->
<div class="marker" style="bottom: {STAGE_Y[1] * 100}%"><Balloon 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={64} opacity={0.95} /></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={56} /></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}%"> <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={28} />
<Star size={20} color="#fff" />
<Star size={24} color="#a8e8ff" />
</div> </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">
@ -83,8 +87,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
border-top: 2px dashed rgba(255, 255, 255, 0.6); border-top: 2px dotted rgba(255, 255, 255, 0.3);
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
pointer-events: none; pointer-events: none;
} }
@ -93,9 +96,16 @@
left: 18%; left: 18%;
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
pointer-events: none; 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 { .rocket {
position: absolute; position: absolute;