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.
50 lines
1.6 KiB
50 lines
1.6 KiB
import { useRef } from "react"
|
|
import "../../style/player.css"
|
|
import RemoveIcon from "../../assets/icon/remove.svg?react"
|
|
import Draggable from "react-draggable"
|
|
import { PlayerPiece } from "./PlayerPiece"
|
|
import { Player } from "../../data/Player"
|
|
|
|
export interface PlayerProps {
|
|
player: Player
|
|
onRemove: () => void
|
|
}
|
|
|
|
/**
|
|
* A player that is placed on the court, which can be selected, and moved in the associated bounds
|
|
* */
|
|
export default function CourtPlayer({ player, onRemove }: PlayerProps) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
|
|
const x = player.rightRatio
|
|
const y = player.bottomRatio
|
|
|
|
return (
|
|
<Draggable handle={".player-piece"} nodeRef={ref} bounds="parent">
|
|
<div
|
|
ref={ref}
|
|
className={"player"}
|
|
style={{
|
|
position: "absolute",
|
|
left: `${x * 100}%`,
|
|
top: `${y * 100}%`,
|
|
}}>
|
|
<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={player.team} text={player.role} />
|
|
</div>
|
|
</div>
|
|
</Draggable>
|
|
)
|
|
}
|