can assign ball to player in the code (need render and destroy ball now)

front/components/editor/BallPiece.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import "../../style/ball.css";
 
-import Ball from "../../assets/icon/ball.svg";
+import Ball from "../../assets/icon/ball.svg?react";
 
 export function BallPiece() {
     return (

front/components/editor/CourtPlayer.tsx

@@ -21,7 +21,6 @@ export default function CourtPlayer({
                                         player,
                                         onChange,
                                         onRemove,
-                                        assignBall,
                                         parentRef,
                                     }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
@@ -42,11 +41,12 @@ export default function CourtPlayer({
                 const { x, y } = calculateRatio(pieceBounds, parentBounds)
 
                 onChange({
+                    id : player.id,
                     rightRatio: x,
                     bottomRatio: y,
                     team: player.team,
                     role: player.role,
-                    hasBall: false
+                    hasBall: player.hasBall
                 })
             }}>
             <div
@@ -57,7 +57,7 @@ export default function CourtPlayer({
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
                 }}>
-                <div
+                <div id={player.id}
                     tabIndex={0}
                     className="player-content"
                     onKeyUp={(e) => {

front/tactic/Player.ts

@@ -1,6 +1,8 @@
 import { Team } from "./Team"
 
 export interface Player {
+
+    id : string
     /**
      * the player's team
      * */

front/views/Editor.tsx

@@ -24,6 +24,7 @@ import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
+import Draggable from "react-draggable";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -113,8 +114,7 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
-
+    const ballPiece = useRef<HTMLDivElement>(null)
-    const [ball, setBall] = useState<Ball[]>([]);
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
@@ -143,6 +143,7 @@ function EditorView({
                 players: [
                     ...content.players,
                     {
+                        id: "player-" + content.players.length,
                         team: element.team,
                         role: element.key,
                         rightRatio: x,
@@ -154,37 +155,22 @@ function EditorView({
         })
     }
 
-    const canDetachBall = (ref: HTMLDivElement) => {
+    const onElementDetachBall = () => {
-        const refBounds = ref.getBoundingClientRect();
+        const ballBounds = ballPiece.current!.getBoundingClientRect()
-        const courtBounds = courtDivContentRef.current!.getBoundingClientRect();
 
-        //check if we give the ball to a player on the court
+        for (const player of content.players) {
-        if (!canDetach(ref)) {
+            const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
-            return false;
+            const doesNotOverlap = (
+                ballBounds.top > playerBounds.bottom ||
+                ballBounds.right < playerBounds.left ||
+                ballBounds.bottom < playerBounds.top ||
+                ballBounds.left > playerBounds.right
+            )
+            if (doesNotOverlap) {
+                continue
             }
-        /*for(const player in players) {
+            player.hasBall = true
-            const rightRatio = player
-        }*/
-        return false;
         }
-
-    const onElementDetachBall = (ref: HTMLDivElement) => {
-        const refBounds = ref.getBoundingClientRect()
-        const courtBounds = courtDivContentRef.current!.getBoundingClientRect();
-
-        const relativeXPixels = refBounds.x - courtBounds.x;
-        const relativeYPixels = refBounds.y - courtBounds.y;
-
-        const xPercent = relativeXPixels / courtBounds.width;
-        const yPercent = relativeYPixels / courtBounds.height;
-
-
-        setBall(ball => {
-            return [...ball, {
-                right_percentage: xPercent,
-                bottom_percentage: yPercent,
-            }]
-        })
     }
 
 
@@ -220,13 +206,15 @@ function EditorView({
                             <PlayerPiece team={team} text={key} key={key}/>
                         )}
                     />
-                    <Rack
+
-                        id="ball-rack"
+                    <Draggable
-                          objects={ball}
+                        onStop={onElementDetachBall}
-                          onChange={setBall}
+                    >
-                          canDetach={canDetachBall}
+                        <div ref={ballPiece}>
-                          onElementDetached={onElementDetachBall}
+                            <BallPiece/>
-                          render={({pos}) => <BallPiece key={pos}/>}/>
+                        </div>
+                    </Draggable>
+
                     <Rack
                         id="opponent-rack"
                         objects={opponents}