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.
Application-Web/front/components/editor/BallPiece.tsx

41 lines
1.0 KiB

<<<<<<< HEAD
=======
import React, {RefObject, useRef} from "react"
>>>>>>> 7fa76bf (push for trying to resolve problem)
import "../../style/ball.css"
import BallSvg from "../../assets/icon/ball.svg?react"
import { Ball } from "../../tactic/CourtObjects"
export interface CourtBallProps {
<<<<<<< HEAD
onMoved: (rect: DOMRect) => void
onRemove: () => void
ball: Ball
}
export function BallPiece() {
return <BallSvg className={"ball"} />
=======
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>
)
>>>>>>> 7fa76bf (push for trying to resolve problem)
}
export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
return (
<div ref={pieceRef} className={`ball-div`} >
<Ball className={"ball"} />
</div>
)
}