fix steps in visualizer

src/components/editor/StepsTree.tsx

@@ -67,7 +67,8 @@ function StepsTreeNode({
                             next: "step-piece-" + child.id,
                         },
                     ]}
-                    onSegmentsChanges={() => {}}
+                    onSegmentsChanges={() => {
+                    }}
                     forceStraight={true}
                     wavy={false}
                     readOnly={true}
@@ -79,15 +80,14 @@ function StepsTreeNode({
             <StepPiece
                 id={node.id}
                 isSelected={selectedStepId === node.id}
-                onAddButtonClicked={() => {
+                onAddButtonClicked={onAddChildren
-                    if (onAddChildren) onAddChildren(node)
+                    ? () => onAddChildren(node)
-                }}
+                    : undefined
+                }
                 onRemoveButtonClicked={
-                    rootNode.id === node.id
+                    rootNode.id === node.id || !onRemoveNode
                         ? undefined
-                        : () => {
+                        : () => onRemoveNode(node)
-                              if (onRemoveNode) onRemoveNode(node)
-                          }
                 }
                 onSelected={() => {
                     if (onStepSelected) onStepSelected(node)

src/domains/TacticContentDomains.ts

@@ -408,6 +408,7 @@ export function drainTerminalStateOnChildContent(
             childContent.components,
         )
 
+
         if (!childComponent) {
             //if the child does not contain the parent's component, add it to the children's content.
             childContent = {
@@ -418,6 +419,22 @@ export function drainTerminalStateOnChildContent(
             continue
         }
 
+        if (childComponent.type !== parentComponent.type)
+            throw Error("child and parent components are not of the same type.")
+
+        if (childComponent.type === "ball" && parentComponent.type === "ball") {
+            gotUpdated = true
+            childContent = updateComponent(
+                {
+                    ...childComponent,
+                    frozen: true,
+                    pos: parentComponent.pos,
+                },
+                childContent,
+            )
+
+        }
+
         // ensure that the component is a player
         if (
             parentComponent.type !== "player" ||
@@ -439,7 +456,7 @@ export function drainTerminalStateOnChildContent(
                 newContentResult?.components,
             )
         }
-        // update the position of the player if it has been moved
+        // update the position of the component if it has been moved
         // also force update if the child component is not frozen (the component was introduced previously by the child step but the parent added it afterward)
         if (
             !childComponent.frozen ||
@@ -459,6 +476,7 @@ export function drainTerminalStateOnChildContent(
 
     const initialChildCompsCount = childContent.components.length
 
+    //remove players if they are not present on the parent's anymore
     for (const component of childContent.components) {
         if (
             component.type !== "phantom" &&

src/pages/Editor.tsx

@@ -420,7 +420,7 @@ function EditorPage({
         null,
     )
 
-    const [isStepsTreeVisible, setStepsTreeVisible] = useState(false)
+    const [isStepsTreeVisible, setStepsTreeVisible] = useState(true)
 
     const courtBounds = useCallback(
         () => courtRef.current!.getBoundingClientRect(),

src/pages/VisualizerPage.tsx

@@ -141,7 +141,7 @@ function VisualizerPageContent({
                                    service,
                                    showEditButton,
                                }: VisualizerPageContentProps) {
-    const [isStepsTreeVisible, setStepsTreeVisible] = useState(false)
+    const [isStepsTreeVisible, setStepsTreeVisible] = useState(true)
 
     const [editorContentCurtainWidth, setEditorContentCurtainWidth] =
         useState(80)

src/style/player.css

@@ -8,7 +8,7 @@
 
 .from-parent .player-piece {
     color: white;
-    background-color: var(--player-from-parent-color);
+    background-color: var(--player-from-parent-color) !important;
 }
 
 .player-content {