diff --git a/src/editor/TacticContentDomains.ts b/src/editor/TacticContentDomains.ts index da38860..7ff30fa 100644 --- a/src/editor/TacticContentDomains.ts +++ b/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, tryGetComponent } from "./PlayerDomains" +import { Action, 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], - content.components, - ) + originPathItems[phantomIdx - 1], + 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, - segments: a.segments.toSpliced( - a.segments.length - 2, - 1, - { - ...a.segments[a.segments.length - 1], - next: component.id, - }, - ), - target: component.id, - type: ActionKind.MOVE, - } + ...a, + segments: a.segments.toSpliced( + a.segments.length - 2, + 1, + { + ...a.segments[a.segments.length - 1], + next: component.id, + }, + ), + target: component.id, + type: ActionKind.MOVE, + } : a, ), }, @@ -234,9 +213,9 @@ export function moveComponent( ...component, pos: isPhantom ? { - type: "fixed", - ...newPos, - } + type: "fixed", + ...newPos, + } : newPos, }, content, @@ -321,9 +300,9 @@ export function computeTerminalState( comp.type === "player" ? getPlayerTerminalState(comp, content, computedPositions) : { - ...comp, - frozen: true, - }, + ...comp, + frozen: true, + }, ) return { @@ -474,25 +453,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) => ({ - ...a, - target: a.target + "-parent", - segments: a.segments.map((s) => ({ - ...s, - next: - typeof s.next === "string" - ? s.next + "-parent" - : s.next, - })), - })), + 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 +} \ No newline at end of file diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index 3066340..c978661 100644 --- a/src/pages/Editor.tsx +++ b/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(), ), diff --git a/src/style/player.css b/src/style/player.css index 4e2e368..1ddc08c 100644 --- a/src/style/player.css +++ b/src/style/player.css @@ -51,6 +51,7 @@ .player-actions { display: flex; + pointer-events: none; position: absolute; flex-direction: row; diff --git a/src/style/template/header.css b/src/style/template/header.css index 07db237..dba7305 100644 --- a/src/style/template/header.css +++ b/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 {