497 lines
27 KiB
JavaScript
497 lines
27 KiB
JavaScript
// ════════════════════════════════════════════════════════════════════════
|
|
// components.js — Preact UI components (SVG widgets).
|
|
//
|
|
// Exports:
|
|
// SkyScope({ elev, dt, size }) little porthole circle per hour
|
|
// WindVane({ bearing, size }) compass arrow
|
|
// CloudIcon({ category, size, elev, dt }) cloud/sun/moon icon
|
|
// ScopeReticle({ value, cat, loading, elev, dt }) big UTCI dial
|
|
// PrecipIcon({ precip, snow, size }) rain/snow icon for precip cell
|
|
//
|
|
// All components use the html`` tagged template from htm + Preact.
|
|
// They depend on utils.js (skyFillForElev, grassFillForElev,
|
|
// moonPhaseFraction) but have no other external state.
|
|
// ════════════════════════════════════════════════════════════════════════
|
|
|
|
import { h, Fragment } from '../vendor/preact.js';
|
|
import htm from '../vendor/htm.js';
|
|
import {
|
|
skyFillForElev, grassFillForElev,
|
|
moonPhaseFraction,
|
|
} from './utils.js';
|
|
|
|
const html = htm.bind(h);
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// SKYSCOPE — the little porthole circle next to each hour.
|
|
// ───────────────────────────────────────────────────────────────────
|
|
// What gets drawn (back to front):
|
|
// 1. Sky disk — colour from skyFillForElev() above
|
|
// 2. Horizon line — faint dashed line at the middle
|
|
// 3. Sun OR moon — sun positioned vertically by elevation;
|
|
// moon shows real phase (synodic period)
|
|
// 4. Brass ring — the telescope/scope edge (#c8922a)
|
|
// 5. Lens highlight — subtle inner glint
|
|
//
|
|
// Tweakable bits inside this function:
|
|
// • size — pass a different size= when calling for bigger/smaller
|
|
// • innerR — how thick the brass ring looks
|
|
// • sunR — the sun's drawn radius
|
|
// • the stroke colour #c8922a is the brass — change for a different metal
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
export function SkyScope({ elev, dt, size = 26 }) {
|
|
const r = size / 2;
|
|
const innerR = r - 1.2;
|
|
const skyFill = skyFillForElev(elev);
|
|
const isDay = elev > -3;
|
|
const elevClamped = Math.max(-30, Math.min(90, elev));
|
|
const sunY = r - Math.sin((elevClamped * Math.PI) / 180) * (innerR - 2.5);
|
|
const sunR = Math.max(2.2, innerR * 0.32);
|
|
const phase = moonPhaseFraction(dt);
|
|
const moonR = innerR * 0.55;
|
|
const phaseOffset = Math.cos(2 * Math.PI * phase) * moonR;
|
|
const moonLitFromRight = phase < 0.5;
|
|
const shadowCx = r + (moonLitFromRight ? -phaseOffset : phaseOffset);
|
|
const grass = grassFillForElev(elev);
|
|
const uid = `${size}-${Math.round(elev * 10)}-${Math.round(phase * 1000)}`;
|
|
const clipId = `scope-clip-${uid}`;
|
|
const grassId = `scope-grass-${uid}`;
|
|
return html`
|
|
<svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}
|
|
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<defs>
|
|
<clipPath id=${clipId}>
|
|
<circle cx=${r} cy=${r} r=${innerR} />
|
|
</clipPath>
|
|
<linearGradient id=${grassId} x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color=${grass.top} />
|
|
<stop offset="100%" stop-color=${grass.bot} />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx=${r} cy=${r} r=${innerR} fill=${skyFill} />
|
|
<path d=${`M ${r - innerR} ${r} A ${innerR} ${innerR} 0 0 0 ${r + innerR} ${r} Z`}
|
|
fill=${`url(#${grassId})`}
|
|
clip-path=${`url(#${clipId})`} />
|
|
${isDay
|
|
? html`
|
|
<g clip-path=${`url(#${clipId})`}>
|
|
<circle cx=${r} cy=${sunY} r=${sunR + 1.4} fill="#ffe9a0" opacity="0.55" />
|
|
<circle cx=${r} cy=${sunY} r=${sunR} fill="#fff3a8" stroke="#e6a32a" stroke-width="0.4" />
|
|
</g>`
|
|
: html`
|
|
<g clip-path=${`url(#${clipId})`}>
|
|
<circle cx=${r} cy=${r} r=${moonR} fill="#f5edd6" />
|
|
<circle cx=${shadowCx} cy=${r} r=${moonR} fill=${skyFill} />
|
|
<circle cx=${r} cy=${r} r=${moonR} fill="none" stroke="rgba(245,237,214,0.45)" stroke-width="0.4" />
|
|
</g>`}
|
|
<circle cx=${r} cy=${r} r=${innerR} fill="none" stroke="#c8922a" stroke-width="0.9" />
|
|
<circle cx=${r} cy=${r} r=${innerR - 0.5} fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="0.4" />
|
|
</svg>`;
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// WINDVANE — clean compass arrow on transparent background.
|
|
// ───────────────────────────────────────────────────────────────────
|
|
// Traditional weather-vane behaviour: the ARROWHEAD points INTO the
|
|
// wind (toward the source). Wind from the north → head points north.
|
|
//
|
|
// props:
|
|
// bearing — degrees, 0 = wind FROM north
|
|
// size — pixel diameter (default 30 to match SkyScope)
|
|
//
|
|
// Tweakable bits:
|
|
// • arrowColor / nMarkerColor — line/fill colours
|
|
// • Tiny N letter sits just above the arrow tail for orientation
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
export function WindVane({ bearing, size = 30 }) {
|
|
if (bearing == null || isNaN(bearing)) {
|
|
return html`<span style=${{ opacity: 0.5, fontSize: '11px' }}>—</span>`;
|
|
}
|
|
const r = size / 2;
|
|
// The shaft is drawn pointing DOWN by default (head at the bottom).
|
|
// To place the head at the bearing direction, rotate by bearing + 180.
|
|
const rot = (bearing + 180) % 360;
|
|
const arrowColor = '#2a1a08';
|
|
const headColor = '#c44a3a';
|
|
const nColor = '#9a7d5a';
|
|
// Geometry of the single-ended arrow (drawn pointing DOWN by default).
|
|
// After rotation by (bearing + 180), the head lands on the bearing
|
|
// direction — i.e. the side the wind is coming FROM.
|
|
const tipY = r * 0.15; // arrowhead tip
|
|
const headBase = r * 0.58; // bottom of the triangle head
|
|
const headW = r * 0.42;
|
|
const tailEndY = r * 1.78; // shaft's tail end
|
|
const tailDotR = Math.max(1.0, size * 0.06);
|
|
return html`
|
|
<svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}
|
|
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' }}>
|
|
<!-- Static N marker — small letter above the centre, doesn't rotate -->
|
|
<text x=${r} y=${size * 0.18} text-anchor="middle"
|
|
font-family="JetBrains Mono, monospace"
|
|
font-size=${size * 0.26} font-weight="700"
|
|
fill=${nColor} opacity="0.55">N</text>
|
|
<!-- Rotating arrow. Shaft + ONE arrowhead. A small round nub on
|
|
the tail end keeps the orientation unambiguous without
|
|
looking like a second arrowhead. -->
|
|
<g transform=${`rotate(${rot} ${r} ${r})`}>
|
|
<!-- shaft -->
|
|
<line x1=${r} y1=${headBase} x2=${r} y2=${tailEndY}
|
|
stroke=${arrowColor} stroke-width=${Math.max(1.4, size*0.07)} stroke-linecap="round" />
|
|
<!-- single arrowhead at the upwind end (head into the wind) -->
|
|
<polygon points=${`${r - headW},${headBase} ${r + headW},${headBase} ${r},${tipY}`}
|
|
fill=${headColor} stroke=${arrowColor} stroke-width="0.6" stroke-linejoin="round" />
|
|
<!-- small dot at the downwind end of the shaft, so orientation
|
|
is unambiguous (no chance of reading the tail as a head) -->
|
|
<circle cx=${r} cy=${tailEndY} r=${tailDotR} fill=${arrowColor} />
|
|
</g>
|
|
</svg>`;
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// CLOUDICON — clouds + sun/moon on a fully transparent background.
|
|
// No rim, no disc. Day/night aware: when elev < 0, the sun is
|
|
// replaced with a phased moon (same logic as SkyScope).
|
|
// ───────────────────────────────────────────────────────────────────
|
|
// category: 'clear' | 'wispy' | 'scattered' | 'overcast'
|
|
// elev: solar elevation in degrees (negative = night)
|
|
// dt: Date used for moon phase
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
export function CloudIcon({ category, size = 30, elev = 90, dt = new Date() }) {
|
|
const r = size / 2;
|
|
const u = r; // half-extent for layout
|
|
const isNight = elev < -3;
|
|
// Phased moon helper — returns an SVG <g> with the moon + shadow.
|
|
// Lit fraction direction matches SkyScope (waxing = lit from right).
|
|
const renderMoon = (cx, cy, moonR) => {
|
|
const phase = moonPhaseFraction(dt);
|
|
const phaseOffset = Math.cos(2 * Math.PI * phase) * moonR;
|
|
const moonLitFromRight = phase < 0.5;
|
|
const shadowCx = cx + (moonLitFromRight ? -phaseOffset : phaseOffset);
|
|
const clipId = `cmoon-${size}-${Math.round(cx)}-${Math.round(cy)}-${Math.round(phase * 1000)}`;
|
|
return html`
|
|
<g>
|
|
<defs>
|
|
<clipPath id=${clipId}>
|
|
<circle cx=${cx} cy=${cy} r=${moonR} />
|
|
</clipPath>
|
|
</defs>
|
|
<circle cx=${cx} cy=${cy} r=${moonR} fill="#f5edd6" stroke="#9a8c6a" stroke-width="0.4" />
|
|
<circle cx=${shadowCx} cy=${cy} r=${moonR} fill="#2a2438" clip-path=${`url(#${clipId})`} />
|
|
<circle cx=${cx} cy=${cy} r=${moonR} fill="none" stroke="#9a8c6a" stroke-width="0.4" />
|
|
</g>`;
|
|
};
|
|
return html`
|
|
<svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}
|
|
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' }}>
|
|
${category === 'clear' && (isNight
|
|
? html`<!-- clear night: phased moon, no rays -->
|
|
${renderMoon(r, r, u*0.50)}`
|
|
: html`<!-- clear day: bright sun with rays -->
|
|
<g>
|
|
${[0,45,90,135,180,225,270,315].map(a => {
|
|
const x1 = r + Math.sin(a*Math.PI/180) * u*0.65;
|
|
const y1 = r - Math.cos(a*Math.PI/180) * u*0.65;
|
|
const x2 = r + Math.sin(a*Math.PI/180) * u*0.95;
|
|
const y2 = r - Math.cos(a*Math.PI/180) * u*0.95;
|
|
return html`<line key=${a} x1=${x1} y1=${y1} x2=${x2} y2=${y2}
|
|
stroke="#e6a32a" stroke-width=${Math.max(1, size*0.05)}
|
|
stroke-linecap="round" />`;
|
|
})}
|
|
<circle cx=${r} cy=${r} r=${u*0.45} fill="#ffd84a" stroke="#e6a32a" stroke-width="0.6" />
|
|
</g>`)}
|
|
${category === 'wispy' && html`
|
|
<!-- sun OR moon with thin cirrus streaks across it -->
|
|
${isNight
|
|
? renderMoon(r, r*0.95, u*0.42)
|
|
: html`<circle cx=${r} cy=${r*0.95} r=${u*0.42} fill="#ffd84a" stroke="#e6a32a" stroke-width="0.6" />`}
|
|
<path d=${`M ${r-u*0.95} ${r*0.85} Q ${r} ${r*0.65} ${r+u*0.95} ${r*0.95}`}
|
|
stroke=${isNight ? '#cfd6dd' : '#ffffff'} stroke-width=${Math.max(1.4, size*0.07)}
|
|
fill="none" stroke-linecap="round" opacity="0.92" />
|
|
<path d=${`M ${r-u*0.75} ${r*1.25} Q ${r} ${r*1.08} ${r+u*0.85} ${r*1.30}`}
|
|
stroke=${isNight ? '#b8c0c8' : '#e6ebf0'} stroke-width=${Math.max(1.1, size*0.055)}
|
|
fill="none" stroke-linecap="round" opacity="0.85" />`}
|
|
${category === 'scattered' && html`
|
|
<!-- sun OR moon behind a fluffy cumulus cloud -->
|
|
${isNight
|
|
? renderMoon(r+u*0.45, r-u*0.40, u*0.32)
|
|
: html`<circle cx=${r+u*0.45} cy=${r-u*0.40} r=${u*0.34} fill="#ffd84a" stroke="#e6a32a" stroke-width="0.6" />`}
|
|
<g fill=${isNight ? '#b8c0c8' : '#ffffff'} stroke=${isNight ? '#5a6470' : '#8a96a4'} stroke-width="0.6" stroke-linejoin="round">
|
|
<ellipse cx=${r-u*0.35} cy=${r+u*0.10} rx=${u*0.50} ry=${u*0.30} />
|
|
<ellipse cx=${r+u*0.10} cy=${r-u*0.05} rx=${u*0.46} ry=${u*0.36} />
|
|
<ellipse cx=${r+u*0.40} cy=${r+u*0.20} rx=${u*0.44} ry=${u*0.28} />
|
|
<!-- flat-ish base, soft underneath -->
|
|
<rect x=${r-u*0.75} y=${r+u*0.18} width=${u*1.55} height=${u*0.20} rx=${u*0.10} />
|
|
</g>`}
|
|
${category === 'overcast' && html`
|
|
<!-- thick layered stratus, no sun OR moon (would be hidden anyway) -->
|
|
<g fill=${isNight ? '#7a828c' : '#d8dee5'} stroke=${isNight ? '#3a424c' : '#6e7a88'} stroke-width="0.7" stroke-linejoin="round">
|
|
<ellipse cx=${r-u*0.40} cy=${r-u*0.20} rx=${u*0.55} ry=${u*0.32} />
|
|
<ellipse cx=${r+u*0.20} cy=${r-u*0.40} rx=${u*0.48} ry=${u*0.30} />
|
|
<ellipse cx=${r+u*0.40} cy=${r+u*0.10} rx=${u*0.55} ry=${u*0.34} />
|
|
<ellipse cx=${r-u*0.10} cy=${r+u*0.30} rx=${u*0.60} ry=${u*0.32} />
|
|
</g>`}
|
|
</svg>`;
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// SCOPERETICLE — the big circular UTCI dial in the page header.
|
|
// ───────────────────────────────────────────────────────────────────
|
|
// This is the one with tick marks, the swept colour band, and the
|
|
// needle pointing at the current felt-temperature.
|
|
//
|
|
// Tweakable bits:
|
|
// • R = 86 outer ring radius (changes overall size)
|
|
// • cx, cy = 100 centre point (leave alone unless you also
|
|
// change the viewBox="0 0 200 200" below)
|
|
// • { length: 36 } number of tick marks (1 every 10°)
|
|
// • stressBands[] the colour ramp around the rim (matches UTCI)
|
|
// • (value + 10) / 60 maps UTCI -10..50 onto the 270° sweep —
|
|
// widen the dial range by changing those numbers
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date() }) {
|
|
// ── Day/night scene behind the readout ─────────────────────────────
|
|
// The whole back of the lens is a SkyScope-style scene: sky on top,
|
|
// grass on the bottom, sun positioned by elevation (or moon at night
|
|
// with its phase shadow). Mirrors the little hourly SkyScopes.
|
|
const cx = 100, cy = 100, R = 86;
|
|
const isDay = elev > -3;
|
|
const skyFill = skyFillForElev(elev);
|
|
const grass = grassFillForElev(elev);
|
|
const phase = moonPhaseFraction(dt);
|
|
const lensR = 95; // full back of the dial
|
|
const elevClamped = Math.max(-30, Math.min(90, elev));
|
|
const sunY = cy - Math.sin((elevClamped * Math.PI) / 180) * (lensR - 18);
|
|
const sunDrawR = 14;
|
|
const moonDrawR = 15;
|
|
const moonY = cy - 45; // float in the upper sky, away from the readout
|
|
const phaseOffset = Math.cos(2 * Math.PI * phase) * moonDrawR;
|
|
const moonLitFromRight = phase < 0.5;
|
|
const moonShadowCx = cx + (moonLitFromRight ? -phaseOffset : phaseOffset);
|
|
// Readout text colours flip with day/night for legibility against the sky.
|
|
const readoutColor = isDay ? '#1e1208' : '#f5edd6';
|
|
const readoutMutedColor = isDay ? '#9a7d5a' : '#d4c5a8';
|
|
const ticks = Array.from({ length: 36 }, (_, i) => {
|
|
const deg = i * 10 - 90;
|
|
const rad = (deg * Math.PI) / 180;
|
|
const major = i % 9 === 0;
|
|
const medium = i % 3 === 0;
|
|
const r2 = major ? R - 14 : medium ? R - 8 : R - 4;
|
|
return {
|
|
x1: cx + R * Math.cos(rad), y1: cy + R * Math.sin(rad),
|
|
x2: cx + r2 * Math.cos(rad), y2: cy + r2 * Math.sin(rad),
|
|
major, medium,
|
|
};
|
|
});
|
|
const stressBands = [
|
|
{ min: -40, max: -27, color: '#23408f' },
|
|
{ min: -27, max: -13, color: '#3f73c4' },
|
|
{ min: -13, max: 0, color: '#7eb0e0' },
|
|
{ min: 0, max: 9, color: '#bcd9ec' },
|
|
{ min: 9, max: 18, color: '#c8dcc0' },
|
|
{ min: 18, max: 26, color: '#6ab05a' },
|
|
{ min: 26, max: 32, color: '#e8c547' },
|
|
{ min: 32, max: 38, color: '#dc8a3a' },
|
|
{ min: 38, max: 46, color: '#c44a3a' },
|
|
{ min: 46, max: 50, color: '#7a1a1a' },
|
|
];
|
|
function fracToXY(frac, r) {
|
|
const deg = 135 + frac * 270;
|
|
const rad = (deg * Math.PI) / 180;
|
|
return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
|
|
}
|
|
function bandArcPath(band) {
|
|
const f1 = Math.min(1, Math.max(0, (band.min + 10) / 60));
|
|
const f2 = Math.min(1, Math.max(0, (band.max + 10) / 60));
|
|
const arcR = R - 18;
|
|
const [x1, y1] = fracToXY(f1, arcR);
|
|
const [x2, y2] = fracToXY(f2, arcR);
|
|
const large = (f2 - f1) * 270 > 180 ? 1 : 0;
|
|
return `M ${x1} ${y1} A ${arcR} ${arcR} 0 ${large} 1 ${x2} ${y2}`;
|
|
}
|
|
let needleX = cx, needleY = cy + 54;
|
|
if (value != null) {
|
|
const frac = Math.min(1, Math.max(0, (value + 10) / 60));
|
|
const deg = 135 + frac * 270;
|
|
const rad = (deg * Math.PI) / 180;
|
|
needleX = cx + 54 * Math.cos(rad);
|
|
needleY = cy + 54 * Math.sin(rad);
|
|
}
|
|
const glowColor = cat ? cat.bg : '#c8922a';
|
|
return html`
|
|
<svg viewBox="0 0 200 200" class="scope-ring" aria-label="Current UTCI scope readout">
|
|
<defs>
|
|
<radialGradient id="scope-bg-glow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color=${glowColor} stop-opacity="0.12" />
|
|
<stop offset="100%" stop-color=${glowColor} stop-opacity="0" />
|
|
</radialGradient>
|
|
<clipPath id="scope-lens-clip">
|
|
<circle cx=${cx} cy=${cy} r=${lensR} />
|
|
</clipPath>
|
|
<linearGradient id="scope-lens-grass" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color=${grass.top} />
|
|
<stop offset="100%" stop-color=${grass.bot} />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx=${cx} cy=${cy} r="96" fill="url(#scope-bg-glow)" />
|
|
|
|
<!-- Full sky + grass + sun/moon scene behind the readout -->
|
|
<g clip-path="url(#scope-lens-clip)">
|
|
<circle cx=${cx} cy=${cy} r=${lensR} fill=${skyFill} />
|
|
<path d=${`M ${cx - lensR} ${cy} A ${lensR} ${lensR} 0 0 0 ${cx + lensR} ${cy} Z`}
|
|
fill="url(#scope-lens-grass)" />
|
|
${isDay
|
|
? html`<${Fragment}>
|
|
<circle cx=${cx} cy=${sunY} r=${sunDrawR + 4} fill="#ffe9a0" opacity="0.55" />
|
|
<circle cx=${cx} cy=${sunY} r=${sunDrawR} fill="#fff3a8" stroke="#e6a32a" stroke-width="0.8" />
|
|
</>`
|
|
: html`<${Fragment}>
|
|
<circle cx=${cx} cy=${moonY} r=${moonDrawR} fill="#f5edd6" />
|
|
<circle cx=${moonShadowCx} cy=${moonY} r=${moonDrawR} fill=${skyFill} />
|
|
<circle cx=${cx} cy=${moonY} r=${moonDrawR} fill="none" stroke="rgba(245,237,214,0.55)" stroke-width="0.7" />
|
|
</>`}
|
|
</g>
|
|
${stressBands.map((b, i) => html`
|
|
<path key=${i} d=${bandArcPath(b)} fill="none"
|
|
stroke=${b.color} stroke-width="4" stroke-linecap="butt" />`)}
|
|
<circle cx=${cx} cy=${cy} r=${R} fill="none" stroke="#c9b08a" stroke-width="1.5" />
|
|
${ticks.map((t, i) => html`
|
|
<line key=${i} x1=${t.x1} y1=${t.y1} x2=${t.x2} y2=${t.y2}
|
|
stroke=${t.major ? '#c8922a' : t.medium ? '#c9b08a' : '#e0d0b0'}
|
|
stroke-width=${t.major ? 1.5 : 0.75} />`)}
|
|
<line x1=${cx - R + 3} y1=${cy} x2=${cx - 32} y2=${cy} stroke="#d4b896" stroke-width="0.75" />
|
|
<line x1=${cx + 32} y1=${cy} x2=${cx + R - 3} y2=${cy} stroke="#d4b896" stroke-width="0.75" />
|
|
<line x1=${cx} y1=${cy - R + 3} x2=${cx} y2=${cy - 32} stroke="#d4b896" stroke-width="0.75" />
|
|
<line x1=${cx} y1=${cy + 32} x2=${cx} y2=${cy + R - 3} stroke="#d4b896" stroke-width="0.75" />
|
|
<circle cx=${cx} cy=${cy} r="58" fill="none" stroke="#e8d8c0" stroke-width="0.75" />
|
|
<circle cx=${cx} cy=${cy} r="32" fill="none" stroke="#e8d8c0" stroke-width="0.5" />
|
|
|
|
${[[-1,-1],[1,-1],[-1,1],[1,1]].map(([sx, sy], i) => html`
|
|
<g key=${i}>
|
|
<line x1=${cx + sx*72} y1=${cy + sy*72} x2=${cx + sx*60} y2=${cy + sy*72}
|
|
stroke="#c9b08a" stroke-width="1" />
|
|
<line x1=${cx + sx*72} y1=${cy + sy*72} x2=${cx + sx*72} y2=${cy + sy*60}
|
|
stroke="#c9b08a" stroke-width="1" />
|
|
</g>`)}
|
|
${value != null && html`
|
|
<${Fragment}>
|
|
<line x1=${cx} y1=${cy} x2=${needleX} y2=${needleY}
|
|
stroke="#c8922a" stroke-width="5" stroke-linecap="round" opacity="0.18" />
|
|
<line x1=${cx} y1=${cy} x2=${needleX} y2=${needleY}
|
|
stroke="#c8922a" stroke-width="2.5" stroke-linecap="round" opacity="0.95" />
|
|
</>`}
|
|
<circle cx=${cx} cy=${cy} r="5.5" fill="#f5edd6" stroke="#c8922a" stroke-width="1.5" />
|
|
<circle cx=${cx} cy=${cy} r="2.5" fill="#c8922a" />
|
|
${loading
|
|
? html`<text x=${cx} y=${cy + 5} text-anchor="middle"
|
|
fill=${readoutMutedColor} font-size="11" font-family="monospace">· · ·</text>`
|
|
: value != null
|
|
? html`<${Fragment}>
|
|
<text x=${cx} y="152" text-anchor="middle"
|
|
fill=${readoutColor} font-size="26"
|
|
font-family="Fraunces, serif" font-weight="700">
|
|
${value.toFixed(1)}°
|
|
</text>
|
|
<text x=${cx} y=${cy + 15} text-anchor="middle"
|
|
fill=${readoutMutedColor} font-size="6.5"
|
|
font-family="JetBrains Mono, monospace" letter-spacing="2">
|
|
UTCI NOW
|
|
</text>
|
|
<text x=${cx} y=${cy + 23} text-anchor="middle"
|
|
fill=${glowColor} font-size="7"
|
|
font-family="JetBrains Mono, monospace" letter-spacing="0.8">
|
|
${cat.label.toUpperCase()}
|
|
</text>
|
|
</>`
|
|
: html`<text x=${cx} y=${cy + 5} text-anchor="middle"
|
|
fill=${readoutMutedColor} font-size="8"
|
|
font-family="JetBrains Mono, monospace" letter-spacing="1.2">
|
|
AWAITING
|
|
</text>`}
|
|
</svg>`;
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// PRECIPICON — rain drop or snowflake SVG for the precip cell.
|
|
// ───────────────────────────────────────────────────────────────────
|
|
// precip — mm/h rainfall
|
|
// snow — cm/h snowfall
|
|
// size — pixel size (default 28 to match CloudIcon)
|
|
//
|
|
// Intensity bands:
|
|
// dry → faint dash
|
|
// light rain (< 1 mm/h) → 1 drop
|
|
// moderate rain(< 4 mm/h) → 2 drops
|
|
// heavy rain (≥ 4 mm/h) → 3 drops
|
|
// light snow (< 0.5cm/h) → 1 flake
|
|
// heavy snow (≥ 0.5cm/h) → 2 flakes
|
|
// mixed → 1 drop + 1 flake
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
export function PrecipIcon({ precip = 0, snow = 0, size = 28 }) {
|
|
const r = size / 2;
|
|
const hasRain = precip > 0;
|
|
const hasSnow = snow > 0;
|
|
const mixed = hasRain && hasSnow;
|
|
|
|
// Drop shape: teardrop path centred on (cx, cy), radius dr
|
|
const drop = (cx, cy, dr) => {
|
|
const tip = cy + dr * 1.55;
|
|
const cw = dr * 0.72;
|
|
return `M ${cx} ${tip} C ${cx - cw} ${cy + dr * 0.6}, ${cx - dr} ${cy - dr * 0.3}, ${cx} ${cy - dr} C ${cx + dr} ${cy - dr * 0.3}, ${cx + cw} ${cy + dr * 0.6}, ${cx} ${tip} Z`;
|
|
};
|
|
|
|
// Six-pointed snowflake: centre lines + diagonal lines
|
|
const flake = (cx, cy, fr) => html`
|
|
<g stroke="#6090c8" stroke-width=${Math.max(1, size * 0.055)} stroke-linecap="round">
|
|
<line x1=${cx - fr} y1=${cy} x2=${cx + fr} y2=${cy} />
|
|
<line x1=${cx} y1=${cy - fr} x2=${cx} y2=${cy + fr} />
|
|
<line x1=${cx - fr * 0.7} y1=${cy - fr * 0.7} x2=${cx + fr * 0.7} y2=${cy + fr * 0.7} />
|
|
<line x1=${cx + fr * 0.7} y1=${cy - fr * 0.7} x2=${cx - fr * 0.7} y2=${cy + fr * 0.7} />
|
|
${[-1, 1].map(sx => [-1, 1].map(sy => html`
|
|
<line key=${`${sx}${sy}`}
|
|
x1=${cx + sx * fr * 0.55} y1=${cy + sy * 0}
|
|
x2=${cx + sx * fr * 0.75} y2=${cy + sy * fr * 0.3} />`))}
|
|
</g>`;
|
|
|
|
// Dry — just a faint dash
|
|
if (!hasRain && !hasSnow) {
|
|
return html`
|
|
<svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}
|
|
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<line x1=${r - size * 0.2} y1=${r} x2=${r + size * 0.2} y2=${r}
|
|
stroke="#c0a880" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>`;
|
|
}
|
|
|
|
// Rain intensity → number of drops
|
|
const rainDrops = !hasRain ? 0 : precip < 1 ? 1 : precip < 4 ? 2 : 3;
|
|
// Snow intensity → number of flakes
|
|
const snowFlakes = !hasSnow ? 0 : snow < 0.5 ? 1 : 2;
|
|
const dropColor = '#5090b0';
|
|
const dr = size * 0.13; // drop radius
|
|
const fr = size * 0.18; // flake arm length
|
|
|
|
// Layout: spread items evenly across the icon width
|
|
const items = (mixed ? rainDrops + snowFlakes : hasRain ? rainDrops : snowFlakes);
|
|
const spacing = size / (items + 1);
|
|
|
|
return html`
|
|
<svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}
|
|
style=${{ flexShrink: 0, display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' }}>
|
|
${mixed
|
|
? html`
|
|
${Array.from({ length: rainDrops }, (_, i) => html`
|
|
<path key=${'d' + i} d=${drop(spacing * (i + 1), r - dr * 0.3, dr)}
|
|
fill=${dropColor} opacity="0.9" />`)}
|
|
${Array.from({ length: snowFlakes }, (_, i) =>
|
|
flake(spacing * (rainDrops + i + 1), r, fr)
|
|
)}`
|
|
: hasRain
|
|
? Array.from({ length: rainDrops }, (_, i) => html`
|
|
<path key=${i} d=${drop(spacing * (i + 1), r - dr * 0.3, dr)}
|
|
fill=${dropColor} opacity="0.9" />`)
|
|
: Array.from({ length: snowFlakes }, (_, i) =>
|
|
flake(spacing * (i + 1), r, fr)
|
|
)}
|
|
</svg>`;
|
|
}
|