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

v1.42 - Fix Cosmic Events + Popups

Browse Source
This commit is contained in:
fraxle
2026-05-16 22:15:21 +01:00
parent b4d2a1427a
commit 40f651eb98
3 changed files with 133 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+86 -1
View File
@@ -244,6 +244,67 @@ export function UTCIForecast() {
const hoverTimerRef = useRef(null);
const closeTimerRef = useRef(null);
// Event tag popup — same behaviour as column popups but for cell emoji icons.
const [eventTagPopup, setEventTagPopup] = useState(null); // { ev, x, y, arrowLeft, below }
const eventTagPopupRef = useRef(null);
const evHoverTimerRef = useRef(null);
const evCloseTimerRef = useRef(null);
const openEventTagPopup = (ev, spanEl) => {
const rect = spanEl.getBoundingClientRect();
const popupW = 260, popupH = 80, margin = 8, gap = 6;
let x = rect.left + rect.width / 2;
x = Math.max(popupW / 2 + margin, Math.min(x, window.innerWidth - popupW / 2 - margin));
const below = rect.top < popupH + gap + margin;
const y = below ? rect.bottom + gap : rect.top - gap;
const popupLeft = x - popupW / 2;
const arrowLeft = Math.max(16, Math.min(rect.left + rect.width / 2 - popupLeft, popupW - 16));
setEventTagPopup({ ev, x, y, arrowLeft, below });
};
const closeEventTagPopup = () => {
setEventTagPopup(null);
clearTimeout(evHoverTimerRef.current);
clearTimeout(evCloseTimerRef.current);
};
const handleEventTagClick = (ev, e) => {
e.stopPropagation();
clearTimeout(evHoverTimerRef.current);
clearTimeout(evCloseTimerRef.current);
if (eventTagPopup?.ev?.id === ev.id) { closeEventTagPopup(); return; }
openEventTagPopup(ev, e.currentTarget);
};
const handleEventTagEnter = (ev, e) => {
clearTimeout(evHoverTimerRef.current);
clearTimeout(evCloseTimerRef.current);
if (eventTagPopup?.ev?.id === ev.id) return;
const spanEl = e.currentTarget;
evHoverTimerRef.current = setTimeout(() => openEventTagPopup(ev, spanEl), 700);
};
const handleEventTagLeave = () => clearTimeout(evHoverTimerRef.current);
const handleEventTagPopupEnter = () => clearTimeout(evCloseTimerRef.current);
const handleEventTagPopupLeave = () => { evCloseTimerRef.current = setTimeout(closeEventTagPopup, 200); };
useEffect(() => {
if (!eventTagPopup) return;
const onClickOutside = (e) => {
if (eventTagPopupRef.current && !eventTagPopupRef.current.contains(e.target)) closeEventTagPopup();
};
const onScrollOrResize = () => closeEventTagPopup();
document.addEventListener('mousedown', onClickOutside);
window.addEventListener('scroll', onScrollOrResize, { passive: true, capture: true });
window.addEventListener('resize', onScrollOrResize, { passive: true });
return () => {
document.removeEventListener('mousedown', onClickOutside);
window.removeEventListener('scroll', onScrollOrResize, { capture: true });
window.removeEventListener('resize', onScrollOrResize);
};
}, [eventTagPopup]);
const COL_DESCRIPTIONS = {
hour: { title: 'Hour', desc: 'Local wall-clock time for this forecast row. Each row covers one hour.' },
air: { title: 'Air Temperature', desc: 'Measured air temperature at 2 m above the ground. This is the standard thermometer reading — it does not account for sun, wind, or humidity.' },
@@ -1510,7 +1571,12 @@ ${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['a
<${SkyScope} elev=${r.elev} dt=${r.dt} glob=${r.glob} size=${30} />
<span>${localHHMM}</span>
${getCellTagEvents(selectedDayEvents, r).map(ev => html`
<span key=${ev.id} class="event-cell-tag" title=${ev.title}>${ev.emoji}</span>
<span key=${ev.id} class="event-cell-tag"
onClick=${(e) => handleEventTagClick(ev, e)}
onMouseEnter=${(e) => handleEventTagEnter(ev, e)}
onMouseLeave=${handleEventTagLeave}
role="button" tabIndex="0" aria-label=${ev.title}
>${ev.emoji}</span>
`)}
</span>
</td>
@@ -1623,6 +1689,25 @@ ${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['a
<p class="col-info-desc">${COL_DESCRIPTIONS[colPopup.key].desc}</p>
</div>`}
${eventTagPopup && html`
<div
ref=${eventTagPopupRef}
class=${`col-info-popup${eventTagPopup.below ? ' col-info-popup--below' : ''}`}
style=${{
position: 'fixed',
left: `${eventTagPopup.x}px`,
top: `${eventTagPopup.y}px`,
transform: eventTagPopup.below ? 'translateX(-50%)' : 'translateX(-50%) translateY(-100%)',
'--arrow-left': `${eventTagPopup.arrowLeft}px`,
}}
onMouseEnter=${handleEventTagPopupEnter}
onMouseLeave=${handleEventTagPopupLeave}
>
<button class="col-info-close" onClick=${closeEventTagPopup} aria-label="Close">×</button>
<strong class="col-info-title">${eventTagPopup.ev.emoji} ${eventTagPopup.ev.title}</strong>
<p class="col-info-desc">${eventTagPopup.ev.message}</p>
</div>`}
<div class="utci-legend">
<span class="utci-legend-label">Thermal stress bands</span>
<div class="utci-legend-row">
assets/js/events.js
+41 -6
View File
@@ -331,23 +331,54 @@ function checkStargazing(rows) {
}
function checkSunset(rows, location) {
// Perfect sunset: clear low cloud near sunset hour, good visibility
const sunsetRows = rows.filter(r => r.elev > -3 && r.elev < 8);
if (sunsetRows.length === 0) return null;
// Find the actual sunset window: the LAST contiguous run of rows where
// solar elevation is in the golden/civil-twilight band (-3° to 8°).
// This distinguishes sunset from sunrise (which is the first such run).
const twilightIndices = rows
.map((r, i) => ({ r, i }))
.filter(({ r }) => r.elev > -3 && r.elev < 8);
if (twilightIndices.length === 0) return null;
// Split into runs separated by gaps (midday gap separates sunrise from sunset)
const runs = [];
let run = [twilightIndices[0]];
for (let k = 1; k < twilightIndices.length; k++) {
if (twilightIndices[k].i === twilightIndices[k - 1].i + 1) {
run.push(twilightIndices[k]);
} else {
runs.push(run);
run = [twilightIndices[k]];
}
}
runs.push(run);
// Use the LAST run (sunset). If only one run exists it's either sunrise-only
// or a single dusk window — use it but we'll label generically.
const sunsetRun = runs[runs.length - 1];
const sunsetRows = sunsetRun.map(({ r }) => r);
const isSunrise = runs.length === 1 && sunsetRows[0].elev < sunsetRows[sunsetRows.length - 1].elev;
// If sun is rising through the band this is a sunrise window, not sunset — skip.
if (isSunrise) return null;
const avgCloud = sunsetRows.reduce((s, r) => s + r.cc, 0) / sunsetRows.length;
// We want some high cloud (colour) but not low cloud (obstruction)
const avgLowCloud = sunsetRows.reduce((s, r) => s + (r.ccLow || 0), 0) / sunsetRows.length;
if (avgLowCloud > 25) return null;
if (avgCloud < 5 || avgCloud > 75) return null; // pure clear = less dramatic
if (avgCloud < 5 || avgCloud > 75) return null;
// Store the ISO time range so getCellTagEvents can limit the icon to those hours
const firstISO = sunsetRun[0].r.iso;
const lastISO = sunsetRun[sunsetRun.length - 1].r.iso;
return {
id: 'perfect-sunset',
emoji: '🌅',
title: 'Spectacular Sunset Conditions',
message: `Low cloud is clear near the horizon but high cloud will scatter the light — conditions are ideal for a vivid sunset near ${location.name}.`,
message: `Low cloud is clear near the horizon but high cloud will scatter the light — conditions look ideal for a vivid sunset near ${location.name}.`,
color: '#3a1a00',
textColor: '#ffe0b0',
type: 'weather',
nightOnly: false,
isoRange: [firstISO, lastISO], // only show cell icon during these hours
};
}
@@ -709,6 +740,10 @@ export function getCellTagEvents(events, row) {
if (ev.type === 'promo') return false;
if (ev.nightOnly && row.elev >= -5) return false;
if (ev.id === 'heat-spike' && row.elev < 0) return false;
// Sunset/sunrise events: only show icon during the actual twilight window
if (ev.isoRange) {
if (row.iso < ev.isoRange[0] || row.iso > ev.isoRange[1]) return false;
}
return true;
});
}