335 lines
13 KiB
TypeScript
Executable File
335 lines
13 KiB
TypeScript
Executable File
"use client";
|
||
// 回响星核 / Echo Nexus — 角色属性面板（v0.7 P1）
|
||
//
|
||
// 无人机驾驶员四维属性可视化：
|
||
// • 探索力 emerald / 智慧 fuchsia / 勇气 amber / 灵感 rose
|
||
// • 显示数值（0-100）、加成百分比、经验进度条、等级 badge
|
||
// • 待分配属性点时高亮 + 闪烁提示，「+」按钮可分配 1 点
|
||
// • 顶部待分配点数提示；底部总览
|
||
// • 小屏 2×2 网格，大屏 1×4 横排
|
||
import { useMemo } from "react";
|
||
import { useGameStore } from "@/store/gameStore";
|
||
import {
|
||
ATTRIBUTE_CONFIG,
|
||
ATTRIBUTE_KEYS,
|
||
ATTRIBUTE_HARD_CAP,
|
||
ATTRIBUTE_LINEAR_CAP,
|
||
getAttributeBonus,
|
||
getAllBonuses,
|
||
totalAttributeLevel,
|
||
totalAttributeBonusPct,
|
||
expRequiredForLevel,
|
||
type AttributeKey,
|
||
} from "@/lib/game/attributes";
|
||
import {
|
||
Compass,
|
||
Brain,
|
||
Swords,
|
||
Sparkles,
|
||
Plus,
|
||
ChevronUp,
|
||
type LucideIcon,
|
||
} from "lucide-react";
|
||
|
||
const ICON_MAP: Record<string, LucideIcon> = {
|
||
Compass,
|
||
Brain,
|
||
Swords,
|
||
Sparkles,
|
||
};
|
||
|
||
/** 主题色 → Tailwind/CSS 颜色映射 */
|
||
const COLOR_STYLES: Record<
|
||
AttributeKey,
|
||
{
|
||
text: string;
|
||
border: string;
|
||
borderActive: string;
|
||
bg: string;
|
||
ring: string;
|
||
barFrom: string;
|
||
barTo: string;
|
||
glow: string;
|
||
}
|
||
> = {
|
||
exploration: {
|
||
text: "text-emerald-300",
|
||
border: "border-emerald-400/30",
|
||
borderActive: "border-emerald-400/70",
|
||
bg: "bg-emerald-500/10",
|
||
ring: "ring-emerald-400/40",
|
||
barFrom: "from-emerald-400",
|
||
barTo: "to-emerald-500",
|
||
glow: "rgba(52,211,153,0.45)",
|
||
},
|
||
wisdom: {
|
||
text: "text-fuchsia-300",
|
||
border: "border-fuchsia-400/30",
|
||
borderActive: "border-fuchsia-400/70",
|
||
bg: "bg-fuchsia-500/10",
|
||
ring: "ring-fuchsia-400/40",
|
||
barFrom: "from-fuchsia-400",
|
||
barTo: "to-fuchsia-500",
|
||
glow: "rgba(232,121,249,0.45)",
|
||
},
|
||
courage: {
|
||
text: "text-amber-300",
|
||
border: "border-amber-400/30",
|
||
borderActive: "border-amber-400/70",
|
||
bg: "bg-amber-500/10",
|
||
ring: "ring-amber-400/40",
|
||
barFrom: "from-amber-400",
|
||
barTo: "to-amber-500",
|
||
glow: "rgba(251,191,36,0.45)",
|
||
},
|
||
inspiration: {
|
||
text: "text-rose-300",
|
||
border: "border-rose-400/30",
|
||
borderActive: "border-rose-400/70",
|
||
bg: "bg-rose-500/10",
|
||
ring: "ring-rose-400/40",
|
||
barFrom: "from-rose-400",
|
||
barTo: "to-rose-500",
|
||
glow: "rgba(251,113,133,0.45)",
|
||
},
|
||
};
|
||
|
||
export function AttributesPanel() {
|
||
const attributes = useGameStore((s) => s.attributes);
|
||
const attributeProgress = useGameStore((s) => s.attributeProgress);
|
||
const pendingAttrPoints = useGameStore((s) => s.pendingAttrPoints ?? 0);
|
||
const allocateAttribute = useGameStore((s) => s.allocateAttribute);
|
||
|
||
const bonuses = useMemo(() => getAllBonuses(attributes), [attributes]);
|
||
const totalLvl = useMemo(() => totalAttributeLevel(attributes), [attributes]);
|
||
const totalBonus = useMemo(
|
||
() => totalAttributeBonusPct(attributes),
|
||
[attributes]
|
||
);
|
||
|
||
return (
|
||
<div className="flex flex-col gap-2.5 h-full overflow-y-auto echo-scroll pr-0.5">
|
||
<style jsx global>{`
|
||
.echo-scroll::-webkit-scrollbar { width: 4px; }
|
||
.echo-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
|
||
.echo-scroll::-webkit-scrollbar-track { background: transparent; }
|
||
@keyframes echo-pending-pulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(232,121,249,0.5); }
|
||
50% { box-shadow: 0 0 14px 4px rgba(232,121,249,0.65); }
|
||
}
|
||
.echo-pending-pulse {
|
||
animation: echo-pending-pulse 1.6s ease-in-out infinite;
|
||
}
|
||
@keyframes echo-card-glow {
|
||
0%, 100% { opacity: 0.5; }
|
||
50% { opacity: 1; }
|
||
}
|
||
`}</style>
|
||
|
||
{/* 顶部：标题 + 待分配点数 */}
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-sm font-semibold flex items-center gap-1.5">
|
||
<span className="bg-gradient-to-br from-emerald-300 via-fuchsia-300 to-rose-300 bg-clip-text text-transparent">
|
||
驾驶员属性
|
||
</span>
|
||
</h3>
|
||
<div
|
||
className={`text-[10px] px-2 py-0.5 rounded-full border ${
|
||
pendingAttrPoints > 0
|
||
? "border-fuchsia-400/60 bg-fuchsia-500/15 text-fuchsia-200 echo-pending-pulse font-bold"
|
||
: "border-white/15 bg-black/25 text-muted-foreground"
|
||
}`}
|
||
>
|
||
待分配 {pendingAttrPoints}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 属性卡片网格：小屏 2×2，大屏 1×4 */}
|
||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
|
||
{ATTRIBUTE_KEYS.map((key) => {
|
||
const meta = ATTRIBUTE_CONFIG[key];
|
||
const cs = COLOR_STYLES[key];
|
||
const Icon = ICON_MAP[meta.icon] ?? Sparkles;
|
||
const value = attributes?.[key] ?? 0;
|
||
const prog = attributeProgress?.[key] ?? { exp: 0, level: value };
|
||
const bonusPct = getAttributeBonus(value) * 100;
|
||
const nextExp = expRequiredForLevel(value);
|
||
const curExp = prog.exp;
|
||
const expPct =
|
||
nextExp > 0 ? Math.min(100, (curExp / nextExp) * 100) : 100;
|
||
const isMax = value >= ATTRIBUTE_HARD_CAP;
|
||
const canAllocate = pendingAttrPoints > 0 && !isMax;
|
||
// 区域标记
|
||
const inDiminishing = value > ATTRIBUTE_LINEAR_CAP;
|
||
|
||
return (
|
||
<div
|
||
key={key}
|
||
className={`relative rounded-xl border ${cs.border} ${cs.bg} p-2.5 flex flex-col gap-1.5 overflow-hidden transition-all duration-300`}
|
||
style={{
|
||
boxShadow: `inset 0 0 18px ${cs.glow}`,
|
||
}}
|
||
>
|
||
{/* 顶部光晕装饰 */}
|
||
<div
|
||
className="pointer-events-none absolute -top-8 -right-8 h-20 w-20 rounded-full blur-2xl opacity-50"
|
||
style={{ background: meta.hex }}
|
||
/>
|
||
{/* 标题行：图标 + 名称 + 等级 badge */}
|
||
<div className="relative flex items-center gap-1.5">
|
||
<div
|
||
className={`shrink-0 h-7 w-7 rounded-lg flex items-center justify-center ${cs.bg} border ${cs.border}`}
|
||
style={{ boxShadow: `0 0 8px ${cs.glow}` }}
|
||
>
|
||
<Icon className={`h-3.5 w-3.5 ${cs.text}`} />
|
||
</div>
|
||
<div className="min-w-0 flex-1 leading-tight">
|
||
<div className={`text-[11px] font-semibold ${cs.text} truncate`}>
|
||
{meta.name}
|
||
</div>
|
||
<div className="text-[8px] text-muted-foreground/70 uppercase tracking-wider truncate">
|
||
{meta.enName}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={`shrink-0 text-[9px] px-1.5 py-0.5 rounded font-mono font-bold ${
|
||
isMax
|
||
? "bg-amber-400/20 text-amber-200 border border-amber-400/40"
|
||
: "bg-black/30 text-white/80 border border-white/10"
|
||
}`}
|
||
>
|
||
Lv.{value}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 数值 + 加成 */}
|
||
<div className="relative flex items-end justify-between">
|
||
<span className={`text-lg font-mono font-bold ${cs.text} leading-none`}>
|
||
{value}
|
||
<span className="text-[9px] text-muted-foreground/60 ml-0.5">
|
||
/{ATTRIBUTE_HARD_CAP}
|
||
</span>
|
||
</span>
|
||
<span className={`text-[10px] ${cs.text} font-mono`}>
|
||
+{bonusPct.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
|
||
{/* 经验进度条 */}
|
||
<div className="relative">
|
||
<div className="h-1.5 rounded-full bg-black/40 overflow-hidden border border-white/5">
|
||
<div
|
||
className={`h-full bg-gradient-to-r ${cs.barFrom} ${cs.barTo} transition-all duration-500`}
|
||
style={{
|
||
width: `${isMax ? 100 : expPct}%`,
|
||
boxShadow: `0 0 6px ${cs.glow}`,
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex items-center justify-between mt-0.5 text-[8px] text-muted-foreground/70 font-mono">
|
||
<span>
|
||
{isMax ? "已满级" : `${curExp} / ${nextExp} EXP`}
|
||
</span>
|
||
{inDiminishing && !isMax && (
|
||
<span className="text-amber-300/70">递减区</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 加成列表 */}
|
||
<div className="relative flex flex-col gap-0.5 mt-0.5">
|
||
{meta.effects.map((eff, i) => (
|
||
<div
|
||
key={i}
|
||
className="text-[8.5px] text-muted-foreground/70 leading-tight flex items-center gap-1"
|
||
>
|
||
<span className={cs.text}>·</span>
|
||
<span className="truncate">{eff}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 分配按钮 */}
|
||
<button
|
||
type="button"
|
||
disabled={!canAllocate}
|
||
onClick={() => allocateAttribute(key, 1)}
|
||
aria-label={`分配 1 点到 ${meta.name}`}
|
||
className={`relative mt-auto rounded-md border px-1.5 py-1 flex items-center justify-center gap-0.5 text-[10px] font-bold transition-all ${
|
||
canAllocate
|
||
? `${cs.borderActive} ${cs.bg} ${cs.text} hover:scale-105 cursor-pointer`
|
||
: "border-white/5 bg-black/20 text-muted-foreground/30 cursor-not-allowed"
|
||
}`}
|
||
style={
|
||
canAllocate
|
||
? { boxShadow: `0 0 8px ${cs.glow}` }
|
||
: undefined
|
||
}
|
||
>
|
||
<Plus className="h-3 w-3" />
|
||
<span>分配</span>
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* 底部：总览 */}
|
||
<div className="mt-auto rounded-lg border border-white/10 bg-black/30 px-2.5 py-1.5 flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-1.5 text-[10px]">
|
||
<ChevronUp className="h-3 w-3 text-fuchsia-300" />
|
||
<span className="text-muted-foreground">总等级</span>
|
||
<span className="font-mono font-bold text-fuchsia-200">
|
||
{totalLvl}
|
||
<span className="text-muted-foreground/60 text-[9px]">/{ATTRIBUTE_HARD_CAP * 4}</span>
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-[10px]">
|
||
<span className="text-muted-foreground">总加成</span>
|
||
<span className="font-mono font-bold text-emerald-200">
|
||
+{totalBonus.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 当前生效修饰器（细节展示） */}
|
||
<div className="grid grid-cols-2 gap-1 text-[9px]">
|
||
<DetailLine label="探险力" value={`×${bonuses.expeditionPowerMult.toFixed(2)}`} color="text-emerald-300" />
|
||
<DetailLine label="解码步数" value={`+${bonuses.decodeStepsBonus}`} color="text-fuchsia-300" />
|
||
<DetailLine label="洞见倍率" value={`+${(bonuses.insightMultAdd * 100).toFixed(1)}%`} color="text-fuchsia-300" />
|
||
<DetailLine label="自动解码周期" value={`×${bonuses.autoDecodeIntervalMult.toFixed(2)}`} color="text-fuchsia-300" />
|
||
<DetailLine label="探险生命" value={`+${bonuses.expeditionHpBonus}`} color="text-amber-300" />
|
||
<DetailLine label="BOSS 胜率" value={`+${(bonuses.bossWinRateBonus * 100).toFixed(1)}%`} color="text-amber-300" />
|
||
<DetailLine label="巡航护盾" value={`+${bonuses.cruiseShieldBonus}`} color="text-amber-300" />
|
||
<DetailLine label="接触率" value={`×${bonuses.contactRateMult.toFixed(2)}`} color="text-rose-300" />
|
||
<DetailLine label="星潮触发" value={`+${(bonuses.tideTriggerBonus * 100).toFixed(1)}%`} color="text-rose-300" />
|
||
<DetailLine label="脉冲连击" value={`+${(bonuses.pulseComboBonus * 100).toFixed(1)}%`} color="text-rose-300" />
|
||
<DetailLine label="巡航速度" value={`×${bonuses.cruiseShipSpeedMult.toFixed(2)}`} color="text-emerald-300" />
|
||
<DetailLine label="产能加成" value={`×${bonuses.crystalsPerSecMult.toFixed(2)}`} color="text-emerald-300" />
|
||
</div>
|
||
|
||
{/* 飞升获得属性点提示 */}
|
||
<div className="text-[9px] text-muted-foreground/60 text-center leading-tight">
|
||
每次飞升获得 <span className="text-fuchsia-300 font-mono">飞升次数 × 2 + 1</span> 点属性点；完成对应活动自动累积经验
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DetailLine({
|
||
label,
|
||
value,
|
||
color,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
color: string;
|
||
}) {
|
||
return (
|
||
<div className="flex items-center justify-between rounded bg-black/25 border border-white/5 px-1.5 py-0.5">
|
||
<span className="text-muted-foreground/80 truncate">{label}</span>
|
||
<span className={`font-mono ${color}`}>{value}</span>
|
||
</div>
|
||
);
|
||
}
|