33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function FortuneRing({ score, max = 100 }) {
|
|
const radius = 80;
|
|
const circumference = 2 * Math.PI * radius;
|
|
const safe = Math.max(0, Math.min(score || 0, max));
|
|
const dashOffset = circumference - (safe / max) * circumference;
|
|
|
|
return (
|
|
<div className="saju-fortune-ring">
|
|
<svg viewBox="0 0 200 200">
|
|
<circle
|
|
cx="100" cy="100" r={radius}
|
|
stroke="var(--saju-paper)" strokeWidth="14" fill="none"
|
|
/>
|
|
<circle
|
|
cx="100" cy="100" r={radius}
|
|
stroke="var(--saju-gold)" strokeWidth="14" fill="none"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={dashOffset}
|
|
strokeLinecap="round"
|
|
transform="rotate(-90 100 100)"
|
|
style={{ transition: 'stroke-dashoffset 0.6s ease' }}
|
|
/>
|
|
</svg>
|
|
<div style={{ position: 'absolute', textAlign: 'center' }}>
|
|
<div className="saju-fortune-ring__score">{safe}</div>
|
|
<div className="saju-fortune-ring__total">/ {max}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|