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`