Fix bottom panels
Add semi-cloud icons
This commit is contained in:
fraxle
2026-07-16 00:13:41 +01:00
parent 1ae6574530
commit f92e191a44
4 changed files with 25 additions and 11 deletions
+15 -3
View File
@@ -396,7 +396,10 @@ export function WindVane({ bearing, size = 30 }) {
// -------------------------------------------------------------------
// CLOUDICON - Brass Line cloud / haze / overcast glyphs.
// No sun or moon here; the time-cell SkyScope owns day/night imagery.
// The time-cell SkyScope owns full day/night imagery; this stays a
// simple glyph. Exception: 'wispy'/'scattered' in daylight draw a
// small sun peeking from behind the cloud, so a lightly-clouded day
// still reads as "mostly sunny" rather than looking fully overcast.
// -------------------------------------------------------------------
// category: 'clear' | 'wispy' | 'scattered' | 'overcast'
// elev: solar elevation in degrees (negative = night)
@@ -460,10 +463,19 @@ export function CloudIcon({ category, size = 30, elev = 90, dt = new Date(), fil
<circle cx=${size*0.75} cy=${size*0.60} r=${size*0.025} fill=${brass} opacity="0.70" />
<circle cx=${size*0.18} cy=${size*0.66} r=${size*0.018} fill=${brass} opacity="0.55" />
<circle cx=${size*0.88} cy=${size*0.48} r=${size*0.018} fill=${brass} opacity="0.55" />`}
${category === 'wispy' && html`
${category === 'wispy' && elev >= 0 && html`
${sun(size * 0.66, size * 0.30, size * 0.13)}
${line(size * 0.14, size * 0.58, size * 0.64, size * 0.58, brass, sw * 0.85, 0.85)}
${line(size * 0.24, size * 0.74, size * 0.78, size * 0.74, ink, sw * 0.78, 0.68)}`}
${category === 'wispy' && elev < 0 && html`
${mist(size * 0.18, brass)}
${line(size * 0.18, size * 0.56, size * 0.60, size * 0.56, muted, sw * 0.7, 0.6)}`}
${category === 'scattered' && html`
${category === 'scattered' && elev >= 0 && html`
${sun(size * 0.72, size * 0.24, size * 0.11)}
<path d=${cloudPath(-size * 0.12, size * 0.02, 0.64)} fill=${filled ? 'rgba(255,255,255,0.88)' : 'none'} stroke=${filled ? 'none' : ink}
stroke-width=${sw} stroke-linecap=${cap} stroke-linejoin=${join} />
${!filled && line(size * 0.12, size * 0.60, size * 0.38, size * 0.60, brass, sw * 0.72, 0.78)}`}
${category === 'scattered' && elev < 0 && html`
<path d=${cloudPath(0, -size * 0.2425, 0.82)} fill=${filled ? 'rgba(255,255,255,0.88)' : 'none'} stroke=${filled ? 'none' : ink}
stroke-width=${sw} stroke-linecap=${cap} stroke-linejoin=${join} />
${!filled && line(size * 0.20, size * 0.58, size * 0.48, size * 0.58, brass, sw * 0.75, 0.78)}`}