push for trying to resolve problem

front/components/editor/BallPiece.tsx

@@ -1,21 +1,27 @@
-import React, { RefObject } from "react"
+import React, {RefObject, useRef} from "react"
 
 import "../../style/ball.css"
 
 import Ball from "../../assets/icon/ball.svg?react"
 import Draggable from "react-draggable"
 
-export interface BallPieceProps {
+export interface CourtBallProps {
-    onDrop: () => void
+    onDrop: (pos: DOMRect) => void
-    pieceRef: RefObject<HTMLDivElement>
 }
 
-export function BallPiece({ onDrop, pieceRef }: BallPieceProps) {
+export function CourtBall({ onDrop }: CourtBallProps) {
+    const ref = useRef<HTMLElement>()
     return (
-        <Draggable onStop={onDrop} nodeRef={pieceRef} position={{ x: 0, y: 0 }}>
+        <Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
-            <div className={`ball-div`} ref={pieceRef}>
+            <BallPiece pieceRef={ref}/>
-                <Ball className={"ball"} />
-            </div>
         </Draggable>
     )
 }
+
+export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
+    return (
+        <div ref={pieceRef} className={`ball-div`} >
+            <Ball className={"ball"} />
+        </div>
+    )
+}

front/components/editor/BasketCourt.tsx

@@ -2,11 +2,14 @@ import "../../style/basket_court.css"
 import { RefObject, useRef } from "react"
 import CourtPlayer from "./CourtPlayer"
 import { Player } from "../../tactic/Player"
+import {BallPiece, CourtBall} from "./BallPiece";
+import {Ball} from "../../tactic/Ball";
 
 export interface BasketCourtProps {
     players: Player[]
+    ball: Ball
     onPlayerRemove: (p: Player) => void
-    onBallDrop: (ref: HTMLDivElement) => void
+    onBallDrop: (b: DOMRect) => void
     onPlayerChange: (p: Player) => void
     courtImage: string
     courtRef: RefObject<HTMLDivElement>
@@ -14,12 +17,14 @@ export interface BasketCourtProps {
 
 export function BasketCourt({
     players,
+    ball,
     onPlayerRemove,
     onBallDrop,
     onPlayerChange,
     courtImage,
     courtRef,
 }: BasketCourtProps) {
+
     return (
         <div
             id="court-container"
@@ -38,6 +43,7 @@ export function BasketCourt({
                     />
                 )
             })}
+            <CourtBall ball={ball}/>
         </div>
     )
 }

front/components/editor/CourtPlayer.tsx

@@ -1,6 +1,5 @@
 import { RefObject, useRef, useState } from "react"
 import "../../style/player.css"
-import RemoveIcon from "../../assets/icon/remove.svg?react"
 import { BallPiece } from "./BallPiece"
 import Draggable from "react-draggable"
 import { PlayerPiece } from "./PlayerPiece"
@@ -11,7 +10,7 @@ export interface PlayerProps {
     player: Player
     onChange: (p: Player) => void
     onRemove: () => void
-    onBallDrop: (ref: HTMLDivElement) => void
+    onBallDrop: (b: DOMRect) => void
     parentRef: RefObject<HTMLDivElement>
 }
 
@@ -26,7 +25,6 @@ export default function CourtPlayer({
     parentRef,
 }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
-    const ballPiece = useRef<HTMLDivElement>(null)
 
     const x = player.rightRatio
     const y = player.bottomRatio
@@ -69,14 +67,10 @@ export default function CourtPlayer({
                         if (e.key == "Delete") onRemove()
                     }}>
                     <div className="player-selection-tab">
-                        <RemoveIcon
-                            className="player-selection-tab-remove"
-                            onClick={onRemove}
-                        />
                         {hasBall && (
                             <BallPiece
-                                onDrop={() => onBallDrop(ballPiece.current!)}
+                                onDrop={() => onBallDrop(ball)}
-                                pieceRef={ballPiece}
+                                pieceRef={ball}
                             />
                         )}
                     </div>

front/tactic/Ball.ts

@@ -2,10 +2,10 @@ export interface Ball {
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
      */
-    bottom_percentage: number
+    bottomRatio: number
 
     /**
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
-    right_percentage: number
+    rightRatio: number
 }

front/tactic/Tactic.ts

@@ -1,4 +1,5 @@
 import { Player } from "./Player"
+import {Ball} from "./Ball";
 
 export interface Tactic {
     id: number
@@ -8,4 +9,5 @@ export interface Tactic {
 
 export interface TacticContent {
     players: Player[]
+    ball : Ball
 }

front/views/Editor.tsx

@@ -16,7 +16,9 @@ import halfCourt from "../assets/court/half_court.svg"
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
 
-import { BallPiece } from "../components/editor/BallPiece"
+import {BallPiece, CourtBall} from "../components/editor/BallPiece";
+
+
 import { Player } from "../tactic/Player"
 import { Tactic, TacticContent } from "../tactic/Tactic"
 import { fetchAPI } from "../Fetcher"
@@ -26,7 +28,8 @@ import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
-import * as Console from "console";
+import {Ball} from "../tactic/Ball";
+import Draggable from "react-draggable";
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -57,7 +60,12 @@ interface RackedPlayer {
     key: string
 }
 
-export default function Editor({ id, name, courtType, content }: EditorProps) {
+export default function Editor({
+                                   id,
+                                   name,
+                                   courtType,
+                                   content,
+                               }: EditorProps) {
     const isInGuestMode = id == -1
 
     const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
@@ -96,17 +104,17 @@ export default function Editor({ id, name, courtType, content }: EditorProps) {
                     (r) => r.ok,
                 )
             }}
-            courtType={courtType}
+            courtType={courtType}/>
-        />
     )
 }
 
 function EditorView({
-    tactic: { id, name, content: initialContent },
+                        tactic: {id, name, content: initialContent},
-    onContentChange,
+                        onContentChange,
-    onNameChange,
+                        onNameChange,
-    courtType,
+                        courtType,
-}: EditorViewProps) {
+                    }: EditorViewProps) {
+
     const isInGuestMode = id == -1
 
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
@@ -131,16 +139,15 @@ function EditorView({
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
-    const canDetach = (ref: HTMLDivElement) => {
+    const canDetach = (bounds: DOMRect) => {
-        const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
         // check if refBounds overlaps courtBounds
         return !(
-            refBounds.top > courtBounds.bottom ||
+            bounds.top > courtBounds.bottom ||
-            refBounds.right < courtBounds.left ||
+            bounds.right < courtBounds.left ||
-            refBounds.bottom < courtBounds.top ||
+            bounds.bottom < courtBounds.top ||
-            refBounds.left > courtBounds.right
+            bounds.left > courtBounds.right
         )
     }
 
@@ -163,18 +170,21 @@ function EditorView({
                         hasBall: false,
                     },
                 ],
+                ball: content.ball
             }
         })
     }
 
-    const onBallDrop = (ref: HTMLDivElement) => {
+
-        const ballBounds = ref.getBoundingClientRect()
+
+
+    const onBallDrop = (ballBounds: DOMRect) => {
         let ballAssigned = false
 
-        setContent((content) => {
+        setContent(content => {
-            const players = content.players.map((player) => {
+            const players = content.players.map(player => {
                 if (ballAssigned) {
-                    return { ...player, hasBall: false }
+                    return {...player, hasBall: false}
                 }
                 const playerBounds = document
                     .getElementById(player.id)!
@@ -190,8 +200,7 @@ function EditorView({
                 }
                 return { ...player, hasBall: doesOverlap }
             })
-            setShowBall(!ballAssigned)
+            return {players: players, ball: content.ball}
-            return { players: players }
         })
     }
 
@@ -200,7 +209,8 @@ function EditorView({
             <div id="topbar-div">
                 <div id="topbar-left">
 
-                    <SavingState state={saveState} />
+                    <SavingState state={saveState}/>
+
                 </div>
                 <div id="title-input-div">
                     <TitleInput
@@ -233,12 +243,11 @@ function EditorView({
                         )}
                     />
 
-                    {showBall && (
+                    {rackBall && <CourtBall onDrop={pos => {
-                        <BallPiece
+                        if (canDetach(pos)) {
-                            onDrop={() => onBallDrop(ballPiece.current!)}
+                            onBallDetach(pos)
-                            pieceRef={ballPiece}
+                        }
-                        />
+                    }}/>}
-                    )}
 
                     <Rack
                         id="opponent-rack"
@@ -260,6 +269,7 @@ function EditorView({
                     <div id="court-div-bounds">
                         <BasketCourt
                             players={content.players}
+                            ball={content.ball}
                             onBallDrop={onBallDrop}
                             courtImage={
                                 courtType == "PLAIN" ? plainCourt : halfCourt
@@ -272,6 +282,7 @@ function EditorView({
                                         player,
                                         true,
                                     ),
+                                    ball: content.ball
                                 }))
                             }}
                             onPlayerRemove={(player) => {
@@ -281,6 +292,7 @@ function EditorView({
                                         player,
                                         false,
                                     ),
+                                    ball: content.ball
                                 }))
                                 let setter
                                 switch (player.team) {
@@ -293,6 +305,7 @@ function EditorView({
                                 if (player.hasBall) {
                                     setShowBall(true)
                                 }
+
                                 setter((players) => [
                                     ...players,
                                     {