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

3.0.2.3

Browse Source 
Improved day tab selection and icons
Tweaked at a glance panel
This commit is contained in:
Fraxle
2026-06-23 17:28:47 +01:00
parent c090367f7c
commit 87907f50d6
5 changed files with 52 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/components/DayTabs.js
+20 -9
View File
@@ -69,6 +69,15 @@ function weatherGradient(r, g, b) {
// colour, drawn as a radial gradient whose strong colour sits at the outer
// edge and softens toward a lighter centre — so the hue reads as radiating
// inward from the outside of the tab.
function weatherGradientNeutral(r, g, b) {
const blend = (c) => Math.round(c + (255 - c) * 0.58);
const [mr, mg, mb] = [blend(r), blend(g), blend(b)];
const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.38));
const center = `rgb(${lighten(mr)},${lighten(mg)},${lighten(mb)})`;
const edge = `rgb(${mr},${mg},${mb})`;
return `radial-gradient(circle at 50% 50%, ${center} 0%, ${center} 28%, ${edge} 100%)`;
}
function weatherGradientActive(r, g, b) {
const blend = (c) => Math.round(c + (255 - c) * 0.42);
const [mr, mg, mb] = [blend(r), blend(g), blend(b)];
@@ -295,17 +304,20 @@ export function DayTabs({
const dayHi = utcipVals.length ? Math.round(Math.max(...utcipVals)) : null;
const dayLo = utcipVals.length ? Math.round(Math.min(...utcipVals)) : null;
// Day-tab weather icon - use daytime rows where available
const dayRows = d.rows.filter(r => r.elev > 0);
const repRows = dayRows.length > 0 ? dayRows : d.rows;
// Day-tab weather icon - use core daylight rows (elev > 10°) where
// available, falling back to any above-horizon rows, then all rows.
const coreRows = d.rows.filter(r => r.elev > 10);
const aboveRows = d.rows.filter(r => r.elev > 0);
const repRows = coreRows.length > 0 ? coreRows : aboveRows.length > 0 ? aboveRows : d.rows;
const dayPrecip = repRows.reduce((s, r) => s + (r.precip || 0), 0);
const daySnow = repRows.reduce((s, r) => s + (r.snow || 0), 0);
const catCounts = {};
repRows.forEach(r => { if (r.cloudCat) catCounts[r.cloudCat] = (catCounts[r.cloudCat] || 0) + 1; });
const modalCloudCat = Object.keys(catCounts).sort((a, b) => catCounts[b] - catCounts[a])[0] || 'clear';
const midRow = repRows[Math.floor(repRows.length / 2)];
const repElev = midRow ? midRow.elev : 45;
const repDt = midRow ? midRow.dt : dDate;
// Use solar-noon row (highest elevation) as the representative row
const noonRow = repRows.reduce((best, r) => (r.elev > (best?.elev ?? -Infinity) ? r : best), null);
const repElev = noonRow ? noonRow.elev : 45;
const repDt = noonRow ? noonRow.dt : dDate;
const showPrecip = dayPrecip >= 0.3 || daySnow >= 0.1;
// Base RGB for each weather condition — pastelised by weatherGradient()
@@ -320,6 +332,7 @@ export function DayTabs({
: modalCloudCat === 'wispy' ? [200, 180, 130]
: [220, 190, 50];
const wBg = weatherGradient(wR, wG, wB);
const wBgNeutral = weatherGradientNeutral(wR, wG, wB);
const wBgActive = weatherGradientActive(wR, wG, wB);
const wText = '#2a1d10';
@@ -340,8 +353,7 @@ export function DayTabs({
? `${band.label} · SunScope Extra unlocks day ${i + 1}`
: `${band.label} · day ${i + 1} of 14`}
style=${{
background: isActive ? wBgActive : wBg,
'--w-bg-active': wBgActive,
background: isActive ? wBgActive : wBgNeutral,
color: wText,
borderTop: '1px solid #c9b08a',
borderRight: 'none',
@@ -350,7 +362,6 @@ export function DayTabs({
opacity: locked ? 0.5 : 1,
cursor: locked ? 'not-allowed' : 'pointer',
position: 'relative',
filter: isActive ? 'saturate(1.1) brightness(1.04)' : 'none',
}}
>
${locked && html`