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

@@ -8,22 +8,23 @@ import {
 } from "react"
 import "../style/editor.css"
 import TitleInput from "../components/TitleInput"
-import { BasketCourt } from "../components/editor/BasketCourt"
-
-
-import { BallPiece } from "../components/editor/BallPiece";
-import { Ball } from "../tactic/Ball";
-import { Rack } from "../components/Rack"
-import { PlayerPiece } from "../components/editor/PlayerPiece"
-import { Player } from "../tactic/Player"
-import { Tactic, TacticContent } from "../tactic/Tactic"
-import { fetchAPI } from "../Fetcher"
-import { Team } from "../tactic/Team"
-import { calculateRatio } from "../Utils"
+import {BasketCourt} from "../components/editor/BasketCourt"
+
+
+import {BallPiece} from "../components/editor/BallPiece";
+import {Ball} from "../tactic/Ball";
+import {Rack} from "../components/Rack"
+import {PlayerPiece} from "../components/editor/PlayerPiece"
+import {Player} from "../tactic/Player"
+import {Tactic, TacticContent} from "../tactic/Tactic"
+import {fetchAPI} from "../Fetcher"
+import {Team} from "../tactic/Team"
+import {calculateRatio} from "../Utils"
 import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
+import Draggable from "react-draggable";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -50,7 +51,7 @@ export default function Editor({
                                    id,
                                    name,
                                    content,
-}: {
+                               }: {
     id: number
     name: string
     content: string
@@ -66,7 +67,7 @@ export default function Editor({
 
     return (
         <EditorView
-            tactic={{ name: editorName, id, content: JSON.parse(editorContent) }}
+            tactic={{name: editorName, id, content: JSON.parse(editorContent)}}
             onContentChange={async (content: TacticContent) => {
                 if (isInGuestMode) {
                     localStorage.setItem(
@@ -75,7 +76,7 @@ export default function Editor({
                     )
                     return SaveStates.Guest
                 }
-                return fetchAPI(`tactic/${id}/save`, { content }).then((r) =>
+                return fetchAPI(`tactic/${id}/save`, {content}).then((r) =>
                     r.ok ? SaveStates.Ok : SaveStates.Err,
                 )
             }}
@@ -84,7 +85,7 @@ export default function Editor({
                     localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
                     return true //simulate that the name has been changed
                 }
-                return fetchAPI(`tactic/${id}/edit/name`, { name }).then(
+                return fetchAPI(`tactic/${id}/edit/name`, {name}).then(
                     (r) => r.ok,
                 )
             }}
@@ -94,10 +95,10 @@ export default function Editor({
 
 
 function EditorView({
-    tactic: { id, name, content: initialContent },
+                        tactic: {id, name, content: initialContent},
                         onContentChange,
                         onNameChange,
-}: EditorViewProps) {
+                    }: EditorViewProps) {
     const isInGuestMode = id == -1
 
     const [style, setStyle] = useState<CSSProperties>({})
@@ -113,8 +114,7 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
-
-    const [ball, setBall] = useState<Ball[]>([]);
+    const ballPiece = useRef<HTMLDivElement>(null)
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
@@ -136,13 +136,14 @@ function EditorView({
         const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
-        const { x, y } = calculateRatio(refBounds, courtBounds)
+        const {x, y} = calculateRatio(refBounds, courtBounds)
 
         setContent((content) => {
             return {
                 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 refBounds = ref.getBoundingClientRect();
-        const courtBounds = courtDivContentRef.current!.getBoundingClientRect();
+    const onElementDetachBall = () => {
+        const ballBounds = ballPiece.current!.getBoundingClientRect()
 
-        //check if we give the ball to a player on the court
-        if (!canDetach(ref)) {
-            return false;
+        for (const player of content.players) {
+            const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
+            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) {
-            const rightRatio = player
-        }*/
-        return false;
+            player.hasBall = true
         }
-
-    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,
-            }]
-        })
     }
 
 
@@ -193,7 +179,7 @@ function EditorView({
             <div id="topbar-div">
                 <div id="topbar-left">
                     LEFT
-                    <SavingState state={saveState} />
+                    <SavingState state={saveState}/>
                 </div>
                 <div id="title-input-div">
                     <TitleInput
@@ -216,25 +202,27 @@ function EditorView({
                         onChange={setAllies}
                         canDetach={canDetach}
                         onElementDetached={onPieceDetach}
-                        render={({ team, key }) => (
-                            <PlayerPiece team={team} text={key} key={key} />
+                        render={({team, key}) => (
+                            <PlayerPiece team={team} text={key} key={key}/>
                         )}
                     />
-                    <Rack
-                        id="ball-rack"
-                          objects={ball}
-                          onChange={setBall}
-                          canDetach={canDetachBall}
-                          onElementDetached={onElementDetachBall}
-                          render={({pos}) => <BallPiece key={pos}/>}/>
+
+                    <Draggable
+                        onStop={onElementDetachBall}
+                    >
+                        <div ref={ballPiece}>
+                            <BallPiece/>
+                        </div>
+                    </Draggable>
+
                     <Rack
                         id="opponent-rack"
                         objects={opponents}
                         onChange={setOpponents}
                         canDetach={canDetach}
                         onElementDetached={onPieceDetach}
-                        render={({ team, key }) => (
-                            <PlayerPiece team={team} text={key} key={key} />
+                        render={({team, key}) => (
+                            <PlayerPiece team={team} text={key} key={key}/>
                         )}
                     />
                 </div>
@@ -291,7 +279,7 @@ function getRackPlayers(team: Team, players: Player[]): RackedPlayer[] {
                 players.findIndex((p) => p.team == team && p.role == role) ==
                 -1,
         )
-        .map((key) => ({ team, key }))
+        .map((key) => ({team, key}))
 }
 
 function useContentState<S>(