v1.4 - Cosmic Events
This commit is contained in:
fraxle
@@ -3,6 +3,205 @@
|
||||
════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
|
||||
/* ── EVENT BANNER ───────────────────────────────────────────────────── */
|
||||
/* Animated slide-down banner for cosmic/weather/promo events. */
|
||||
|
||||
.event-banner-wrap {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.event-banner-wrap.visible {
|
||||
max-height: 120px;
|
||||
}
|
||||
.event-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 13px 18px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
border-left: 4px solid rgba(255,255,255,0.25);
|
||||
}
|
||||
.event-banner-emoji {
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.event-banner-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.event-banner-title {
|
||||
font-family: Fraunces, serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.event-banner-msg {
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.55;
|
||||
opacity: 0.88;
|
||||
}
|
||||
.event-banner-dismiss {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
opacity: 0.55;
|
||||
padding: 4px 6px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.event-banner-dismiss:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Cell tag — tiny event icon in the hour column */
|
||||
.event-cell-tag {
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-left: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ── ALMANAC PANEL ──────────────────────────────────────────────────── */
|
||||
/* "What's Coming" upcoming cosmic events box below the forecast table. */
|
||||
|
||||
.almanac-panel {
|
||||
margin: 20px 0 12px;
|
||||
border: 1.5px solid #c9b08a;
|
||||
border-radius: 4px;
|
||||
background: #fdf8ee;
|
||||
overflow: hidden;
|
||||
}
|
||||
.almanac-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
padding: 12px 18px 10px;
|
||||
border-bottom: 1px solid #e8d8b8;
|
||||
background: #faf2e2;
|
||||
}
|
||||
.almanac-title {
|
||||
font-family: Fraunces, serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
color: #2a1a08;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.almanac-subtitle {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: #9a7d5a;
|
||||
}
|
||||
.almanac-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 0;
|
||||
}
|
||||
.almanac-entry {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 13px;
|
||||
padding: 13px 18px;
|
||||
border-bottom: 1px solid #f0e4cc;
|
||||
border-right: 1px solid #f0e4cc;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.almanac-entry:hover {
|
||||
background: #fef8e8;
|
||||
}
|
||||
.almanac-entry-icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.almanac-entry-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.almanac-entry-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.almanac-entry-title {
|
||||
font-family: Fraunces, serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #1e1208;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.almanac-entry-date {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #c8922a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.almanac-entry-countdown {
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 10px;
|
||||
color: #9a7d5a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.almanac-entry-desc {
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 12px;
|
||||
color: '#4a3420';
|
||||
line-height: 1.55;
|
||||
color: #4a3420;
|
||||
}
|
||||
.almanac-entry-visibility {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #7a9a6a;
|
||||
background: #eef4e8;
|
||||
border: 1px solid #c0d8b0;
|
||||
border-radius: 3px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
.almanac-entry-accent {
|
||||
width: 3px;
|
||||
align-self: stretch;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.almanac-empty {
|
||||
padding: 22px 18px;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #9a7d5a;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.almanac-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── CUSTOM SELECT DROPDOWN ─────────────────────────────────────────── */
|
||||
/* Cross-platform replacement for native <select> on the col-toggles bar */
|
||||
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
cloudCategory, confidenceBand, moonGlyph,
|
||||
} from './utils.js';
|
||||
import { SkyScope, WindVane, CloudIcon, ScopeReticle, PrecipIcon, CustomSelect, VentPill } from './components.js';
|
||||
import { getActiveEvent, shouldShowCellTag, getUpcomingEvents } from './events.js';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
@@ -718,6 +719,13 @@ export function UTCIForecast() {
|
||||
? utciCategory(currentRow.utciAdj)
|
||||
: { bg: '#4a4228', fg: '#ede4cc', label: 'No data' };
|
||||
|
||||
// ─── COSMIC/WEATHER EVENT ─────────────────────────────────────────────
|
||||
// Compute once per render. todayRows = the rows for today (day 0).
|
||||
const [dismissedEventId, setDismissedEventId] = useState(null);
|
||||
const todayRows = days[0]?.rows || [];
|
||||
const activeEvent = getActiveEvent(todayRows, location);
|
||||
const showBanner = activeEvent && activeEvent.id !== dismissedEventId;
|
||||
|
||||
// ─── 4. JSX RETURN ───────────────────────────────────────────────────
|
||||
// Everything below is the actual page markup, written as one big HTM
|
||||
// template. Search tips:
|
||||
@@ -758,6 +766,29 @@ export function UTCIForecast() {
|
||||
</nav>
|
||||
<main class="utci-shell">
|
||||
|
||||
<!-- ── EVENT BANNER ── slides down when an event is active ── -->
|
||||
<div class=${`event-banner-wrap${showBanner ? ' visible' : ''}`}>
|
||||
${showBanner && html`
|
||||
<div class="event-banner" style=${{
|
||||
background: activeEvent.color,
|
||||
color: activeEvent.textColor,
|
||||
}}>
|
||||
<span class="event-banner-emoji">${activeEvent.emoji}</span>
|
||||
<div class="event-banner-body">
|
||||
<div class="event-banner-title">${activeEvent.title}</div>
|
||||
<div class="event-banner-msg">${activeEvent.message}</div>
|
||||
</div>
|
||||
<button
|
||||
class="event-banner-dismiss"
|
||||
style=${{ color: activeEvent.textColor }}
|
||||
onClick=${() => setDismissedEventId(activeEvent.id)}
|
||||
aria-label="Dismiss"
|
||||
title="Dismiss"
|
||||
>✕</button>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="utci-header">
|
||||
<div>
|
||||
<h1 class="utci-title">
|
||||
@@ -780,6 +811,7 @@ export function UTCIForecast() {
|
||||
elev=${currentRow?.elev ?? 0}
|
||||
dt=${currentRow?.dt ?? new Date()}
|
||||
glob=${currentRow?.glob ?? 0}
|
||||
activeEvent=${activeEvent}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -859,6 +891,9 @@ export function UTCIForecast() {
|
||||
const dayName = i === 0 ? 'Today'
|
||||
: i === 1 ? 'Tomorrow'
|
||||
: dDate.toLocaleDateString('en-GB', { weekday: 'short', timeZone: 'UTC' });
|
||||
const utcipVals = d.rows.map(r => r.utciAdj).filter(v => isFinite(v));
|
||||
const dayHi = utcipVals.length ? Math.round(Math.max(...utcipVals)) : null;
|
||||
const dayLo = utcipVals.length ? Math.round(Math.min(...utcipVals)) : null;
|
||||
return html`
|
||||
<button
|
||||
key=${d.key}
|
||||
@@ -893,6 +928,20 @@ export function UTCIForecast() {
|
||||
<span class="utci-day-date" style=${{ color: '#5a3f24' }}>
|
||||
${dDate.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' })}
|
||||
</span>
|
||||
${dayHi !== null && html`
|
||||
<span style=${{
|
||||
display: 'block',
|
||||
fontFamily: 'Fraunces, serif',
|
||||
fontStyle: 'italic',
|
||||
fontSize: '11px',
|
||||
marginTop: '3px',
|
||||
letterSpacing: 0,
|
||||
textTransform: 'none',
|
||||
}}>
|
||||
<span style=${{ color: '#c0622a', fontWeight: 600 }}>${dayHi}°</span>
|
||||
<span style=${{ opacity: 0.5 }}> / </span>
|
||||
<span style=${{ color: '#3a6080' }}>${dayLo}°</span>
|
||||
</span>`}
|
||||
</button>`;
|
||||
})}
|
||||
</div>
|
||||
@@ -1408,6 +1457,9 @@ ${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['a
|
||||
<span style=${{ display: 'inline-flex', alignItems: 'center', gap: '7px', verticalAlign: 'middle' }}>
|
||||
<${SkyScope} elev=${r.elev} dt=${r.dt} glob=${r.glob} size=${30} />
|
||||
<span>${localHHMM}</span>
|
||||
${shouldShowCellTag(activeEvent, r) && html`
|
||||
<span class="event-cell-tag" title=${activeEvent.title}>${activeEvent.emoji}</span>
|
||||
`}
|
||||
</span>
|
||||
</td>
|
||||
${visibleCols.air && html`<td style=${{ background: tempBg(r.Ta) }}>${r.Ta.toFixed(1)}</td>`}
|
||||
@@ -1538,6 +1590,55 @@ ${isPro && (activeProfile === 'custom' || FILTER_PROFILES[activeProfile].cols['a
|
||||
</span>`)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
ALMANAC — upcoming cosmic events in the next 3 months.
|
||||
Location-aware: visibility notes adjust by latitude.
|
||||
-->
|
||||
${(() => {
|
||||
const upcoming = getUpcomingEvents(location, 90);
|
||||
const formatPeak = (iso) => {
|
||||
const d = new Date(iso + 'T00:00Z');
|
||||
return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' });
|
||||
};
|
||||
const countdownLabel = (days) => {
|
||||
if (days === 0) return 'Tonight!';
|
||||
if (days === 1) return 'Tomorrow';
|
||||
if (days < 7) return `In ${days} days`;
|
||||
if (days < 14) return 'Next week';
|
||||
if (days < 60) return `In ${Math.round(days / 7)} weeks`;
|
||||
return `In ${Math.round(days / 30)} months`;
|
||||
};
|
||||
return html`
|
||||
<div class="almanac-panel">
|
||||
<div class="almanac-header">
|
||||
<span class="almanac-title">🔭 What's Coming</span>
|
||||
<span class="almanac-subtitle">Cosmic events · next 90 days · ${location.name}</span>
|
||||
</div>
|
||||
<div class="almanac-list">
|
||||
${upcoming.length === 0
|
||||
? html`<div class="almanac-empty">No major cosmic events in the next 90 days — clear skies ahead.</div>`
|
||||
: upcoming.map(ev => html`
|
||||
<div key=${ev.id} class="almanac-entry">
|
||||
<div class="almanac-entry-accent" style=${{ background: ev.color === '#fdf8ee' ? '#c8922a' : ev.color }} />
|
||||
<div class="almanac-entry-icon">${ev.emoji}</div>
|
||||
<div class="almanac-entry-body">
|
||||
<div class="almanac-entry-head">
|
||||
<span class="almanac-entry-title">${ev.title}</span>
|
||||
<span class="almanac-entry-date">${formatPeak(ev.peak)}</span>
|
||||
<span class="almanac-entry-countdown">${countdownLabel(ev.daysUntil)}</span>
|
||||
</div>
|
||||
<div class="almanac-entry-desc">${ev.desc}</div>
|
||||
${ev.visibilityNote && html`
|
||||
<span class="almanac-entry-visibility">📍 ${ev.visibilityNote}</span>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
}
|
||||
</div>
|
||||
</div>`;
|
||||
})()}
|
||||
</>`}
|
||||
|
||||
<div class="utci-about">
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
skyGradientForElev, skyFillForElev, grassFillForElev,
|
||||
moonPhaseFraction,
|
||||
} from './utils.js';
|
||||
import { getLensOverlaySVG } from './events.js';
|
||||
|
||||
const html = htm.bind(h);
|
||||
|
||||
@@ -411,7 +412,7 @@ export function CloudIcon({ category, size = 30, elev = 90, dt = new Date() }) {
|
||||
// • (value + 10) / 60 maps UTCI -10..50 onto the 270° sweep —
|
||||
// widen the dial range by changing those numbers
|
||||
// ═══════════════════════════════════════════════════════════════════
|
||||
export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), glob = 0 }) {
|
||||
export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), glob = 0, activeEvent = null }) {
|
||||
// ── Day/night scene behind the readout ─────────────────────────────
|
||||
// The whole back of the lens is a SkyScope-style scene: sky on top,
|
||||
// grass on the bottom, sun positioned by elevation (or moon at night
|
||||
@@ -566,6 +567,11 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
|
||||
fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.7" />
|
||||
</>`}
|
||||
</g>
|
||||
${(() => {
|
||||
const overlaySVG = getLensOverlaySVG(activeEvent, cx, cy, lensR);
|
||||
if (!overlaySVG) return null;
|
||||
return html`<g dangerouslySetInnerHTML=${{ __html: overlaySVG }} />`;
|
||||
})()}
|
||||
${stressBands.map((b, i) => html`
|
||||
<path key=${i} d=${bandArcPath(b)} fill="none"
|
||||
stroke=${b.color} stroke-width="4" stroke-linecap="butt" />`)}
|
||||
|
||||
@@ -0,0 +1,632 @@
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// events.js — Cosmic & weather event engine for SunScope.
|
||||
//
|
||||
// Returns the "active event" (or null) based on:
|
||||
// 1. PROMO_OVERRIDE — manually set a message for promotions etc.
|
||||
// 2. Hardcoded cosmic calendar (eclipses, meteor showers, alignments)
|
||||
// 3. Weather-derived events (stargazing, sunset, heat spike, storm)
|
||||
//
|
||||
// To set a promo banner, edit PROMO_OVERRIDE near the top of this file.
|
||||
// Set it back to null when done.
|
||||
//
|
||||
// Each event object:
|
||||
// { id, emoji, title, message, color, textColor, type }
|
||||
//
|
||||
// type: 'cosmic' | 'weather' | 'promo'
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
// ─── PROMO OVERRIDE ──────────────────────────────────────────────────────
|
||||
// Set this to show a custom banner regardless of weather or cosmic events.
|
||||
// Leave as null for automatic event detection.
|
||||
//
|
||||
// Example:
|
||||
// export const PROMO_OVERRIDE = {
|
||||
// id: 'promo-summer',
|
||||
// emoji: '☀️',
|
||||
// title: 'Summer Sale',
|
||||
// message: 'SunScope Extra — 20% off this weekend only.',
|
||||
// color: '#c8922a',
|
||||
// textColor: '#fff',
|
||||
// type: 'promo',
|
||||
// };
|
||||
//
|
||||
export const PROMO_OVERRIDE = null;
|
||||
|
||||
// ─── COSMIC CALENDAR ─────────────────────────────────────────────────────
|
||||
// Hardcoded events — these are known years in advance.
|
||||
// Each entry: { id, start: 'YYYY-MM-DD', end: 'YYYY-MM-DD', peak: 'YYYY-MM-DD' (optional), ...eventProps }
|
||||
// Active if today falls within [start, end] (inclusive).
|
||||
// Night-only events (meteor showers, eclipses) are marked nightOnly: true
|
||||
// so the cell icons only appear in night-time rows.
|
||||
|
||||
const COSMIC_CALENDAR = [
|
||||
|
||||
// ── METEOR SHOWERS ──────────────────────────────────────────────────
|
||||
{
|
||||
id: 'quadrantids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Quadrantid Meteor Shower',
|
||||
message: 'The Quadrantid meteor shower is active — up to 120 meteors/hour at peak. Best after midnight in a dark sky.',
|
||||
color: '#2a1a5a',
|
||||
textColor: '#e8d8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-01-01', end: '2026-01-05', peak: '2026-01-03',
|
||||
},
|
||||
{
|
||||
id: 'lyrids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Lyrid Meteor Shower',
|
||||
message: 'The Lyrid meteor shower peaks tonight — up to 20 meteors/hour from a dark sky after midnight.',
|
||||
color: '#2a1a5a',
|
||||
textColor: '#e8d8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-04-16', end: '2026-04-25', peak: '2026-04-22',
|
||||
},
|
||||
{
|
||||
id: 'eta-aquariids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Eta Aquariid Meteor Shower',
|
||||
message: 'The Eta Aquariid shower peaks tonight — fragments of Halley\'s Comet, up to 50/hour before dawn.',
|
||||
color: '#2a1a5a',
|
||||
textColor: '#e8d8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-04-19', end: '2026-05-28', peak: '2026-05-06',
|
||||
},
|
||||
{
|
||||
id: 'perseids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Perseid Meteor Shower',
|
||||
message: 'The Perseids are active — one of the best showers of the year, up to 100 meteors/hour at peak.',
|
||||
color: '#3a1a00',
|
||||
textColor: '#ffe8c0',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-07-17', end: '2026-08-24', peak: '2026-08-12',
|
||||
},
|
||||
{
|
||||
id: 'orionids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Orionid Meteor Shower',
|
||||
message: 'The Orionid shower peaks tonight — fast, bright meteors from Halley\'s Comet debris. Up to 25/hour.',
|
||||
color: '#2a1a5a',
|
||||
textColor: '#e8d8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-10-02', end: '2026-11-07', peak: '2026-10-21',
|
||||
},
|
||||
{
|
||||
id: 'leonids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Leonid Meteor Shower',
|
||||
message: 'The Leonid shower is active tonight — fast, bright meteors from comet Tempel-Tuttle.',
|
||||
color: '#2a1a5a',
|
||||
textColor: '#e8d8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-11-06', end: '2026-11-30', peak: '2026-11-17',
|
||||
},
|
||||
{
|
||||
id: 'geminids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Geminid Meteor Shower',
|
||||
message: 'The Geminids peak tonight — the best shower of the year, up to 150 meteors/hour. No moon interference.',
|
||||
color: '#3a1a00',
|
||||
textColor: '#ffe8c0',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-12-04', end: '2026-12-20', peak: '2026-12-13',
|
||||
},
|
||||
{
|
||||
id: 'ursids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Ursid Meteor Shower',
|
||||
message: 'The Ursid shower peaks tonight — a quieter festive shower near the winter solstice.',
|
||||
color: '#2a1a5a',
|
||||
textColor: '#e8d8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-12-17', end: '2026-12-26', peak: '2026-12-22',
|
||||
},
|
||||
|
||||
// ── ECLIPSES ────────────────────────────────────────────────────────
|
||||
{
|
||||
id: 'solar-eclipse-2026-aug',
|
||||
emoji: '🌑',
|
||||
title: 'Total Solar Eclipse',
|
||||
message: 'A total solar eclipse crosses Europe and North Africa today — look for rapid temperature drops and unusual animal behaviour even in partial zones.',
|
||||
color: '#1a0a2a',
|
||||
textColor: '#d8c8f8',
|
||||
type: 'cosmic',
|
||||
nightOnly: false,
|
||||
start: '2026-08-12', end: '2026-08-12',
|
||||
},
|
||||
{
|
||||
id: 'lunar-eclipse-2026-mar',
|
||||
emoji: '🌕',
|
||||
title: 'Total Lunar Eclipse',
|
||||
message: 'A total lunar eclipse is visible tonight — the Moon turns deep red (a "Blood Moon") as it passes through Earth\'s shadow.',
|
||||
color: '#3a0a0a',
|
||||
textColor: '#ffd8d8',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-03-03', end: '2026-03-03',
|
||||
},
|
||||
|
||||
// ── PLANETARY EVENTS ────────────────────────────────────────────────
|
||||
{
|
||||
id: 'saturn-opposition-2026',
|
||||
emoji: '🪐',
|
||||
title: 'Saturn at Opposition',
|
||||
message: 'Saturn is at its closest and brightest tonight — visible all night long, rings tilted beautifully toward Earth.',
|
||||
color: '#1a2a3a',
|
||||
textColor: '#c8e8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-09-23', end: '2026-09-23',
|
||||
},
|
||||
{
|
||||
id: 'jupiter-opposition-2026',
|
||||
emoji: '🪐',
|
||||
title: 'Jupiter at Opposition',
|
||||
message: 'Jupiter is at its closest and brightest tonight — you can see its cloud bands with binoculars.',
|
||||
color: '#1a2a3a',
|
||||
textColor: '#c8e8ff',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-10-08', end: '2026-10-08',
|
||||
},
|
||||
{
|
||||
id: 'mars-conjunction-2026',
|
||||
emoji: '🔴',
|
||||
title: 'Mars & Venus Conjunction',
|
||||
message: 'Mars and Venus are remarkably close in the evening sky tonight — a striking pair visible to the naked eye.',
|
||||
color: '#2a1520',
|
||||
textColor: '#ffc8d8',
|
||||
type: 'cosmic',
|
||||
nightOnly: true,
|
||||
start: '2026-06-30', end: '2026-07-02',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
// ─── WEATHER-DERIVED EVENTS ───────────────────────────────────────────────
|
||||
// These are computed from the actual forecast data.
|
||||
// Each checker receives (rows, location) and returns an event object or null.
|
||||
// rows = today's hourlyRows array. location = { lat, lon, name, country }.
|
||||
|
||||
function checkStargazing(rows) {
|
||||
// Great stargazing: mostly clear night hours with low cloud
|
||||
const nightRows = rows.filter(r => r.elev < -5);
|
||||
if (nightRows.length < 3) return null;
|
||||
const avgCloud = nightRows.reduce((s, r) => s + r.cc, 0) / nightRows.length;
|
||||
if (avgCloud > 30) return null;
|
||||
return {
|
||||
id: 'stargazing',
|
||||
emoji: '⭐',
|
||||
title: 'Great Stargazing Tonight',
|
||||
message: `Clear skies expected overnight at ${nightRows.length} hours with average ${Math.round(avgCloud)}% cloud — ideal conditions for stargazing.`,
|
||||
color: '#080e1a',
|
||||
textColor: '#c8dcff',
|
||||
type: 'weather',
|
||||
nightOnly: true,
|
||||
};
|
||||
}
|
||||
|
||||
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;
|
||||
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
|
||||
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}.`,
|
||||
color: '#3a1a00',
|
||||
textColor: '#ffe0b0',
|
||||
type: 'weather',
|
||||
nightOnly: false,
|
||||
};
|
||||
}
|
||||
|
||||
function checkHeatSpike(rows) {
|
||||
const maxTemp = Math.max(...rows.map(r => r.Ta).filter(isFinite));
|
||||
if (maxTemp < 30) return null;
|
||||
const severity = maxTemp >= 36 ? 'extreme' : maxTemp >= 33 ? 'severe' : 'notable';
|
||||
const msgs = {
|
||||
notable: `Temperatures reaching ${maxTemp.toFixed(1)}°C — above seasonal norms. Stay hydrated and avoid prolonged sun exposure.`,
|
||||
severe: `Heat warning: ${maxTemp.toFixed(1)}°C expected today. Risk of heat exhaustion for vulnerable people — keep cool and hydrated.`,
|
||||
extreme: `Extreme heat alert: ${maxTemp.toFixed(1)}°C forecast. Risk of heat stroke — avoid outdoor activity during peak hours.`,
|
||||
};
|
||||
return {
|
||||
id: 'heat-spike',
|
||||
emoji: '🔥',
|
||||
title: severity === 'extreme' ? 'Extreme Heat Alert' : severity === 'severe' ? 'Heat Warning' : 'Heat Spike Today',
|
||||
message: msgs[severity],
|
||||
color: severity === 'extreme' ? '#3a0000' : severity === 'severe' ? '#4a1000' : '#5a2000',
|
||||
textColor: '#ffd0b0',
|
||||
type: 'weather',
|
||||
nightOnly: false,
|
||||
};
|
||||
}
|
||||
|
||||
function checkStorm(rows) {
|
||||
const maxGust = Math.max(...rows.map(r => r.gust ?? r.va ?? 0).filter(isFinite));
|
||||
const maxPrecip = Math.max(...rows.map(r => r.precip ?? 0).filter(isFinite));
|
||||
if (maxGust < 15 && maxPrecip < 5) return null;
|
||||
const isStorm = maxGust >= 20 || maxPrecip >= 10;
|
||||
return {
|
||||
id: 'storm',
|
||||
emoji: '🌩️',
|
||||
title: isStorm ? 'Storm Conditions Forecast' : 'Blustery & Wet Today',
|
||||
message: isStorm
|
||||
? `Storm-level conditions expected — gusts to ${maxGust.toFixed(0)} m/s with heavy precipitation. Take care outdoors.`
|
||||
: `Unsettled day ahead — windy with gusts to ${maxGust.toFixed(0)} m/s and ${maxPrecip.toFixed(1)} mm/h rain at peak.`,
|
||||
color: '#1a2030',
|
||||
textColor: '#c0d8f0',
|
||||
type: 'weather',
|
||||
nightOnly: false,
|
||||
};
|
||||
}
|
||||
|
||||
function checkFrost(rows) {
|
||||
const minTemp = Math.min(...rows.map(r => r.Ta).filter(isFinite));
|
||||
if (minTemp > 2) return null;
|
||||
return {
|
||||
id: 'frost',
|
||||
emoji: '❄️',
|
||||
title: minTemp <= 0 ? 'Freezing Conditions' : 'Frost Risk Tonight',
|
||||
message: minTemp <= 0
|
||||
? `Temperatures dropping to ${minTemp.toFixed(1)}°C — ice on roads and surfaces is likely. Allow extra travel time.`
|
||||
: `Temperatures near freezing tonight (${minTemp.toFixed(1)}°C) — frost possible on exposed surfaces and vehicles.`,
|
||||
color: '#0a1a2a',
|
||||
textColor: '#c8e8ff',
|
||||
type: 'weather',
|
||||
nightOnly: false,
|
||||
};
|
||||
}
|
||||
|
||||
// ─── ALMANAC CALENDAR ────────────────────────────────────────────────────
|
||||
// Extended calendar used for the "What's Coming" panel.
|
||||
// Includes all events from COSMIC_CALENDAR plus multi-year entries.
|
||||
// Each entry has a latHint: null = global, 'north' = better from northern
|
||||
// latitudes, 'south' = southern, 'path:...' = specific eclipse path note.
|
||||
|
||||
const ALMANAC_CALENDAR = [
|
||||
// 2026 events (covers rest of year from today)
|
||||
{
|
||||
id: 'lunar-eclipse-2026-mar',
|
||||
emoji: '🌕',
|
||||
title: 'Total Lunar Eclipse',
|
||||
desc: 'The Moon turns deep red as it passes through Earth\'s shadow. Visible from Europe, Africa, and the Americas.',
|
||||
start: '2026-03-03', peak: '2026-03-03',
|
||||
color: '#3a0a0a', textColor: '#ffd8d8',
|
||||
latHint: null,
|
||||
type: 'eclipse',
|
||||
},
|
||||
{
|
||||
id: 'lyrids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Lyrid Meteor Shower',
|
||||
desc: 'Up to 20 meteors/hour at peak. Active Apr 16–25, best after midnight from a dark site.',
|
||||
start: '2026-04-16', peak: '2026-04-22',
|
||||
color: '#2a1a5a', textColor: '#e8d8ff',
|
||||
latHint: 'north',
|
||||
type: 'meteor',
|
||||
},
|
||||
{
|
||||
id: 'eta-aquariids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Eta Aquariid Meteor Shower',
|
||||
desc: 'Debris from Halley\'s Comet — up to 50/hour before dawn. Best from southern latitudes but visible worldwide.',
|
||||
start: '2026-04-19', peak: '2026-05-06',
|
||||
color: '#2a1a5a', textColor: '#e8d8ff',
|
||||
latHint: 'south',
|
||||
type: 'meteor',
|
||||
},
|
||||
{
|
||||
id: 'mars-conjunction-2026',
|
||||
emoji: '🔴',
|
||||
title: 'Mars & Venus Conjunction',
|
||||
desc: 'Mars and Venus appear strikingly close in the evening sky — a beautiful naked-eye pairing.',
|
||||
start: '2026-06-30', peak: '2026-07-01',
|
||||
color: '#2a1520', textColor: '#ffc8d8',
|
||||
latHint: null,
|
||||
type: 'planetary',
|
||||
},
|
||||
{
|
||||
id: 'perseids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Perseid Meteor Shower',
|
||||
desc: 'One of the best showers of the year — up to 100/hour at peak, no need for a telescope.',
|
||||
start: '2026-07-17', peak: '2026-08-12',
|
||||
color: '#3a1a00', textColor: '#ffe8c0',
|
||||
latHint: 'north',
|
||||
type: 'meteor',
|
||||
},
|
||||
{
|
||||
id: 'solar-eclipse-2026-aug',
|
||||
emoji: '🌑',
|
||||
title: 'Total Solar Eclipse',
|
||||
desc: 'The path of totality crosses Spain, Iceland, and Greenland. Partial eclipse visible across most of Europe.',
|
||||
start: '2026-08-12', peak: '2026-08-12',
|
||||
color: '#1a0a2a', textColor: '#d8c8f8',
|
||||
latHint: 'path:Spain, Iceland, Greenland — partial eclipse across UK & Europe',
|
||||
type: 'eclipse',
|
||||
},
|
||||
{
|
||||
id: 'saturn-opposition-2026',
|
||||
emoji: '🪐',
|
||||
title: 'Saturn at Opposition',
|
||||
desc: 'Saturn is at its closest and brightest — rings tilted beautifully toward Earth. Visible all night.',
|
||||
start: '2026-09-23', peak: '2026-09-23',
|
||||
color: '#1a2a3a', textColor: '#c8e8ff',
|
||||
latHint: null,
|
||||
type: 'planetary',
|
||||
},
|
||||
{
|
||||
id: 'orionids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Orionid Meteor Shower',
|
||||
desc: 'Fast, bright meteors from Halley\'s Comet — up to 25/hour. Active Oct 2 – Nov 7.',
|
||||
start: '2026-10-02', peak: '2026-10-21',
|
||||
color: '#2a1a5a', textColor: '#e8d8ff',
|
||||
latHint: null,
|
||||
type: 'meteor',
|
||||
},
|
||||
{
|
||||
id: 'jupiter-opposition-2026',
|
||||
emoji: '🪐',
|
||||
title: 'Jupiter at Opposition',
|
||||
desc: 'Jupiter at its closest — you can see its cloud bands and four Galilean moons with binoculars.',
|
||||
start: '2026-10-08', peak: '2026-10-08',
|
||||
color: '#1a2a3a', textColor: '#c8e8ff',
|
||||
latHint: null,
|
||||
type: 'planetary',
|
||||
},
|
||||
{
|
||||
id: 'leonids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Leonid Meteor Shower',
|
||||
desc: 'Fast, bright meteors from comet Tempel-Tuttle. Up to 15/hour at peak.',
|
||||
start: '2026-11-06', peak: '2026-11-17',
|
||||
color: '#2a1a5a', textColor: '#e8d8ff',
|
||||
latHint: null,
|
||||
type: 'meteor',
|
||||
},
|
||||
{
|
||||
id: 'geminids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Geminid Meteor Shower',
|
||||
desc: 'The finest shower of the year — up to 150 meteors/hour, visible even before midnight.',
|
||||
start: '2026-12-04', peak: '2026-12-13',
|
||||
color: '#3a1a00', textColor: '#ffe8c0',
|
||||
latHint: 'north',
|
||||
type: 'meteor',
|
||||
},
|
||||
{
|
||||
id: 'ursids-2026',
|
||||
emoji: '☄️',
|
||||
title: 'Ursid Meteor Shower',
|
||||
desc: 'A quieter shower near the winter solstice — circumpolar, so best from northern latitudes.',
|
||||
start: '2026-12-17', peak: '2026-12-22',
|
||||
color: '#2a1a5a', textColor: '#e8d8ff',
|
||||
latHint: 'north',
|
||||
type: 'meteor',
|
||||
},
|
||||
];
|
||||
|
||||
// Returns a location-aware visibility note for an almanac entry.
|
||||
// lat = user's latitude.
|
||||
function getVisibilityNote(entry, lat) {
|
||||
if (!entry.latHint) return null;
|
||||
if (entry.latHint.startsWith('path:')) {
|
||||
return entry.latHint.replace('path:', '').trim();
|
||||
}
|
||||
if (entry.latHint === 'north') {
|
||||
if (lat >= 45) return 'Well placed for your latitude';
|
||||
if (lat >= 20) return 'Visible from your location';
|
||||
return 'Better from northern latitudes';
|
||||
}
|
||||
if (entry.latHint === 'south') {
|
||||
if (lat <= 10) return 'Well placed for your latitude';
|
||||
if (lat <= 40) return 'Visible from your location';
|
||||
return 'Better from southern latitudes';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ─── MAIN ALMANAC EXPORT ─────────────────────────────────────────────────
|
||||
// Returns events with peak dates in the next `days` days (default 90),
|
||||
// sorted by peak date, with a visibility note added.
|
||||
export function getUpcomingEvents(location, days = 90) {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const cutoff = new Date(today);
|
||||
cutoff.setDate(cutoff.getDate() + days);
|
||||
const todayStr = today.toISOString().slice(0, 10);
|
||||
const cutoffStr = cutoff.toISOString().slice(0, 10);
|
||||
|
||||
return ALMANAC_CALENDAR
|
||||
.filter(ev => ev.peak >= todayStr && ev.peak <= cutoffStr)
|
||||
.sort((a, b) => a.peak.localeCompare(b.peak))
|
||||
.map(ev => ({
|
||||
...ev,
|
||||
visibilityNote: getVisibilityNote(ev, location?.lat ?? 51),
|
||||
daysUntil: Math.round((new Date(ev.peak + 'T00:00Z') - today) / 86400000),
|
||||
}));
|
||||
}
|
||||
|
||||
// ─── CELL TAG LOGIC ──────────────────────────────────────────────────────
|
||||
// For timetable cell icons: given an active event and a row,
|
||||
// should this hour show the event icon?
|
||||
export function shouldShowCellTag(event, row) {
|
||||
if (!event) return false;
|
||||
if (event.type === 'promo') return false;
|
||||
// Night-only events only badge night rows
|
||||
if (event.nightOnly && row.elev >= -5) return false;
|
||||
// Weather events: storm/frost badge all hours; heat badges daytime only
|
||||
if (event.id === 'heat-spike' && row.elev < 0) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
// ─── MAIN EXPORT ─────────────────────────────────────────────────────────
|
||||
// Call this once per render with today's rows and location.
|
||||
// Returns the single highest-priority active event, or null.
|
||||
//
|
||||
// Priority order:
|
||||
// 1. PROMO_OVERRIDE (manual)
|
||||
// 2. Cosmic calendar events (sorted by priority: eclipse > meteor > planetary)
|
||||
// 3. Weather events (heat > storm > frost > sunset > stargazing)
|
||||
|
||||
export function getActiveEvent(todayRows, location) {
|
||||
// 1. Manual promo override
|
||||
if (PROMO_OVERRIDE) return PROMO_OVERRIDE;
|
||||
|
||||
// 2. Cosmic calendar
|
||||
const today = new Date();
|
||||
const todayStr = today.toISOString().slice(0, 10);
|
||||
const cosmicHit = COSMIC_CALENDAR.find(ev => todayStr >= ev.start && todayStr <= ev.end);
|
||||
if (cosmicHit) return cosmicHit;
|
||||
|
||||
// 3. Weather-derived (needs forecast data)
|
||||
if (!todayRows || todayRows.length === 0) return null;
|
||||
|
||||
return (
|
||||
checkHeatSpike(todayRows) ||
|
||||
checkStorm(todayRows) ||
|
||||
checkFrost(todayRows) ||
|
||||
checkSunset(todayRows, location) ||
|
||||
checkStargazing(todayRows)
|
||||
);
|
||||
}
|
||||
|
||||
// ─── LENS OVERLAY RENDERER ───────────────────────────────────────────────
|
||||
// Returns SVG group content for the event overlay in the big ScopeReticle.
|
||||
// Rendered INSIDE the lens clip and BELOW the glass shine/shade layers.
|
||||
// cx, cy = lens centre; lensR = lens radius.
|
||||
|
||||
|
||||
export function getLensOverlaySVG(event, cx, cy, lensR) {
|
||||
if (!event) return null;
|
||||
const id = event.id;
|
||||
|
||||
if (event.emoji === '☄️') {
|
||||
return [
|
||||
'<g opacity="0.55" clip-path="url(#scope-lens-clip)">',
|
||||
`<line x1="${cx-60}" y1="${cy-50}" x2="${cx-20}" y2="${cy-20}" stroke="#ffe8a0" stroke-width="1.5" stroke-linecap="round" opacity="0.9"/>`,
|
||||
`<line x1="${cx-40}" y1="${cy-70}" x2="${cx+5}" y2="${cy-30}" stroke="#fff0c0" stroke-width="1" stroke-linecap="round" opacity="0.7"/>`,
|
||||
`<line x1="${cx+30}" y1="${cy-60}" x2="${cx+65}" y2="${cy-25}" stroke="#ffe8a0" stroke-width="1.8" stroke-linecap="round" opacity="0.8"/>`,
|
||||
`<line x1="${cx-10}" y1="${cy-40}" x2="${cx+30}" y2="${cy-5}" stroke="#fff0c0" stroke-width="0.9" stroke-linecap="round" opacity="0.65"/>`,
|
||||
`<line x1="${cx-70}" y1="${cy-20}" x2="${cx-35}" y2="${cy+10}" stroke="#ffe8a0" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (id.includes('solar-eclipse')) {
|
||||
return [
|
||||
'<g clip-path="url(#scope-lens-clip)">',
|
||||
`<radialGradient id="corona-glow" cx="${cx}" cy="${cy-20}" r="38" gradientUnits="userSpaceOnUse">`,
|
||||
'<stop offset="0%" stop-color="rgba(255,220,100,0)" />',
|
||||
'<stop offset="55%" stop-color="rgba(255,220,100,0.55)" />',
|
||||
'<stop offset="100%" stop-color="rgba(255,180,40,0)" />',
|
||||
'</radialGradient>',
|
||||
`<circle cx="${cx}" cy="${cy-20}" r="38" fill="url(#corona-glow)" opacity="0.8" />`,
|
||||
`<circle cx="${cx}" cy="${cy-20}" r="18" fill="rgba(5,2,15,0.88)" />`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (id.includes('lunar-eclipse')) {
|
||||
return [
|
||||
'<g clip-path="url(#scope-lens-clip)">',
|
||||
`<radialGradient id="blood-moon-glow" cx="${cx}" cy="${cy-30}" r="30" gradientUnits="userSpaceOnUse">`,
|
||||
'<stop offset="0%" stop-color="rgba(180,30,10,0.7)" />',
|
||||
'<stop offset="100%" stop-color="rgba(120,10,5,0)" />',
|
||||
'</radialGradient>',
|
||||
`<circle cx="${cx}" cy="${cy-30}" r="30" fill="url(#blood-moon-glow)" />`,
|
||||
`<circle cx="${cx}" cy="${cy-30}" r="16" fill="rgba(160,25,10,0.75)" />`,
|
||||
`<circle cx="${cx}" cy="${cy-30}" r="16" fill="none" stroke="rgba(220,60,20,0.5)" stroke-width="1.5" />`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (event.emoji === '🪐') {
|
||||
return [
|
||||
'<g clip-path="url(#scope-lens-clip)" opacity="0.65">',
|
||||
`<circle cx="${cx+20}" cy="${cy-35}" r="10" fill="rgba(210,185,130,0.7)" />`,
|
||||
`<ellipse cx="${cx+20}" cy="${cy-35}" rx="18" ry="4.5" fill="none" stroke="rgba(200,170,100,0.65)" stroke-width="2.5" />`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (event.emoji === '🔴') {
|
||||
return [
|
||||
'<g clip-path="url(#scope-lens-clip)" opacity="0.6">',
|
||||
`<circle cx="${cx+30}" cy="${cy-30}" r="7" fill="rgba(200,80,40,0.75)" />`,
|
||||
`<circle cx="${cx-20}" cy="${cy-45}" r="5" fill="rgba(220,160,80,0.7)" />`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (id === 'stargazing') {
|
||||
const stars = [
|
||||
[cx-50,cy-55,1.8],[cx+40,cy-65,1.4],[cx-20,cy-70,1.0],
|
||||
[cx+65,cy-40,1.6],[cx-60,cy-30,1.2],[cx+50,cy-55,1.0],
|
||||
[cx-35,cy-45,1.4],[cx+20,cy-50,1.8],[cx-75,cy-50,1.0],
|
||||
];
|
||||
const dots = stars.map(([x,y,r]) => `<circle cx="${x}" cy="${y}" r="${r}" fill="rgba(255,255,255,0.9)" />`).join('');
|
||||
return `<g clip-path="url(#scope-lens-clip)" opacity="0.7">${dots}</g>`;
|
||||
}
|
||||
|
||||
if (id === 'perfect-sunset') {
|
||||
return [
|
||||
'<g clip-path="url(#scope-lens-clip)" opacity="0.5">',
|
||||
`<radialGradient id="sunset-lens-glow" cx="${cx}" cy="${cy+20}" r="${lensR}" gradientUnits="userSpaceOnUse">`,
|
||||
'<stop offset="0%" stop-color="rgba(255,120,20,0.7)" />',
|
||||
'<stop offset="50%" stop-color="rgba(255,60,10,0.25)" />',
|
||||
'<stop offset="100%" stop-color="rgba(200,20,0,0)" />',
|
||||
'</radialGradient>',
|
||||
`<circle cx="${cx}" cy="${cy}" r="${lensR}" fill="url(#sunset-lens-glow)" />`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (id === 'heat-spike') {
|
||||
return [
|
||||
'<g clip-path="url(#scope-lens-clip)" opacity="0.35">',
|
||||
`<path d="M ${cx-lensR+10} ${cy+30} Q ${cx-20} ${cy+15} ${cx+20} ${cy+30} Q ${cx+60} ${cy+45} ${cx+lensR-10} ${cy+30}" fill="none" stroke="rgba(255,120,20,0.6)" stroke-width="2" />`,
|
||||
`<path d="M ${cx-lensR+10} ${cy+45} Q ${cx-10} ${cy+30} ${cx+30} ${cy+45} Q ${cx+65} ${cy+60} ${cx+lensR-10} ${cy+45}" fill="none" stroke="rgba(255,100,10,0.5)" stroke-width="2" />`,
|
||||
`<path d="M ${cx-lensR+20} ${cy+60} Q ${cx+10} ${cy+45} ${cx+40} ${cy+60} Q ${cx+70} ${cy+75} ${cx+lensR-20} ${cy+60}" fill="none" stroke="rgba(255,80,0,0.4)" stroke-width="1.5" />`,
|
||||
'</g>',
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
if (id === 'storm') {
|
||||
const lines = [-55,-30,-5,20,45,65].map(x =>
|
||||
`<line x1="${cx+x}" y1="${cy-lensR+10}" x2="${cx+x-15}" y2="${cy+lensR-10}" stroke="rgba(140,180,220,0.6)" stroke-width="1" stroke-linecap="round" />`
|
||||
).join('');
|
||||
return `<g clip-path="url(#scope-lens-clip)" opacity="0.45">${lines}</g>`;
|
||||
}
|
||||
|
||||
if (id === 'frost') {
|
||||
const crystals = [[-50,40],[0,55],[50,40],[-30,65],[30,65]].map(([dx,dy]) =>
|
||||
`<g transform="translate(${cx+dx},${cy+dy})">` +
|
||||
'<line x1="-6" y1="0" x2="6" y2="0" stroke="rgba(180,220,255,0.8)" stroke-width="1" />' +
|
||||
'<line x1="0" y1="-6" x2="0" y2="6" stroke="rgba(180,220,255,0.8)" stroke-width="1" />' +
|
||||
'<line x1="-4" y1="-4" x2="4" y2="4" stroke="rgba(180,220,255,0.7)" stroke-width="0.8" />' +
|
||||
'<line x1="4" y1="-4" x2="-4" y2="4" stroke="rgba(180,220,255,0.7)" stroke-width="0.8" />' +
|
||||
'</g>'
|
||||
).join('');
|
||||
return `<g clip-path="url(#scope-lens-clip)" opacity="0.5">${crystals}</g>`;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user