can now remove player by scroll en dehors du terrain

front/components/editor/CourtPlayer.tsx

@@ -35,7 +35,6 @@ export default function CourtPlayer({
         <Draggable
             handle={".player-piece"}
             nodeRef={pieceRef}
-            bounds="parent"
             position={{ x, y }}
             onStop={() => {
                 const pieceBounds = pieceRef.current!.getBoundingClientRect()

front/views/Editor.tsx

@@ -269,16 +269,8 @@ function EditorView({
 
     const onBallDrop = (refBounds: DOMRect) => {
         if (!isBoundsOnCourt(refBounds)) {
-            setContent((content) => {
+            removeCourtBall()
-                const ballObj = content.objects.findIndex(
+            return
-                    (o) => o.type == "ball",
-                )
-                return {
-                    ...content,
-                    objects: content.objects.toSpliced(ballObj, 1),
-                }
-            })
-            setObjects([{ key: "ball" }])
         }
         const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
         if (playerCollidedIdx != -1) {
@@ -321,6 +313,48 @@ function EditorView({
         })
     }
 
+    const removePlayer = (player: Player) => {
+        setContent((content) => ({
+            ...content,
+            players: toSplicedPlayers(content.players, player, false),
+            objects: [...content.objects],
+        }))
+        let setter
+        switch (player.team) {
+            case Team.Opponents:
+                setter = setOpponents
+                break
+            case Team.Allies:
+                setter = setAllies
+        }
+        if (player.hasBall) {
+            setObjects([{ key: "ball" }])
+        }
+        setter((players) => [
+            ...players,
+            {
+                team: player.team,
+                pos: player.role,
+                key: player.role,
+            },
+        ])
+    }
+
+    const removeCourtBall = () => {
+        setContent((content) => {
+            const ballObj = content.objects.findIndex((o) => o.type == "ball")
+            return {
+                ...content,
+                players: content.players.map((player) => ({
+                    ...player,
+                    hasBall: false,
+                })),
+                objects: content.objects.toSpliced(ballObj, 1),
+            }
+        })
+        setObjects([{ key: "ball" }])
+    }
+
     return (
         <div id="main-div">
             <div id="topbar-div">
@@ -402,6 +436,13 @@ function EditorView({
                             }
                             courtRef={courtDivContentRef}
                             onPlayerChange={(player) => {
+                                const playerBounds = document
+                                    .getElementById(player.id)!
+                                    .getBoundingClientRect()
+                                if (!isBoundsOnCourt(playerBounds)) {
+                                    removePlayer(player)
+                                    return
+                                }
                                 setContent((content) => ({
                                     ...content,
                                     players: toSplicedPlayers(
@@ -412,49 +453,10 @@ function EditorView({
                                 }))
                             }}
                             onPlayerRemove={(player) => {
-                                setContent((content) => ({
+                                removePlayer(player)
-                                    ...content,
-                                    players: toSplicedPlayers(
-                                        content.players,
-                                        player,
-                                        false,
-                                    ),
-                                    objects: [...content.objects],
-                                }))
-                                let setter
-                                switch (player.team) {
-                                    case Team.Opponents:
-                                        setter = setOpponents
-                                        break
-                                    case Team.Allies:
-                                        setter = setAllies
-                                }
-                                if (player.hasBall) {
-                                    setObjects([{ key: "ball" }])
-                                }
-                                setter((players) => [
-                                    ...players,
-                                    {
-                                        team: player.team,
-                                        pos: player.role,
-                                        key: player.role,
-                                    },
-                                ])
                             }}
                             onBallRemove={() => {
-                                setContent((content) => {
+                                removeCourtBall()
-                                    const ballObj = content.objects.findIndex(
-                                        (o) => o.type == "ball",
-                                    )
-                                    return {
-                                        ...content,
-                                        objects: content.objects.toSpliced(
-                                            ballObj,
-                                            1,
-                                        ),
-                                    }
-                                })
-                                setObjects([{ key: "ball" }])
                             }}
                         />
                     </div>