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(
-            (c) => c.id === action.target,
-        )! as PlayerLike
+        if (typeof action.target !== "string")
+            continue
+        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 {
-    BallState,
-    Player,
-    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 { BallState, Player, 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 {
-    getComponent,
-    getOrigin,
-    getPrecomputedPosition,
-    tryGetComponent,
-} from "./PlayerDomains"
-import { ActionKind } from "../model/tactic/Action.ts"
+import { getComponent, getOrigin, getPrecomputedPosition, removePlayer, tryGetComponent } from "./PlayerDomains"
+import { Action, ActionKind } from "../model/tactic/Action.ts"
 import { spreadNewStateFromOriginStateChange } from "./ActionsDomains.ts"
 
 export function placePlayerAt(
@@ -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
-    childContent = {
-        components: childContent.components.filter(
-            (comp) =>
-                comp.type === "phantom" ||
-                !comp.frozen ||
-                tryGetComponent(comp.id, parentTerminalState.components),
-        ),
+    for (const component of childContent.components) {
+        if (component.type !== "phantom" && component.frozen && !tryGetComponent(component.id, parentTerminalState.components)) {
+            if (component.type === "player")
+                childContent = removePlayer(component, childContent)
+            else childContent = {...childContent, components: childContent.components.filter(c => c.id !== component.id)}
+        }
     }
 
     gotUpdated ||= childContent.components.length !== initialChildCompsCount
@@ -474,14 +451,9 @@ export function drainTerminalStateOnChildContent(
 }
 
 export function mapToParentContent(content: StepContent): StepContent {
-    return {
-        ...content,
-        components: content.components.map((p) => {
-            if (p.type == "ball") return p
-            return {
-                ...p,
-                id: p.id + "-parent",
-                actions: p.actions.map((a) => ({
+
+    function mapToParentActions(actions: Action[]): Action[] {
+        return actions.map((a) => ({
             ...a,
             target: a.target + "-parent",
             segments: a.segments.map((s) => ({
@@ -491,8 +463,33 @@ export function mapToParentContent(content: StepContent): StepContent {
                         ? 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",
+                originPlayerId: p.originPlayerId + "-parent",
+                actions: mapToParentActions(p.actions),
             }
         }),
     }
 }
+
+
+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 {