import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // --- 配置常量 --- const VIEW_WIDTH = 360; const VIEW_HEIGHT = 640; const WHEEL_CENTER_X = VIEW_WIDTH / 2; const WHEEL_CENTER_Y = VIEW_HEIGHT * 0.4; // 稍微上移一点点以保证整体平衡 const WHEEL_RADIUS = 130; const TOTAL_SEGMENTS = 15; const SEGMENT_ANGLE = 360 / TOTAL_SEGMENTS; // 布局微调：按钮位置 const BUTTON_Y = WHEEL_CENTER_Y + WHEEL_RADIUS + 55; // 布局微调：卡片位置 (下移至底部区域，避免遮挡按钮) const CARD_CENTER_Y = VIEW_HEIGHT - 85; const BLESSINGS = [ "接下来这一年，会有人认真对你好", "你不用再一个人硬撑了", "你会等到一个明确的回应", "你正在靠近一个转折点", "有些好事，已经在路上了", "这一次，你不是陪跑", "轮到你走运了", "你会突然发现，自己比想象中强", "别怀疑，接下来是你的上升期", "你准备好的那一天，比你想象得更快", "你会开始为自己而活", "你终于不再被情绪牵着走", "你会放下不属于你的负担", "这一年，你会更清楚自己要什么", "你会做出一个长期正确的选择" ]; const COLORS = { bg: "#0f172a", primary: "#38bdf8", accent: "#f472b6", gold: "#fbbf24", text: "#f8fafc", textDim: "#94a3b8", wheelBg: "#1e293b", wheelStroke: "#334155", cardBg: "rgba(30, 41, 59, 0.9)" }; // --- 工具函数 --- const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => { const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; }; const describeArc = (x, y, radius, startAngle, endAngle) => { const start = polarToCartesian(x, y, radius, endAngle); const end = polarToCartesian(x, y, radius, startAngle); const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; return [ "M", x, y, "L", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y, "L", x, y ].join(" "); }; // --- 粒子系统 --- class Particle { constructor(x, y, type) { this.x = x; this.y = y; this.type = type; // 'bg' | 'firework' | 'sparkle' const speedMultiplier = type === 'firework' ? 6 : (type === 'sparkle' ? 2 : 0.5); this.vx = (Math.random() - 0.5) * speedMultiplier; this.vy = (Math.random() - 0.5) * speedMultiplier; this.life = 1.0; this.decay = type === 'bg' ? 0.003 : (type === 'firework' ? 0.015 : 0.03); this.size = Math.random() * (type === 'bg' ? 1.5 : 3); } update() { this.x += this.vx; this.y += this.vy; if (this.type === 'firework') { this.vy += 0.08; // 重力 this.size *= 0.96; } else if (this.type === 'bg') { // 边界反弹 if (this.x < 0 || this.x > VIEW_WIDTH) this.vx *= -1; if (this.y < 0 || this.y > VIEW_HEIGHT) this.vy *= -1; // 循环生命周期 if (this.life <= 0) this.life = 1.0; } this.life -= this.decay; } } export default function NewYear2026Wheel() { // --- Refs & State --- const animRef = useRef({ angle: 0, velocity: 0, isSpinning: false, particles: [], lastTime: 0 }); const [uiState, setUiState] = useState({ countdown: { d: 0, h: 0, m: 0, s: 0 }, gamePhase: 'idle', // 'idle', 'spinning', 'revealed' selectedIdx: -1, toastVisible: false }); const wheelGroupRef = useRef(null); const particlesPathRef = useRef(null); const rafRef = useRef(null); // --- 倒计时逻辑 --- useEffect(() => { const targetDate = new Date("2026-01-01T00:00:00").getTime(); const tick = () => { const now = Date.now(); const distance = targetDate - now; if (distance < 0) { setUiState(prev => ({ ...prev, countdown: { d: 0, h: 0, m: 0, s: 0 } })); return; } setUiState(prev => ({ ...prev, countdown: { d: Math.floor(distance / (1000 * 60 * 60 * 24)), h: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), m: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), s: Math.floor((distance % (1000 * 60)) / 1000) } })); }; const timer = setInterval(tick, 1000); tick(); return () => clearInterval(timer); }, []); // --- 初始化背景粒子 --- useEffect(() => { const bgParticles = Array.from({ length: 40 }, () => new Particle(Math.random() * VIEW_WIDTH, Math.random() * VIEW_HEIGHT, 'bg') ); animRef.current.particles = bgParticles; }, []); // --- 核心动画循环 --- const animate = useCallback((time) => { const state = animRef.current; // 1. 物理计算 if (state.isSpinning) { state.angle += state.velocity; if (state.velocity > 0.1) { state.velocity *= 0.985; // 摩擦系数 } else { // 停止逻辑 state.isSpinning = false; state.velocity = 0; // 计算结果 const normalizedAngle = state.angle % 360; // 指针在正上方(270度)，计算哪个扇区停在了270度 // 扇区0从0度开始(3点钟)，逆时针排列 const pointerAngle = 270; const rawIdx = Math.floor(((360 - normalizedAngle + pointerAngle - (SEGMENT_ANGLE/2)) % 360) / SEGMENT_ANGLE); const finalIdx = (rawIdx + TOTAL_SEGMENTS) % TOTAL_SEGMENTS; setUiState(prev => ({ ...prev, gamePhase: 'revealed', selectedIdx: finalIdx })); // 爆炸烟花 for(let i=0; i<60; i++) { state.particles.push(new Particle(WHEEL_CENTER_X, WHEEL_CENTER_Y, 'firework')); } } // 更新 DOM if (wheelGroupRef.current) { wheelGroupRef.current.setAttribute('transform', `rotate(${state.angle}, ${WHEEL_CENTER_X}, ${WHEEL_CENTER_Y})`); } } // 2. 粒子渲染 (单Path高性能渲染) let pathD = ""; state.particles = state.particles.filter(p => p.life > 0); state.particles.forEach(p => { p.update(); const r = p.size * p.life; if (r > 0.1) { // 绘制小圆点 M cx cy m -r, 0 a r,r 0 1,0 (r*2),0 a r,r 0 1,0 -(r*2),0 pathD += `M ${p.x} ${p.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r*2},0 a ${r},${r} 0 1,0 -${r*2},0 `; } }); if (particlesPathRef.current) { particlesPathRef.current.setAttribute("d", pathD); } rafRef.current = requestAnimationFrame(animate); }, []); // 启动循环 useEffect(() => { rafRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(rafRef.current); }, [animate]); // --- 交互处理 --- const handleSpin = () => { if (animRef.current.isSpinning || uiState.gamePhase === 'revealed') return; setUiState(prev => ({ ...prev, gamePhase: 'spinning' })); // 随机圈数 + 随机偏移 const rotations = 360 * (6 + Math.random() * 4); const randomOffset = Math.random() * 360; animRef.current.velocity = 35 + Math.random() * 10; animRef.current.isSpinning = true; // 移除旧的烟花粒子，保留背景 animRef.current.particles = animRef.current.particles.filter(p => p.type === 'bg'); // 添加点击特效 for(let i=0; i<10; i++) { animRef.current.particles.push(new Particle(WHEEL_CENTER_X, BUTTON_Y, 'sparkle')); } }; const handleShare = () => { const url = typeof window !== 'undefined' ? window.location.href : ''; navigator.clipboard.writeText(url).then(() => { setUiState(prev => ({ ...prev, toastVisible: true })); setTimeout(() => setUiState(prev => ({ ...prev, toastVisible: false })), 2500); }).catch(() => {}); }; // --- 静态资源 Memo --- const wheelSegments = useMemo(() => { return Array.from({ length: TOTAL_SEGMENTS }).map((_, i) => { const startAngle = i * SEGMENT_ANGLE; const endAngle = (i + 1) * SEGMENT_ANGLE; const midAngle = startAngle + SEGMENT_ANGLE / 2; const textPos = polarToCartesian(WHEEL_CENTER_X, WHEEL_CENTER_Y, WHEEL_RADIUS * 0.85, midAngle); return ( {(i + 1).toString().padStart(2, '0')} ); }); }, []); return (

{/* Toast 提示 */} {uiState.toastVisible && (

已复制，快去分享这份好运！✨

)}

); }