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.
28 lines
852 B
28 lines
852 B
import CourtSvg from '../../assets/basketball_court.svg?react';
|
|
import '../../style/basket_court.css';
|
|
import {useRef} from "react";
|
|
import CourtPlayer from "./CourtPlayer";
|
|
import {Player} from "../../data/Player";
|
|
|
|
export interface BasketCourtProps {
|
|
players: Player[],
|
|
onPlayerRemove: (p: Player) => void,
|
|
}
|
|
|
|
export function BasketCourt({players, onPlayerRemove}: BasketCourtProps) {
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<div id="court-container" ref={divRef} style={{position: "relative"}}>
|
|
<CourtSvg id="court-svg"/>
|
|
{players.map(player => {
|
|
return <CourtPlayer key={player.id}
|
|
player={player}
|
|
onRemove={() => onPlayerRemove(player)}
|
|
/>
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|