diff --git a/assets/js/app.js b/assets/js/app.js index 72cfe63..330b1a3 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -457,8 +457,6 @@ export function UTCIForecast() { })(); return raw.map(c => Math.min(255, Math.round(c + (255 - c) * whiteMix))); }; - const airTempRgbStrong = (t) => airTempRgb(t, 0.42); - const airTempRgbVeryStrong = (t) => airTempRgb(t, 0.25); // Pet columns (Fur Colour, Pet Shade, Pet Home, Paw) reuse airTempRgb // exactly as-is - identical stops, identical whiteMix blend, identical @@ -664,6 +662,18 @@ export function UTCIForecast() { }; })(); + // Single colour source for the quick view: the curve's gradient stops AND + // the cards' thermal tags both read from here, so a card's connector line + // can never land on a shade its own tag contradicts. (The tags used to take + // the discrete UTCI_BANDS hex — a flat #90d090 "Comfortable" chip sitting + // over a yellow-green 22°C point on the continuous ramp.) + // + // Pet mode goes through petAirTempRgb, which remaps the pet reading onto + // the human scale first (petEquivHumanTemp), exactly as the pet table + // columns and pet legend do. + const fscRgb = (t, whiteMix) => + (simpleTemp === 'furSurfaceT' ? petAirTempRgb : airTempRgb)(t, whiteMix); + // ─── 4. JSX RETURN ─────────────────────────────────────────────────── // Everything below is the actual page markup, written as one big HTM // template. Search tips: @@ -1190,6 +1200,17 @@ export function UTCIForecast() { return null; })(); const windMph = Math.round((r.gust ?? r.va) * 2.237); + // Tag shade = the exact gradient stop the curve is painted + // with at this card's landing hour (fsc-grad, whiteMix 0.42), + // so the connector line lands on the colour the tag is + // wearing. Band label and weight still come from the band. + const feelRgb = fscRgb(dispTemp, 0.42) || [200, 200, 200]; + const feelLum = (feelRgb[0] * 299 + feelRgb[1] * 587 + feelRgb[2] * 114) / 1000; + const feelStyle = { + background: `rgb(${feelRgb[0]},${feelRgb[1]},${feelRgb[2]})`, + color: feelLum > 165 ? '#1a1a1a' : '#ffffff', + ...(cat.fontWeight ? { fontWeight: cat.fontWeight } : {}), + }; return html`
@@ -1204,7 +1225,7 @@ export function UTCIForecast() { ${r.compass ? r.compass.label : '—'}
${Math.round(dispTemp)}°
-
${cat.label}
+
${cat.label}
`; })} @@ -1246,14 +1267,14 @@ export function UTCIForecast() { ${fscSrc.map((r, j) => { - const rgb = airTempRgbStrong(getT(r)) || [200, 200, 200]; + const rgb = fscRgb(getT(r), 0.42) || [200, 200, 200]; const fc = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`; return html``; })} ${fscSrc.map((r, j) => { - const rgb = airTempRgbVeryStrong(getT(r)) || [200, 200, 200]; + const rgb = fscRgb(getT(r), 0.25) || [200, 200, 200]; const fc = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`; return html``; })}