jared
c54cb126ff
Fix settings modal regression: Modal500 was wrapped in useModalStyle(560), forcing maxWidth 560px and squishing the two-pane Settings layout (folds size="500" is ~50rem). Restore desktop width to the folds recipe while keeping mobile fullscreen. N-series fixes: - N13 ScheduledMessagesTray header: <Box as="button"> -> folds <Button> - N28 composer char counter: drop undefined --tc-surface-low + opacity, use priority="300" and config.space token - N31 collapsible "Read more" toggle: padded <Button> -> flush inline-button pattern matching (edited) link - N41 UserPrivateNotes "Saving..." now shows a folds <Spinner> - N43 Night Light slider: add accentColor; label opacity -> priority - N44 mention-highlight Reset: bare <button> -> folds <Button> (drops undefined --border-interactive-normal); Boot button kept (TDS-only) - N45 SelectTheme trigger variant -> Secondary to match SettingsSelect - N49 RoomInsights StatTile emoji -> folds <Icon> (Photo/VideoCamera/ Headphone/File) - N54/N57 PiP overlay badges + fullscreen button: token discipline (config.radii/space, folds Text); dark scrim kept for video legibility - N60 knock badge: match Pinned Messages pattern (no wrapper div, toRem insets, no hardcoded size overrides) - N62 unverified-device banner: 3px left-accent -> standard border via color.Warning.ContainerLine; drop opacity hacks - N65 Edit History: real "Load more" pagination (accumulate next_batch, de-dupe by id, re-sort by ts) replacing passive text - N66 search date fields: raw <input type="date"> -> folds <Input> - N67 SeasonalEffect z-index 9999 -> 9997 (below Night Light + modals) - N73 Pending Requests header uses css.MembersGroupLabel - N74 remove raw em-sized emoji <span> in RoomNavItem name - N85/N86 RemindMeDialog: <Box role="dialog"> -> folds <Dialog>; preset MenuItems -> Buttons (fixes invalid menuitem-in-dialog ARIA) Document deliberate WON'T FIX rationale for N9, N51, N61, N71, N75, N77. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
808 lines
26 KiB
TypeScript
808 lines
26 KiB
TypeScript
import React, { useMemo } from 'react';
|
||
import { useAtomValue } from 'jotai';
|
||
import { settingsAtom } from '../../state/settings';
|
||
import {
|
||
animSeasonFall,
|
||
animLeafFall,
|
||
animFloatUp,
|
||
animBob,
|
||
animTasselSway,
|
||
animGoldShimmer,
|
||
animCloverDrift,
|
||
animEarthLeafDrift,
|
||
animWarp,
|
||
animScanline,
|
||
animPixelBlink,
|
||
} from './Seasonal.css';
|
||
|
||
export type SeasonTheme =
|
||
| 'halloween'
|
||
| 'christmas'
|
||
| 'newyear'
|
||
| 'autumn'
|
||
| 'aprilfools'
|
||
| 'lunar'
|
||
| 'valentines'
|
||
| 'stpatricks'
|
||
| 'earthday'
|
||
| 'deepspace'
|
||
| 'arcade';
|
||
|
||
function getActiveSeason(now: Date): SeasonTheme | null {
|
||
const m = now.getMonth() + 1; // 1-12
|
||
const d = now.getDate();
|
||
|
||
// New Year takes highest priority (Dec 31 – Jan 2)
|
||
if ((m === 12 && d === 31) || (m === 1 && d <= 2)) return 'newyear';
|
||
// Valentine's Day (Feb 10–15)
|
||
if (m === 2 && d >= 10 && d <= 15) return 'valentines';
|
||
// St. Patrick's Day (March 15–18)
|
||
if (m === 3 && d >= 15 && d <= 18) return 'stpatricks';
|
||
// April Fool's (April 1)
|
||
if (m === 4 && d === 1) return 'aprilfools';
|
||
// Earth Day (April 20–23)
|
||
if (m === 4 && d >= 20 && d <= 23) return 'earthday';
|
||
// Lunar New Year (Jan 22 – Feb 5, approximate fixed window)
|
||
if ((m === 1 && d >= 22) || (m === 2 && d <= 5)) return 'lunar';
|
||
// International Video Game Day (Sept 12)
|
||
if (m === 9 && d === 12) return 'arcade';
|
||
// World Space Week (Oct 4–10)
|
||
if (m === 10 && d >= 4 && d <= 10) return 'deepspace';
|
||
// Halloween (Oct 15 – Nov 1)
|
||
if ((m === 10 && d >= 15) || (m === 11 && d === 1)) return 'halloween';
|
||
// Christmas (Dec 10–30)
|
||
if (m === 12 && d >= 10) return 'christmas';
|
||
// Autumn (Sept 21 – Oct 31, excluding Halloween/Deep Space windows above)
|
||
if ((m === 9 && d >= 21) || (m === 10 && d <= 14)) return 'autumn';
|
||
|
||
return null;
|
||
}
|
||
|
||
// ─── Individual theme overlays ────────────────────────────────────────────────
|
||
|
||
function HalloweenOverlay({ reduced }: { reduced: boolean }) {
|
||
const particles = Array.from({ length: 22 });
|
||
return (
|
||
<>
|
||
{/* Dark purple ambient tint */}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundColor: 'rgba(25,0,45,0.22)',
|
||
backgroundImage:
|
||
'radial-gradient(ellipse at 50% 50%, rgba(100,0,180,0.08) 0%, transparent 70%)',
|
||
}}
|
||
/>
|
||
{/* Spider web corners */}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '160px',
|
||
height: '160px',
|
||
backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g stroke='rgba(180,120,255,0.35)' stroke-width='0.7' fill='none'><line x1='0' y1='0' x2='80' y2='80'/><line x1='40' y1='0' x2='80' y2='80'/><line x1='80' y1='0' x2='80' y2='80'/><line x1='0' y1='40' x2='80' y2='80'/><line x1='0' y1='80' x2='80' y2='80'/><ellipse cx='80' cy='80' rx='20' ry='20'/><ellipse cx='80' cy='80' rx='40' ry='40'/><ellipse cx='80' cy='80' rx='60' ry='60'/><ellipse cx='80' cy='80' rx='80' ry='80'/></g></svg>")`,
|
||
backgroundRepeat: 'no-repeat',
|
||
opacity: 0.7,
|
||
}}
|
||
/>
|
||
{/* Falling purple/orange particles */}
|
||
{!reduced &&
|
||
particles.map((_, i) => {
|
||
const isOrange = i % 3 === 0;
|
||
const size = 4 + (i % 3) * 2;
|
||
const left = (i * 4597 + 137) % 100;
|
||
const duration = 8 + (i % 7) * 1.5;
|
||
const delay = (i * 0.45) % 7;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-8px',
|
||
left: `${left}%`,
|
||
width: `${size}px`,
|
||
height: `${size}px`,
|
||
borderRadius: '50%',
|
||
backgroundColor: isOrange ? 'rgba(255,100,0,0.75)' : 'rgba(160,0,255,0.7)',
|
||
boxShadow: isOrange ? '0 0 8px rgba(255,100,0,0.5)' : '0 0 8px rgba(160,0,255,0.5)',
|
||
animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
|
||
}}
|
||
/>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ChristmasOverlay({ reduced }: { reduced: boolean }) {
|
||
const flakes = Array.from({ length: 28 });
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'radial-gradient(ellipse at 50% 0%, rgba(220,240,255,0.06) 0%, transparent 60%)',
|
||
}}
|
||
/>
|
||
{!reduced &&
|
||
flakes.map((_, i) => {
|
||
const size = 3 + (i % 4) * 2;
|
||
const left = (i * 3571 + 251) % 100;
|
||
const duration = 10 + (i % 8) * 2;
|
||
const delay = (i * 0.55) % 10;
|
||
const drift = ((i % 5) - 2) * 12;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-10px',
|
||
left: `${left}%`,
|
||
width: `${size}px`,
|
||
height: `${size}px`,
|
||
borderRadius: '50%',
|
||
backgroundColor: 'rgba(255,255,255,0.82)',
|
||
boxShadow: '0 0 4px rgba(200,230,255,0.6)',
|
||
animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
|
||
transform: `translateX(${drift}px)`,
|
||
}}
|
||
/>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
// Replaced flashing burst rays with gentle falling confetti
|
||
function NewYearOverlay({ reduced }: { reduced: boolean }) {
|
||
const confetti = Array.from({ length: 24 });
|
||
const colors = ['#ffd700', '#ff4466', '#00d4ff', '#aa44ff', '#ff8800', '#ffffff'];
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundColor: 'rgba(10,5,0,0.10)',
|
||
backgroundImage:
|
||
'radial-gradient(ellipse at 50% 50%, rgba(255,200,0,0.04) 0%, transparent 70%)',
|
||
}}
|
||
/>
|
||
{/* Gentle falling confetti */}
|
||
{!reduced &&
|
||
confetti.map((_, i) => {
|
||
const c = colors[i % colors.length];
|
||
const left = (i * 4597 + 137) % 100;
|
||
const size = 3 + (i % 3) * 2;
|
||
const duration = 8 + (i % 7) * 1.5;
|
||
const delay = (i * 0.4) % 8;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-8px',
|
||
left: `${left}%`,
|
||
width: `${size}px`,
|
||
height: `${size}px`,
|
||
borderRadius: i % 2 === 0 ? '50%' : '1px',
|
||
backgroundColor: c,
|
||
boxShadow: `0 0 ${size + 2}px ${c}`,
|
||
animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
|
||
opacity: 0.7 + (i % 3) * 0.1,
|
||
}}
|
||
/>
|
||
);
|
||
})}
|
||
{/* Slow gold shimmer */}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'linear-gradient(105deg, transparent 30%, rgba(255,215,0,0.05) 50%, transparent 70%)',
|
||
backgroundSize: '200% 100%',
|
||
animation: reduced ? 'none' : `${animGoldShimmer} 5s linear infinite`,
|
||
}}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function AutumnOverlay({ reduced }: { reduced: boolean }) {
|
||
const leaves = Array.from({ length: 18 });
|
||
const colors = [
|
||
'rgba(220,80,20,0.75)',
|
||
'rgba(200,120,0,0.7)',
|
||
'rgba(180,50,10,0.7)',
|
||
'rgba(230,150,0,0.65)',
|
||
'rgba(160,80,0,0.6)',
|
||
];
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'radial-gradient(ellipse at 50% 100%, rgba(180,80,0,0.06) 0%, transparent 60%)',
|
||
}}
|
||
/>
|
||
{!reduced &&
|
||
leaves.map((_, i) => {
|
||
const left = (i * 5381 + 179) % 100;
|
||
const duration = 12 + (i % 6) * 2;
|
||
const delay = (i * 0.65) % 12;
|
||
const size = 10 + (i % 4) * 4;
|
||
const col = colors[i % colors.length];
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-15px',
|
||
left: `${left}%`,
|
||
width: `${size}px`,
|
||
height: `${size * 0.7}px`,
|
||
borderRadius: '50% 0 50% 0',
|
||
backgroundColor: col,
|
||
boxShadow: `0 0 4px ${col}`,
|
||
animation: `${animLeafFall} ${duration}s ease-in ${delay}s infinite`,
|
||
}}
|
||
/>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
// Replaced aggressive glitch with playful confetti rain
|
||
function AprilFoolsOverlay({ reduced }: { reduced: boolean }) {
|
||
const particles = Array.from({ length: 20 });
|
||
const symbols = ['?', '!', '¿', '‽', '?', '!'];
|
||
const colors = [
|
||
'rgba(255,80,80,0.55)',
|
||
'rgba(255,200,0,0.55)',
|
||
'rgba(80,200,80,0.55)',
|
||
'rgba(80,80,255,0.55)',
|
||
'rgba(200,80,200,0.55)',
|
||
'rgba(80,200,200,0.55)',
|
||
];
|
||
|
||
return (
|
||
<>
|
||
{/* Subtle rainbow stripe along top edge */}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '3px',
|
||
backgroundImage:
|
||
'linear-gradient(90deg, rgba(255,0,0,0.4), rgba(255,165,0,0.4), rgba(255,255,0,0.4), rgba(0,200,0,0.4), rgba(0,0,255,0.4), rgba(128,0,128,0.4))',
|
||
opacity: 0.7,
|
||
}}
|
||
/>
|
||
{/* Gentle falling punctuation symbols */}
|
||
{!reduced &&
|
||
particles.map((_, i) => {
|
||
const left = (i * 5381 + 179) % 100;
|
||
const duration = 11 + (i % 5) * 2.5;
|
||
const delay = (i * 0.55) % 10;
|
||
const col = colors[i % colors.length];
|
||
const sym = symbols[i % symbols.length];
|
||
const size = 12 + (i % 3) * 5;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-20px',
|
||
left: `${left}%`,
|
||
fontSize: `${size}px`,
|
||
color: col,
|
||
fontWeight: 700,
|
||
fontFamily: 'monospace',
|
||
animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
{sym}
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
// Reduced to 4 lanterns, subtler tint and shimmer
|
||
function LunarNewYearOverlay({ reduced }: { reduced: boolean }) {
|
||
const lanterns = Array.from({ length: 4 }); // was 9
|
||
return (
|
||
<>
|
||
{/* Very subtle red silk tint */}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundColor: 'rgba(140,0,0,0.05)',
|
||
backgroundImage: [
|
||
'repeating-linear-gradient(45deg, rgba(200,20,0,0.015) 0px, rgba(200,20,0,0.015) 1px, transparent 1px, transparent 8px)',
|
||
'repeating-linear-gradient(135deg, rgba(200,20,0,0.015) 0px, rgba(200,20,0,0.015) 1px, transparent 1px, transparent 8px)',
|
||
].join(','),
|
||
}}
|
||
/>
|
||
{/* Slow gold shimmer */}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'linear-gradient(100deg, transparent 25%, rgba(255,200,0,0.05) 45%, rgba(255,220,50,0.07) 50%, rgba(255,200,0,0.05) 55%, transparent 75%)',
|
||
backgroundSize: '300% 100%',
|
||
animation: reduced ? 'none' : `${animGoldShimmer} 8s linear infinite`,
|
||
}}
|
||
/>
|
||
{/* 4 floating lanterns */}
|
||
{lanterns.map((_, i) => {
|
||
const left = 10 + ((i * 4603 + 311) % 75);
|
||
const top = 10 + ((i * 2311 + 97) % 50);
|
||
const duration = 3.5 + (i % 4) * 0.7;
|
||
const delay = i * 0.9;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
left: `${left}%`,
|
||
top: `${top}%`,
|
||
animation: reduced
|
||
? 'none'
|
||
: `${animBob} ${duration}s ease-in-out ${delay}s infinite`,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: '18px',
|
||
height: '5px',
|
||
backgroundColor: '#ffd700',
|
||
borderRadius: '2px',
|
||
margin: '0 auto',
|
||
boxShadow: '0 0 4px rgba(255,215,0,0.6)',
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
width: '24px',
|
||
height: '32px',
|
||
backgroundColor: '#cc0000',
|
||
borderRadius: '50%',
|
||
border: '1.5px solid #ffd700',
|
||
boxShadow: '0 0 14px rgba(200,0,0,0.5), inset 0 0 10px rgba(255,200,0,0.2)',
|
||
margin: '1px auto',
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
width: '18px',
|
||
height: '5px',
|
||
backgroundColor: '#ffd700',
|
||
borderRadius: '2px',
|
||
margin: '0 auto',
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
width: '2px',
|
||
height: '14px',
|
||
backgroundColor: '#ffd700',
|
||
margin: '0 auto',
|
||
animation: reduced
|
||
? 'none'
|
||
: `${animTasselSway} ${duration * 0.6}s ease-in-out ${delay}s infinite`,
|
||
transformOrigin: 'top center',
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ValentinesOverlay({ reduced }: { reduced: boolean }) {
|
||
const hearts = Array.from({ length: 18 });
|
||
const colors = [
|
||
'rgba(255,100,140,0.8)',
|
||
'rgba(255,150,180,0.65)',
|
||
'rgba(220,70,110,0.7)',
|
||
'rgba(255,180,200,0.55)',
|
||
];
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'radial-gradient(ellipse at 50% 100%, rgba(255,100,140,0.06) 0%, transparent 55%)',
|
||
}}
|
||
/>
|
||
{!reduced &&
|
||
hearts.map((_, i) => {
|
||
const left = 3 + ((i * 6271 + 443) % 94);
|
||
const duration = 9 + (i % 6) * 1.8;
|
||
const delay = (i * 0.6) % 9;
|
||
const size = 14 + (i % 4) * 5;
|
||
const col = colors[i % colors.length];
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '-20px',
|
||
left: `${left}%`,
|
||
fontSize: `${size}px`,
|
||
color: col,
|
||
filter: 'drop-shadow(0 0 4px rgba(255,100,140,0.4))',
|
||
animation: `${animFloatUp} ${duration}s ease-in ${delay}s infinite`,
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
♥
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function StPatricksOverlay({ reduced }: { reduced: boolean }) {
|
||
const clovers = Array.from({ length: 18 });
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage: [
|
||
'radial-gradient(ellipse at 50% 0%, rgba(0,160,60,0.07) 0%, transparent 50%)',
|
||
'radial-gradient(ellipse at 50% 100%, rgba(0,130,50,0.05) 0%, transparent 40%)',
|
||
].join(','),
|
||
}}
|
||
/>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '3px',
|
||
backgroundImage:
|
||
'linear-gradient(90deg, transparent 0%, #ffd700 20%, #fff4a0 40%, #ffd700 60%, transparent 100%)',
|
||
backgroundSize: '300% 100%',
|
||
animation: reduced ? 'none' : `${animGoldShimmer} 3s linear infinite`,
|
||
}}
|
||
/>
|
||
{!reduced &&
|
||
clovers.map((_, i) => {
|
||
const left = (i * 4129 + 223) % 100;
|
||
const duration = 14 + (i % 6) * 2;
|
||
const delay = (i * 0.7) % 12;
|
||
const size = 14 + (i % 3) * 6;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-20px',
|
||
left: `${left}%`,
|
||
fontSize: `${size}px`,
|
||
opacity: 0.45 + (i % 3) * 0.1,
|
||
filter: 'drop-shadow(0 0 3px rgba(0,180,60,0.3))',
|
||
animation: `${animCloverDrift} ${duration}s linear ${delay}s infinite`,
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
☘
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function EarthDayOverlay({ reduced }: { reduced: boolean }) {
|
||
const leaves = Array.from({ length: 16 });
|
||
const leafEmoji = ['🌿', '🍃', '🌱', '🍀'];
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage: [
|
||
'radial-gradient(ellipse at 30% 70%, rgba(60,160,60,0.07) 0%, transparent 50%)',
|
||
'radial-gradient(ellipse at 70% 30%, rgba(100,180,80,0.05) 0%, transparent 45%)',
|
||
].join(','),
|
||
}}
|
||
/>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
left: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
width: '3px',
|
||
backgroundImage:
|
||
'linear-gradient(180deg, transparent 0%, rgba(60,160,60,0.4) 20%, rgba(80,180,60,0.6) 50%, rgba(60,160,60,0.4) 80%, transparent 100%)',
|
||
}}
|
||
/>
|
||
{!reduced &&
|
||
leaves.map((_, i) => {
|
||
const left = 3 + ((i * 5023 + 317) % 92);
|
||
const duration = 13 + (i % 5) * 2;
|
||
const delay = (i * 0.75) % 11;
|
||
const size = 14 + (i % 3) * 5;
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: '-20px',
|
||
left: `${left}%`,
|
||
fontSize: `${size}px`,
|
||
opacity: 0.5 + (i % 3) * 0.1,
|
||
animation: `${animEarthLeafDrift} ${duration}s ease-in ${delay}s infinite`,
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
{leafEmoji[i % leafEmoji.length]}
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function DeepSpaceOverlay({ reduced }: { reduced: boolean }) {
|
||
const stars = Array.from({ length: 24 });
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundColor: 'rgba(0,0,8,0.3)',
|
||
backgroundImage: [
|
||
'radial-gradient(ellipse at 30% 40%, rgba(80,0,180,0.10) 0%, transparent 50%)',
|
||
'radial-gradient(ellipse at 70% 60%, rgba(0,60,180,0.10) 0%, transparent 50%)',
|
||
'radial-gradient(ellipse at 50% 20%, rgba(120,0,200,0.07) 0%, transparent 40%)',
|
||
].join(','),
|
||
}}
|
||
/>
|
||
{!reduced &&
|
||
stars.map((_, i) => {
|
||
const angle = (i / stars.length) * 360;
|
||
const duration = 2.5 + (i % 5) * 0.4;
|
||
const delay = (i * 0.18) % 2.5;
|
||
const period = 3 + (i % 4) * 0.5;
|
||
const size = 1 + (i % 3);
|
||
const starColors = [
|
||
'rgba(200,180,255,0.9)',
|
||
'rgba(150,200,255,0.8)',
|
||
'rgba(255,255,255,0.7)',
|
||
];
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
left: '50%',
|
||
top: '50%',
|
||
width: `${80 + i * 6}px`,
|
||
height: `${size}px`,
|
||
backgroundColor: starColors[i % starColors.length],
|
||
transformOrigin: '0 50%',
|
||
transform: `rotate(${angle}deg)`,
|
||
boxShadow: `0 0 ${size * 2}px ${starColors[i % starColors.length]}`,
|
||
animation: `${animWarp} ${duration}s ease-out ${delay}s ${period}s infinite`,
|
||
opacity: 0,
|
||
}}
|
||
/>
|
||
);
|
||
})}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ArcadeOverlay({ reduced }: { reduced: boolean }) {
|
||
return (
|
||
<>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px)',
|
||
animation: reduced ? 'none' : `${animScanline} 3s ease-in-out infinite`,
|
||
}}
|
||
/>
|
||
{(['0,0', '0,auto', 'auto,0', 'auto,auto'] as const).map((corner, i) => {
|
||
const [t, b] = corner.split(',');
|
||
return (
|
||
<div
|
||
key={i}
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
top: t === '0' ? '8px' : undefined,
|
||
bottom: b === '0' ? '8px' : undefined,
|
||
left: i % 2 === 0 ? '8px' : undefined,
|
||
right: i % 2 === 1 ? '8px' : undefined,
|
||
fontFamily: 'monospace',
|
||
fontSize: '11px',
|
||
color: 'rgba(0,255,136,0.5)',
|
||
letterSpacing: '0.05em',
|
||
animation: reduced ? 'none' : `${animPixelBlink} ${1 + i * 0.3}s step-end infinite`,
|
||
userSelect: 'none',
|
||
}}
|
||
>
|
||
{['[■]', '[■]', '[■]', '[■]'][i]}
|
||
</div>
|
||
);
|
||
})}
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
bottom: '16px',
|
||
left: '50%',
|
||
transform: 'translateX(-50%)',
|
||
fontFamily: 'monospace',
|
||
fontSize: '12px',
|
||
letterSpacing: '0.2em',
|
||
color: 'rgba(255,220,0,0.4)',
|
||
animation: reduced ? 'none' : `${animPixelBlink} 1.2s step-end infinite`,
|
||
userSelect: 'none',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
— INSERT COIN —
|
||
</div>
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
backgroundImage:
|
||
'radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.35) 100%)',
|
||
}}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
// ─── Overlay content map (shared between SeasonalOverlay and SeasonalPreview) ──
|
||
|
||
function buildOverlayContent(theme: SeasonTheme, reduced: boolean): React.ReactNode {
|
||
switch (theme) {
|
||
case 'halloween':
|
||
return <HalloweenOverlay reduced={reduced} />;
|
||
case 'christmas':
|
||
return <ChristmasOverlay reduced={reduced} />;
|
||
case 'newyear':
|
||
return <NewYearOverlay reduced={reduced} />;
|
||
case 'autumn':
|
||
return <AutumnOverlay reduced={reduced} />;
|
||
case 'aprilfools':
|
||
return <AprilFoolsOverlay reduced={reduced} />;
|
||
case 'lunar':
|
||
return <LunarNewYearOverlay reduced={reduced} />;
|
||
case 'valentines':
|
||
return <ValentinesOverlay reduced={reduced} />;
|
||
case 'stpatricks':
|
||
return <StPatricksOverlay reduced={reduced} />;
|
||
case 'earthday':
|
||
return <EarthDayOverlay reduced={reduced} />;
|
||
case 'deepspace':
|
||
return <DeepSpaceOverlay reduced={reduced} />;
|
||
case 'arcade':
|
||
return <ArcadeOverlay reduced={reduced} />;
|
||
default:
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// ─── Full-screen overlay (fixed position, used in App) ────────────────────────
|
||
|
||
function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: boolean }) {
|
||
return (
|
||
<div
|
||
aria-hidden="true"
|
||
style={{
|
||
position: 'fixed',
|
||
inset: 0,
|
||
pointerEvents: 'none',
|
||
// Below the Night Light overlay (9998) so seasonal particles are tinted
|
||
// by it, and below modals (9999) so dialogs are never obscured.
|
||
zIndex: 9997,
|
||
overflow: 'hidden',
|
||
}}
|
||
>
|
||
{buildOverlayContent(theme, reduced)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Preview overlay (absolute position, contained in a card) ─────────────────
|
||
|
||
/**
|
||
* Renders the ambient (reduced-motion) version of a seasonal overlay inside
|
||
* a parent container. The parent must have `position: relative; overflow: hidden`.
|
||
*/
|
||
export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
|
||
return (
|
||
<div
|
||
aria-hidden="true"
|
||
style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}
|
||
>
|
||
{buildOverlayContent(theme, true)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── Main exported component ──────────────────────────────────────────────────
|
||
|
||
export function SeasonalEffect() {
|
||
const settings = useAtomValue(settingsAtom);
|
||
const reduced =
|
||
typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
|
||
const theme = useMemo<SeasonTheme | null>(() => {
|
||
const override = settings.seasonalThemeOverride ?? 'auto';
|
||
if (override === 'off') return null;
|
||
if (override === 'auto') return getActiveSeason(new Date());
|
||
return override as SeasonTheme;
|
||
}, [settings.seasonalThemeOverride]);
|
||
|
||
if (!theme) return null;
|
||
// Suppress seasonal overlay when a chat background is active — both running simultaneously
|
||
// wastes GPU and looks cluttered. The settings UI enforces mutual exclusion on write;
|
||
// this guard covers any legacy state already persisted.
|
||
if (settings.chatBackground !== 'none') return null;
|
||
return <SeasonalOverlay theme={theme} reduced={reduced} />;
|
||
}
|