fix steps bugs

src/editor/PlayerDomains.ts

@@ -279,9 +279,11 @@ export function removePlayer(
         if (action.type !== ActionKind.SHOOT) {
             continue
         }
-        const actionTarget = content.components.find(
+        if (typeof action.target !== "string")
-            (c) => c.id === action.target,
+            continue
-        )! as PlayerLike
+        const actionTarget = tryGetComponent<PlayerLike>(action.target, content.components)
+        if (actionTarget === undefined)
+            continue //the target was maybe removed
         return (
             spreadNewStateFromOriginStateChange(
                 actionTarget,

src/editor/TacticContentDomains.ts

@@ -1,34 +1,13 @@
 import { equals, Pos, ratioWithinBase } from "../geo/Pos"
 
-import {
+import { BallState, Player, PlayerInfo, PlayerLike, PlayerPhantom, PlayerTeam } from "../model/tactic/Player"
-    BallState,
+import { Ball, BALL_ID, BALL_TYPE, CourtObject } from "../model/tactic/CourtObjects"
-    Player,
+import { ComponentId, StepContent, TacticComponent } from "../model/tactic/Tactic"
-    PlayerInfo,
-    PlayerLike,
-    PlayerPhantom,
-    PlayerTeam,
-} from "../model/tactic/Player"
-import {
-    Ball,
-    BALL_ID,
-    BALL_TYPE,
-    CourtObject,
-} from "../model/tactic/CourtObjects"
-import {
-    ComponentId,
-    StepContent,
-    TacticComponent,
-} from "../model/tactic/Tactic"
 
 import { overlaps } from "../geo/Box"
 import { RackedCourtObject, RackedPlayer } from "./RackedItems"
-import {
+import { getComponent, getOrigin, getPrecomputedPosition, removePlayer, tryGetComponent } from "./PlayerDomains"
-    getComponent,
+import { Action, ActionKind } from "../model/tactic/Action.ts"
-    getOrigin,
-    getPrecomputedPosition,
-    tryGetComponent,
-} from "./PlayerDomains"
-import { ActionKind } from "../model/tactic/Action.ts"
 import { spreadNewStateFromOriginStateChange } from "./ActionsDomains.ts"
 
 export function placePlayerAt(
@@ -200,9 +179,9 @@ export function moveComponent(
             phantomIdx == 0
                 ? origin
                 : getComponent(
-                      originPathItems[phantomIdx - 1],
+                    originPathItems[phantomIdx - 1],
-                      content.components,
+                    content.components,
-                  )
+                )
         // detach the action from the screen target and transform it to a regular move action to the phantom.
         content = updateComponent(
             {
@@ -210,18 +189,18 @@ export function moveComponent(
                 actions: playerBeforePhantom.actions.map((a) =>
                     a.target === referent
                         ? {
-                              ...a,
+                            ...a,
-                              segments: a.segments.toSpliced(
+                            segments: a.segments.toSpliced(
-                                  a.segments.length - 2,
+                                a.segments.length - 2,
-                                  1,
+                                1,
-                                  {
+                                {
-                                      ...a.segments[a.segments.length - 1],
+                                    ...a.segments[a.segments.length - 1],
-                                      next: component.id,
+                                    next: component.id,
-                                  },
+                                },
-                              ),
+                            ),
-                              target: component.id,
+                            target: component.id,
-                              type: ActionKind.MOVE,
+                            type: ActionKind.MOVE,
-                          }
+                        }
                         : a,
                 ),
             },
@@ -234,9 +213,9 @@ export function moveComponent(
             ...component,
             pos: isPhantom
                 ? {
-                      type: "fixed",
+                    type: "fixed",
-                      ...newPos,
+                    ...newPos,
-                  }
+                }
                 : newPos,
         },
         content,
@@ -321,9 +300,9 @@ export function computeTerminalState(
         comp.type === "player"
             ? getPlayerTerminalState(comp, content, computedPositions)
             : {
-                  ...comp,
+                ...comp,
-                  frozen: true,
+                frozen: true,
-              },
+            },
     )
 
     return {
@@ -458,14 +437,12 @@ export function drainTerminalStateOnChildContent(
 
     const initialChildCompsCount = childContent.components.length
 
-    //filter out all frozen components that are not present on the parent's terminal state anymore
+    for (const component of childContent.components) {
-    childContent = {
+        if (component.type !== "phantom" && component.frozen && !tryGetComponent(component.id, parentTerminalState.components)) {
-        components: childContent.components.filter(
+            if (component.type === "player")
-            (comp) =>
+                childContent = removePlayer(component, childContent)
-                comp.type === "phantom" ||
+            else childContent = {...childContent, components: childContent.components.filter(c => c.id !== component.id)}
-                !comp.frozen ||
+        }
-                tryGetComponent(comp.id, parentTerminalState.components),
-        ),
     }
 
     gotUpdated ||= childContent.components.length !== initialChildCompsCount
@@ -474,25 +451,45 @@ export function drainTerminalStateOnChildContent(
 }
 
 export function mapToParentContent(content: StepContent): StepContent {
+
+    function mapToParentActions(actions: Action[]): Action[] {
+        return actions.map((a) => ({
+            ...a,
+            target: a.target + "-parent",
+            segments: a.segments.map((s) => ({
+                ...s,
+                next:
+                    typeof s.next === "string"
+                        ? s.next + "-parent"
+                        : s.next,
+            })),
+        }))
+    }
+
     return {
         ...content,
         components: content.components.map((p) => {
             if (p.type == "ball") return p
+            if (p.type == "player") {
+                return {
+                    ...p,
+                    id: p.id + "-parent",
+                    actions: mapToParentActions(p.actions),
+                    path: p.path && { items: p.path.items.map(p => p + "-parent") },
+                }
+            }
             return {
                 ...p,
+                pos: p.pos.type == "follows" ? { ...p.pos, attach: p.pos.attach + "-parent" } : p.pos,
                 id: p.id + "-parent",
-                actions: p.actions.map((a) => ({
+                originPlayerId: p.originPlayerId + "-parent",
-                    ...a,
+                actions: mapToParentActions(p.actions),
-                    target: a.target + "-parent",
-                    segments: a.segments.map((s) => ({
-                        ...s,
-                        next:
-                            typeof s.next === "string"
-                                ? s.next + "-parent"
-                                : s.next,
-                    })),
-                })),
             }
         }),
     }
 }
+
+
+export function selectContent(id: string, content: StepContent, parentContent: StepContent | null): StepContent {
+    return parentContent && id.endsWith("-parent") ? parentContent : content
+}

src/pages/Editor.tsx

@@ -47,7 +47,7 @@ import {
     placeBallAt,
     placeObjectAt,
     placePlayerAt,
-    removeBall,
+    removeBall, selectContent,
     updateComponent,
 } from "../editor/TacticContentDomains"
 
@@ -488,7 +488,7 @@ function EditorPage({
                     ) == -1
                 isFrozen = player.frozen
             } else {
-                const origin = getOrigin(player, content.components)
+                const origin = getOrigin(player, selectContent(player.id, content, parentContent).components)
                 const path = origin.path!
                 // phantoms can only place other arrows if they are the head of the path
                 canPlaceArrows =
@@ -545,15 +545,17 @@ function EditorPage({
 
             let forceFreeze = isFromParent
 
+            const usedContent = isFromParent ? parentContent! : content
+
             if (isPhantom) {
-                const origin = getOrigin(component, content.components)
+                const origin = getOrigin(component, usedContent.components)
                 info = {
                     id: component.id,
                     team: origin.team,
                     role: origin.role,
                     pos: computePhantomPositioning(
                         component,
-                        content,
+                        usedContent,
                         relativePositions,
                         courtBounds(),
                     ),

src/style/player.css

@@ -51,6 +51,7 @@
 
 .player-actions {
     display: flex;
+    pointer-events: none;
 
     position: absolute;
     flex-direction: row;

src/style/template/header.css

@@ -15,6 +15,7 @@
 
 #img-account {
     cursor: pointer;
+    margin-right: 5px;
 }
 
 #header-left,
@@ -28,6 +29,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: end;
+    color: white;
+    margin-right: 5px;
 }
 
 #clickable-header-right:hover #username {