754 lines
43 KiB
Plaintext
754 lines
43 KiB
Plaintext
1→ 1→"use client";
|
||
2→ 2→// 回响星核 / Echo Nexus — 深空信标面板
|
||
3→ 3→// v0.5：每日挑战 + 本地排行榜
|
||
4→ 4→// v0.8：周挑战 + 信标链（连续完成奖励）
|
||
5→ 5→import { useState, useEffect, useCallback } from "react";
|
||
6→ 6→import { useGameStore } from "@/store/gameStore";
|
||
7→ 7→import { useToast } from "@/hooks/use-toast";
|
||
8→ 8→import { sfx } from "@/hooks/useAudio";
|
||
9→ 9→import {
|
||
10→ 10→ generateDailyChallenge,
|
||
11→ 11→ generateWeeklyChallenge,
|
||
12→ 12→ loadDailyProgress,
|
||
13→ 13→ loadWeeklyProgress,
|
||
14→ 14→ loadLeaderboard,
|
||
15→ 15→ loadChainState,
|
||
16→ 16→ claimBeaconReward,
|
||
17→ 17→ BEACON_DIFFICULTY,
|
||
18→ 18→ BEACON_TYPE_META,
|
||
19→ 19→ BEACON_CHAIN_MILESTONES,
|
||
20→ 20→ BEACON_CHAIN_REWARDS,
|
||
21→ 21→ getWeekKey,
|
||
22→ 22→ getTodayKey,
|
||
23→ 23→ getNextMilestone,
|
||
24→ 24→ getChainProgress,
|
||
25→ 25→ msUntilNextDay,
|
||
26→ 26→ msUntilNextWeek,
|
||
27→ 27→ formatCountdown,
|
||
28→ 28→ type BeaconDailyChallenge,
|
||
29→ 29→ type BeaconDailyProgress,
|
||
30→ 30→ type BeaconWeeklyChallenge,
|
||
31→ 31→ type BeaconWeeklyProgress,
|
||
32→ 32→ type BeaconScoreEntry,
|
||
33→ 33→ type BeaconChallengeType,
|
||
34→ 34→ type BeaconDifficulty,
|
||
35→ 35→ type BeaconChainState,
|
||
36→ 36→} from "@/lib/game/beacon";
|
||
37→ 37→import { formatNum } from "@/lib/game/config";
|
||
38→ 38→import { Button } from "@/components/ui/button";
|
||
39→ 39→import { Progress } from "@/components/ui/progress";
|
||
40→ 40→import {
|
||
41→ 41→ Radio,
|
||
42→ 42→ Clock,
|
||
43→ 43→ Trophy,
|
||
44→ 44→ Sparkles,
|
||
45→ 45→ Award,
|
||
46→ 46→ Crown,
|
||
47→ 47→ Medal,
|
||
48→ 48→ Link2,
|
||
49→ 49→ Flame,
|
||
50→ 50→ Zap,
|
||
51→ 51→} from "lucide-react";
|
||
52→ 52→
|
||
53→ 53→const DIFFICULTY_ORDER: BeaconDifficulty[] = ["routine", "anomaly", "singular"];
|
||
54→ 54→
|
||
55→ 55→function rankBadge(rank: number) {
|
||
56→ 56→ if (rank === 0) return { icon: Crown, color: "#fbbf24", label: "1st" };
|
||
57→ 57→ if (rank === 1) return { icon: Medal, color: "#cbd5e1", label: "2nd" };
|
||
58→ 58→ if (rank === 2) return { icon: Award, color: "#f97316", label: "3rd" };
|
||
59→ 59→ return null;
|
||
60→ 60→}
|
||
61→ 61→
|
||
62→ 62→export function BeaconPanel() {
|
||
63→ 63→ const grantBeaconReward = useGameStore((s) => s.grantBeaconReward);
|
||
64→ 64→ const claimWeeklyBeacon = useGameStore((s) => s.claimWeeklyBeacon);
|
||
65→ 65→ const claimChainReward = useGameStore((s) => s.claimChainReward);
|
||
66→ 66→ const { toast } = useToast();
|
||
67→ 67→
|
||
68→ 68→ const [challenge, setChallenge] = useState<BeaconDailyChallenge | null>(null);
|
||
69→ 69→ const [progress, setProgress] = useState<BeaconDailyProgress | null>(null);
|
||
70→ 70→ const [weeklyChallenge, setWeeklyChallenge] =
|
||
71→ 71→ useState<BeaconWeeklyChallenge | null>(null);
|
||
72→ 72→ const [weeklyProgress, setWeeklyProgress] =
|
||
73→ 73→ useState<BeaconWeeklyProgress | null>(null);
|
||
74→ 74→ const [chainState, setChainState] = useState<BeaconChainState | null>(null);
|
||
75→ 75→ const [leaderboard, setLeaderboard] = useState<BeaconScoreEntry[]>([]);
|
||
76→ 76→ const [dayCountdown, setDayCountdown] = useState("00:00:00");
|
||
77→ 77→ const [weekCountdown, setWeekCountdown] = useState("00:00:00");
|
||
78→ 78→ const [now, setNow] = useState(Date.now());
|
||
79→ 79→
|
||
80→ 80→ // 初始化 + 每秒刷新（进度 + 倒计时）
|
||
81→ 81→ useEffect(() => {
|
||
82→ 82→ setChallenge(generateDailyChallenge());
|
||
83→ 83→ setProgress(loadDailyProgress());
|
||
84→ 84→ setWeeklyChallenge(generateWeeklyChallenge());
|
||
85→ 85→ setWeeklyProgress(loadWeeklyProgress());
|
||
86→ 86→ setChainState(loadChainState());
|
||
87→ 87→ setLeaderboard(loadLeaderboard());
|
||
88→ 88→ const id = setInterval(() => {
|
||
89→ 89→ setNow(Date.now());
|
||
90→ 90→ setProgress(loadDailyProgress());
|
||
91→ 91→ setWeeklyProgress(loadWeeklyProgress());
|
||
92→ 92→ setChainState(loadChainState());
|
||
93→ 93→ setChallenge((c) => c ?? generateDailyChallenge());
|
||
94→ 94→ setWeeklyChallenge((c) => c ?? generateWeeklyChallenge());
|
||
95→ 95→ }, 1000);
|
||
96→ 96→ return () => clearInterval(id);
|
||
97→ 97→ }, []);
|
||
98→ 98→
|
||
99→ 99→ useEffect(() => {
|
||
100→ 100→ setDayCountdown(formatCountdown(msUntilNextDay(new Date(now))));
|
||
101→ 101→ setWeekCountdown(formatCountdown(msUntilNextWeek(new Date(now))));
|
||
102→ 102→ }, [now]);
|
||
103→ 103→
|
||
104→ 104→ const handleClaimDaily = useCallback(() => {
|
||
105→ 105→ if (!challenge || !progress) return;
|
||
106→ 106→ if (progress.completedAt === null || progress.claimed) return;
|
||
107→ 107→ const res = claimBeaconReward(challenge, progress);
|
||
108→ 108→ setLeaderboard(res.leaderboard);
|
||
109→ 109→ setProgress(loadDailyProgress());
|
||
110→ 110→ // 发放奖励到游戏状态
|
||
111→ 111→ grantBeaconReward(res.rewardInsight, res.rewardContact);
|
||
112→ 112→ sfx("achievement");
|
||
113→ 113→ toast({
|
||
114→ 114→ title: "✦ 每日信标奖励已领取",
|
||
115→ 115→ description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(
|
||
116→ 116→ 1
|
||
117→ 117→ )} 接触 · 得分 ${res.score}`,
|
||
118→ 118→ });
|
||
119→ 119→ }, [challenge, progress, toast, grantBeaconReward]);
|
||
120→ 120→
|
||
121→ 121→ const handleClaimWeekly = useCallback(() => {
|
||
122→ 122→ if (!weeklyChallenge || !weeklyProgress) return;
|
||
123→ 123→ if (weeklyProgress.completedAt === null || weeklyProgress.claimed) return;
|
||
124→ 124→ const res = claimWeeklyBeacon();
|
||
125→ 125→ setLeaderboard(loadLeaderboard());
|
||
126→ 126→ setWeeklyProgress(loadWeeklyProgress());
|
||
127→ 127→ if (res.rewardInsight > 0 || res.rewardContact > 0) {
|
||
128→ 128→ sfx("achievement");
|
||
129→ 129→ toast({
|
||
130→ 130→ title: "✦ 周挑战奖励已领取",
|
||
131→ 131→ description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(
|
||
132→ 132→ 1
|
||
133→ 133→ )} 接触 · 得分 ${res.score}`,
|
||
134→ 134→ });
|
||
135→ 135→ }
|
||
136→ 136→ }, [weeklyChallenge, weeklyProgress, toast, claimWeeklyBeacon]);
|
||
137→ 137→
|
||
138→ 138→ const handleClaimChain = useCallback(
|
||
139→ 139→ (milestone: number) => {
|
||
140→ 140→ const reward = BEACON_CHAIN_REWARDS.find(
|
||
141→ 141→ (r) => r.milestone === milestone
|
||
142→ 142→ );
|
||
143→ 143→ const res = claimChainReward(milestone);
|
||
144→ 144→ setChainState(loadChainState());
|
||
145→ 145→ if (res.ok) {
|
||
146→ 146→ sfx("achievement");
|
||
147→ 147→ toast({
|
||
148→ 148→ title: `✦ ${res.label || reward?.label || "里程碑"} 已领取`,
|
||
149→ 149→ description: `+${res.rewardInsight} 洞见 · +${res.rewardContact.toFixed(
|
||
150→ 150→ 1
|
||
151→ 151→ )} 接触`,
|
||
152→ 152→ });
|
||
153→ 153→ }
|
||
154→ 154→ },
|
||
155→ 155→ [toast, claimChainReward]
|
||
156→ 156→ );
|
||
157→ 157→
|
||
158→ 158→ if (!challenge || !progress || !weeklyChallenge || !weeklyProgress || !chainState) {
|
||
159→ 159→ return (
|
||
160→ 160→ <div className="flex items-center justify-center h-full text-xs text-muted-foreground/60">
|
||
161→ 161→ 正在校准深空信标…
|
||
162→ 162→ </div>
|
||
163→ 163→ );
|
||
164→ 164→ }
|
||
165→ 165→
|
||
166→ 166→ const diffMeta = BEACON_DIFFICULTY[challenge.difficulty];
|
||
167→ 167→ const typeMeta = BEACON_TYPE_META[challenge.type];
|
||
168→ 168→ const pct = Math.min(100, (progress.progress / challenge.goal) * 100);
|
||
169→ 169→ const isCompleted = progress.completedAt !== null;
|
||
170→ 170→ const isClaimed = progress.claimed;
|
||
171→ 171→ const canClaim = isCompleted && !isClaimed;
|
||
172→ 172→
|
||
173→ 173→ // 周挑战派生量
|
||
174→ 174→ const wDiffMeta = BEACON_DIFFICULTY[weeklyChallenge.difficulty];
|
||
175→ 175→ const wTypeMeta = BEACON_TYPE_META[weeklyChallenge.type];
|
||
176→ 176→ const wPct = Math.min(100, (weeklyProgress.progress / weeklyChallenge.goal) * 100);
|
||
177→ 177→ const wCompleted = weeklyProgress.completedAt !== null;
|
||
178→ 178→ const wClaimed = weeklyProgress.claimed;
|
||
179→ 179→ const wCanClaim = wCompleted && !wClaimed;
|
||
180→ 180→
|
||
181→ 181→ // 信标链派生量
|
||
182→ 182→ const chainProgress = getChainProgress(chainState.currentStreak);
|
||
183→ 183→ const nextMilestone = getNextMilestone(chainState.currentStreak);
|
||
184→ 184→ const todayKey = getTodayKey();
|
||
185→ 185→ const completedToday = chainState.lastCompletedDateKey === todayKey;
|
||
186→ 186→
|
||
187→ 187→ return (
|
||
188→ 188→ <div className="flex flex-col gap-2.5 h-full overflow-y-auto echo-scroll pr-0.5">
|
||
189→ 189→ <style jsx global>{`
|
||
190→ 190→ .echo-scroll::-webkit-scrollbar { width: 4px; }
|
||
191→ 191→ .echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
|
||
192→ 192→ .echo-scroll::-webkit-scrollbar-track { background: transparent; }
|
||
193→ 193→ @keyframes beacon-pulse-ring {
|
||
194→ 194→ 0% { transform: scale(0.8); opacity: 0.8; }
|
||
195→ 195→ 100% { transform: scale(2.2); opacity: 0; }
|
||
196→ 196→ }
|
||
197→ 197→ @keyframes beacon-glow {
|
||
198→ 198→ 0%, 100% { box-shadow: 0 0 18px ${diffMeta.glow}, inset 0 0 12px ${diffMeta.glow}; }
|
||
199→ 199→ 50% { box-shadow: 0 0 32px ${diffMeta.glow}, inset 0 0 20px ${diffMeta.glow}; }
|
||
200→ 200→ }
|
||
201→ 201→ @keyframes weekly-glow {
|
||
202→ 202→ 0%, 100% { box-shadow: 0 0 18px rgba(232,121,249,0.35), inset 0 0 12px rgba(232,121,249,0.25); }
|
||
203→ 203→ 50% { box-shadow: 0 0 32px rgba(232,121,249,0.5), inset 0 0 20px rgba(232,121,249,0.35); }
|
||
204→ 204→ }
|
||
205→ 205→ @keyframes chain-milestone-pulse {
|
||
206→ 206→ 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,113,133,0.55); }
|
||
207→ 207→ 50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(251,113,133,0); }
|
||
208→ 208→ }
|
||
209→ 209→ .chain-milestone-reachable {
|
||
210→ 210→ animation: chain-milestone-pulse 1.8s ease-in-out infinite;
|
||
211→ 211→ }
|
||
212→ 212→ @keyframes chain-streak-flux {
|
||
213→ 213→ 0%, 100% { background-position: 0% 50%; }
|
||
214→ 214→ 50% { background-position: 100% 50%; }
|
||
215→ 215→ }
|
||
216→ 216→ .chain-streak-text {
|
||
217→ 217→ background: linear-gradient(90deg, #fbbf24, #fb7185, #fbbf24);
|
||
218→ 218→ background-size: 200% 100%;
|
||
219→ 219→ -webkit-background-clip: text;
|
||
220→ 220→ background-clip: text;
|
||
221→ 221→ -webkit-text-fill-color: transparent;
|
||
222→ 222→ animation: chain-streak-flux 4s ease-in-out infinite;
|
||
223→ 223→ }
|
||
224→ 224→ `}</style>
|
||
225→ 225→
|
||
226→ 226→ {/* 头部：信标 + 倒计时 */}
|
||
227→ 227→ <div className="flex items-center justify-between">
|
||
228→ 228→ <h3 className="text-sm font-semibold flex items-center gap-1.5">
|
||
229→ 229→ <Radio className="h-4 w-4 text-fuchsia-400" />
|
||
230→ 230→ 深空信标
|
||
231→ 231→ </h3>
|
||
232→ 232→ <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
|
||
233→ 233→ <Clock className="h-3 w-3" />
|
||
234→ 234→ 次日重置
|
||
235→ 235→ <span className="font-mono text-fuchsia-300/90">{dayCountdown}</span>
|
||
236→ 236→ </div>
|
||
237→ 237→ </div>
|
||
238→ 238→
|
||
239→ 239→ {/* 每日挑战卡片 */}
|
||
240→ 240→ <div
|
||
241→ 241→ className="relative rounded-xl border p-3 overflow-hidden"
|
||
242→ 242→ style={{
|
||
243→ 243→ borderColor: `${diffMeta.color}55`,
|
||
244→ 244→ background: `linear-gradient(135deg, ${diffMeta.color}1f, rgba(0,0,0,0.45))`,
|
||
245→ 245→ animation: isCompleted ? "none" : "beacon-glow 3s ease-in-out infinite",
|
||
246→ 246→ }}
|
||
247→ 247→ >
|
||
248→ 248→ {/* 背景装饰：脉冲环 */}
|
||
249→ 249→ {!isCompleted && (
|
||
250→ 250→ <>
|
||
251→ 251→ <div
|
||
252→ 252→ className="absolute top-4 right-4 h-10 w-10 rounded-full pointer-events-none"
|
||
253→ 253→ style={{
|
||
254→ 254→ border: `1.5px solid ${diffMeta.color}`,
|
||
255→ 255→ animation: "beacon-pulse-ring 2.5s ease-out infinite",
|
||
256→ 256→ }}
|
||
257→ 257→ />
|
||
258→ 258→ <div
|
||
259→ 259→ className="absolute top-4 right-4 h-10 w-10 rounded-full pointer-events-none"
|
||
260→ 260→ style={{
|
||
261→ 261→ border: `1.5px solid ${diffMeta.color}`,
|
||
262→ 262→ animation: "beacon-pulse-ring 2.5s ease-out infinite 1.25s",
|
||
263→ 263→ }}
|
||
264→ 264→ />
|
||
265→ 265→ </>
|
||
266→ 266→ )}
|
||
267→ 267→
|
||
268→ 268→ <div className="relative">
|
||
269→ 269→ {/* 难度 + 类型 标签 */}
|
||
270→ 270→ <div className="flex items-center gap-1.5 mb-2">
|
||
271→ 271→ <span
|
||
272→ 272→ className="text-[10px] font-mono px-1.5 py-0.5 rounded flex items-center gap-1"
|
||
273→ 273→ style={{ background: `${diffMeta.color}22`, color: diffMeta.color, border: `1px solid ${diffMeta.color}55` }}
|
||
274→ 274→ >
|
||
275→ 275→ <span>{diffMeta.icon}</span>
|
||
276→ 276→ {diffMeta.label}
|
||
277→ 277→ </span>
|
||
278→ 278→ <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 text-muted-foreground border border-white/10">
|
||
279→ 279→ {typeMeta.icon} {typeMeta.label}
|
||
280→ 280→ </span>
|
||
281→ 281→ {isCompleted && (
|
||
282→ 282→ <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 flex items-center gap-1">
|
||
283→ 283→ <Sparkles className="h-2.5 w-2.5" /> 已完成
|
||
284→ 284→ </span>
|
||
285→ 285→ )}
|
||
286→ 286→ </div>
|
||
287→ 287→
|
||
288→ 288→ {/* 挑战标题 */}
|
||
289→ 289→ <h4 className="text-sm font-semibold mb-1" style={{ color: diffMeta.color, textShadow: `0 0 10px ${diffMeta.glow}` }}>
|
||
290→ 290→ {challenge.title}
|
||
291→ 291→ </h4>
|
||
292→ 292→ <p className="text-[11px] text-muted-foreground/80 leading-relaxed mb-2.5">
|
||
293→ 293→ {challenge.desc}
|
||
294→ 294→ </p>
|
||
295→ 295→
|
||
296→ 296→ {/* 进度条 */}
|
||
297→ 297→ <div className="mb-2">
|
||
298→ 298→ <div className="flex items-center justify-between mb-1">
|
||
299→ 299→ <span className="text-[10px] text-muted-foreground/70">进度</span>
|
||
300→ 300→ <span className="text-[11px] font-mono font-semibold" style={{ color: diffMeta.color }}>
|
||
301→ 301→ {Math.min(progress.progress, challenge.goal)} / {challenge.goal} {typeMeta.unit}
|
||
302→ 302→ </span>
|
||
303→ 303→ </div>
|
||
304→ 304→ <Progress
|
||
305→ 305→ value={pct}
|
||
306→ 306→ className="h-2 bg-black/40"
|
||
307→ 307→ style={{
|
||
308→ 308→ ["--progress-color" as string]: diffMeta.color,
|
||
309→ 309→ }}
|
||
310→ 310→ />
|
||
311→ 311→ </div>
|
||
312→ 312→
|
||
313→ 313→ {/* 奖励 + 领取按钮 */}
|
||
314→ 314→ <div className="flex items-center justify-between gap-2">
|
||
315→ 315→ <div className="flex items-center gap-2 text-[10px]">
|
||
316→ 316→ <span className="text-muted-foreground/60">奖励：</span>
|
||
317→ 317→ {challenge.rewardInsight > 0 && (
|
||
318→ 318→ <span className="text-amber-300 font-mono">+{formatNum(challenge.rewardInsight)}洞见</span>
|
||
319→ 319→ )}
|
||
320→ 320→ <span className="text-fuchsia-300 font-mono">+{challenge.rewardContact.toFixed(1)}接触</span>
|
||
321→ 321→ </div>
|
||
322→ 322→ <Button
|
||
323→ 323→ onClick={handleClaimDaily}
|
||
324→ 324→ disabled={!canClaim}
|
||
325→ 325→ size="sm"
|
||
326→ 326→ className="h-7 px-3 text-[11px] border-0"
|
||
327→ 327→ style={{
|
||
328→ 328→ background: canClaim
|
||
329→ 329→ ? `linear-gradient(90deg, ${diffMeta.color}, ${diffMeta.color}cc)`
|
||
330→ 330→ : `${diffMeta.color}1a`,
|
||
331→ 331→ color: canClaim ? "#022c22" : `${diffMeta.color}99`,
|
||
332→ 332→ }}
|
||
333→ 333→ >
|
||
334→ 334→ {isClaimed ? "已领取" : canClaim ? "领取奖励" : isCompleted ? "已领取" : "进行中…"}
|
||
335→ 335→ </Button>
|
||
336→ 336→ </div>
|
||
337→ 337→
|
||
338→ 338→ {/* 完成时长 */}
|
||
339→ 339→ {isCompleted && progress.durationSec > 0 && (
|
||
340→ 340→ <div className="mt-1.5 text-[10px] text-muted-foreground/50 text-center">
|
||
341→ 341→ 完成用时 {Math.floor(progress.durationSec / 60)}分{progress.durationSec % 60}秒
|
||
342→ 342→ </div>
|
||
343→ 343→ )}
|
||
344→ 344→ </div>
|
||
345→ 345→ </div>
|
||
346→ 346→
|
||
347→ 347→ {/* 周挑战 + 信标链（桌面端并排，移动端单列） */}
|
||
348→ 348→ <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
|
||
349→ 349→ {/* ===== 周挑战卡片（fuchsia 主题） ===== */}
|
||
350→ 350→ <div
|
||
351→ 351→ className="relative rounded-xl border p-3 overflow-hidden"
|
||
352→ 352→ style={{
|
||
353→ 353→ borderColor: "rgba(232,121,249,0.4)",
|
||
354→ 354→ background: `linear-gradient(135deg, rgba(232,121,249,0.12), rgba(0,0,0,0.45))`,
|
||
355→ 355→ animation: wCompleted ? "none" : "weekly-glow 3.5s ease-in-out infinite",
|
||
356→ 356→ }}
|
||
357→ 357→ >
|
||
358→ 358→ {/* 头部：标题 + weekKey + 倒计时 */}
|
||
359→ 359→ <div className="flex items-center justify-between mb-2">
|
||
360→ 360→ <div className="flex items-center gap-1.5">
|
||
361→ 361→ <Zap className="h-3.5 w-3.5 text-fuchsia-400" />
|
||
362→ 362→ <span className="text-xs font-semibold text-fuchsia-200">
|
||
363→ 363→ 周挑战 · WEEKLY
|
||
364→ 364→ </span>
|
||
365→ 365→ </div>
|
||
366→ 366→ <div className="flex items-center gap-1 text-[9px] text-muted-foreground/70">
|
||
367→ 367→ <span className="font-mono text-fuchsia-300/80">
|
||
368→ 368→ {weeklyChallenge.weekKey}
|
||
369→ 369→ </span>
|
||
370→ 370→ <Clock className="h-2.5 w-2.5" />
|
||
371→ 371→ <span className="font-mono text-fuchsia-300/90">{weekCountdown}</span>
|
||
372→ 372→ </div>
|
||
373→ 373→ </div>
|
||
374→ 374→
|
||
375→ 375→ {/* 难度 + 类型 标签 */}
|
||
376→ 376→ <div className="flex items-center gap-1.5 mb-2">
|
||
377→ 377→ <span
|
||
378→ 378→ className="text-[10px] font-mono px-1.5 py-0.5 rounded flex items-center gap-1"
|
||
379→ 379→ style={{ background: `${wDiffMeta.color}22`, color: wDiffMeta.color, border: `1px solid ${wDiffMeta.color}55` }}
|
||
380→ 380→ >
|
||
381→ 381→ <span>{wDiffMeta.icon}</span>
|
||
382→ 382→ {wDiffMeta.label}
|
||
383→ 383→ </span>
|
||
384→ 384→ <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 text-muted-foreground border border-white/10">
|
||
385→ 385→ {wTypeMeta.icon} {wTypeMeta.label}
|
||
386→ 386→ </span>
|
||
387→ 387→ {wCompleted && (
|
||
388→ 388→ <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 flex items-center gap-1">
|
||
389→ 389→ <Sparkles className="h-2.5 w-2.5" /> 已完成
|
||
390→ 390→ </span>
|
||
391→ 391→ )}
|
||
392→ 392→ </div>
|
||
393→ 393→
|
||
394→ 394→ {/* 标题 */}
|
||
395→ 395→ <h4
|
||
396→ 396→ className="text-sm font-semibold mb-1"
|
||
397→ 397→ style={{ color: wDiffMeta.color, textShadow: `0 0 10px ${wDiffMeta.glow}` }}
|
||
398→ 398→ >
|
||
399→ 399→ {weeklyChallenge.title}
|
||
400→ 400→ </h4>
|
||
401→ 401→ <p className="text-[10px] text-muted-foreground/80 leading-relaxed mb-2">
|
||
402→ 402→ {weeklyChallenge.desc}
|
||
403→ 403→ </p>
|
||
404→ 404→
|
||
405→ 405→ {/* 进度条 */}
|
||
406→ 406→ <div className="mb-2">
|
||
407→ 407→ <div className="flex items-center justify-between mb-1">
|
||
408→ 408→ <span className="text-[10px] text-muted-foreground/70">进度</span>
|
||
409→ 409→ <span className="text-[11px] font-mono font-semibold" style={{ color: wDiffMeta.color }}>
|
||
410→ 410→ {Math.min(weeklyProgress.progress, weeklyChallenge.goal)} / {weeklyChallenge.goal} {wTypeMeta.unit}
|
||
411→ 411→ </span>
|
||
412→ 412→ </div>
|
||
413→ 413→ <Progress
|
||
414→ 414→ value={wPct}
|
||
415→ 415→ className="h-2 bg-black/40"
|
||
416→ 416→ style={{
|
||
417→ 417→ ["--progress-color" as string]: wDiffMeta.color,
|
||
418→ 418→ }}
|
||
419→ 419→ />
|
||
420→ 420→ </div>
|
||
421→ 421→
|
||
422→ 422→ {/* 奖励 + 领取按钮 */}
|
||
423→ 423→ <div className="flex items-center justify-between gap-2">
|
||
424→ 424→ <div className="flex items-center gap-1.5 text-[10px]">
|
||
425→ 425→ <span className="text-muted-foreground/60">奖励：</span>
|
||
426→ 426→ {weeklyChallenge.rewardInsight > 0 && (
|
||
427→ 427→ <span className="text-amber-300 font-mono">
|
||
428→ 428→ +{formatNum(weeklyChallenge.rewardInsight)}洞见
|
||
429→ 429→ </span>
|
||
430→ 430→ )}
|
||
431→ 431→ <span className="text-fuchsia-300 font-mono">
|
||
432→ 432→ +{weeklyChallenge.rewardContact.toFixed(1)}接触
|
||
433→ 433→ </span>
|
||
434→ 434→ </div>
|
||
435→ 435→ <Button
|
||
436→ 436→ onClick={handleClaimWeekly}
|
||
437→ 437→ disabled={!wCanClaim}
|
||
438→ 438→ size="sm"
|
||
439→ 439→ className="h-7 px-3 text-[11px] border-0"
|
||
440→ 440→ style={{
|
||
441→ 441→ background: wCanClaim
|
||
442→ 442→ ? `linear-gradient(90deg, #34d399, #34d399cc)`
|
||
443→ 443→ : "rgba(232,121,249,0.10)",
|
||
444→ 444→ color: wCanClaim
|
||
445→ 445→ ? "#022c22"
|
||
446→ 446→ : "rgba(232,121,249,0.55)",
|
||
447→ 447→ }}
|
||
448→ 448→ >
|
||
449→ 449→ {wClaimed
|
||
450→ 450→ ? "已领取"
|
||
451→ 451→ : wCanClaim
|
||
452→ 452→ ? "领取奖励"
|
||
453→ 453→ : wCompleted
|
||
454→ 454→ ? "已领取"
|
||
455→ 455→ : "进行中…"}
|
||
456→ 456→ </Button>
|
||
457→ 457→ </div>
|
||
458→ 458→
|
||
459→ 459→ {wCompleted && weeklyProgress.durationSec > 0 && (
|
||
460→ 460→ <div className="mt-1.5 text-[10px] text-muted-foreground/50 text-center">
|
||
461→ 461→ 完成用时 {Math.floor(weeklyProgress.durationSec / 60)}分{weeklyProgress.durationSec % 60}秒
|
||
462→ 462→ </div>
|
||
463→ 463→ )}
|
||
464→ 464→ </div>
|
||
465→ 465→
|
||
466→ 466→ {/* ===== 信标链卡片（amber→rose 渐变） ===== */}
|
||
467→ 467→ <div
|
||
468→ 468→ className="relative rounded-xl border p-3 overflow-hidden"
|
||
469→ 469→ style={{
|
||
470→ 470→ borderColor: "rgba(251,191,36,0.35)",
|
||
471→ 471→ background: `linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,113,133,0.10), rgba(0,0,0,0.4))`,
|
||
472→ 472→ }}
|
||
473→ 473→ >
|
||
474→ 474→ {/* 头部：标题 + 当前连续天数 */}
|
||
475→ 475→ <div className="flex items-center justify-between mb-2">
|
||
476→ 476→ <div className="flex items-center gap-1.5">
|
||
477→ 477→ <Link2 className="h-3.5 w-3.5 text-amber-400" />
|
||
478→ 478→ <span className="text-xs font-semibold text-amber-200">
|
||
479→ 479→ 信标链 · CHAIN
|
||
480→ 480→ </span>
|
||
481→ 481→ </div>
|
||
482→ 482→ <div className="flex items-baseline gap-1">
|
||
483→ 483→ <Flame className="h-3 w-3 text-rose-400" />
|
||
484→ 484→ <span className="text-[10px] text-muted-foreground/60">连续</span>
|
||
485→ 485→ <span className="chain-streak-text text-2xl font-bold font-mono leading-none">
|
||
486→ 486→ {chainState.currentStreak}
|
||
487→ 487→ </span>
|
||
488→ 488→ <span className="text-[10px] text-muted-foreground/60">天</span>
|
||
489→ 489→ </div>
|
||
490→ 490→ </div>
|
||
491→ 491→
|
||
492→ 492→ {/* 今日完成状态 */}
|
||
493→ 493→ <div className="mb-2 flex items-center justify-between">
|
||
494→ 494→ <span className="text-[10px] text-muted-foreground/70">
|
||
495→ 495→ {completedToday
|
||
496→ 496→ ? "今日已贡献"
|
||
497→ 497→ : "今日尚未完成日挑战"}
|
||
498→ 498→ </span>
|
||
499→ 499→ <span
|
||
500→ 500→ className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${
|
||
501→ 501→ completedToday
|
||
502→ 502→ ? "bg-emerald-500/15 text-emerald-300 border-emerald-500/30"
|
||
503→ 503→ : "bg-white/5 text-muted-foreground/70 border-white/10"
|
||
504→ 504→ }`}
|
||
505→ 505→ >
|
||
506→ 506→ {completedToday ? "✓ 已记录" : "○ 待完成"}
|
||
507→ 507→ </span>
|
||
508→ 508→ </div>
|
||
509→ 509→
|
||
510→ 510→ {/* 4 个里程碑节点横向排列 */}
|
||
511→ 511→ <div className="flex items-center justify-between mb-2 relative">
|
||
512→ 512→ {/* 节点之间的连线（背景灰） */}
|
||
513→ 513→ <div className="absolute top-6 left-[12.5%] right-[12.5%] h-[2px] bg-white/10" />
|
||
514→ 514→ {/* 已达成部分高亮（基于 prev→next 插值） */}
|
||
515→ 515→ {(() => {
|
||
516→ 516→ // 节点圆心水平位置（百分比）
|
||
517→ 517→ const MILESTONE_POS: Record<number, number> = {
|
||
518→ 518→ 0: 12.5,
|
||
519→ 519→ 3: 12.5,
|
||
520→ 520→ 7: 37.5,
|
||
521→ 521→ 14: 62.5,
|
||
522→ 522→ 30: 87.5,
|
||
523→ 523→ };
|
||
524→ 524→ const prevPos =
|
||
525→ 525→ MILESTONE_POS[chainProgress.prev] ?? 12.5;
|
||
526→ 526→ const nextPos =
|
||
527→ 527→ chainProgress.next !== null
|
||
528→ 528→ ? MILESTONE_POS[chainProgress.next] ?? 87.5
|
||
529→ 529→ : 87.5;
|
||
530→ 530→ const pct = chainProgress.progressPct / 100;
|
||
531→ 531→ const activeEndPos = prevPos + (nextPos - prevPos) * pct;
|
||
532→ 532→ const widthPct = Math.max(0, activeEndPos - 12.5);
|
||
533→ 533→ if (widthPct <= 0) return null;
|
||
534→ 534→ return (
|
||
535→ 535→ <div
|
||
536→ 536→ className="absolute top-6 h-[2px]"
|
||
537→ 537→ style={{
|
||
538→ 538→ left: "12.5%",
|
||
539→ 539→ width: `${widthPct}%`,
|
||
540→ 540→ background:
|
||
541→ 541→ "linear-gradient(90deg, #fbbf24, #fb7185)",
|
||
542→ 542→ boxShadow: "0 0 8px rgba(251,113,133,0.5)",
|
||
543→ 543→ }}
|
||
544→ 544→ />
|
||
545→ 545→ );
|
||
546→ 546→ })()}
|
||
547→ 547→
|
||
548→ 548→ {BEACON_CHAIN_MILESTONES.map((m) => {
|
||
549→ 549→ const reward = BEACON_CHAIN_REWARDS.find((r) => r.milestone === m);
|
||
550→ 550→ const claimed = chainState.milestonesClaimed.includes(m);
|
||
551→ 551→ const reachable =
|
||
552→ 552→ chainState.currentStreak >= m && !claimed;
|
||
553→ 553→ const inProgress = chainState.currentStreak > 0 && nextMilestone === m;
|
||
554→ 554→ // 节点配色
|
||
555→ 555→ let nodeBg = "rgba(255,255,255,0.05)";
|
||
556→ 556→ let nodeBorder = "rgba(255,255,255,0.15)";
|
||
557→ 557→ let textColor = "rgba(255,255,255,0.4)";
|
||
558→ 558→ if (claimed) {
|
||
559→ 559→ nodeBg = "rgba(52,211,153,0.25)";
|
||
560→ 560→ nodeBorder = "#34d399";
|
||
561→ 561→ textColor = "#34d399";
|
||
562→ 562→ } else if (reachable) {
|
||
563→ 563→ nodeBg = "rgba(251,113,133,0.20)";
|
||
564→ 564→ nodeBorder = "#fb7185";
|
||
565→ 565→ textColor = "#fb7185";
|
||
566→ 566→ } else if (inProgress) {
|
||
567→ 567→ nodeBg = "rgba(251,191,36,0.20)";
|
||
568→ 568→ nodeBorder = "#fbbf24";
|
||
569→ 569→ textColor = "#fbbf24";
|
||
570→ 570→ }
|
||
571→ 571→
|
||
572→ 572→ return (
|
||
573→ 573→ <div
|
||
574→ 574→ key={m}
|
||
575→ 575→ className="flex flex-col items-center gap-1 z-10 flex-1"
|
||
576→ 576→ >
|
||
577→ 577→ <div
|
||
578→ 578→ className={`w-12 h-12 rounded-full flex items-center justify-center font-mono font-bold text-sm border-2 ${
|
||
579→ 579→ reachable ? "chain-milestone-reachable" : ""
|
||
580→ 580→ }`}
|
||
581→ 581→ style={{
|
||
582→ 582→ background: nodeBg,
|
||
583→ 583→ borderColor: nodeBorder,
|
||
584→ 584→ color: textColor,
|
||
585→ 585→ }}
|
||
586→ 586→ >
|
||
587→ 587→ {claimed ? (
|
||
588→ 588→ <Sparkles className="h-4 w-4" />
|
||
589→ 589→ ) : (
|
||
590→ 590→ m
|
||
591→ 591→ )}
|
||
592→ 592→ </div>
|
||
593→ 593→ <span
|
||
594→ 594→ className="text-[9px] text-center leading-tight"
|
||
595→ 595→ style={{ color: textColor }}
|
||
596→ 596→ >
|
||
597→ 597→ {reward?.label}
|
||
598→ 598→ </span>
|
||
599→ 599→ {claimed ? (
|
||
600→ 600→ <span className="text-[9px] text-emerald-400/80 font-mono">
|
||
601→ 601→ 已领
|
||
602→ 602→ </span>
|
||
603→ 603→ ) : reachable ? (
|
||
604→ 604→ <Button
|
||
605→ 605→ onClick={() => handleClaimChain(m)}
|
||
606→ 606→ size="sm"
|
||
607→ 607→ className="h-5 px-2 text-[9px] py-0 border-0"
|
||
608→ 608→ style={{
|
||
609→ 609→ background:
|
||
610→ 610→ "linear-gradient(90deg, #fb7185, #f43f5e)",
|
||
611→ 611→ color: "#1c0608",
|
||
612→ 612→ }}
|
||
613→ 613→ >
|
||
614→ 614→ 领取
|
||
615→ 615→ </Button>
|
||
616→ 616→ ) : (
|
||
617→ 617→ <span className="text-[9px] text-muted-foreground/40 font-mono">
|
||
618→ 618→ +{reward?.rewardInsight}洞
|
||
619→ 619→ </span>
|
||
620→ 620→ )}
|
||
621→ 621→ </div>
|
||
622→ 622→ );
|
||
623→ 623→ })}
|
||
624→ 624→ </div>
|
||
625→ 625→
|
||
626→ 626→ {/* 进度条 */}
|
||
627→ 627→ <div className="mb-2">
|
||
628→ 628→ <div className="flex items-center justify-between mb-1">
|
||
629→ 629→ <span className="text-[10px] text-muted-foreground/70">
|
||
630→ 630→ {chainProgress.next === null
|
||
631→ 631→ ? "已通关全部里程碑"
|
||
632→ 632→ : `下一目标：${chainProgress.next} 天`}
|
||
633→ 633→ </span>
|
||
634→ 634→ <span className="text-[10px] font-mono text-amber-300">
|
||
635→ 635→ {chainProgress.current}
|
||
636→ 636→ {chainProgress.next !== null && ` / ${chainProgress.next}`} 天
|
||
637→ 637→ </span>
|
||
638→ 638→ </div>
|
||
639→ 639→ <Progress
|
||
640→ 640→ value={chainProgress.progressPct}
|
||
641→ 641→ className="h-1.5 bg-black/40"
|
||
642→ 642→ style={{
|
||
643→ 643→ ["--progress-color" as string]: "#fbbf24",
|
||
644→ 644→ }}
|
||
645→ 645→ />
|
||
646→ 646→ </div>
|
||
647→ 647→
|
||
648→ 648→ {/* 底部统计 */}
|
||
649→ 649→ <div className="flex items-center justify-between gap-2 text-[10px]">
|
||
650→ 650→ <div className="flex items-center gap-2">
|
||
651→ 651→ <span className="text-muted-foreground/60">最长</span>
|
||
652→ 652→ <span className="font-mono text-amber-300">
|
||
653→ 653→ {chainState.longestStreak}天
|
||
654→ 654→ </span>
|
||
655→ 655→ </div>
|
||
656→ 656→ <div className="flex items-center gap-2">
|
||
657→ 657→ <span className="text-muted-foreground/60">累计</span>
|
||
658→ 658→ <span className="font-mono text-rose-300">
|
||
659→ 659→ {chainState.totalCompletions}次
|
||
660→ 660→ </span>
|
||
661→ 661→ </div>
|
||
662→ 662→ <div className="flex items-center gap-1">
|
||
663→ 663→ <span className="text-muted-foreground/60">续命</span>
|
||
664→ 664→ {chainState.graceUsed >= 1 ? (
|
||
665→ 665→ <span className="font-mono text-rose-400/80">已用</span>
|
||
666→ 666→ ) : (
|
||
667→ 667→ <span className="font-mono text-emerald-400/80">可用</span>
|
||
668→ 668→ )}
|
||
669→ 669→ </div>
|
||
670→ 670→ </div>
|
||
671→ 671→ </div>
|
||
672→ 672→ </div>
|
||
673→ 673→
|
||
674→ 674→ {/* 本地排行榜 */}
|
||
675→ 675→ <div className="rounded-xl border border-white/10 bg-black/30 p-2.5">
|
||
676→ 676→ <div className="flex items-center gap-1.5 mb-2">
|
||
677→ 677→ <Trophy className="h-3.5 w-3.5 text-amber-400" />
|
||
678→ 678→ <span className="text-xs font-semibold">深空排行榜</span>
|
||
679→ 679→ <span className="text-[10px] text-muted-foreground/50">本地 · Top {leaderboard.length || 0}</span>
|
||
680→ 680→ </div>
|
||
681→ 681→
|
||
682→ 682→ {leaderboard.length === 0 ? (
|
||
683→ 683→ <div className="text-center py-4 text-[11px] text-muted-foreground/40">
|
||
684→ 684→ <Trophy className="h-6 w-6 mx-auto mb-1 opacity-30" />
|
||
685→ 685→ 尚无记录。完成今日或本周信标即可登榜。
|
||
686→ 686→ </div>
|
||
687→ 687→ ) : (
|
||
688→ 688→ <div className="space-y-0.5 max-h-[180px] overflow-y-auto echo-scroll">
|
||
689→ 689→ {leaderboard.map((entry, i) => {
|
||
690→ 690→ const rb = rankBadge(i);
|
||
691→ 691→ const eDiff = BEACON_DIFFICULTY[entry.difficulty];
|
||
692→ 692→ const eType = BEACON_TYPE_META[entry.challenge as BeaconChallengeType];
|
||
693→ 693→ const isMine = entry.dateKey === getTodayKey() || entry.dateKey === getWeekKey();
|
||
694→ 694→ return (
|
||
695→ 695→ <div
|
||
696→ 696→ key={`${entry.timestamp}-${i}`}
|
||
697→ 697→ className={`flex items-center gap-2 px-2 py-1 rounded-lg text-[11px] ${
|
||
698→ 698→ entry.isWeekly
|
||
699→ 699→ ? "bg-fuchsia-500/10 border border-fuchsia-500/20"
|
||
700→ 700→ : isMine
|
||
701→ 701→ ? "bg-fuchsia-500/10 border border-fuchsia-500/20"
|
||
702→ 702→ : "hover:bg-white/5"
|
||
703→ 703→ }`}
|
||
704→ 704→ >
|
||
705→ 705→ {/* 排名 */}
|
||
706→ 706→ <span className="w-6 flex items-center justify-center">
|
||
707→ 707→ {rb ? (
|
||
708→ 708→ <rb.icon className="h-3.5 w-3.5" style={{ color: rb.color }} />
|
||
709→ 709→ ) : (
|
||
710→ 710→ <span className="text-muted-foreground/50 font-mono">{i + 1}</span>
|
||
711→ 711→ )}
|
||
712→ 712→ </span>
|
||
713→ 713→ {/* 类型 + 难度 + 周挑战标记 */}
|
||
714→ 714→ <span className="flex items-center gap-1 flex-1 min-w-0">
|
||
715→ 715→ <span style={{ color: eDiff.color }} className="font-mono">{eDiff.icon}</span>
|
||
716→ 716→ <span className="text-muted-foreground/80 truncate">{eType.label}</span>
|
||
717→ 717→ {entry.isWeekly && (
|
||
718→ 718→ <span className="text-[9px] font-mono px-1 rounded bg-fuchsia-500/20 text-fuchsia-300 border border-fuchsia-500/40">
|
||
719→ 719→ WEEK
|
||
720→ 720→ </span>
|
||
721→ 721→ )}
|
||
722→ 722→ {entry.progress >= 1 && <span className="text-emerald-400/70">✓</span>}
|
||
723→ 723→ </span>
|
||
724→ 724→ {/* 用时 */}
|
||
725→ 725→ <span className="text-muted-foreground/50 font-mono text-[10px] w-16 text-right">
|
||
726→ 726→ {Math.floor(entry.durationSec / 60)}m{entry.durationSec % 60}s
|
||
727→ 727→ </span>
|
||
728→ 728→ {/* 分数 */}
|
||
729→ 729→ <span className="font-mono font-semibold w-12 text-right" style={{ color: eDiff.color }}>
|
||
730→ 730→ {formatNum(entry.score)}
|
||
731→ 731→ </span>
|
||
732→ 732→ </div>
|
||
733→ 733→ );
|
||
734→ 734→ })}
|
||
735→ 735→ </div>
|
||
736→ 736→ )}
|
||
737→ 737→ </div>
|
||
738→ 738→
|
||
739→ 739→ {/* 难度图例 */}
|
||
740→ 740→ <div className="flex items-center justify-center gap-3 text-[9px] text-muted-foreground/50">
|
||
741→ 741→ {DIFFICULTY_ORDER.map((d) => {
|
||
742→ 742→ const m = BEACON_DIFFICULTY[d];
|
||
743→ 743→ return (
|
||
744→ 744→ <span key={d} className="flex items-center gap-1">
|
||
745→ 745→ <span style={{ color: m.color }}>{m.icon}</span>
|
||
746→ 746→ {m.label} ×{m.mult}
|
||
747→ 747→ </span>
|
||
748→ 748→ );
|
||
749→ 749→ })}
|
||
750→ 750→ </div>
|
||
751→ 751→ </div>
|
||
752→ 752→ );
|
||
753→ 753→}
|
||
754→ 754→ |