can assign ball to a player, player with ball is surrounded

front/components/editor/BallPiece.tsx

@@ -1,13 +1,26 @@
-import React from "react";
+import React, {RefObject} from "react";
 
 import "../../style/ball.css";
 
 import Ball from "../../assets/icon/ball.svg?react";
+import Draggable from "react-draggable";
 
-export function BallPiece() {
+export interface BallPieceProps {
+    onDrop: () => void
+    pieceRef: RefObject<HTMLDivElement>
+}
+
+
+export function BallPiece({onDrop, pieceRef}: BallPieceProps) {
     return (
-        <div className={`ball-div`}>
-            <Ball id={'ball'}/>
-        </div>
+        <Draggable
+            onStop={onDrop}
+            nodeRef={pieceRef}
+            position={{x: 0, y: 0}}
+        >
+            <div className={`ball-div`} ref={pieceRef}>
+                <Ball className={'ball'}/>
+            </div>
+        </Draggable>
     )
 }

front/components/editor/BasketCourt.tsx

@@ -8,12 +8,14 @@ import { Player } from "../../tactic/Player"
 export interface BasketCourtProps {
     players: Player[]
     onPlayerRemove: (p: Player) => void
+    onBallDrop: (ref : HTMLDivElement) => void
     onPlayerChange: (p: Player) => void
 }
 
 export function BasketCourt({
     players,
     onPlayerRemove,
+    onBallDrop,
     onPlayerChange,
 }: BasketCourtProps) {
     const divRef = useRef<HTMLDivElement>(null)
@@ -28,6 +30,7 @@ export function BasketCourt({
                         player={player}
                         onChange={onPlayerChange}
                         onRemove={() => onPlayerRemove(player)}
+                        onBallDrop={onBallDrop}
                         parentRef={divRef}
                     />
                 )

front/components/editor/CourtPlayer.tsx

@@ -1,7 +1,7 @@
 import { RefObject, useRef, useState } from "react"
 import "../../style/player.css"
 import RemoveIcon from "../../assets/icon/remove.svg?react"
-import BallIcon from "../../assets/icon/ball.svg?react"
+import {BallPiece} from "./BallPiece";
 import Draggable from "react-draggable"
 import { PlayerPiece } from "./PlayerPiece"
 import { Player } from "../../tactic/Player"
@@ -11,6 +11,7 @@ export interface PlayerProps {
     player: Player
     onChange: (p: Player) => void
     onRemove: () => void
+    onBallDrop: (ref: HTMLDivElement) => void
     parentRef: RefObject<HTMLDivElement>
 }
 
@@ -21,12 +22,15 @@ export default function CourtPlayer({
                                         player,
                                         onChange,
                                         onRemove,
+                                        onBallDrop,
                                         parentRef,
                                     }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
+    const ballPiece = useRef<HTMLDivElement>(null)
 
     const x = player.rightRatio
     const y = player.bottomRatio
+    const hasBall = player.hasBall
 
     return (
         <Draggable
@@ -40,6 +44,7 @@ export default function CourtPlayer({
 
                 const { x, y } = calculateRatio(pieceBounds, parentBounds)
 
+
                 onChange({
                     id : player.id,
                     rightRatio: x,
@@ -68,8 +73,9 @@ export default function CourtPlayer({
                             className="player-selection-tab-remove"
                             onClick={onRemove}
                         />
+                        {hasBall && <BallPiece onDrop={() => onBallDrop(ballPiece.current!)} pieceRef={ballPiece}/>}
                     </div>
-                    <PlayerPiece team={player.team} text={player.role} />
+                    <PlayerPiece team={player.team} text={player.role} hasBall={hasBall}/>
                 </div>
             </div>
         </Draggable>

front/components/editor/PlayerPiece.tsx

@@ -2,9 +2,20 @@ import React from "react"
 import "../../style/player.css"
 import { Team } from "../../tactic/Team"
 
-export function PlayerPiece({ team, text }: { team: Team; text: string }) {
+export interface PlayerPieceProps {
+    team: Team
+    text: string
+    hasBall : boolean
+}
+
+export function PlayerPiece({ team, text, hasBall}: PlayerPieceProps) {
+    let className = `player-piece ${team}`
+    if (hasBall) {
+        className += ` player-piece-has-ball`
+    }
+
     return (
-        <div className={`player-piece ${team}`}>
+        <div className={className}>
             <p>{text}</p>
         </div>
     )

front/style/ball.css

@@ -1,8 +1,10 @@
-#ball * {
+.ball * {
     fill: #c5520d;
 }
 
-#ball {
+.ball {
+    pointer-events: all;
     width: 20px;
     height: 20px;
+    cursor: pointer;
 }

front/style/player.css

@@ -24,10 +24,6 @@ on the court.
     color: var(--selected-team-secondarycolor);
 
     border-radius: 100px;
-    /*
-    border-width: 2px;
-    border-style: solid;
-    */
 
     width: 20px;
     height: 20px;
@@ -40,6 +36,11 @@ on the court.
     user-select: none;
 }
 
+.player-piece-has-ball {
+    border-width: 2px;
+    border-style: solid;
+}
+
 .player-selection-tab {
     display: flex;
 

front/views/Editor.tsx

@@ -114,6 +114,8 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
+    const [showBall, setShowBall] = useState(true)
+
     const ballPiece = useRef<HTMLDivElement>(null)
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
@@ -155,22 +157,29 @@ function EditorView({
         })
     }
 
-    const onElementDetachBall = () => {
-        const ballBounds = ballPiece.current!.getBoundingClientRect()
-
-        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
-            }
-            player.hasBall = true
-        }
+    const onBallDrop = (ref : HTMLDivElement) => {
+        const ballBounds = ref.getBoundingClientRect()
+        let showBall = true
+
+        setContent(content => {
+            const players =  content.players.map(player => {
+                const playerBounds = document.getElementById(player.id)!.getBoundingClientRect()
+                const doesOverlap = !(
+                    ballBounds.top > playerBounds.bottom ||
+                    ballBounds.right < playerBounds.left ||
+                    ballBounds.bottom < playerBounds.top ||
+                    ballBounds.left > playerBounds.right
+                )
+                if(doesOverlap) {
+                    showBall = false
+
+                }
+
+                return {...player, hasBall: doesOverlap}
+            })
+            setShowBall(showBall)
+            return {players: players}
+        })
     }
 
 
@@ -203,17 +212,11 @@ function EditorView({
                         canDetach={canDetach}
                         onElementDetached={onPieceDetach}
                         render={({team, key}) => (
-                            <PlayerPiece team={team} text={key} key={key}/>
+                            <PlayerPiece team={team} text={key} key={key} hasBall={false}/>
                         )}
                     />
 
-                    <Draggable
-                        onStop={onElementDetachBall}
-                    >
-                        <div ref={ballPiece}>
-                            <BallPiece/>
-                        </div>
-                    </Draggable>
+                    {showBall && <BallPiece onDrop={() => onBallDrop(ballPiece.current!)} pieceRef={ballPiece}/>}
 
                     <Rack
                         id="opponent-rack"
@@ -222,7 +225,7 @@ function EditorView({
                         canDetach={canDetach}
                         onElementDetached={onPieceDetach}
                         render={({team, key}) => (
-                            <PlayerPiece team={team} text={key} key={key}/>
+                            <PlayerPiece team={team} text={key} key={key} hasBall={false}/>
                         )}
                     />
                 </div>
@@ -230,6 +233,7 @@ function EditorView({
                     <div id="court-div-bounds" ref={courtDivContentRef}>
                         <BasketCourt
                             players={content.players}
+                            onBallDrop={onBallDrop}
                             onPlayerChange={(player) => {
                                 setContent((content) => ({
                                     players: toSplicedPlayers(
@@ -264,6 +268,7 @@ function EditorView({
                                     },
                                 ])
                             }}
+
                         />
                     </div>
                 </div>