fix ball drop issues

front/components/editor/BallPiece.tsx

@@ -1,15 +1,9 @@
-<<<<<<< HEAD
-=======
-import React, {RefObject, useRef} from "react"
-
->>>>>>> 7fa76bf (push for trying to resolve problem)
 import "../../style/ball.css"
 
 import BallSvg from "../../assets/icon/ball.svg?react"
 import { Ball } from "../../tactic/CourtObjects"
 
 export interface CourtBallProps {
-<<<<<<< HEAD
     onMoved: (rect: DOMRect) => void
     onRemove: () => void
     ball: Ball
@@ -17,24 +11,4 @@ export interface CourtBallProps {
 
 export function BallPiece() {
     return <BallSvg className={"ball"} />
-=======
-    onDrop: (pos: DOMRect) => void
-}
-
-export function CourtBall({ onDrop }: CourtBallProps) {
-    const ref = useRef<HTMLElement>()
-    return (
-        <Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
-            <BallPiece pieceRef={ref}/>
-        </Draggable>
-    )
->>>>>>> 7fa76bf (push for trying to resolve problem)
-}
-
-export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
-    return (
-        <div ref={pieceRef} className={`ball-div`} >
-            <Ball className={"ball"} />
-        </div>
-    )
 }

front/components/editor/BasketCourt.tsx

@@ -3,7 +3,6 @@ import { RefObject } from "react"
 import CourtPlayer from "./CourtPlayer"
 
 import { Player } from "../../tactic/Player"
-<<<<<<< HEAD
 import { CourtObject } from "../../tactic/CourtObjects"
 import { CourtBall } from "./CourtBall"
 
@@ -12,16 +11,6 @@ export interface BasketCourtProps {
     objects: CourtObject[]
 
     onPlayerRemove: (p: Player) => void
-=======
-import {BallPiece, CourtBall} from "./BallPiece";
-import {Ball} from "../../tactic/Ball";
-
-export interface BasketCourtProps {
-    players: Player[]
-    ball: Ball
-    onPlayerRemove: (p: Player) => void
-    onBallDrop: (b: DOMRect) => void
->>>>>>> 7fa76bf (push for trying to resolve problem)
     onPlayerChange: (p: Player) => void
 
     onBallRemove: () => void
@@ -34,19 +23,14 @@ export interface BasketCourtProps {
 
 export function BasketCourt({
                                 players,
-<<<<<<< HEAD
                                 objects,
-=======
-    ball,
->>>>>>> 7fa76bf (push for trying to resolve problem)
                                 onPlayerRemove,
                                 onBallRemove,
                                 onBallMoved,
                                 onPlayerChange,
                                 courtImage,
                                 courtRef,
-}: BasketCourtProps) {
+                            }: BasketCourtProps) {
-
     return (
         <div
             id="court-container"
@@ -65,7 +49,6 @@ export function BasketCourt({
                     />
                 )
             })}
-<<<<<<< HEAD
 
             {objects.map((object) => {
                 if (object.type == "ball") {
@@ -80,9 +63,6 @@ export function BasketCourt({
                 }
                 throw new Error("unknown court object", object.type)
             })}
-=======
-            <CourtBall ball={ball}/>
->>>>>>> 7fa76bf (push for trying to resolve problem)
         </div>
     )
 }

front/components/editor/CourtPlayer.tsx

@@ -10,11 +10,7 @@ export interface PlayerProps {
     player: Player
     onChange: (p: Player) => void
     onRemove: () => void
-<<<<<<< HEAD
     onBallDrop: (bounds: DOMRect) => void
-=======
-    onBallDrop: (b: DOMRect) => void
->>>>>>> 7fa76bf (push for trying to resolve problem)
     parentRef: RefObject<HTMLDivElement>
 }
 
@@ -27,8 +23,9 @@ export default function CourtPlayer({
                                         onRemove,
                                         onBallDrop,
                                         parentRef,
-}: PlayerProps) {
+                                    }: PlayerProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
+    const ballPiece = useRef<HTMLDivElement>(null)
 
     const x = player.rightRatio
     const y = player.bottomRatio
@@ -71,7 +68,6 @@ export default function CourtPlayer({
                     }}>
                     <div className="player-selection-tab">
                         {hasBall && (
-<<<<<<< HEAD
                             <Draggable
                                 nodeRef={ballPiece}
                                 onStop={() =>
@@ -84,12 +80,6 @@ export default function CourtPlayer({
                                     <BallPiece />
                                 </div>
                             </Draggable>
-=======
-                            <BallPiece
-                                onDrop={() => onBallDrop(ball)}
-                                pieceRef={ball}
-                            />
->>>>>>> 7fa76bf (push for trying to resolve problem)
                         )}
                     </div>
                     <PlayerPiece

front/tactic/CourtObjects.ts

@@ -9,18 +9,9 @@ export interface Ball {
     /**
      * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
      */
-<<<<<<< HEAD:front/tactic/CourtObjects.ts
     readonly bottomRatio: number
     /**
      * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
      */
     readonly rightRatio: number
-=======
-    bottomRatio: number
-
-    /**
-     * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
-     */
-    rightRatio: number
->>>>>>> 7fa76bf (push for trying to resolve problem):front/tactic/Ball.ts
 }

front/tactic/Tactic.ts

@@ -1,9 +1,5 @@
 import { Player } from "./Player"
-<<<<<<< HEAD
 import { CourtObject } from "./CourtObjects"
-=======
-import {Ball} from "./Ball";
->>>>>>> 7fa76bf (push for trying to resolve problem)
 
 export interface Tactic {
     id: number
@@ -13,9 +9,5 @@ export interface Tactic {
 
 export interface TacticContent {
     players: Player[]
-<<<<<<< HEAD
     objects: CourtObject[]
-=======
-    ball : Ball
->>>>>>> 7fa76bf (push for trying to resolve problem)
 }

front/views/Editor.tsx

@@ -1,11 +1,4 @@
-import {
+import {CSSProperties, Dispatch, SetStateAction, useCallback, useRef, useState,} from "react"
-    CSSProperties,
-    Dispatch,
-    SetStateAction,
-    useCallback,
-    useRef,
-    useState,
-} from "react"
 import "../style/editor.css"
 import TitleInput from "../components/TitleInput"
 import { BasketCourt } from "../components/editor/BasketCourt"
@@ -16,8 +9,6 @@ import halfCourt from "../assets/court/half_court.svg"
 
 import {BallPiece, CourtBall} from "../components/editor/BallPiece";
 
-
-
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
 import { Player } from "../tactic/Player"
@@ -66,7 +57,6 @@ interface RackedPlayer {
 
 type RackedCourtObject = { key: "ball" }
 
-
 export default function Editor({
                                    id,
                                    name,
@@ -139,17 +129,12 @@ function EditorView({
     const [opponents, setOpponents] = useState(
         getRackPlayers(Team.Opponents, content.players),
     )
-
+    const [objects, setObjects] = useState<RackedCourtObject[]>([{key: "ball"}])
-    const [objects, setObjects] = useState<RackedCourtObject[]>(
-        isBallOnCourt(content) ? [] : [{ key: "ball" }],
-    )
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
 
     const isBoundsOnCourt = (bounds: DOMRect) => {
-    const rackBallRef = useRef<HTMLDivElement>(null)
-    const [rackBall, setRackBall] = useState<boolean>(true)
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
     const canDetach = (bounds: DOMRect) => {
@@ -184,7 +169,6 @@ function EditorView({
                         hasBall: false,
                     },
                 ],
-                ball: content.ball
             }
         })
     }
@@ -236,46 +220,37 @@ function EditorView({
                 objects: [...content.objects, courtObject],
             }
 
-    const onBallDetach = (pos: DOMRect) => {
+    const onObjectDetach = (ref: HTMLDivElement, rackedObject: RackedCourtObject) => {
+        const refBounds = ref.getBoundingClientRect()
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
-        const {x, y} = calculateRatio(pos, courtBounds)
+        const {x, y} = calculateRatio(refBounds, courtBounds)
 
-        setContent((content) => {
+        let courtObject: CourtObject
-            return {
+
-                players: content.players,
+
-                ball: {
+        switch (rackedObject.key) {
+            case "ball":
+                courtObject = {
+                    type: "ball",
                     rightRatio: x,
                     bottomRatio: y
                 }
-            }
+                break
-        })
+            default:
+                throw new Error("unknown court object ", rackedObject.key)
         }
 
-    const onBallDrop = (ballBounds: DOMRect) => {
+        setContent((content) =>
-        let ballAssigned = false
+            ({
-
+                ...content,
-        setContent(content => {
+                objects: [
-            const players = content.players.map(player => {
+                    ...content.objects,
-                if (ballAssigned) {
+                    courtObject,
-                    return {...player, hasBall: false}
+                ]
-                }
-                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) {
-                    ballAssigned = true
-                }
-                return {...player, hasBall: doesOverlap}
-            })
-            return {players: players, ball: content.ball}
             })
+        )
     }
-
     const getPlayerCollided = (
         bounds: DOMRect,
         players: Player[],
@@ -496,7 +471,6 @@ function EditorView({
                                         player,
                                         true,
                                     ),
-                                    ball: content.ball
                                 }))
                             }}
                             onPlayerRemove={(player) => {
@@ -513,6 +487,7 @@ function EditorView({
     )
 }
 
+
 function isBallOnCourt(content: TacticContent) {
     if (content.players.findIndex((p) => p.hasBall) != -1) {
         return true
@@ -522,7 +497,7 @@ function isBallOnCourt(content: TacticContent) {
 
 function renderCourtObject(courtObject: RackedCourtObject) {
     if (courtObject.key == "ball") {
-        return <BallPiece />
+        return <BallPiece/>
     }
     throw new Error("unknown racked court object ", courtObject.key)
 }