79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
'use client';
|
||
|
||
import {
|
||
Legend,
|
||
PolarAngleAxis,
|
||
PolarGrid,
|
||
PolarRadiusAxis,
|
||
Radar,
|
||
RadarChart,
|
||
ResponsiveContainer,
|
||
} from 'recharts';
|
||
|
||
type MetricPoint = {
|
||
metric: string;
|
||
player: number;
|
||
opponent: number;
|
||
};
|
||
|
||
type 球員道具盤 = {
|
||
playerName: string;
|
||
opponentName: string;
|
||
metrics: {
|
||
攻擊: number;
|
||
運球: number;
|
||
組織: number;
|
||
壓迫: number;
|
||
對位完成: number;
|
||
穩定度: number;
|
||
};
|
||
};
|
||
|
||
export function PlayerMatchupRadar({ playerName, opponentName, metrics }: 球員道具盤) {
|
||
const data: MetricPoint[] = [
|
||
{ metric: '攻擊', player: metrics.攻擊, opponent: Math.max(0, 100 - metrics.攻擊) },
|
||
{ metric: '運球', player: metrics.運球, opponent: Math.max(0, 100 - metrics.運球) },
|
||
{ metric: '組織', player: metrics.組織, opponent: Math.max(0, 100 - metrics.組織) },
|
||
{ metric: '壓迫', player: metrics.壓迫, opponent: Math.max(0, 100 - metrics.壓迫) },
|
||
{ metric: '對位完成', player: metrics.對位完成, opponent: Math.max(0, 100 - metrics.對位完成) },
|
||
{ metric: '穩定度', player: metrics.穩定度, opponent: Math.max(0, 100 - metrics.穩定度) },
|
||
];
|
||
|
||
return (
|
||
<article className="panel-glow rounded-2xl p-4">
|
||
<h3 className="dot-matrix text-xl text-[#7d2a15]">
|
||
球員道具雷達：{playerName} 對 {opponentName}
|
||
</h3>
|
||
<div className="mt-3 h-80 w-full">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<RadarChart data={data} outerRadius={110} cx="50%" cy="50%">
|
||
<PolarGrid stroke="#e0c6a8" />
|
||
<PolarAngleAxis dataKey="metric" tick={{ fill: '#6f4b36', fontSize: 12 }} />
|
||
<PolarRadiusAxis angle={30} domain={[0, 100]} />
|
||
<Radar
|
||
name={playerName}
|
||
dataKey="player"
|
||
stroke="#d1432d"
|
||
fill="#d1432d"
|
||
fillOpacity={0.35}
|
||
fillRule="evenodd"
|
||
/>
|
||
<Radar
|
||
name={opponentName}
|
||
dataKey="opponent"
|
||
stroke="#7a4a2c"
|
||
fill="#7a4a2c"
|
||
fillOpacity={0.2}
|
||
fillRule="evenodd"
|
||
/>
|
||
<Legend wrapperStyle={{ color: '#6f4f3c' }} />
|
||
</RadarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
<p className="mt-3 text-sm text-[#7a5b46]">
|
||
重疊越高代表球員能力與對手弱點耦合越明顯，系統將提高「球員道具盤」建議精度。
|
||
</p>
|
||
</article>
|
||
);
|
||
}
|