fraxle
cce78feea7
Now 14 Days Accuracy Indicators Sunrise/Sunset Moon Cycles Early Pro Limitations New Code Formatting
1235 lines
65 KiB
JavaScript
1235 lines
65 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, 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;
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// 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';
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// 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 = 22 }) {
|
||
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 clipId = `scope-clip-${size}-${Math.round(elev * 10)}-${Math.round(phase * 1000)}`;
|
||
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>
|
||
</defs>
|
||
<circle cx=${r} cy=${r} r=${innerR} fill=${skyFill} />
|
||
<line x1=${r - innerR} y1=${r} x2=${r + innerR} y2=${r}
|
||
stroke="rgba(0,0,0,0.22)" stroke-width="0.5"
|
||
stroke-dasharray="1.2,1.2"
|
||
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>`;
|
||
}
|
||
|
||
// ═══════════════════════════════════════════════════════════════════
|
||
// 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 indicator (new) ──────────────────────────────────────
|
||
// The sun-or-moon glyph orbits the dial like an hour hand:
|
||
// 12 o'clock = noon · 3 o'clock = morning (east/sunrise)
|
||
// 6 o'clock = midnight · 9 o'clock = evening (west/sunset)
|
||
// A subtle sky-colour wash sits behind the readout for atmosphere.
|
||
const hour = dt.getHours() + dt.getMinutes() / 60;
|
||
const orbitAngle = -((hour - 6) / 24) * 2 * Math.PI; // radians
|
||
const orbitR = 80; // outside the temperature arcs, riding the tick band
|
||
const dnX = 100 + orbitR * Math.cos(orbitAngle);
|
||
const dnY = 100 + orbitR * Math.sin(orbitAngle);
|
||
const isDay = elev > -3;
|
||
const skyFill = skyFillForElev(elev);
|
||
const phase = moonPhaseFraction(dt);
|
||
// For the moon, use the same shadow-ellipse technique as SkyScope.
|
||
const moonR = 6; // slightly smaller so it fits the outer tick band
|
||
const phaseOffset = Math.cos(2 * Math.PI * phase) * moonR;
|
||
const moonLitFromRight = phase < 0.5;
|
||
const moonShadowCx = dnX + (moonLitFromRight ? -phaseOffset : phaseOffset);
|
||
|
||
const cx = 100, cy = 100, R = 86;
|
||
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>
|
||
</defs>
|
||
<circle cx=${cx} cy=${cy} r="96" fill="url(#scope-bg-glow)" />
|
||
|
||
<!-- Sky-colour wash behind the readout (very subtle) -->
|
||
<circle cx=${cx} cy=${cy} r="58" fill=${skyFill} opacity="0.16" />
|
||
${stressBands.map((b, i) => html`
|
||
<path key=${i} d=${bandArcPath(b)} fill="none"
|
||
stroke=${b.color} stroke-width="4" opacity="0.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" />
|
||
|
||
<!-- Day/night glyph orbiting the dial -->
|
||
${isDay
|
||
? html`<${Fragment}>
|
||
<circle cx=${dnX} cy=${dnY} r="9" fill="#ffe9a0" opacity="0.55" />
|
||
<circle cx=${dnX} cy=${dnY} r="6" fill="#fff3a8" stroke="#e6a32a" stroke-width="0.8" />
|
||
</>`
|
||
: html`<${Fragment}>
|
||
<circle cx=${dnX} cy=${dnY} r=${moonR + 1.2} fill="rgba(60,50,90,0.35)" />
|
||
<circle cx=${dnX} cy=${dnY} r=${moonR} fill="#f5edd6" />
|
||
<circle cx=${moonShadowCx} cy=${dnY} r=${moonR} fill="#1a1538" />
|
||
<circle cx=${dnX} cy=${dnY} r=${moonR} fill="none" stroke="rgba(245,237,214,0.55)" 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="3" stroke-linecap="round" opacity="0.18" />
|
||
<line x1=${cx} y1=${cy} x2=${needleX} y2=${needleY}
|
||
stroke="#c8922a" stroke-width="1.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="#b09870" font-size="11" font-family="monospace">· · ·</text>`
|
||
: value != null
|
||
? html`<${Fragment}>
|
||
<text x=${cx} y=${cy - 8} text-anchor="middle"
|
||
fill="#1e1208" font-size="26"
|
||
font-family="Fraunces, serif" font-weight="700">
|
||
${value.toFixed(1)}°
|
||
</text>
|
||
<text x=${cx} y=${cy + 7} text-anchor="middle"
|
||
fill="#9a7d5a" font-size="6.5"
|
||
font-family="JetBrains Mono, monospace" letter-spacing="2">
|
||
UTCI NOW
|
||
</text>
|
||
<text x=${cx} y=${cy + 19} 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="#b09870" 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
|
||
|
||
// ─── 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: true, wind: true,
|
||
cloud: false, sun: false, direct: false, diffuse: false,
|
||
tmrt: false, delta: false, utci: false, utciP: true,
|
||
precip: true,
|
||
});
|
||
const toggleCol = (col) => setVisibleCols(prev => ({ ...prev, [col]: !prev[col] }));
|
||
const searchTimeout = useRef(null);
|
||
|
||
// 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,wind_speed_10m,` +
|
||
`direct_radiation,diffuse_radiation,shortwave_radiation,cloud_cover,` +
|
||
`precipitation,snowfall` +
|
||
`&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 Ta = forecast.hourly.temperature_2m[i];
|
||
const RH = forecast.hourly.relative_humidity_2m[i];
|
||
const va = forecast.hourly.wind_speed_10m[i];
|
||
const dir = forecast.hourly.direct_radiation[i] || 0;
|
||
const dif = forecast.hourly.diffuse_radiation[i] || 0;
|
||
const glob = forecast.hourly.shortwave_radiation[i] || 0;
|
||
const cc = forecast.hourly.cloud_cover[i];
|
||
const precip = forecast.hourly.precipitation[i] || 0;
|
||
const snow = forecast.hourly.snowfall[i] || 0;
|
||
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);
|
||
return { iso, dt, Ta, RH, va, dir, dif, glob, cc, precip, snow, elev, Tmrt, utci, utciAdj, eh };
|
||
}) : [];
|
||
|
||
// 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">
|
||
${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>
|
||
|
||
<!--
|
||
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>
|
||
${[
|
||
{ key: 'hour', label: 'Hour' },
|
||
{ key: 'air', label: 'Air' },
|
||
{ key: 'rh', label: 'RH' },
|
||
{ key: 'wind', label: 'Wind' },
|
||
{ 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: 'precip', label: 'Precip' },
|
||
{ key: 'utciP', label: 'UTCI+P' },
|
||
].map(c => html`
|
||
<button
|
||
key=${c.key}
|
||
class=${`col-toggle${visibleCols[c.key] ? ' on' : ''}`}
|
||
onClick=${() => toggleCol(c.key)}
|
||
>${c.label}</button>`)}
|
||
</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">
|
||
<table class="utci-table">
|
||
<thead>
|
||
<tr>
|
||
${visibleCols.hour && html`<th>Hour</th>`}
|
||
${visibleCols.air && html`<th>Air <span class="col-unit">°C</span></th>`}
|
||
${visibleCols.rh && html`<th>RH <span class="col-unit">%</span></th>`}
|
||
${visibleCols.wind && html`<th>Wind <span class="col-unit">m/s</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.precip && html`<th>Precip <span class="col-unit">mm/h</span></th>`}
|
||
${visibleCols.utciP && html`<th>UTCI+P <span class="col-unit">°C adj.</span></th>`}
|
||
</tr>
|
||
</thead>
|
||
<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()}>
|
||
${visibleCols.hour && html`
|
||
<td class="utci-time">
|
||
${isNow && html`<span class="now-pip"></span>`}
|
||
<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '7px', verticalAlign: 'middle' }}>
|
||
<${SkyScope} elev=${r.elev} dt=${r.dt} size=${22} />
|
||
<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.wind && html`<td>${r.va.toFixed(1)}</td>`}
|
||
${visibleCols.cloud && html`<td>${Math.round(r.cc)}</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.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>`}
|
||
${visibleCols.utciP && html`
|
||
<td style=${{ background: 'rgba(180,215,250,0.10)' }}>
|
||
<span class="utci-cell" style=${{ background: adjCat.bg, color: adjCat.fg }}>
|
||
${r.utciAdj.toFixed(1)}
|
||
</span>
|
||
</td>`}
|
||
</tr>`;
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</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);
|