apply suggestions

src/components/editor/BasketCourt.tsx

@@ -36,13 +36,7 @@ export function BasketCourt({
     courtImage,
     courtRef,
 }: BasketCourtProps) {
-    const [forceEmptyComponents, setForceEmptyComponents] = useState(true)
 
-    useLayoutEffect(() => {
-        setForceEmptyComponents(false)
-    }, [setForceEmptyComponents])
-
-    const usedComponents = forceEmptyComponents ? [] : components
 
     return (
         <div
@@ -51,8 +45,8 @@ export function BasketCourt({
             style={{ position: "relative" }}>
             {courtImage}
 
-            {usedComponents.map(renderComponent)}
-            {usedComponents.flatMap(renderActions)}
+            {courtRef.current && components.map(renderComponent)}
+            {courtRef.current && components.flatMap(renderActions)}
 
             {previewAction && (
                 <CourtAction

src/editor/PlayerDomains.ts

@@ -1,30 +1,10 @@
-import {
-    BallState,
-    Player,
-    PlayerLike,
-    PlayerPhantom,
-} from "../model/tactic/Player"
-import {
-    ComponentId,
-    TacticComponent,
-    TacticContent,
-} from "../model/tactic/Tactic"
-import { removeComponent, updateComponent } from "./TacticContentDomains"
-import {
-    removeAllActionsTargeting,
-    spreadNewStateFromOriginStateChange,
-} from "./ActionsDomains"
-import { ActionKind } from "../model/tactic/Action"
-import {
-    add,
-    minus,
-    norm,
-    Pos,
-    posWithinBase,
-    ratioWithinBase,
-    relativeTo,
-} from "../geo/Pos.ts"
-import { PLAYER_RADIUS_PIXELS } from "../components/editor/CourtPlayer.tsx"
+import {BallState, Player, PlayerLike, PlayerPhantom,} from "../model/tactic/Player"
+import {ComponentId, TacticComponent, TacticContent,} from "../model/tactic/Tactic"
+import {removeComponent, updateComponent} from "./TacticContentDomains"
+import {removeAllActionsTargeting, spreadNewStateFromOriginStateChange,} from "./ActionsDomains"
+import {ActionKind} from "../model/tactic/Action"
+import {add, minus, norm, Pos, posWithinBase, ratioWithinBase, relativeTo,} from "../geo/Pos.ts"
+import {PLAYER_RADIUS_PIXELS} from "../components/editor/CourtPlayer.tsx"
 
 export function getOrigin(
     pathItem: PlayerPhantom,
@@ -41,7 +21,7 @@ export function getPlayerNextTo(
 ): PlayerLike | undefined {
     const playerOrigin =
         player.type === "player" ? player : getOrigin(player, components)
-    const pathItems = playerOrigin.path?.items!
+    const pathItems = playerOrigin.path!.items
 
     // add one as there is a shifting because a Player is never at the head of its own path
     const idx = pathItems.indexOf(player.id) + 1 // is 0 if the player is the origin
@@ -49,11 +29,9 @@ export function getPlayerNextTo(
     const targetIdx = idx + n
 
     // remove the screen phantom
-    const result =
-        targetIdx == 0
-            ? playerOrigin
-            : getComponent<PlayerLike>(pathItems[targetIdx - 1], components)
-    return result
+    return targetIdx == 0
+        ? playerOrigin
+        : getComponent<PlayerLike>(pathItems[targetIdx - 1], components)
 }
 
 //FIXME this function can be a bottleneck if the phantom's position is
@@ -219,22 +197,20 @@ export function removePlayer(
                 -1,
                 content.components,
             )!
-            const actionIdx = playerBefore.actions.findIndex(
+            const actions = playerBefore.actions.filter(
                 (a) => a.target === pos.attach,
             )
             content = updateComponent(
                 {
                     ...playerBefore,
-                    actions: playerBefore.actions.toSpliced(actionIdx, 1),
+                    actions,
                 },
                 content,
             )
         }
 
         const origin = getOrigin(player, content.components)
-        content = truncatePlayerPath(origin, player, content)
-        console.log(content)
-        return content
+        return truncatePlayerPath(origin, player, content)
     }
 
     content = clearPlayerPath(player, content)