1794 lines
96 KiB
JavaScript
1794 lines
96 KiB
JavaScript
// ════════════════════════════════════════════════════════════════════════
|
||
// SUNSCOPE — single-file Preact app, no build step required.
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
//
|
||
// QUICK MAP — where to find common things to change
|
||
// ──────────────────────────────────────────────────────────────────────
|
||
//
|
||
// Forecast length .............. fetch URL contains &forecast_days=14
|
||
// Free tier day limit .......... const FREE_DAYS = 3
|
||
// Preview the Pro view ......... useState(false) on isPro → flip to true
|
||
// Confidence band colours ...... function confidenceBand() (hex codes)
|
||
// Sky-circle colours ........... function skyFillForElev() (by elev°)
|
||
// UTCI thermal-stress colours .. function utciCategory()
|
||
// Big UTCI dial design ......... function ScopeReticle()
|
||
// Small sun/moon circle ........ function SkyScope()
|
||
// Rain/snow penalty curve ...... function precipPenalty()
|
||
// Default columns shown ........ useState({...}) on visibleCols
|
||
// Page tagline / about copy .... search for "utci-tagline" or "utci-about-text"
|
||
// Starting location ............ useState({...}) on `location` near top of main
|
||
//
|
||
// HTM SYNTAX QUIRKS (the html`...` template literals look weird at first)
|
||
// ──────────────────────────────────────────────────────────────────────
|
||
// • Inside backticks, ${value} inserts a JS value
|
||
// • Use <${MyComponent}> instead of <MyComponent> for custom components
|
||
// • style=${{ color: 'red' }} double braces (CSS as a JS object)
|
||
// • class="x" or class=${cond ? 'a' : 'b'} both work
|
||
// • Conditionals: ${cond && html`<div>shown when true</div>`}
|
||
//
|
||
// AFTER EDITING
|
||
// ──────────────────────────────────────────────────────────────────────
|
||
// 1. Save the file.
|
||
// 2. Hard-refresh the page (Ctrl+F5 on Windows · Cmd+Shift+R on Mac).
|
||
// 3. To force every visitor to get the fresh version, bump the cache
|
||
// buster in index.html: sunscope.js?v=14d-local → ?v=14e
|
||
// 4. Open the browser console (F12 → Console) to see any errors —
|
||
// they always include the line number that broke.
|
||
//
|
||
// SAFETY TIP — before a big change, copy this file to sunscope.js.bak.
|
||
// If something breaks, just rename the backup back.
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
|
||
// Tiny framework imports — these are the only three "outside" dependencies.
|
||
// All three live in assets/vendor/ so the site has no external requests.
|
||
import { h, render, Fragment } from './vendor/preact.js';
|
||
import { useState, useEffect, useLayoutEffect, useRef } from './vendor/preact-hooks.js';
|
||
import htm from './vendor/htm.js';
|
||
|
||
// `html` is the magic tagged-template function. Use it like:
|
||
// html`<div class="foo">${someValue}</div>`
|
||
|
||
const html = htm.bind(h);
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// PHYSICAL CONSTANTS
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// These are real-world physics values — don't change them unless you
|
||
// have a peer-reviewed reason. They're used by calcTmrt() below to
|
||
// work out how much heat your skin actually absorbs from the sun.
|
||
// SIGMA — Stefan–Boltzmann constant (radiates heat)
|
||
// EPSILON_P — emissivity of human skin (~0.97)
|
||
// A_K — short-wave absorption coefficient for clothing
|
||
// ALBEDO_GRASS — how much sun grass reflects back at you (23%)
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
const SIGMA = 5.670374419e-8;
|
||
const EPSILON_P = 0.97;
|
||
const A_K = 0.7;
|
||
const ALBEDO_GRASS = 0.23;
|
||
|
||
// Vapour pressure (Magnus → hPa)
|
||
function vaporPressureHpa(Ta, RH) {
|
||
const es = 6.105 * Math.exp((17.27 * Ta) / (237.7 + Ta));
|
||
return es * (RH / 100);
|
||
}
|
||
|
||
// Solar elevation (NOAA simplified, degrees)
|
||
function solarElevationDeg(lat, lon, dateUTC) {
|
||
const start = Date.UTC(dateUTC.getUTCFullYear(), 0, 0);
|
||
const diff = dateUTC - start;
|
||
const DOY = Math.floor(diff / 86400000);
|
||
const hourUTC =
|
||
dateUTC.getUTCHours() +
|
||
dateUTC.getUTCMinutes() / 60 +
|
||
dateUTC.getUTCSeconds() / 3600;
|
||
const gamma = ((2 * Math.PI) / 365) * (DOY - 1 + (hourUTC - 12) / 24);
|
||
const eqtime =
|
||
229.18 *
|
||
(0.000075 +
|
||
0.001868 * Math.cos(gamma) -
|
||
0.032077 * Math.sin(gamma) -
|
||
0.014615 * Math.cos(2 * gamma) -
|
||
0.040849 * Math.sin(2 * gamma));
|
||
const decl =
|
||
0.006918 -
|
||
0.399912 * Math.cos(gamma) +
|
||
0.070257 * Math.sin(gamma) -
|
||
0.006758 * Math.cos(2 * gamma) +
|
||
0.000907 * Math.sin(2 * gamma) -
|
||
0.002697 * Math.cos(3 * gamma) +
|
||
0.00148 * Math.sin(3 * gamma);
|
||
const timeOffset = eqtime + 4 * lon;
|
||
const tst = hourUTC * 60 + timeOffset;
|
||
const ha = (((tst / 4) - 180) * Math.PI) / 180;
|
||
const latRad = (lat * Math.PI) / 180;
|
||
const cosZenith =
|
||
Math.sin(latRad) * Math.sin(decl) +
|
||
Math.cos(latRad) * Math.cos(decl) * Math.cos(ha);
|
||
const zenith = Math.acos(Math.max(-1, Math.min(1, cosZenith)));
|
||
return (Math.PI / 2 - zenith) * (180 / Math.PI);
|
||
}
|
||
|
||
// Mean radiant temperature
|
||
function calcTmrt(Ta, dirRad, diffRad, globalRad, solElev) {
|
||
const TaK = Ta + 273.15;
|
||
let fp = 0;
|
||
if (solElev > 0) {
|
||
const h2 = solElev;
|
||
fp = 0.308 * Math.cos((Math.PI / 180) * h2 * (0.998 - (h2 * h2) / 50000));
|
||
}
|
||
let DNI = 0;
|
||
if (solElev > 1) {
|
||
DNI = dirRad / Math.sin((solElev * Math.PI) / 180);
|
||
DNI = Math.min(DNI, 1100);
|
||
}
|
||
const Sshort = A_K * (fp * DNI + 0.5 * diffRad + 0.5 * ALBEDO_GRASS * globalRad);
|
||
const Slong = EPSILON_P * SIGMA * Math.pow(TaK, 4);
|
||
const TmrtK = Math.pow((Sshort + Slong) / (EPSILON_P * SIGMA), 0.25);
|
||
return TmrtK - 273.15;
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// UTCI POLYNOMIAL — DO NOT EDIT (or be VERY careful if you do)
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// This is the official 210-term Bröde et al. (2012) approximation.
|
||
// It takes air temp, mean radiant temp, wind, and humidity and returns
|
||
// the "felt" temperature. Every number is a peer-reviewed coefficient.
|
||
// Scroll past it — there's nothing here you'll want to change.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// UTCI 210-term polynomial (Bröde et al. 2012)
|
||
function utciApprox(Ta, Tmrt, va10, ehPa) {
|
||
const va = Math.max(0.5, Math.min(17, va10));
|
||
const D_Tmrt = Tmrt - Ta;
|
||
const Pa = ehPa / 10;
|
||
const T = Ta, V = va, D = D_Tmrt, P = Pa;
|
||
const T2=T*T, T3=T2*T, T4=T3*T, T5=T4*T, T6=T5*T;
|
||
const V2=V*V, V3=V2*V, V4=V3*V, V5=V4*V, V6=V5*V;
|
||
const D2=D*D, D3=D2*D, D4=D3*D, D5=D4*D, D6=D5*D;
|
||
const P2=P*P, P3=P2*P, P4=P3*P, P5=P4*P, P6=P5*P;
|
||
return T +
|
||
6.07562052e-1 +
|
||
-2.27712343e-2 * T + 8.06470249e-4 * T2 + -1.54271372e-4 * T3 +
|
||
-3.24651735e-6 * T4 + 7.32602852e-8 * T5 + 1.35959073e-9 * T6 +
|
||
-2.25836520e0 * V + 8.80326035e-2 * T*V + 2.16844454e-3 * T2*V +
|
||
-1.53347087e-5 * T3*V + -5.72983704e-7 * T4*V + -2.55090145e-9 * T5*V +
|
||
-7.51269505e-1 * V2 + -4.08350271e-3 * T*V2 + -5.21670675e-5 * T2*V2 +
|
||
1.94544667e-6 * T3*V2 + 1.14099531e-8 * T4*V2 +
|
||
1.58137256e-1 * V3 + -6.57263143e-5 * T*V3 + 2.22697524e-7 * T2*V3 +
|
||
-4.16117031e-8 * T3*V3 +
|
||
-1.27762753e-2 * V4 + 9.66891875e-6 * T*V4 + 2.52785852e-9 * T2*V4 +
|
||
4.56306672e-4 * V5 + -1.74202546e-7 * T*V5 +
|
||
-5.91491269e-6 * V6 +
|
||
3.98374029e-1 * D + 1.83945314e-4 * T*D + -1.73754510e-4 * T2*D +
|
||
-7.60781159e-7 * T3*D + 3.77830287e-8 * T4*D + 5.43079673e-10 * T5*D +
|
||
-2.00518269e-2 * V*D + 8.92859837e-4 * T*V*D + 3.45433048e-6 * T2*V*D +
|
||
-3.77925774e-7 * T3*V*D + -1.69699377e-9 * T4*V*D +
|
||
1.69992415e-4 * V2*D + -4.99204314e-5 * T*V2*D + 2.47417178e-7 * T2*V2*D +
|
||
1.07596466e-8 * T3*V2*D +
|
||
8.49242932e-5 * V3*D + 1.35191328e-6 * T*V3*D + -6.21531254e-9 * T2*V3*D +
|
||
-4.99410301e-6 * V4*D + -1.89489258e-8 * T*V4*D +
|
||
8.15300114e-8 * V5*D +
|
||
7.55043090e-4 * D2 + -5.65095215e-5 * T*D2 + -4.52166564e-7 * T2*D2 +
|
||
2.46688878e-8 * T3*D2 + 2.42674348e-10 * T4*D2 +
|
||
1.54547250e-4 * V*D2 + 5.24110970e-6 * T*V*D2 + -8.75874982e-8 * T2*V*D2 +
|
||
-1.50743064e-9 * T3*V*D2 +
|
||
-1.56236307e-5 * V2*D2 + -1.33895614e-7 * T*V2*D2 + 2.49709824e-9 * T2*V2*D2 +
|
||
6.51711721e-7 * V3*D2 + 1.94960053e-9 * T*V3*D2 +
|
||
-1.00361113e-8 * V4*D2 +
|
||
-1.21206673e-5 * D3 + -2.18203660e-7 * T*D3 + 7.51269482e-9 * T2*D3 +
|
||
9.79063848e-11 * T3*D3 +
|
||
1.25006734e-6 * V*D3 + -1.81584736e-9 * T*V*D3 + -3.52197671e-10 * T2*V*D3 +
|
||
-3.36514630e-8 * V2*D3 + 1.35908359e-10 * T*V2*D3 +
|
||
4.17032620e-10 * V3*D3 +
|
||
-1.30369025e-9 * D4 + 4.13908461e-10 * T*D4 + 9.22652254e-12 * T2*D4 +
|
||
-5.08220384e-9 * V*D4 + -2.24730961e-11 * T*V*D4 +
|
||
1.17139133e-10 * V2*D4 +
|
||
6.62154879e-10 * D5 + 4.03863260e-13 * T*D5 + 1.95087203e-12 * V*D5 +
|
||
-4.73602469e-12 * D6 +
|
||
5.12733497e0 * P + -3.12788561e-1 * T*P + -1.96701861e-2 * T2*P +
|
||
9.99690870e-4 * T3*P + 9.51738512e-6 * T4*P + -4.66426341e-7 * T5*P +
|
||
5.48050612e-1 * V*P + -3.30552823e-3 * T*V*P + -1.64119440e-3 * T2*V*P +
|
||
-5.16670694e-6 * T3*V*P + 9.52692432e-7 * T4*V*P +
|
||
-4.29223622e-2 * V2*P + 5.00845667e-3 * T*V2*P + 1.00601257e-6 * T2*V2*P +
|
||
-1.81748644e-6 * T3*V2*P +
|
||
-1.25813502e-3 * V3*P + -1.79330391e-4 * T*V3*P + 2.34994441e-6 * T2*V3*P +
|
||
1.29735808e-4 * V4*P + 1.29064870e-6 * T*V4*P +
|
||
-2.28558686e-6 * V5*P +
|
||
-3.69476348e-2 * D*P + 1.62325322e-3 * T*D*P + -3.14279680e-5 * T2*D*P +
|
||
2.59835559e-6 * T3*D*P + -4.77136523e-8 * T4*D*P +
|
||
8.64203390e-3 * V*D*P + -6.87405181e-4 * T*V*D*P + -9.13863872e-6 * T2*V*D*P +
|
||
5.15916806e-7 * T3*V*D*P +
|
||
-3.59217476e-5 * V2*D*P + 3.28696511e-5 * T*V2*D*P + -7.10542454e-7 * T2*V2*D*P +
|
||
-1.24382300e-5 * V3*D*P + -7.38584400e-9 * T*V3*D*P +
|
||
2.20609296e-7 * V4*D*P +
|
||
-7.32469180e-4 * D2*P + -1.87381964e-5 * T*D2*P + 4.80925239e-6 * T2*D2*P +
|
||
-8.75492040e-8 * T3*D2*P +
|
||
2.77862930e-5 * V*D2*P + -5.06004592e-6 * T*V*D2*P + 1.14325367e-7 * T2*V*D2*P +
|
||
2.53016723e-6 * V2*D2*P + -1.72857035e-8 * T*V2*D2*P +
|
||
-3.95079398e-8 * V3*D2*P +
|
||
-3.59413173e-7 * D3*P + 7.04388046e-7 * T*D3*P + -1.89309167e-8 * T2*D3*P +
|
||
-4.79768731e-7 * V*D3*P + 7.96079978e-9 * T*V*D3*P +
|
||
1.62897058e-9 * V2*D3*P +
|
||
3.94367674e-8 * D4*P + -1.18566247e-9 * T*D4*P +
|
||
3.34678041e-10 * V*D4*P +
|
||
-1.15606447e-10 * D5*P +
|
||
-2.80626406e0 * P2 + 5.48712484e-1 * T*P2 + -3.99428410e-3 * T2*P2 +
|
||
-9.54009191e-4 * T3*P2 + 1.93090978e-5 * T4*P2 +
|
||
-3.08806365e-1 * V*P2 + 1.16952364e-2 * T*V*P2 + 4.95271903e-4 * T2*V*P2 +
|
||
-1.90710882e-5 * T3*V*P2 +
|
||
2.10787756e-3 * V2*P2 + -6.98445738e-4 * T*V2*P2 + 2.30109073e-5 * T2*V2*P2 +
|
||
4.17856590e-4 * V3*P2 + -1.27043871e-5 * T*V3*P2 +
|
||
-3.04620472e-6 * V4*P2 +
|
||
5.14507424e-2 * D*P2 + -4.32510997e-3 * T*D*P2 + 8.99281156e-5 * T2*D*P2 +
|
||
-7.14663943e-7 * T3*D*P2 +
|
||
-2.66016305e-4 * V*D*P2 + 2.63789586e-4 * T*V*D*P2 + -7.01199003e-6 * T2*V*D*P2 +
|
||
-1.06823306e-4 * V2*D*P2 + 3.61341136e-6 * T*V2*D*P2 +
|
||
2.29748967e-7 * V3*D*P2 +
|
||
3.04788893e-4 * D2*P2 + -6.42070836e-5 * T*D2*P2 + 1.16257971e-6 * T2*D2*P2 +
|
||
7.68023384e-6 * V*D2*P2 + -5.47446896e-7 * T*V*D2*P2 +
|
||
-3.59937910e-8 * V2*D2*P2 +
|
||
-4.36497725e-6 * D3*P2 + 1.68737969e-7 * T*D3*P2 +
|
||
2.67489271e-8 * V*D3*P2 +
|
||
3.23926897e-9 * D4*P2 +
|
||
-3.53874123e-2 * P3 + -2.21201190e-1 * T*P3 + 1.55126038e-2 * T2*P3 +
|
||
-2.63917279e-4 * T3*P3 +
|
||
4.53433455e-2 * V*P3 + -4.32943862e-3 * T*V*P3 + 1.45389826e-4 * T2*V*P3 +
|
||
2.17508610e-4 * V2*P3 + -6.66724702e-5 * T*V2*P3 +
|
||
3.33217140e-5 * V3*P3 +
|
||
-2.26921615e-3 * D*P3 + 3.80261982e-4 * T*D*P3 + -5.45314314e-9 * T2*D*P3 +
|
||
-7.96355448e-4 * V*D*P3 + 2.53458034e-5 * T*V*D*P3 +
|
||
-6.31223658e-6 * V2*D*P3 +
|
||
3.02122035e-4 * D2*P3 + -4.77403547e-6 * T*D2*P3 +
|
||
1.73825715e-6 * V*D2*P3 +
|
||
-4.09087898e-7 * D3*P3 +
|
||
6.14155345e-1 * P4 + -6.16755931e-2 * T*P4 + 1.33374846e-3 * T2*P4 +
|
||
3.55375387e-3 * V*P4 + -5.13027851e-4 * T*V*P4 +
|
||
1.02449757e-4 * V2*P4 +
|
||
-1.48526421e-3 * D*P4 + -4.11469183e-5 * T*D*P4 +
|
||
-6.80434415e-6 * V*D*P4 +
|
||
-9.77675906e-6 * D2*P4 +
|
||
8.82773108e-2 * P5 + -3.01859306e-3 * T*P5 +
|
||
1.04452989e-3 * V*P5 +
|
||
2.47090539e-4 * D*P5 +
|
||
1.48348065e-3 * P6;
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// UTCI THERMAL STRESS BANDS — the coloured pills in the table.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// To recolour any band, change its bg/fg hex code. To shift the
|
||
// boundary between bands (e.g. make "Comfortable" wider), change the
|
||
// `if (u < …)` thresholds. Order matters — they're checked top-down.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// UTCI stress bands
|
||
function utciCategory(u) {
|
||
if (u < -40) return { label: 'Extreme cold', bg: '#1a1438', fg: '#fff' };
|
||
if (u < -27) return { label: 'Very strong cold', bg: '#23408f', fg: '#fff' };
|
||
if (u < -13) return { label: 'Arctic', bg: '#3f73c4', fg: '#fff' };
|
||
if (u < 0) return { label: 'Freezing', bg: '#7eb0e0', fg: '#1a1612' };
|
||
if (u < 9) return { label: 'Cold', bg: '#bcd9ec', fg: '#1a1612' };
|
||
if (u < 18) return { label: 'Chilled', bg: '#c8dcc0', fg: '#1a1612' };
|
||
if (u < 26) return { label: 'Comfortable', bg: '#6ab05a', fg: '#fff' };
|
||
if (u < 32) return { label: 'Moderate heat', bg: '#e8c547', fg: '#1a1612' };
|
||
if (u < 38) return { label: 'Strong heat', bg: '#dc8a3a', fg: '#1a1612' };
|
||
if (u < 46) return { label: 'Very strong heat', bg: '#c44a3a', fg: '#fff' };
|
||
return { label: 'Extreme heat', bg: '#7a1a1a', fg: '#fff' };
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// SOAK-FACTOR — SunScope's original rain/snow penalty.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// This is what makes "UTCI+P" different from plain UTCI. It subtracts
|
||
// extra felt-temperature for rain (wet clothing = evaporative chill)
|
||
// and snow (wet snow is brutal). Wind amplifies the rain penalty.
|
||
// Calibrated by feel — adjust the multipliers if you find it too
|
||
// strong/weak. The big number "7" caps the max rain penalty so a
|
||
// freak 50mm/h reading can't make UTCI nonsensical.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// Precipitation penalty (the SunScope soak-factor)
|
||
function precipPenalty(precipMm, snowCmH, windMs) {
|
||
let penalty = 0;
|
||
if (precipMm > 0) {
|
||
const base = Math.min(7, 1.4 * Math.pow(precipMm, 0.55) + precipMm * 0.28);
|
||
const windMult = 1 + Math.min(0.35, windMs * 0.025);
|
||
penalty += base * windMult;
|
||
}
|
||
if (snowCmH > 0) penalty += Math.min(6, 2.2 + snowCmH * 1.6);
|
||
return -Math.round(penalty * 10) / 10;
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// WIND COMPASS — meteorological bearing (deg FROM) → 8-point label.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// 0/360 = wind FROM north. The pointer in WindVane should rotate so
|
||
// the arrow's tail points to this bearing (i.e. shows where the wind
|
||
// comes from), matching how real weather vanes behave.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
function windCompass8(deg) {
|
||
if (deg == null || isNaN(deg)) return { label: '—', snapped: 0 };
|
||
const dirs = ['N','NE','E','SE','S','SW','W','NW'];
|
||
const idx = Math.round(((deg % 360) + 360) % 360 / 45) % 8;
|
||
return { label: dirs[idx], snapped: idx * 45 };
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// UV-A / UV-B SPLIT (estimate, not measurement).
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// Open-Meteo gives a total erythemal UV index. UV-A reaches the
|
||
// surface much more reliably than UV-B; UV-B is far more sensitive
|
||
// to solar elevation because of atmospheric path length.
|
||
//
|
||
// Cheap model:
|
||
// At noon (sun overhead) the UV-B share of total UV index is ~15%,
|
||
// UV-A about 85%. Below ~10° solar elevation, UV-B falls off fast.
|
||
// We return two pseudo-"index" numbers so the columns are in the
|
||
// same units the user already understands.
|
||
// Label these as estimates in the UI.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
function uvSplit(uv, elevDeg) {
|
||
if (!uv || uv <= 0 || elevDeg <= 0) return { uvA: 0, uvB: 0 };
|
||
const sinE = Math.sin(elevDeg * Math.PI / 180);
|
||
const uvbFr = Math.max(0.005, Math.min(0.15, 0.15 * Math.pow(sinE, 1.6)));
|
||
const uvaFr = 1 - uvbFr;
|
||
return { uvA: uv * uvaFr, uvB: uv * uvbFr };
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// SUNBURN TIME — minutes to MED for the chosen Fitzpatrick skin type.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// Standard erythemal model: time_min ≈ base_minutes[type] / UV_index.
|
||
// Numbers are the well-known "unprotected, midday, no sunscreen"
|
||
// reference times at UV = 1. Returns Infinity when UV is 0 (night).
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
const SKIN_TYPES = {
|
||
I: { name: 'I · Very fair', base: 67 },
|
||
II: { name: 'II · Fair', base: 100 },
|
||
III: { name: 'III · Light', base: 200 },
|
||
IV: { name: 'IV · Mid', base: 300 },
|
||
V: { name: 'V · Dark', base: 400 },
|
||
VI: { name: 'VI · Very dark', base: 500 },
|
||
};
|
||
function sunburnMinutes(uv, skinType = 'II') {
|
||
if (!uv || uv <= 0) return Infinity;
|
||
const base = (SKIN_TYPES[skinType] || SKIN_TYPES.II).base;
|
||
return base / uv;
|
||
}
|
||
function burnLabel(mins) {
|
||
if (!isFinite(mins)) return '—';
|
||
if (mins >= 480) return '8h+';
|
||
if (mins >= 60) return `${(mins/60).toFixed(1)}h`;
|
||
return `${Math.round(mins)}m`;
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// CLOUD CATEGORY — pick one of 4 icon styles from low/mid/high split.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// Returns: 'clear' | 'wispy' | 'scattered' | 'overcast'
|
||
// Uses total cover for headline level, but biases towards 'wispy'
|
||
// when only high cloud is present (cirrus barely blocks the sun).
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
function cloudCategory(total, low, mid, high) {
|
||
const t = total ?? 0;
|
||
const l = low ?? 0;
|
||
const m = mid ?? 0;
|
||
const h = high ?? 0;
|
||
if (t < 10) return 'clear';
|
||
// Mostly high cloud with little low/mid → wispy regardless of % total
|
||
if (h > 40 && l < 25 && m < 25) return 'wispy';
|
||
if (t < 40) return 'wispy';
|
||
if (t < 75) return 'scattered';
|
||
return 'overcast';
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// CONFIDENCE BANDS — smooth high-noon → sunset gradient on day tabs.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// `i` is the day index (0 = today, 13 = day 14).
|
||
//
|
||
// Each day gets its own shade, interpolated between two endpoint
|
||
// colours. To re-skin the gradient (say, blue-to-purple instead of
|
||
// sunset), just change the four RGB endpoint arrays below.
|
||
//
|
||
// bg = tab background (lighter on day 0, darker on day 13)
|
||
// edge = active-tab underline + slim border on the banner
|
||
// tint = soft wash on the confidence banner above the table
|
||
// label = qualitative zone name shown in the banner ("Golden hour")
|
||
//
|
||
// The label switches in 4 stages so users still see a friendly
|
||
// description ("you're in the trustworthy zone" vs "this is an
|
||
// outlook"). The tab background itself flows smoothly day to day.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
function confidenceBand(i) {
|
||
// Position along the gradient: 0 on day 0, 1 on day 13.
|
||
const t = Math.min(1, Math.max(0, i / 13));
|
||
|
||
// ENDPOINTS — change these four RGB arrays to re-skin the gradient.
|
||
const bgStart = [255, 247, 214]; // #fff7d6 pale yellow (high noon)
|
||
const bgEnd = [232, 152, 104]; // #e89868 terracotta (sunset)
|
||
const edgeStart = [245, 231, 161]; // #f5e7a1 soft golden
|
||
const edgeEnd = [196, 115, 64]; // #c47340 burnt umber
|
||
|
||
// Linear interpolation between the two endpoints.
|
||
const lerp = (a, b) => Math.round(a + t * (b - a));
|
||
const mix = (s, e) => [lerp(s[0], e[0]), lerp(s[1], e[1]), lerp(s[2], e[2])];
|
||
|
||
const [br, bg, bb] = mix(bgStart, bgEnd);
|
||
const [er, eg, eb] = mix(edgeStart, edgeEnd);
|
||
|
||
return {
|
||
bg: `rgb(${br}, ${bg}, ${bb})`,
|
||
edge: `rgb(${er}, ${eg}, ${eb})`,
|
||
tint: `rgba(${er}, ${eg}, ${eb}, 0.22)`,
|
||
// Qualitative confidence label (camera-focus metaphor —
|
||
// on-brand for SunScope, and instantly readable).
|
||
label: i < 3 ? 'Pin-sharp' // days 1–3 highest skill
|
||
: i < 7 ? 'Sharp' // days 4–7 solid
|
||
: i < 10 ? 'Soft focus' // days 8–10 trends only
|
||
: 'Blurry', // days 11–14 outlook only
|
||
};
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// MOON PHASE — works out which moon emoji to show on night hours.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// Returns a fraction 0..1:
|
||
// 0.00 = new moon 0.50 = full moon
|
||
// 0.25 = first quarter 0.75 = last quarter
|
||
// The maths is a simple synodic-period calculation referenced from
|
||
// a known new moon (6 Jan 2000). Accurate to within a few hours.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// Moon phase
|
||
function moonPhaseFraction(date) {
|
||
const JD = date.getTime() / 86400000 + 2440587.5;
|
||
const syn = 29.530588;
|
||
const ref = 2451550.1;
|
||
let p = ((JD - ref) % syn) / syn;
|
||
if (p < 0) p += 1;
|
||
return p;
|
||
}
|
||
function moonGlyph(p) {
|
||
return ['🌑','🌒','🌓','🌔','🌕','🌖','🌗','🌘'][Math.floor(p*8 + 0.5) % 8];
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// SKY FILL — colour inside the little circle, based on sun elevation.
|
||
// ───────────────────────────────────────────────────────────────────
|
||
// > 30° high noon (bright blue)
|
||
// > 10° mid-sky (pale blue)
|
||
// > 3° morning/afternoon (warm gold)
|
||
// > -3° golden hour / sunset (deep amber)
|
||
// > -8° civil twilight (dusky lilac)
|
||
// > -14° nautical twilight (deep blue-violet)
|
||
// else night (indigo)
|
||
// To shift "when sunset starts" visually, tweak the elevation
|
||
// thresholds. To recolour: replace the hex codes.
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// Sky-fill colour by solar elevation
|
||
function skyFillForElev(e) {
|
||
if (e > 30) return '#9fd3ef';
|
||
if (e > 10) return '#c8e3ee';
|
||
if (e > 3) return '#ffd596';
|
||
if (e > -3) return '#f59b6e';
|
||
if (e > -8) return '#9279b0';
|
||
if (e > -14) return '#3a2f60';
|
||
return '#1a1538';
|
||
}
|
||
|
||
// Grass palette — mirrors skyFillForElev but for the ground.
|
||
// `top` = grass blade tips (catches sky light), `bot` = soil shadow.
|
||
function grassFillForElev(e) {
|
||
if (e > 30) return { top: '#86c44a', bot: '#558a2e' }; // bright noon grass
|
||
if (e > 10) return { top: '#7ab846', bot: '#4d802c' }; // mid-day
|
||
if (e > 3) return { top: '#b8a83e', bot: '#7a6a26' }; // golden-hour glow
|
||
if (e > -3) return { top: '#c08048', bot: '#7a4a2a' }; // sunrise/sunset embers
|
||
if (e > -8) return { top: '#665884', bot: '#3e3556' }; // civil twilight purple
|
||
if (e > -14) return { top: '#363356', bot: '#1c1a34' }; // nautical night
|
||
return { top: '#201d3a', bot: '#0d0b20' }; // astronomical night
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// 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
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
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
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
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
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
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
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
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>`;
|
||
}
|
||
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
// MAIN COMPONENT — this is what the page renders.
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
// Everything below is one big function. Reading order:
|
||
//
|
||
// 1. STATE (useState calls) — the bits that change as
|
||
// the user clicks around.
|
||
// 2. EFFECTS (useEffect calls) — code that runs when
|
||
// something changes
|
||
// (search input, location).
|
||
// 3. COMPUTATION (hourlyRows, days, …) — turns raw API data into
|
||
// rows ready to display.
|
||
// 4. JSX RETURN (the big html`...`) — the actual page markup.
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
function UTCIForecast() {
|
||
|
||
// ── 1. STATE ──────────────────────────────────────────────────────────
|
||
// Each useState() pairs a value with a setter. Calling the setter
|
||
// re-renders the page with the new value.
|
||
|
||
// The location we're forecasting for. Change the values below to set
|
||
// a different starting location for new visitors.
|
||
const [location, setLocation] = useState({
|
||
name: 'Pangbourne, Berkshire',
|
||
lat: 51.4839,
|
||
lon: -1.0725,
|
||
country: 'GB',
|
||
});
|
||
|
||
const [forecast, setForecast] = useState(null); // raw Open-Meteo response
|
||
const [loading, setLoading] = useState(false); // true while fetching
|
||
const [error, setError] = useState(null); // fetch error message
|
||
const [searchQuery, setSearchQuery] = useState(''); // text in the search box
|
||
const [searchResults, setSearchResults] = useState([]); // geocoding dropdown
|
||
const [searching, setSearching] = useState(false); // search-in-flight flag
|
||
const [selectedDay, setSelectedDay] = useState(0); // which day tab is active
|
||
const [proPromptDay, setProPromptDay] = useState(null); // locked day clicked → show upsell card
|
||
|
||
// Day-tabs horizontal scrolling — chevrons show only when there's more
|
||
// content to reveal in that direction. Auto-scrolls active tab into view.
|
||
const dayTabsRef = useRef(null);
|
||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||
// Re-runs whenever the number of day tabs changes (e.g. when the
|
||
// forecast finishes loading and the tabs first appear). Also re-measures
|
||
// on scroll, on window resize, and via ResizeObserver if the element's
|
||
// own width changes (e.g. layout shifts when sidebar opens).
|
||
useEffect(() => {
|
||
const el = dayTabsRef.current;
|
||
if (!el) return;
|
||
const update = () => {
|
||
setCanScrollLeft(el.scrollLeft > 1);
|
||
setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
||
};
|
||
update();
|
||
el.addEventListener('scroll', update, { passive: true });
|
||
window.addEventListener('resize', update);
|
||
let ro = null;
|
||
if (typeof ResizeObserver !== 'undefined') {
|
||
ro = new ResizeObserver(update);
|
||
ro.observe(el);
|
||
}
|
||
return () => {
|
||
el.removeEventListener('scroll', update);
|
||
window.removeEventListener('resize', update);
|
||
if (ro) ro.disconnect();
|
||
};
|
||
}, [forecast]);
|
||
useEffect(() => {
|
||
const el = dayTabsRef.current;
|
||
if (!el) return;
|
||
const activeTab = el.querySelector('.utci-day-tab.active');
|
||
if (!activeTab) return;
|
||
const elRect = el.getBoundingClientRect();
|
||
const tabRect = activeTab.getBoundingClientRect();
|
||
if (tabRect.left < elRect.left + 8) {
|
||
el.scrollBy({ left: tabRect.left - elRect.left - 24, behavior: 'smooth' });
|
||
} else if (tabRect.right > elRect.right - 8) {
|
||
el.scrollBy({ left: tabRect.right - elRect.right + 24, behavior: 'smooth' });
|
||
}
|
||
}, [selectedDay]);
|
||
const scrollDayTabs = (dir) => {
|
||
const el = dayTabsRef.current;
|
||
if (!el) return;
|
||
el.scrollBy({ left: dir * 200, behavior: 'smooth' });
|
||
};
|
||
|
||
// ─── PRO TIER STUB ────────────────────────────────────────────────────
|
||
// FLIP THE `false` BELOW TO `true` TO PREVIEW THE PRO EXPERIENCE.
|
||
// When this is wired to real billing/auth, replace `useState(false)`
|
||
// with a check against the logged-in user.
|
||
const [isPro, setIsPro] = useState(true);
|
||
|
||
// How many days the free tier shows. Days beyond this get a 🔒.
|
||
// Bump this number if you want to give free users more access.
|
||
const FREE_DAYS = 3;
|
||
|
||
// Which columns appear in the hourly table by default.
|
||
// true = visible on first load (and the only ones free users see)
|
||
// false = hidden by default (Pro users can toggle these on)
|
||
const [visibleCols, setVisibleCols] = useState({
|
||
hour: true, air: true, rh: false, dew: false,
|
||
wind: true, dir: false,
|
||
cloud: false, sun: false, direct: false, diffuse: false,
|
||
tmrt: false, delta: false, utci: false,
|
||
uvA: false, uvB: false, burn: false,
|
||
utciP: true, precip: true,
|
||
soilT: false, soilT6: false, soilM: false,
|
||
});
|
||
const toggleCol = (col) => setVisibleCols(prev => ({ ...prev, [col]: !prev[col] }));
|
||
|
||
// Skin type for the sunburn-time column. Fitzpatrick II is typical UK fair.
|
||
const [skinType, setSkinType] = useState('II');
|
||
const searchTimeout = useRef(null);
|
||
|
||
// Refs for the two-scroller table layout (sticky-to-viewport header +
|
||
// horizontally-scrolling body). The header is clipped (overflow:hidden)
|
||
// and its inner "track" gets translateX'd via JS to follow the body's
|
||
// scrollLeft. See the useLayoutEffect just below where the JS sync
|
||
// happens, and the .utci-thead-sticky / .utci-tbody-scroll CSS rules.
|
||
const headStickyRef = useRef(null);
|
||
const headTrackRef = useRef(null);
|
||
const headTableRef = useRef(null);
|
||
const bodyScrollRef = useRef(null);
|
||
const bodyTableRef = useRef(null);
|
||
|
||
// ─── TABLE SCROLL SYNC ───────────────────────────────────────────────
|
||
// The hourly table is rendered as two stacked scroll areas:
|
||
// • Sticky header strip (locked to viewport top, clipped)
|
||
// • Body scroller (overflow-x: auto — owns the horizontal scrollbar)
|
||
// We need to (a) keep the header track shifted horizontally to match
|
||
// the body's scrollLeft, and (b) keep the header cells the same pixel
|
||
// width as the body cells even as columns toggle or the window resizes.
|
||
// ─────────────────────────────────────────────────────────────────────
|
||
const handleBodyScroll = () => {
|
||
const track = headTrackRef.current;
|
||
const body = bodyScrollRef.current;
|
||
if (!track || !body) return;
|
||
track.style.transform = `translate3d(${-body.scrollLeft}px, 0, 0)`;
|
||
};
|
||
|
||
useLayoutEffect(() => {
|
||
// Synchronise the head and body table column widths with a
|
||
// "shrink-to-fit then distribute" strategy:
|
||
// • Measure each column's true natural (content-fit) width by
|
||
// temporarily switching both tables to table-layout: auto +
|
||
// width: max-content. White-space: nowrap on cells stops content
|
||
// from wrapping, so the measurement is the smallest width that
|
||
// won't clip the content.
|
||
// • If the body scroller has spare horizontal space (natural total
|
||
// < container width), scale every column up proportionally to
|
||
// fill it — so toggling columns off makes the remaining ones fan
|
||
// out instead of leaving an awkward gap.
|
||
// • Otherwise apply the natural widths as-is and let the body
|
||
// scroller's overflow-x: auto produce a horizontal scrollbar.
|
||
const sync = () => {
|
||
const headTable = headTableRef.current;
|
||
const bodyTable = bodyTableRef.current;
|
||
const bodyScroll = bodyScrollRef.current;
|
||
if (!headTable || !bodyTable || !bodyScroll) return;
|
||
const bodyRow = bodyTable.querySelector('tbody tr');
|
||
const headRow = headTable.querySelector('thead tr');
|
||
if (!bodyRow || !headRow) return;
|
||
const headCells = Array.from(headRow.children);
|
||
const bodyCells = Array.from(bodyRow.children);
|
||
const n = Math.min(headCells.length, bodyCells.length);
|
||
if (n === 0) return;
|
||
|
||
// Step 1: clear any previously-forced cell widths and switch the
|
||
// tables to natural sizing so the measurement reflects the true
|
||
// content-fit width — independent of how wide the container is.
|
||
headCells.forEach(c => { c.style.width = ''; c.style.minWidth = ''; c.style.maxWidth = ''; });
|
||
bodyCells.forEach(c => { c.style.width = ''; c.style.minWidth = ''; c.style.maxWidth = ''; });
|
||
headTable.style.width = 'max-content';
|
||
bodyTable.style.width = 'max-content';
|
||
headTable.style.tableLayout = 'auto';
|
||
bodyTable.style.tableLayout = 'auto';
|
||
|
||
// Step 2: read each cell's natural width. getBoundingClientRect
|
||
// forces synchronous layout — that's what we want.
|
||
const naturalW = new Array(n);
|
||
let naturalTotal = 0;
|
||
for (let i = 0; i < n; i++) {
|
||
const headW = headCells[i].getBoundingClientRect().width;
|
||
const bodyW = bodyCells[i].getBoundingClientRect().width;
|
||
const w = Math.max(Math.ceil(headW), Math.ceil(bodyW));
|
||
naturalW[i] = w;
|
||
naturalTotal += w;
|
||
}
|
||
|
||
// Step 3: decide final widths based on available container width.
|
||
const containerW = bodyScroll.clientWidth;
|
||
const finalW = new Array(n);
|
||
let totalWidth;
|
||
if (naturalTotal > 0 && naturalTotal < containerW) {
|
||
// Spare space — distribute proportionally across columns so they
|
||
// fan out to fill the scroller (no awkward right-hand gap).
|
||
const scale = containerW / naturalTotal;
|
||
let running = 0;
|
||
for (let i = 0; i < n - 1; i++) {
|
||
finalW[i] = Math.floor(naturalW[i] * scale);
|
||
running += finalW[i];
|
||
}
|
||
// Absorb sub-pixel rounding into the last column so the total
|
||
// exactly matches the container width.
|
||
finalW[n - 1] = containerW - running;
|
||
totalWidth = containerW;
|
||
} else {
|
||
// Naturals don't fit — use them as-is and let the body scroll.
|
||
for (let i = 0; i < n; i++) finalW[i] = naturalW[i];
|
||
totalWidth = naturalTotal;
|
||
}
|
||
|
||
// Step 4: restore the CSS-defined table-layout: fixed so the
|
||
// explicit cell widths we apply below are honoured by the browser
|
||
// (not redistributed by the auto-layout algorithm).
|
||
headTable.style.tableLayout = '';
|
||
bodyTable.style.tableLayout = '';
|
||
|
||
// Step 5: apply the final width to both head and body cells.
|
||
for (let i = 0; i < n; i++) {
|
||
const px = `${finalW[i]}px`;
|
||
headCells[i].style.width = px;
|
||
headCells[i].style.minWidth = px;
|
||
headCells[i].style.maxWidth = px;
|
||
bodyCells[i].style.width = px;
|
||
bodyCells[i].style.minWidth = px;
|
||
bodyCells[i].style.maxWidth = px;
|
||
}
|
||
// Make both tables exactly totalWidth wide so they share the same
|
||
// horizontal extent — column N in the header sits directly above
|
||
// column N in the body, no drift as you scroll right.
|
||
headTable.style.width = `${totalWidth}px`;
|
||
bodyTable.style.width = `${totalWidth}px`;
|
||
// Re-apply current horizontal offset so column alignment survives.
|
||
handleBodyScroll();
|
||
};
|
||
// Run once after layout
|
||
sync();
|
||
// Re-sync when the scroll container's width changes (window resize,
|
||
// sidebar opens, etc). We observe the scroller — not the body table —
|
||
// because the body table's width is now driven by sync itself, which
|
||
// would otherwise create a feedback loop.
|
||
let ro = null;
|
||
if (typeof ResizeObserver !== 'undefined' && bodyScrollRef.current) {
|
||
ro = new ResizeObserver(sync);
|
||
ro.observe(bodyScrollRef.current);
|
||
}
|
||
window.addEventListener('resize', sync);
|
||
return () => {
|
||
if (ro) ro.disconnect();
|
||
window.removeEventListener('resize', sync);
|
||
};
|
||
}, [forecast, visibleCols, selectedDay, skinType]);
|
||
|
||
// Geocoding search
|
||
useEffect(() => {
|
||
if (searchQuery.length < 2) { setSearchResults([]); return; }
|
||
if (searchTimeout.current) clearTimeout(searchTimeout.current);
|
||
searchTimeout.current = setTimeout(async () => {
|
||
setSearching(true);
|
||
try {
|
||
const r = await fetch(
|
||
`https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(searchQuery)}&count=6&language=en&format=json`
|
||
);
|
||
const j = await r.json();
|
||
setSearchResults(j.results || []);
|
||
} catch { setSearchResults([]); }
|
||
finally { setSearching(false); }
|
||
}, 300);
|
||
}, [searchQuery]);
|
||
|
||
// ─── FORECAST FETCH ──────────────────────────────────────────────────
|
||
// Runs every time `location` changes (i.e. when a new city is picked).
|
||
// Builds the Open-Meteo URL and stores the response in `forecast`.
|
||
// Change forecast_days=14 below to fetch a different range (max 16).
|
||
// Add or remove fields in the `&hourly=...` list to fetch more data —
|
||
// but if you remove one that's used elsewhere, expect errors.
|
||
useEffect(() => {
|
||
async function load() {
|
||
setLoading(true); setError(null);
|
||
try {
|
||
const url =
|
||
`https://api.open-meteo.com/v1/forecast` +
|
||
`?latitude=${location.lat}&longitude=${location.lon}` +
|
||
`&hourly=temperature_2m,relative_humidity_2m,dew_point_2m,` +
|
||
`wind_speed_10m,wind_direction_10m,wind_gusts_10m,` +
|
||
`direct_radiation,diffuse_radiation,shortwave_radiation,` +
|
||
`cloud_cover,cloud_cover_low,cloud_cover_mid,cloud_cover_high,` +
|
||
`uv_index,precipitation,snowfall,` +
|
||
`soil_temperature_0cm,soil_temperature_6cm,soil_moisture_0_to_1cm` +
|
||
`&wind_speed_unit=ms&timezone=auto&forecast_days=14`;
|
||
const r = await fetch(url);
|
||
if (!r.ok) throw new Error(`Open-Meteo HTTP ${r.status}`);
|
||
setForecast(await r.json());
|
||
} catch (e) { setError(e.message); }
|
||
finally { setLoading(false); }
|
||
}
|
||
load();
|
||
}, [location]);
|
||
|
||
// ─── COMPUTATION ─────────────────────────────────────────────────────
|
||
// Take the raw API arrays and stitch them into one object per hour,
|
||
// calculating UTCI + soak-factor for each row. This is what gets
|
||
// displayed in the table.
|
||
const hourlyRows = forecast ? forecast.hourly.time.map((iso, i) => {
|
||
const h = forecast.hourly;
|
||
const Ta = h.temperature_2m[i];
|
||
const RH = h.relative_humidity_2m[i];
|
||
const dew = h.dew_point_2m ? h.dew_point_2m[i] : null;
|
||
const va = h.wind_speed_10m[i];
|
||
const wd = h.wind_direction_10m ? h.wind_direction_10m[i] : null;
|
||
const gust = h.wind_gusts_10m ? h.wind_gusts_10m[i] : null;
|
||
const dir = h.direct_radiation[i] || 0;
|
||
const dif = h.diffuse_radiation[i] || 0;
|
||
const glob = h.shortwave_radiation[i] || 0;
|
||
const cc = h.cloud_cover[i];
|
||
const ccLow = h.cloud_cover_low ? h.cloud_cover_low[i] : null;
|
||
const ccMid = h.cloud_cover_mid ? h.cloud_cover_mid[i] : null;
|
||
const ccHigh = h.cloud_cover_high ? h.cloud_cover_high[i] : null;
|
||
const uv = h.uv_index ? (h.uv_index[i] || 0) : 0;
|
||
const precip = h.precipitation[i] || 0;
|
||
const snow = h.snowfall[i] || 0;
|
||
const soilT0 = h.soil_temperature_0cm ? h.soil_temperature_0cm[i] : null;
|
||
const soilT6 = h.soil_temperature_6cm ? h.soil_temperature_6cm[i] : null;
|
||
const soilM = h.soil_moisture_0_to_1cm ? h.soil_moisture_0_to_1cm[i] : null;
|
||
const dt = new Date(iso);
|
||
const elev = solarElevationDeg(location.lat, location.lon, dt);
|
||
const eh = vaporPressureHpa(Ta, RH);
|
||
const Tmrt = calcTmrt(Ta, dir, dif, glob, elev);
|
||
const utci = utciApprox(Ta, Tmrt, va, eh);
|
||
const utciAdj = utci + precipPenalty(precip, snow, va);
|
||
// Derived
|
||
const compass = windCompass8(wd);
|
||
const { uvA, uvB } = uvSplit(uv, elev);
|
||
const cloudCat = cloudCategory(cc, ccLow, ccMid, ccHigh);
|
||
return {
|
||
iso, dt, Ta, RH, dew, va, wd, gust, dir, dif, glob,
|
||
cc, ccLow, ccMid, ccHigh, cloudCat,
|
||
uv, uvA, uvB,
|
||
precip, snow,
|
||
soilT0, soilT6, soilM,
|
||
elev, Tmrt, utci, utciAdj, eh, compass,
|
||
};
|
||
}) : [];
|
||
|
||
// Group those hourly rows into days for the day tabs.
|
||
const days = [];
|
||
hourlyRows.forEach(row => {
|
||
const key = row.iso.slice(0, 10);
|
||
let day = days.find(d => d.key === key);
|
||
if (!day) { day = { key, date: new Date(row.iso), rows: [] }; days.push(day); }
|
||
day.rows.push(row);
|
||
});
|
||
|
||
const visible = days[selectedDay]?.rows || [];
|
||
const now = new Date();
|
||
const currentRow = hourlyRows.length > 0
|
||
? (hourlyRows.find(row =>
|
||
now.toDateString() === row.dt.toDateString() &&
|
||
now.getHours() === row.dt.getHours()
|
||
) ?? hourlyRows.reduce((best, row) =>
|
||
Math.abs(row.dt - now) < Math.abs(best.dt - now) ? row : best))
|
||
: null;
|
||
const currentCat = currentRow
|
||
? utciCategory(currentRow.utciAdj)
|
||
: { bg: '#4a4228', fg: '#ede4cc', label: 'No data' };
|
||
|
||
// ─── 4. JSX RETURN ───────────────────────────────────────────────────
|
||
// Everything below is the actual page markup, written as one big HTM
|
||
// template. Search tips:
|
||
// • "utci-header" — the top section (title + dial + search)
|
||
// • "utci-day-tabs" — the 14 day buttons with band colours
|
||
// • "col-toggles" — the column-customisation row (Pro only)
|
||
// • "utci-table" — the hourly table itself
|
||
// • "utci-legend" — the thermal-stress band legend
|
||
// • "utci-about" — the explainer paragraphs at the bottom
|
||
// • "utci-footer" — the "reading the table" note
|
||
return html`
|
||
<div class="utci-app">
|
||
<nav class="utci-topnav">
|
||
<a href="./index.html">Home</a>
|
||
<a href="./about.html">About</a>
|
||
</nav>
|
||
<div class="lens-bloom-a"></div>
|
||
<div class="lens-bloom-b"></div>
|
||
|
||
<div class="utci-shell">
|
||
|
||
<div class="utci-header">
|
||
<div>
|
||
<h1 class="utci-title">
|
||
<span class="title-sun">SUN</span><span class="title-scope">Scope</span>
|
||
<sub class="title-beta">beta</sub>
|
||
</h1>
|
||
<div class="utci-tagline">See the sun the way your body does.</div>
|
||
<div class="utci-subtitle">
|
||
<a href="https://utci.org/" target="_blank" rel="noopener noreferrer" class="utci-subtitle-link">Universal Thermal Climate Index</a>
|
||
· Bröde 2012 · Open-Meteo · SunScope soak-factor
|
||
</div>
|
||
<div class="utci-current-loc">
|
||
↳ ${location.name}
|
||
<span class="utci-loc-coords">
|
||
${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<${ScopeReticle}
|
||
value=${currentRow?.utciAdj ?? null}
|
||
cat=${currentCat}
|
||
loading=${loading}
|
||
elev=${currentRow?.elev ?? 0}
|
||
dt=${currentRow?.dt ?? new Date()}
|
||
/>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<div class="utci-search-wrap">
|
||
<label class="utci-search-label">Change location</label>
|
||
<input
|
||
class="utci-search"
|
||
type="text"
|
||
placeholder="Search any town or city…"
|
||
value=${searchQuery}
|
||
onInput=${(e) => setSearchQuery(e.currentTarget.value)}
|
||
/>
|
||
${searchResults.length > 0 && html`
|
||
<div class="utci-results">
|
||
${searchResults.map((r) => html`
|
||
<div
|
||
key=${`${r.id}-${r.latitude}`}
|
||
class="utci-result"
|
||
onClick=${() => {
|
||
setLocation({
|
||
name: `${r.name}${r.admin1 ? ', ' + r.admin1 : ''}`,
|
||
lat: r.latitude,
|
||
lon: r.longitude,
|
||
country: r.country_code,
|
||
});
|
||
setSearchQuery('');
|
||
setSearchResults([]);
|
||
setSelectedDay(0);
|
||
}}
|
||
>
|
||
<div>${r.name}${r.admin1 ? `, ${r.admin1}` : ''}</div>
|
||
<div class="utci-result-meta">
|
||
${r.country} · ${r.latitude.toFixed(2)}°, ${r.longitude.toFixed(2)}°
|
||
</div>
|
||
</div>`)}
|
||
</div>`}
|
||
${searching && html`<div class="utci-searching">Searching…</div>`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
${error && html`
|
||
<div class="utci-status" style=${{ borderColor: '#3a1010', color: '#c44a3a' }}>
|
||
⚠ ${error}
|
||
</div>`}
|
||
${loading && !error && html`
|
||
<div class="utci-status">Acquiring forecast data…</div>`}
|
||
|
||
${forecast && days.length > 0 && html`
|
||
<${Fragment}>
|
||
<!--
|
||
DAY TABS — one button per day, coloured by confidence band.
|
||
Days 4+ get 🔒'd when isPro is false. To change the lock
|
||
behaviour (e.g. open a paywall modal instead of doing
|
||
nothing), edit the onClick handler below.
|
||
-->
|
||
<div class=${`utci-day-tabs-wrap${canScrollLeft ? ' fade-left' : ''}${canScrollRight ? ' fade-right' : ''}`}>
|
||
<button
|
||
class=${`utci-day-scroll left${canScrollLeft ? '' : ' hidden'}`}
|
||
onClick=${() => scrollDayTabs(-1)}
|
||
aria-label="Scroll days left"
|
||
type="button">‹</button>
|
||
<button
|
||
class=${`utci-day-scroll right${canScrollRight ? '' : ' hidden'}`}
|
||
onClick=${() => scrollDayTabs(1)}
|
||
aria-label="Scroll days right"
|
||
type="button">›</button>
|
||
<div class="utci-day-tabs" ref=${dayTabsRef}>
|
||
${days.map((d, i) => {
|
||
const band = confidenceBand(i);
|
||
const locked = !isPro && i >= FREE_DAYS;
|
||
const isActive = i === selectedDay;
|
||
const dayName = i === 0 ? 'Today'
|
||
: i === 1 ? 'Tomorrow'
|
||
: d.date.toLocaleDateString('en-GB', { weekday: 'short' });
|
||
return html`
|
||
<button
|
||
key=${d.key}
|
||
class=${`utci-day-tab ${isActive ? 'active' : ''}${locked ? ' locked' : ''}`}
|
||
onClick=${() => {
|
||
if (locked) {
|
||
setProPromptDay(i); // show the upsell card
|
||
} else {
|
||
setSelectedDay(i);
|
||
setProPromptDay(null); // hide the card on a normal click
|
||
}
|
||
}}
|
||
title=${locked
|
||
? `${band.label} · SunScope Pro unlocks day ${i + 1}`
|
||
: `${band.label} · day ${i + 1} of 14`}
|
||
style=${{
|
||
background: band.bg,
|
||
color: '#2a1d10',
|
||
borderStyle: 'solid',
|
||
borderWidth: '0 0 3px 0',
|
||
borderBottomColor: isActive ? '#1e1208' : band.edge,
|
||
opacity: locked ? 0.5 : 1,
|
||
cursor: locked ? 'not-allowed' : 'pointer',
|
||
position: 'relative',
|
||
filter: isActive ? 'saturate(1.15) brightness(1.02)' : 'none',
|
||
}}
|
||
>
|
||
${locked && html`
|
||
<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.75 }}>🔒</span>`}
|
||
${dayName}
|
||
<span class="utci-day-date" style=${{ color: '#5a3f24' }}>
|
||
${d.date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}
|
||
</span>
|
||
</button>`;
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<!--
|
||
PRO UPSELL CARD — shown when a locked day is clicked.
|
||
Visible only while proPromptDay !== null. To change the
|
||
copy or pricing, edit the strings below. The "Notify me"
|
||
button is a mailto: link — replace with a real signup
|
||
form when you have one.
|
||
-->
|
||
${proPromptDay !== null && days[proPromptDay] && (() => {
|
||
const promptDate = days[proPromptDay].date;
|
||
const dayName = promptDate.toLocaleDateString('en-GB', { weekday: 'long' });
|
||
const dayLong = promptDate.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'short' });
|
||
return html`
|
||
<div style=${{
|
||
margin: '12px 0',
|
||
padding: '18px 22px',
|
||
background: '#fdf8ee',
|
||
border: '1.5px solid #c9b08a',
|
||
borderLeft: '4px solid #c8922a',
|
||
borderRadius: '0 4px 4px 0',
|
||
display: 'flex',
|
||
flexWrap: 'wrap',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
gap: '14px',
|
||
}}>
|
||
<div style=${{ flex: '1 1 320px', minWidth: '260px' }}>
|
||
<div style=${{
|
||
fontFamily: 'Fraunces, serif',
|
||
fontStyle: 'italic',
|
||
fontSize: '19px',
|
||
fontWeight: 700,
|
||
color: '#1e1208',
|
||
marginBottom: '6px',
|
||
lineHeight: 1.25,
|
||
}}>
|
||
🔒 ${dayName}'s forecast is part of SunScope Pro
|
||
</div>
|
||
<div style=${{
|
||
fontFamily: 'Manrope, sans-serif',
|
||
fontSize: '13.5px',
|
||
color: '#4a3420',
|
||
lineHeight: 1.65,
|
||
}}>
|
||
Pro unlocks the full 14-day forecast, customisable columns,
|
||
and an ad-free view.
|
||
</div>
|
||
<div style=${{
|
||
fontFamily: 'JetBrains Mono, monospace',
|
||
fontSize: '11px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.14em',
|
||
color: '#c8922a',
|
||
marginTop: '10px',
|
||
}}>
|
||
£2 / month · launching soon
|
||
</div>
|
||
</div>
|
||
<div style=${{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '8px',
|
||
alignItems: 'flex-end',
|
||
}}>
|
||
<a
|
||
href=${`mailto:fraxle@yahoo.co.uk?subject=${encodeURIComponent('SunScope Pro — notify me at launch')}&body=${encodeURIComponent('Hi — please let me know when SunScope Pro launches. (Triggered by ' + dayLong + ')')}`}
|
||
style=${{
|
||
display: 'inline-block',
|
||
padding: '10px 18px',
|
||
background: '#c8922a',
|
||
color: '#fff',
|
||
textDecoration: 'none',
|
||
fontFamily: 'JetBrains Mono, monospace',
|
||
fontSize: '11px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.14em',
|
||
borderRadius: '3px',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
Notify me at launch
|
||
</a>
|
||
<button
|
||
onClick=${() => setProPromptDay(null)}
|
||
style=${{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
cursor: 'pointer',
|
||
fontFamily: 'JetBrains Mono, monospace',
|
||
fontSize: '10px',
|
||
textTransform: 'uppercase',
|
||
letterSpacing: '0.14em',
|
||
color: '#b09870',
|
||
padding: '2px 4px',
|
||
}}
|
||
>
|
||
dismiss
|
||
</button>
|
||
</div>
|
||
</div>`;
|
||
})()}
|
||
|
||
${(() => {
|
||
const band = confidenceBand(selectedDay);
|
||
const isOutlook = selectedDay >= 7;
|
||
return html`
|
||
<div style=${{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '10px',
|
||
margin: '8px 0 4px',
|
||
padding: '6px 10px',
|
||
background: band.tint,
|
||
borderLeft: `3px solid ${band.edge}`,
|
||
borderRadius: '0 4px 4px 0',
|
||
fontSize: '12px',
|
||
color: '#3a2a18',
|
||
fontFamily: 'JetBrains Mono, monospace',
|
||
flexWrap: 'wrap',
|
||
}}>
|
||
<span style=${{ letterSpacing: '1px', textTransform: 'uppercase', fontWeight: 700 }}>
|
||
Day ${selectedDay + 1} of 14 · Forecast clarity: ${band.label}
|
||
</span>
|
||
${isOutlook && html`
|
||
<span style=${{ opacity: 0.7, fontStyle: 'italic' }}>
|
||
forecast skill is reduced — treat hourly detail as trend, not precision
|
||
</span>`}
|
||
</div>`;
|
||
})()}
|
||
|
||
<!--
|
||
COLUMN TOGGLES — only shown to Pro users.
|
||
Free users see the "default columns" note instead. To add
|
||
a new toggleable column, add an entry both here AND in the
|
||
visibleCols useState() near the top of this component.
|
||
-->
|
||
${isPro
|
||
? html`
|
||
<div class="col-toggles">
|
||
<span class="col-toggles-label">Columns:</span>
|
||
${[
|
||
// Hour and UTCI+P are always-on — no toggle button for them.
|
||
{ key: 'air', label: 'Air' },
|
||
{ key: 'rh', label: 'RH' },
|
||
{ key: 'dew', label: 'Dew' },
|
||
{ key: 'soilT', label: 'Soil °C' },
|
||
{ key: 'soilT6', label: 'Soil 6cm' },
|
||
{ key: 'soilM', label: 'Soil moist' },
|
||
{ key: 'wind', label: 'Wind' },
|
||
{ key: 'dir', label: 'Dir' },
|
||
{ key: 'cloud', label: 'Cloud' },
|
||
{ key: 'sun', label: 'Sun' },
|
||
{ key: 'direct', label: 'Direct' },
|
||
{ key: 'diffuse', label: 'Diffuse' },
|
||
{ key: 'tmrt', label: 'Tmrt' },
|
||
{ key: 'delta', label: 'Δ' },
|
||
{ key: 'utci', label: 'UTCI' },
|
||
{ key: 'uvA', label: 'UV-A' },
|
||
{ key: 'uvB', label: 'UV-B' },
|
||
{ key: 'burn', label: 'Burn' },
|
||
{ key: 'precip', label: 'Precip' },
|
||
].map(c => html`
|
||
<button
|
||
key=${c.key}
|
||
class=${`col-toggle${visibleCols[c.key] ? ' on' : ''}`}
|
||
onClick=${() => toggleCol(c.key)}
|
||
>${c.label}</button>`)}
|
||
${visibleCols.burn && html`
|
||
<span style=${{ marginLeft: '10px', display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'JetBrains Mono, monospace', fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.08em', color: '#9a7d5a' }}>
|
||
Skin
|
||
<select
|
||
value=${skinType}
|
||
onChange=${(e) => setSkinType(e.target.value)}
|
||
style=${{ background: '#2a1f12', color: '#ede4cc', border: '1px solid #5a4228', borderRadius: '3px', padding: '2px 4px', fontFamily: 'JetBrains Mono, monospace', fontSize: '10px' }}>
|
||
${Object.entries(SKIN_TYPES).map(([k, v]) => html`
|
||
<option key=${k} value=${k}>${v.name}</option>`)}
|
||
</select>
|
||
</span>`}
|
||
</div>`
|
||
: html`
|
||
<div class="col-toggles" style=${{ opacity: 0.85 }}>
|
||
<span class="col-toggles-label">Default columns</span>
|
||
<span style=${{ marginLeft: '8px', color: '#9a7d5a', fontFamily: 'JetBrains Mono, monospace', fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
|
||
customisable columns & days 4–14 are part of SunScope Pro
|
||
</span>
|
||
</div>`}
|
||
|
||
<!--
|
||
HOURLY TABLE — each row is one hour from the selected day.
|
||
Each column is wrapped in a visibleCols.X check, so it only
|
||
shows when its toggle is on. To force a column to always
|
||
show, remove the visibleCols check around it. To rename a
|
||
heading, edit the text inside the matching <th>.
|
||
-->
|
||
<div class="utci-table-wrap">
|
||
<!-- Sticky header strip — locks to viewport top. Clipped
|
||
horizontally; the inner .utci-thead-track is shifted
|
||
via translateX from JS to follow the body's scrollLeft.
|
||
See handleBodyScroll + useLayoutEffect above. -->
|
||
<div class="utci-thead-sticky" ref=${headStickyRef}>
|
||
<div class="utci-thead-track" ref=${headTrackRef}>
|
||
<table class="utci-table utci-table-head" ref=${headTableRef}>
|
||
<thead>
|
||
<tr>
|
||
<th>Hour</th>
|
||
${visibleCols.air && html`<th class="utci-tight-head">Air <span class="col-unit">°C</span></th>`}
|
||
${visibleCols.rh && html`<th>RH <span class="col-unit">%</span></th>`}
|
||
${visibleCols.dew && html`<th>Dew <span class="col-unit">°C</span></th>`}
|
||
${visibleCols.soilT && html`<th>Soil °C <span class="col-unit">surface</span></th>`}
|
||
${visibleCols.soilT6 && html`<th>Soil 6cm <span class="col-unit">°C root</span></th>`}
|
||
${visibleCols.soilM && html`<th>Soil moist <span class="col-unit">m³/m³</span></th>`}
|
||
${visibleCols.wind && html`<th>Wind <span class="col-unit">m/s (gust)</span></th>`}
|
||
${visibleCols.dir && html`<th class="utci-dir-cell">Dir <span class="col-unit">-</span></th>`}
|
||
${visibleCols.cloud && html`<th>Cloud <span class="col-unit">%</span></th>`}
|
||
${visibleCols.sun && html`<th>Sun <span class="col-unit">elev°</span></th>`}
|
||
${visibleCols.direct && html`<th>Direct <span class="col-unit">W/m²</span></th>`}
|
||
${visibleCols.diffuse && html`<th>Diffuse <span class="col-unit">W/m²</span></th>`}
|
||
${visibleCols.tmrt && html`<th>Tmrt <span class="col-unit">°C</span></th>`}
|
||
${visibleCols.delta && html`<th>Δ <span class="col-unit">UTCI−Air</span></th>`}
|
||
${visibleCols.utci && html`<th>UTCI <span class="col-unit">°C felt</span></th>`}
|
||
${visibleCols.uvA && html`<th>UV-A <span class="col-unit">est. idx</span></th>`}
|
||
${visibleCols.uvB && html`<th>UV-B <span class="col-unit">est. idx</span></th>`}
|
||
${visibleCols.burn && html`<th>Burn <span class="col-unit">to MED</span></th>`}
|
||
${visibleCols.precip && html`<th class="utci-tight-head">Pcpt <span class="col-unit">mm/h</span></th>`}
|
||
<th>UTCI+P <span class="col-unit">°C adj.</span></th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- Body scroller — owns the horizontal scrollbar. The
|
||
onScroll handler translates the header track to keep
|
||
columns aligned with the visible body columns. -->
|
||
<div class="utci-tbody-scroll" ref=${bodyScrollRef} onScroll=${handleBodyScroll}>
|
||
<table class="utci-table utci-table-body" ref=${bodyTableRef}>
|
||
<tbody>
|
||
${visible.map((r) => {
|
||
const cat = utciCategory(r.utci);
|
||
const isNight = r.elev < 0;
|
||
const isNow =
|
||
now.toDateString() === r.dt.toDateString() &&
|
||
now.getHours() === r.dt.getHours();
|
||
const delta = r.utci - r.Ta;
|
||
const adjCat = utciCategory(r.utciAdj);
|
||
return html`
|
||
<tr key=${r.iso}
|
||
class=${`${isNight ? 'is-night' : ''} ${isNow ? 'is-now' : ''}`.trim()}>
|
||
<td class="utci-time">
|
||
<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '7px', verticalAlign: 'middle' }}>
|
||
<${SkyScope} elev=${r.elev} dt=${r.dt} size=${30} />
|
||
<span>${r.dt.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })}</span>
|
||
</span>
|
||
</td>
|
||
${visibleCols.air && html`<td>${r.Ta.toFixed(1)}</td>`}
|
||
${visibleCols.rh && html`<td>${Math.round(r.RH)}</td>`}
|
||
${visibleCols.dew && html`<td>${r.dew != null ? r.dew.toFixed(1) : '—'}</td>`}
|
||
${visibleCols.soilT && html`
|
||
<td style=${{ color: '#8a6a3a' }}>${r.soilT0 != null ? r.soilT0.toFixed(1) : '—'}</td>`}
|
||
${visibleCols.soilT6 && html`
|
||
<td style=${{ color: '#8a6a3a' }}>${r.soilT6 != null ? r.soilT6.toFixed(1) : '—'}</td>`}
|
||
${visibleCols.soilM && html`
|
||
<td style=${{ color: '#5090b0' }}>${r.soilM != null ? r.soilM.toFixed(3) : '—'}</td>`}
|
||
${visibleCols.wind && html`<td>
|
||
${r.va.toFixed(1)}${r.gust != null && r.gust > r.va + 0.5
|
||
? html`<span style=${{ opacity: 0.65, marginLeft: '4px' }}>(${r.gust.toFixed(1)})</span>`
|
||
: ''}
|
||
</td>`}
|
||
${visibleCols.dir && html`<td class="utci-dir-cell">
|
||
<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '6px', verticalAlign: 'middle' }}>
|
||
<${WindVane} bearing=${r.wd} size=${28} />
|
||
<span class="wind-dir-label" style=${{ fontFamily: 'JetBrains Mono, monospace', fontSize: '11px' }}>${r.compass.label}</span>
|
||
</span>
|
||
</td>`}
|
||
${visibleCols.cloud && html`<td>
|
||
<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '6px', verticalAlign: 'middle' }}>
|
||
<${CloudIcon} category=${r.cloudCat} elev=${r.elev} dt=${r.dt} size=${28} />
|
||
<span>${Math.round(r.cc)}</span>
|
||
</span>
|
||
</td>`}
|
||
${visibleCols.sun && html`<td>${r.elev > 0 ? r.elev.toFixed(1) : '—'}</td>`}
|
||
${visibleCols.direct && html`<td>${Math.round(r.dir)}</td>`}
|
||
${visibleCols.diffuse && html`<td>${Math.round(r.dif)}</td>`}
|
||
${visibleCols.tmrt && html`<td>${r.Tmrt.toFixed(1)}</td>`}
|
||
${visibleCols.delta && html`
|
||
<td style=${{
|
||
color: delta > 3 ? '#c8601a' : delta < -3 ? '#3f73c4' : '#9a7d5a',
|
||
fontWeight: 600,
|
||
}}>
|
||
${delta > 0 ? '+' : ''}${delta.toFixed(1)}
|
||
</td>`}
|
||
${visibleCols.utci && html`
|
||
<td>
|
||
<span class="utci-cell" style=${{ background: cat.bg, color: cat.fg }}>
|
||
${r.utci.toFixed(1)}
|
||
</span>
|
||
</td>`}
|
||
${visibleCols.uvA && html`
|
||
<td style=${{ color: r.uvA > 0 ? '#c8922a' : '#5a4228' }}>
|
||
${r.uvA > 0 ? r.uvA.toFixed(1) : '—'}
|
||
</td>`}
|
||
${visibleCols.uvB && html`
|
||
<td style=${{ color: r.uvB > 0 ? '#c44a3a' : '#5a4228', fontWeight: 600 }}>
|
||
${r.uvB > 0 ? r.uvB.toFixed(2) : '—'}
|
||
</td>`}
|
||
${visibleCols.burn && html`
|
||
<td style=${{ color: r.uv > 0 ? (sunburnMinutes(r.uv, skinType) < 30 ? '#c44a3a' : '#c8601a') : '#5a4228' }}>
|
||
${burnLabel(sunburnMinutes(r.uv, skinType))}
|
||
</td>`}
|
||
${visibleCols.precip && html`
|
||
<td style=${{ color: r.snow > 0 ? '#6090c8' : r.precip > 0 ? '#5090b0' : '#c0a880' }}>
|
||
${r.snow > 0 ? '❅ ' + r.snow.toFixed(1) + 'cm' : r.precip > 0 ? r.precip.toFixed(1) : '—'}
|
||
</td>`}
|
||
<td style=${{ background: 'rgba(180,215,250,0.10)' }}>
|
||
<span class="utci-cell utci-cell-hero" style=${{ background: adjCat.bg, color: adjCat.fg }}>
|
||
${r.utciAdj.toFixed(1)}
|
||
</span>
|
||
</td>
|
||
</tr>`;
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="utci-legend">
|
||
<span class="utci-legend-label">Thermal stress bands</span>
|
||
<div class="utci-legend-row">
|
||
${[
|
||
{ l: '-27 to -13 Arctic', bg: '#3f73c4', fg: '#fff' },
|
||
{ l: '-13 to 0 Freezing', bg: '#7eb0e0', fg: '#111' },
|
||
{ l: '0 to 9 Cold', bg: '#bcd9ec', fg: '#111' },
|
||
{ l: '9 to 18 Chilled', bg: '#c8dcc0', fg: '#111' },
|
||
{ l: '18 to 26 Comfortable', bg: '#6ab05a', fg: '#fff' },
|
||
{ l: '26 to 32 Mod heat', bg: '#e8c547', fg: '#111' },
|
||
{ l: '32 to 38 Strong heat', bg: '#dc8a3a', fg: '#111' },
|
||
{ l: '38 to 46 V. strong', bg: '#c44a3a', fg: '#fff' },
|
||
{ l: '> 46 Extreme heat', bg: '#7a1a1a', fg: '#fff' },
|
||
].map((b, i) => html`
|
||
<span key=${i} class="utci-legend-item" style=${{ background: b.bg, color: b.fg }}>
|
||
${b.l}
|
||
</span>`)}
|
||
</div>
|
||
</div>
|
||
</>`}
|
||
|
||
<div class="utci-about">
|
||
<h2 class="utci-about-heading">What is SunScope?</h2>
|
||
<p class="utci-about-text">
|
||
SunScope shows how the weather will actually <em>feel</em> on your body — not just the air
|
||
temperature. It uses the <strong>Universal Thermal Climate Index (UTCI)</strong>, a
|
||
peer-reviewed biometeorological standard developed by Bröde et al. (2012) that combines
|
||
air temperature, humidity, wind speed, and solar radiation into a single <em>felt
|
||
temperature</em>. On a calm, sunny winter day UTCI can read several degrees warmer than
|
||
the thermometer; on a grey, blustery day it can read far colder. Forecast data is
|
||
sourced in real time from <strong>Open-Meteo</strong>, a free and open-source weather API,
|
||
and solar radiation is used to calculate Mean Radiant Temperature — the heat your skin
|
||
absorbs from the sun — making SunScope one of the most complete outdoor comfort forecasts
|
||
available for free.
|
||
</p>
|
||
<p class="utci-about-text">
|
||
The <strong>UTCI+P</strong> column adds the <strong>SunScope soak-factor</strong>: an
|
||
original precipitation penalty that accounts for the extra chill of rain and snow on
|
||
exposed skin and wet clothing. Light drizzle reduces the felt temperature by around
|
||
1–2 °C; heavy rain combined with wind can push it down by 7–8 °C. Snow carries an
|
||
additional penalty on top. The result is an honest, real-world comfort score for any
|
||
location worldwide — simply search for your town or city and compare the hourly
|
||
forecast across the next 3 days (and up to 14 days with SunScope Pro).
|
||
</p>
|
||
</div>
|
||
|
||
<div class="utci-footer">
|
||
<em>Reading the table.</em> A large positive Δ means your body is absorbing
|
||
far more heat than the air temperature alone suggests — typically due to direct solar radiation.
|
||
On clear sunny days this gap can exceed 10°C even at modest air temperatures.
|
||
</div>
|
||
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
// MOUNT — find the empty <div id="root"></div> in index.html and render
|
||
// the whole UTCIForecast component into it. This is the very last thing
|
||
// the script does. If nothing appears on the page, check that:
|
||
// 1. index.html contains <div id="root"></div>
|
||
// 2. index.html loads this file as <script type="module" src="...">
|
||
// 3. The browser console (F12) doesn't show an error above this line.
|
||
// ════════════════════════════════════════════════════════════════════════
|
||
const rootEl = document.getElementById('root');
|
||
if (rootEl) render(h(UTCIForecast, null), rootEl);
|