apply suggestions

front/components/arrows/BendableArrow.tsx

@@ -11,7 +11,7 @@ import {
 import {
     add,
     angle,
-    between,
+    middle,
     distance,
     middlePos,
     minus,
@@ -20,7 +20,7 @@ import {
     posWithinBase,
     ratioWithinBase,
     relativeTo,
-    size,
+    norm,
 } from "./Pos"
 
 import "../../style/bendable_arrows.css"
@@ -137,14 +137,14 @@ export default function BendableArrow({
             if (idx == 0) {
                 return {
                     start: startPos,
-                    controlPoint: segment.controlPoint,
+                    controlPoint: segment.controlPoint ?? null,
                     end: segment.next,
                 }
             }
             const start = segments[idx - 1].next
             return {
                 start,
-                controlPoint: segment.controlPoint,
+                controlPoint: segment.controlPoint ?? null,
                 end: segment.next,
             }
         })
@@ -164,15 +164,15 @@ export default function BendableArrow({
             const cpPos =
                 controlPoint ||
                 ratioWithinBase(
-                    add(between(prevRelative, nextRelative), parentBase),
+                    add(middle(prevRelative, nextRelative), parentBase),
                     parentBase,
                 )
 
-            const setControlPointPos = (newPos: Pos | undefined) => {
+            const setControlPointPos = (newPos: Pos | null) => {
                 const segment = segments[i]
                 const newSegments = segments.toSpliced(i, 1, {
                     ...segment,
-                    controlPoint: newPos,
+                    controlPoint: newPos ?? undefined,
                 })
                 onSegmentsChanges(newSegments)
             }
@@ -185,7 +185,7 @@ export default function BendableArrow({
                     posRatio={cpPos}
                     parentBase={parentBase}
                     onPosValidated={setControlPointPos}
-                    onRemove={() => setControlPointPos(undefined)}
+                    onRemove={() => setControlPointPos(null)}
                     onMoves={(controlPoint) => {
                         setInternalSegments((is) => {
                             return is.toSpliced(i, 1, {
@@ -322,7 +322,7 @@ export default function BendableArrow({
                           posWithinBase(controlPoint, parentBase),
                           svgPosRelativeToBase,
                       )
-                    : between(startRelative, nextRelative)
+                    : middle(startRelative, nextRelative)
 
             return {
                 start: startRelative,
@@ -344,7 +344,7 @@ export default function BendableArrow({
 
                 const previousSegmentCpAndCurrentPosVector = minus(
                     start,
-                    previousSegment?.cp ?? between(start, end),
+                    previousSegment?.cp ?? middle(start, end),
                 )
 
                 const smoothCp = previousSegment
@@ -422,7 +422,7 @@ export default function BendableArrow({
                 const nextPos = segment.next
                 const segmentCp = segment.controlPoint
                     ? segment.controlPoint
-                    : between(currentPos, nextPos)
+                    : middle(currentPos, nextPos)
 
                 const smoothCp = beforeSegment
                     ? add(
@@ -430,7 +430,7 @@ export default function BendableArrow({
                           minus(
                               currentPos,
                               beforeSegment.controlPoint ??
-                                  between(beforeSegmentPos, currentPos),
+                                  middle(beforeSegmentPos, currentPos),
                           ),
                       )
                     : segmentCp
@@ -549,7 +549,7 @@ enum PointSegmentSearchResult {
 
 interface FullSegment {
     start: Pos
-    controlPoint: Pos | undefined
+    controlPoint: Pos | null
     end: Pos
 }
 
@@ -573,7 +573,7 @@ function wavyBezier(
 ): string {
     function getVerticalAmplification(t: number): Pos {
         const velocity = cubicBeziersDerivative(start, cp1, cp2, end, t)
-        const velocityLength = size(velocity)
+        const velocityLength = norm(velocity)
         //rotate the velocity by 90 deg
         const projection = { x: velocity.y, y: -velocity.x }
 

front/components/arrows/Pos.ts

@@ -38,7 +38,7 @@ export function distance(a: Pos, b: Pos): number {
     return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2)
 }
 
-export function size(vector: Pos): number {
+export function norm(vector: Pos): number {
     return distance(NULL_POS, vector)
 }
 
@@ -66,16 +66,16 @@ export function posWithinBase(ratio: Pos, base: DOMRect): Pos {
     }
 }
 
-export function between(a: Pos, b: Pos): Pos {
+export function middle(a: Pos, b: Pos): Pos {
     return {
         x: a.x / 2 + b.x / 2,
         y: a.y / 2 + b.y / 2,
     }
 }
 
-export function rotate(vec: Pos, deg: number): Pos {
+export function rotate(vec: Pos, rad: 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),
+        x: Math.cos(rad) * vec.x - Math.sin(rad) * vec.y,
+        y: Math.sin(rad) * vec.x + Math.cos(rad) * vec.y,
     }
 }

front/components/editor/BallPiece.tsx

@@ -1,5 +1,3 @@
-import React from "react"
-
 import "../../style/ball.css"
 
 import BallSvg from "../../assets/icon/ball.svg?react"

front/components/editor/CourtPlayer.tsx

@@ -5,13 +5,13 @@ import { PlayerPiece } from "./PlayerPiece"
 import { Player } from "../../tactic/Player"
 import { NULL_POS, ratioWithinBase } from "../arrows/Pos"
 
-export interface PlayerProps<A extends ReactNode> {
+export interface PlayerProps {
     player: Player
     onDrag: () => void
     onChange: (p: Player) => void
     onRemove: () => void
     courtRef: RefObject<HTMLElement>
-    availableActions: (ro: HTMLElement) => A[]
+    availableActions: (ro: HTMLElement) => ReactNode[]
 }
 
 /**
@@ -24,7 +24,7 @@ export default function CourtPlayer<A extends ReactNode>({
     onRemove,
     courtRef,
     availableActions,
-}: PlayerProps<A>) {
+}: PlayerProps) {
     const hasBall = player.hasBall
     const x = player.rightRatio
     const y = player.bottomRatio

front/components/editor/PlayerPiece.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import "../../style/player.css"
 import { Team } from "../../tactic/Team"
 

front/views/Editor.tsx

@@ -571,8 +571,8 @@ function debounceAsync<A, B>(
     let task = 0
     return (args: A) => {
         clearTimeout(task)
-        return new Promise((resolve) => {
-            task = setTimeout(() => f(args).then(resolve), delay)
+        return new Promise((resolve, reject) => {
+            task = setTimeout(() => f(args).then(resolve).catch(reject), delay)
         })
     }
 }

package.json

@@ -13,7 +13,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
-    "react-xarrows": "^2.0.2",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0"
@@ -33,7 +32,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.1.0",
     "typescript": "^5.2.2",
     "vite-plugin-svgr": "^4.1.0"