Spaces:
Sleeping
Sleeping
File size: 2,771 Bytes
f2bfbb5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 'use client';
import { useEffect, useRef } from 'react';
import styles from './StatsRadar.module.css';
export default function StatsRadar({ stats }) {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas || !stats || Object.keys(stats).length === 0) return;
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const centerX = width / 2;
const centerY = height / 2;
const radius = Math.min(centerX, centerY) - 25;
const statKeys = ['hp', 'attack', 'defense', 'speed', 'sp_defense', 'sp_attack'];
const labels = ['HP', 'ATK', 'DEF', 'SPD', 'SpD', 'SpA'];
ctx.clearRect(0, 0, width, height);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
ctx.lineWidth = 1;
for (let level = 1; level <= 3; level++) {
const levelRadius = radius * (level / 3);
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (Math.PI / 3) * i - Math.PI / 2;
const x = centerX + levelRadius * Math.cos(angle);
const y = centerY + levelRadius * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
}
ctx.font = '10px monospace';
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (let i = 0; i < 6; i++) {
const angle = (Math.PI / 3) * i - Math.PI / 2;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.stroke();
const labelX = centerX + (radius + 15) * Math.cos(angle);
const labelY = centerY + (radius + 15) * Math.sin(angle);
ctx.fillText(labels[i], labelX, labelY);
}
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const statVal = stats[statKeys[i]] || 0;
const normalized = Math.min(statVal / 150, 1);
const angle = (Math.PI / 3) * i - Math.PI / 2;
const x = centerX + (radius * normalized) * Math.cos(angle);
const y = centerY + (radius * normalized) * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fill();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
ctx.lineWidth = 2;
ctx.stroke();
}, [stats]);
if (!stats || Object.keys(stats).length === 0) {
return null;
}
return (
<div className={styles.container}>
<canvas
ref={canvasRef}
width={220}
height={220}
className={styles.canvas}
/>
</div>
);
}
|