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.
39 lines
1.1 KiB
39 lines
1.1 KiB
import React, { useRef } from "react"
|
|
import Draggable from "react-draggable"
|
|
import { BallPiece } from "./BallPiece"
|
|
import { Ball } from "../../model/tactic/Ball"
|
|
|
|
export interface CourtBallProps {
|
|
onMoved: (rect: DOMRect) => void
|
|
onRemove: () => void
|
|
ball: Ball
|
|
}
|
|
|
|
export function CourtBall({ onMoved, ball, onRemove }: CourtBallProps) {
|
|
const pieceRef = useRef<HTMLDivElement>(null)
|
|
|
|
const x = ball.rightRatio
|
|
const y = ball.bottomRatio
|
|
|
|
return (
|
|
<Draggable
|
|
onStop={() => onMoved(pieceRef.current!.getBoundingClientRect())}
|
|
nodeRef={pieceRef}>
|
|
<div
|
|
className={"ball-div"}
|
|
ref={pieceRef}
|
|
tabIndex={0}
|
|
onKeyUp={(e) => {
|
|
if (e.key == "Delete") onRemove()
|
|
}}
|
|
style={{
|
|
position: "absolute",
|
|
left: `${x * 100}%`,
|
|
top: `${y * 100}%`,
|
|
}}>
|
|
<BallPiece />
|
|
</div>
|
|
</Draggable>
|
|
)
|
|
}
|