gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3.8.1

Browse Source 
Event header background shades now match day tabs
This commit is contained in:
fraxle
2026-08-02 16:47:25 +01:00
parent 566d8d36e2
commit e721f27808
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+26 -5
View File
@@ -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`
<div key=${r.iso} class=${'fsc-card' + (isNow ? ' fsc-card--now' : '')}
style=${fscPlot && { gridColumn: fscPlot.cardCol(fscPlot.landing[ri]) }}>
@@ -1204,7 +1225,7 @@ export function UTCIForecast() {
<span class="fsc-meta-row fsc-meta-dir">${r.compass ? r.compass.label : '—'}</span>
</div>
<div class="fsc-temp">${Math.round(dispTemp)}°</div>
<div class="fsc-feel" style=${{background: cat.bg, color: cat.fg}}>${cat.label}</div>
<div class="fsc-feel" style=${feelStyle}>${cat.label}</div>
</div>
`;
})}
@@ -1246,14 +1267,14 @@ export function UTCIForecast() {
<defs>
<linearGradient id="fsc-grad" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
${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`<stop key=${j} offset=${`${fscStopPct(j)}%`} stop-color=${fc} />`;
})}
</linearGradient>
<linearGradient id="fsc-grad-strong" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
${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`<stop key=${`s${j}`} offset=${`${fscStopPct(j)}%`} stop-color=${fc} />`;
})}