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.
28 lines
720 B
28 lines
720 B
import React, {RefObject, useRef} from "react"
|
|
|
|
import "../../style/ball.css"
|
|
|
|
import Ball from "../../assets/icon/ball.svg?react"
|
|
import Draggable from "react-draggable"
|
|
|
|
export interface CourtBallProps {
|
|
onDrop: (pos: DOMRect) => void
|
|
}
|
|
|
|
export function CourtBall({ onDrop }: CourtBallProps) {
|
|
const ref = useRef<HTMLElement>()
|
|
return (
|
|
<Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
|
|
<BallPiece pieceRef={ref}/>
|
|
</Draggable>
|
|
)
|
|
}
|
|
|
|
export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
|
|
return (
|
|
<div ref={pieceRef} className={`ball-div`} >
|
|
<Ball className={"ball"} />
|
|
</div>
|
|
)
|
|
}
|