You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.3 KiB
36 lines
1.3 KiB
import CourtSvg from '../../assets/basketball_court.svg';
|
|
import '../../style/basket_court.css';
|
|
import {MouseEvent, ReactElement, useEffect, useRef, useState} from "react";
|
|
import CourtPlayer from "./CourtPlayer";
|
|
import {Player} from "../../data/Player";
|
|
|
|
export function BasketCourt({players, onPlayerRemove}: { players: Player[], onPlayerRemove: (Player) => void }) {
|
|
const [courtPlayers, setCourtPlayers] = useState<ReactElement[]>([])
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const bounds = divRef.current!.getBoundingClientRect();
|
|
setCourtPlayers(players.map(player => {
|
|
return (
|
|
<CourtPlayer key={player.id}
|
|
pos={player.position}
|
|
team={player.team}
|
|
x={(bounds.width * player.right_percentage)}
|
|
y={(bounds.height * player.bottom_percentage)}
|
|
bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
|
|
onRemove={() => onPlayerRemove(player)}
|
|
/>
|
|
)
|
|
}))
|
|
}, [players, divRef]);
|
|
|
|
return (
|
|
<div id="court-container" ref={divRef}>
|
|
<CourtSvg id="court-svg"/>
|
|
{courtPlayers}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|