apply suggestions

.gitignore

@@ -8,6 +8,7 @@ vendor
 composer.lock
 *.phar
 /dist
+.guard
 
 # sqlite database files
 *.sqlite

front/components/arrows/BendableArrow.tsx

@@ -7,6 +7,7 @@ import {
     useLayoutEffect,
     useRef,
     useState,
+    MouseEvent as ReactMouseEvent,
 } from "react"
 import {
     add,
@@ -398,14 +399,12 @@ export default function BendableArrow({
         }
     }, [update, containerRef])
 
-    // Inserts a segment where the mouse double clicks on the arrow
+    const addSegment = useCallback(
-    useEffect(() => {
+        (e: ReactMouseEvent) => {
             if (forceStraight) return
-
-        const addSegment = (e: MouseEvent) => {
             const parentBase = area.current!.getBoundingClientRect()
 
-            const clickAbsolutePos: Pos = { x: e.x, y: e.y }
+            const clickAbsolutePos: Pos = { x: e.pageX, y: e.pageY }
             const clickPosBaseRatio = ratioWithinBase(
                 clickAbsolutePos,
                 parentBase,
@@ -473,14 +472,9 @@ export default function BendableArrow({
                     },
                 ),
             )
-        }
+        },
-
+        [area, forceStraight, onSegmentsChanges, segments, startPos],
-        pathRef?.current?.addEventListener("dblclick", addSegment)
+    )
-
-        return () => {
-            pathRef?.current?.removeEventListener("dblclick", addSegment)
-        }
-    }, [pathRef, segments, onSegmentsChanges])
 
     return (
         <div
@@ -503,6 +497,7 @@ export default function BendableArrow({
                     }
                     fill="none"
                     tabIndex={0}
+                    onDoubleClick={addSegment}
                     onKeyUp={(e) => {
                         if (onDeleteRequested && e.key == "Delete")
                             onDeleteRequested()

front/components/editor/CourtPlayer.tsx

@@ -17,7 +17,7 @@ export interface PlayerProps {
 /**
  * A player that is placed on the court, which can be selected, and moved in the associated bounds
  * */
-export default function CourtPlayer<A extends ReactNode>({
+export default function CourtPlayer({
     player,
     onDrag,
     onChange,
@@ -50,7 +50,7 @@ export default function CourtPlayer<A extends ReactNode>({
                     team: player.team,
                     role: player.role,
                     hasBall: player.hasBall,
-                } as Player)
+                })
             }}>
             <div
                 id={player.id}