Add arrows to drag and drop on the court

+                    parentBase,
+                )
+
+            const setControlPointPos = (newPos: Pos | undefined) => {

+    return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2)
+}
+
+export function size(vector: Pos): number {

+ */
+export function angle(a: Pos, b: Pos): number {
+    const r = relativeTo(a, b)
+    return Math.atan2(r.x, r.y)

+    }
+}
+
+export function between(a: Pos, b: Pos): Pos {

+    }
+}
+
+export function rotate(vec: Pos, deg: number): Pos {

+export function rotate(vec: Pos, deg: number): Pos {
+    return {
+        x: Math.cos(deg * vec.x) - Math.sin(deg * vec.y),
+        y: Math.sin(deg * vec.x) + Math.cos(deg * vec.y),

+import React from "react"

+import { NULL_POS, ratioWithinBase } from "../arrows/Pos"
 
-export interface PlayerProps {
+export interface PlayerProps<A extends ReactNode> {

+    return (args: A) => {
+        clearTimeout(task)
+        return new Promise((resolve) => {
+            task = setTimeout(() => f(args).then(resolve), delay)

     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
+    "react-xarrows": "^2.0.2",

   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.0",
-    "vite-plugin-svgr": "^4.1.0",
+    "eslint-plugin-react-hooks": "^4.6.0",

+    // If the (original) segments changes, overwrite the current ones.
+    useLayoutEffect(() => {
+        setInternalSegments(computeInternalSegments(segments))
+    }, [startPos, segments])

+        startRadius,
+        endRadius,
+        style,
+    ])

+    }, [update, containerRef])
+
+    // Inserts a segment where the mouse double clicks on the arrow
+    useEffect(() => {

+        pathRef?.current?.addEventListener("dblclick", addSegment)
+
+        return () => {
+            pathRef?.current?.removeEventListener("dblclick", addSegment)

  * A player that is placed on the court, which can be selected, and moved in the associated bounds
  * */
-export default function CourtPlayer({
+export default function CourtPlayer<A extends ReactNode>({

                     role: player.role,
                     hasBall: player.hasBall,
-                })
+                } as Player)