29 lines
838 B
JavaScript
29 lines
838 B
JavaScript
import React from "react";
|
|
import { Circle, Group } from "react-konva";
|
|
|
|
import colors from "../../helpers/colors";
|
|
|
|
function TokenStatus({ tokenState, width, height }) {
|
|
// Ensure statuses is an array and filter empty values
|
|
const statuses = [...new Set((tokenState?.statuses || []).filter((s) => s))];
|
|
return (
|
|
<Group x={width} y={height} offsetX={width / 2} offsetY={height / 2}>
|
|
{statuses.map((status, index) => (
|
|
<Circle
|
|
key={status}
|
|
width={width}
|
|
height={height}
|
|
stroke={colors[status]}
|
|
strokeWidth={width / 20 / tokenState.size}
|
|
scaleX={1 - index / 10 / tokenState.size}
|
|
scaleY={1 - index / 10 / tokenState.size}
|
|
opacity={0.8}
|
|
fillEnabled={false}
|
|
/>
|
|
))}
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
export default TokenStatus;
|