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.
67 lines
1.9 KiB
67 lines
1.9 KiB
import "../../style/basket_court.css"
|
|
import {RefObject} from "react"
|
|
import CourtPlayer from "./CourtPlayer"
|
|
|
|
import {Player} from "../../tactic/Player"
|
|
import {CourtObject} from "../../tactic/CourtObjects";
|
|
import {CourtBall} from "./CourtBall";
|
|
|
|
export interface BasketCourtProps {
|
|
players: Player[]
|
|
objects: CourtObject[]
|
|
|
|
onPlayerRemove: (p: Player) => void
|
|
onPlayerChange: (p: Player) => void
|
|
|
|
onBallMoved: (ball: DOMRect) => void,
|
|
|
|
courtImage: string
|
|
courtRef: RefObject<HTMLDivElement>
|
|
}
|
|
|
|
export function BasketCourt({
|
|
|
|
players,
|
|
objects,
|
|
onPlayerRemove,
|
|
onBallMoved,
|
|
onPlayerChange,
|
|
courtImage,
|
|
courtRef,
|
|
}: BasketCourtProps) {
|
|
|
|
return (
|
|
<div
|
|
id="court-container"
|
|
ref={courtRef}
|
|
style={{position: "relative"}}>
|
|
<img src={courtImage} alt={"court"} id="court-svg"/>
|
|
{players.map((player) => {
|
|
return (
|
|
<CourtPlayer
|
|
key={player.team + player.role}
|
|
player={player}
|
|
onChange={onPlayerChange}
|
|
onRemove={() => onPlayerRemove(player)}
|
|
onBallDrop={onBallMoved}
|
|
parentRef={courtRef}
|
|
/>
|
|
)
|
|
})}
|
|
|
|
{objects.map(object => {
|
|
if (object.type == "ball") {
|
|
return <CourtBall
|
|
onMoved={onBallMoved}
|
|
ball={object}
|
|
key="ball"
|
|
/>
|
|
}
|
|
throw new Error("unknown court object", object.type)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|