push for trying to resolve problem

front/components/editor/BallPiece.tsx

@@ -1,9 +1,15 @@
+<<<<<<< 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
@@ -11,4 +17,24 @@ 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,6 +3,7 @@ import { RefObject } from "react"
 import CourtPlayer from "./CourtPlayer"
 
 import { Player } from "../../tactic/Player"
+<<<<<<< HEAD
 import { CourtObject } from "../../tactic/CourtObjects"
 import { CourtBall } from "./CourtBall"
 
@@ -11,6 +12,16 @@ 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
@@ -23,7 +34,11 @@ export interface BasketCourtProps {
 
 export function BasketCourt({
     players,
+<<<<<<< HEAD
     objects,
+=======
+    ball,
+>>>>>>> 7fa76bf (push for trying to resolve problem)
     onPlayerRemove,
     onBallRemove,
     onBallMoved,
@@ -31,6 +46,7 @@ export function BasketCourt({
     courtImage,
     courtRef,
 }: BasketCourtProps) {
+
     return (
         <div
             id="court-container"
@@ -49,6 +65,7 @@ export function BasketCourt({
                     />
                 )
             })}
+<<<<<<< HEAD
 
             {objects.map((object) => {
                 if (object.type == "ball") {
@@ -63,6 +80,9 @@ 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,7 +10,11 @@ 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>
 }
 
@@ -25,7 +29,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
@@ -68,6 +71,7 @@ export default function CourtPlayer({
                     }}>
                     <div className="player-selection-tab">
                         {hasBall && (
+<<<<<<< HEAD
                             <Draggable
                                 nodeRef={ballPiece}
                                 onStop={() =>
@@ -80,6 +84,12 @@ 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,9 +9,18 @@ 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,5 +1,9 @@
 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
@@ -9,5 +13,9 @@ export interface Tactic {
 
 export interface TacticContent {
     players: Player[]
+<<<<<<< HEAD
     objects: CourtObject[]
+=======
+    ball : Ball
+>>>>>>> 7fa76bf (push for trying to resolve problem)
 }

front/views/Editor.tsx

@@ -14,7 +14,9 @@ import plainCourt from "../assets/court/full_court.svg"
 import halfCourt from "../assets/court/half_court.svg"
 
 
-import { BallPiece } from "../components/editor/BallPiece"
+import {BallPiece, CourtBall} from "../components/editor/BallPiece";
+
+
 
 import { Rack } from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
@@ -29,7 +31,6 @@ import SavingState, {
     SaveState,
     SaveStates,
 } from "../components/editor/SavingState"
-import * as Console from "console";
 
 import {CourtObject} from "../tactic/CourtObjects";
 
@@ -122,6 +123,7 @@ function EditorView({
     onNameChange,
     courtType,
 }: EditorViewProps) {
+
     const isInGuestMode = id == -1
 
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
@@ -146,6 +148,11 @@ function EditorView({
 
 
     const isBoundsOnCourt = (bounds: DOMRect) => {
+    const rackBallRef = useRef<HTMLDivElement>(null)
+    const [rackBall, setRackBall] = useState<boolean>(true)
+    const courtDivContentRef = useRef<HTMLDivElement>(null)
+
+    const canDetach = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
         // check if refBounds overlaps courtBounds
@@ -177,12 +184,12 @@ function EditorView({
                         hasBall: false,
                     },
                 ],
+                ball: content.ball
             }
         })
     }
 
     const onObjectDetach = (
-        ref: HTMLDivElement,
         rackedObject: RackedCourtObject,
     ) => {
         const refBounds = ref.getBoundingClientRect()
@@ -228,6 +235,44 @@ function EditorView({
                 ...content,
                 objects: [...content.objects, courtObject],
             }
+
+    const onBallDetach = (pos: DOMRect) => {
+        const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
+
+        const {x, y} = calculateRatio(pos, courtBounds)
+
+        setContent((content) => {
+            return {
+                players: content.players,
+                ball: {
+                    rightRatio: x,
+                    bottomRatio: y
+                }
+            }
+        })
+    }
+
+    const onBallDrop = (ballBounds: DOMRect) => {
+        let ballAssigned = false
+
+        setContent(content => {
+            const players = content.players.map(player => {
+                if (ballAssigned) {
+                    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}
         })
     }
 
@@ -362,7 +407,7 @@ function EditorView({
                 <div id="topbar-left">
 
                     <SavingState state={saveState}/>
-                    
+
                 </div>
                 <div id="title-input-div">
                     <TitleInput
@@ -451,6 +496,7 @@ function EditorView({
                                         player,
                                         true,
                                     ),
+                                    ball: content.ball
                                 }))
                             }}
                             onPlayerRemove={(player) => {