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.
Application-Web/front/components/editor/BasketCourt.tsx

50 lines
1.4 KiB

import "../../style/basket_court.css"
import { RefObject, useRef } from "react"
import CourtPlayer from "./CourtPlayer"
import { Player } from "../../tactic/Player"
import {BallPiece, CourtBall} from "./BallPiece";
import {Ball} from "../../tactic/Ball";
export interface BasketCourtProps {
players: Player[]
ball: Ball
onPlayerRemove: (p: Player) => void
onBallDrop: (b: DOMRect) => void
onPlayerChange: (p: Player) => void
courtImage: string
courtRef: RefObject<HTMLDivElement>
}
export function BasketCourt({
players,
ball,
onPlayerRemove,
onBallDrop,
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={onBallDrop}
parentRef={courtRef}
/>
)
})}
<CourtBall ball={ball}/>
</div>
)
}