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.
53 lines
1.5 KiB
53 lines
1.5 KiB
import {useRef} from "react";
|
|
import "../../style/player.css";
|
|
import RemoveIcon from "../../assets/icon/remove.svg";
|
|
import Draggable, {DraggableBounds} from "react-draggable";
|
|
import {PlayerPiece} from "./PlayerPiece";
|
|
|
|
export interface PlayerProps {
|
|
pos: string,
|
|
team: string,
|
|
x: number,
|
|
y: number,
|
|
bounds: DraggableBounds,
|
|
onRemove: () => void
|
|
}
|
|
|
|
/**
|
|
* A player that is placed on the court, which can be selected, and moved in the associated bounds
|
|
* */
|
|
export default function CourtPlayer({pos, team, x, y, bounds, onRemove}: PlayerProps) {
|
|
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
return (
|
|
<Draggable
|
|
handle={".player-piece"}
|
|
nodeRef={ref}
|
|
bounds={bounds}
|
|
defaultPosition={{x, y}}
|
|
>
|
|
<div ref={ref}
|
|
className={"player"}
|
|
style={{
|
|
position: "absolute",
|
|
}}>
|
|
|
|
<div tabIndex={0}
|
|
className="player-content"
|
|
onKeyUp={e => {
|
|
if (e.key == "Delete")
|
|
onRemove()
|
|
}}>
|
|
<div className="player-selection-tab">
|
|
<RemoveIcon
|
|
className="player-selection-tab-remove"
|
|
onClick={() => onRemove()}/>
|
|
</div>
|
|
<PlayerPiece team={team} text={pos}/>
|
|
</div>
|
|
</div>
|
|
|
|
</Draggable>
|
|
|
|
)
|
|
} |