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.
89 lines
2.8 KiB
89 lines
2.8 KiB
import {RefObject, useRef} from "react"
|
|
import "../../style/player.css"
|
|
import {BallPiece} from "./BallPiece"
|
|
import Draggable from "react-draggable"
|
|
import {PlayerPiece} from "./PlayerPiece"
|
|
import {Player} from "../../tactic/Player"
|
|
import {calculateRatio} from "../../Utils"
|
|
|
|
export interface PlayerProps {
|
|
player: Player
|
|
onChange: (p: Player) => void
|
|
onRemove: () => void
|
|
onBallDrop: (bounds: DOMRect) => void
|
|
parentRef: RefObject<HTMLDivElement>
|
|
}
|
|
|
|
/**
|
|
* A player that is placed on the court, which can be selected, and moved in the associated bounds
|
|
* */
|
|
export default function CourtPlayer({
|
|
player,
|
|
onChange,
|
|
onRemove,
|
|
onBallDrop,
|
|
parentRef,
|
|
}: PlayerProps) {
|
|
const pieceRef = useRef<HTMLDivElement>(null)
|
|
const ballPiece = useRef<HTMLDivElement>(null)
|
|
|
|
const x = player.rightRatio
|
|
const y = player.bottomRatio
|
|
const hasBall = player.hasBall
|
|
|
|
return (
|
|
<Draggable
|
|
handle={".player-piece"}
|
|
nodeRef={pieceRef}
|
|
bounds="parent"
|
|
position={{ x, y }}
|
|
onStop={() => {
|
|
const pieceBounds = pieceRef.current!.getBoundingClientRect()
|
|
const parentBounds = parentRef.current!.getBoundingClientRect()
|
|
|
|
const { x, y } = calculateRatio(pieceBounds, parentBounds)
|
|
|
|
onChange({
|
|
id: player.id,
|
|
rightRatio: x,
|
|
bottomRatio: y,
|
|
team: player.team,
|
|
role: player.role,
|
|
hasBall: player.hasBall,
|
|
})
|
|
}}>
|
|
<div
|
|
ref={pieceRef}
|
|
className={"player"}
|
|
style={{
|
|
position: "absolute",
|
|
left: `${x * 100}%`,
|
|
top: `${y * 100}%`,
|
|
}}>
|
|
<div
|
|
id={player.id}
|
|
tabIndex={0}
|
|
className="player-content"
|
|
onKeyUp={(e) => {
|
|
if (e.key == "Delete") onRemove()
|
|
}}>
|
|
<div className="player-selection-tab">
|
|
{hasBall && (<Draggable nodeRef={ballPiece}
|
|
onStop={() => onBallDrop(ballPiece.current!.getBoundingClientRect())}
|
|
position={{x:0, y: 0}}>
|
|
<div ref={ballPiece}>
|
|
<BallPiece />
|
|
</div>
|
|
</Draggable>)}
|
|
</div>
|
|
<PlayerPiece
|
|
team={player.team}
|
|
text={player.role}
|
|
hasBall={hasBall}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Draggable>
|
|
)
|
|
}
|