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

Flugbahn: erreichbare Stufen mit gestrichelten Linien über die volle Breite markieren

Browse Source
This commit is contained in:
schmop 2026-05-31 17:04:13 +02:00
parent dde6271cf1
commit aadbd6a231
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,11 @@
<div class="layer sky-high"></div> <div class="layer sky-high"></div>
<div class="layer space"></div> <div class="layer space"></div>
<!-- Stufen-Linien: jede erreichbare Stufe über die gesamte Breite -->
{#each [STAGE_Y[1], STAGE_Y[2], STAGE_Y[3], STAGE_Y[4]] as y (y)}
<div class="stage-line" style="bottom: {y * 100}%"></div>
{/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={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[2] * 100}%; left: 70%"><Cloud size={64} opacity={0.95} /></div>
@ -74,6 +79,15 @@
.sky-high { bottom: 60%; height: 25%; background: linear-gradient(to top, #4a7ec4, #2a3f7a); } .sky-high { bottom: 60%; height: 25%; background: linear-gradient(to top, #4a7ec4, #2a3f7a); }
.space { bottom: 85%; height: 15%; background: linear-gradient(to top, #2a3f7a, #0a0e2a); } .space { bottom: 85%; height: 15%; background: linear-gradient(to top, #2a3f7a, #0a0e2a); }
.stage-line {
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));
pointer-events: none;
}
.marker { .marker {
position: absolute; position: absolute;
left: 18%; left: 18%;