WIP: fix

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, 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(
@@ -474,14 +453,9 @@ export function drainTerminalStateOnChildContent(
 }
 
 export function mapToParentContent(content: StepContent): StepContent {
-    return {
+
-        ...content,
+    function mapToParentActions(actions: Action[]): Action[] {
-        components: content.components.map((p) => {
+        return actions.map((a) => ({
-            if (p.type == "ball") return p
-            return {
-                ...p,
-                id: p.id + "-parent",
-                actions: p.actions.map((a) => ({
             ...a,
             target: a.target + "-parent",
             segments: a.segments.map((s) => ({
@@ -491,8 +465,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 {