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