add a steps visualizer (fake data)

src/components/editor/BasketCourt.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode, RefObject } from "react"
 import { Action } from "../../model/tactic/Action"
 
-import { CourtAction } from "./CourtAction.tsx"
+import { CourtAction } from "./CourtAction"
 import { ComponentId, TacticComponent } from "../../model/tactic/Tactic"
 
 export interface BasketCourtProps {

src/components/editor/CourtAction.tsx

@@ -1,7 +1,7 @@
 import { Action, ActionKind } from "../../model/tactic/Action"
-import BendableArrow from "../../components/arrows/BendableArrow"
+import BendableArrow from "../arrows/BendableArrow"
 import { RefObject } from "react"
-import { MoveToHead, ScreenHead } from "../../components/actions/ArrowAction"
+import { MoveToHead, ScreenHead } from "../actions/ArrowAction"
 import { ComponentId } from "../../model/tactic/Tactic"
 
 export interface CourtActionProps {

src/components/editor/StepsTree.tsx

@@ -0,0 +1,58 @@
+import {StepInfoNode} from "../../model/tactic/Tactic";
+import "../../style/steps-tree.css"
+import BendableArrow from "../arrows/BendableArrow";
+import {useRef} from "react";
+
+export interface StepsTreeProps {
+    root: StepInfoNode
+}
+
+export default function StepsTree({root}: StepsTreeProps) {
+    return <div className="steps-tree">
+        <StepsTreeNode node={root}/>
+    </div>
+}
+
+interface StepsTreeContentProps {
+    node: StepInfoNode
+}
+
+function StepsTreeNode({node}: StepsTreeContentProps) {
+    const ref = useRef<HTMLDivElement>(null)
+    return (
+        <div ref={ref}
+             className={"step-group"}>
+            <StepPiece id={node.id}/>
+            {node.children.map(child => (
+                <BendableArrow
+                    key={child.id}
+                    area={ref}
+                    startPos={"step-piece-" + node.id}
+                    segments={[{next: "step-piece-" + child.id}]}
+                    onSegmentsChanges={() => {
+                    }}
+                    forceStraight={true}
+                    wavy={false}
+                    //TODO remove magic constant
+                    startRadius={10}
+                    endRadius={10}
+                />
+            ))}
+            <div className={"step-children"}>
+                {node.children.map(child => <StepsTreeNode key={child.id} node={child}/>)}
+            </div>
+        </div>
+    )
+}
+
+interface StepPieceProps {
+    id: number
+}
+
+function StepPiece({id}: StepPieceProps) {
+    return (
+        <div id={"step-piece-" + id} className={"step-piece"}>
+            <p>{id}</p>
+        </div>
+    )
+}

src/editor/ActionsDomains.ts

@@ -8,7 +8,7 @@ import { ratioWithinBase } from "../geo/Pos"
 import {
     ComponentId,
     TacticComponent,
-    TacticContent,
+    StepContent,
 } from "../model/tactic/Tactic"
 import {overlaps} from "../geo/Box"
 import {Action, ActionKind, moves} from "../model/tactic/Action"
@@ -212,8 +212,8 @@ export function createAction(
     origin: PlayerLike,
     courtBounds: DOMRect,
     arrowHead: DOMRect,
-    content: TacticContent,
+    content: StepContent,
-): { createdAction: Action; newContent: TacticContent } {
+): { createdAction: Action; newContent: StepContent } {
     /**
      * Creates a new phantom component.
      * Be aware that this function will reassign the `content` parameter.
@@ -371,8 +371,8 @@ export function createAction(
 
 export function removeAllActionsTargeting(
     componentId: ComponentId,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     const components = []
     for (let i = 0; i < content.components.length; i++) {
         const component = content.components[i]
@@ -391,9 +391,10 @@ export function removeAllActionsTargeting(
 export function removeAction(
     origin: TacticComponent,
     actionIdx: number,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     const action = origin.actions[actionIdx]
+
     origin = {
         ...origin,
         actions: origin.actions.toSpliced(actionIdx, 1),
@@ -462,8 +463,8 @@ export function removeAction(
 export function spreadNewStateFromOriginStateChange(
     origin: PlayerLike,
     newState: BallState,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     if (origin.ballState === newState) {
         return content
     }

src/editor/PlayerDomains.ts

@@ -1,29 +1,10 @@
-import {
+import {BallState, Player, PlayerLike, PlayerPhantom,} from "../model/tactic/Player"
-    BallState,
+import {ComponentId, StepContent, TacticComponent,} from "../model/tactic/Tactic"
-    Player,
+
-    PlayerLike,
-    PlayerPhantom,
-} from "../model/tactic/Player"
-import {
-    ComponentId,
-    TacticComponent,
-    TacticContent,
-} from "../model/tactic/Tactic"
 import {removeComponent, updateComponent} from "./TacticContentDomains"
-import {
+import {removeAllActionsTargeting, spreadNewStateFromOriginStateChange,} from "./ActionsDomains"
-    removeAllActionsTargeting,
-    spreadNewStateFromOriginStateChange,
-} from "./ActionsDomains"
 import {ActionKind} from "../model/tactic/Action"
-import {
+import {add, minus, norm, Pos, posWithinBase, ratioWithinBase, relativeTo,} from "../geo/Pos.ts"
-    add,
-    minus,
-    norm,
-    Pos,
-    posWithinBase,
-    ratioWithinBase,
-    relativeTo,
-} from "../geo/Pos.ts"
 import {PLAYER_RADIUS_PIXELS} from "../components/editor/CourtPlayer.tsx"
 
 export function getOrigin(
@@ -58,7 +39,7 @@ export function getPlayerNextTo(
 // following another phantom and / or the origin of the phantom is another
 export function computePhantomPositioning(
     phantom: PlayerPhantom,
-    content: TacticContent,
+    content: StepContent,
     area: DOMRect,
 ): Pos {
     const positioning = phantom.pos
@@ -171,8 +152,8 @@ export function isNextInPath(
 
 export function clearPlayerPath(
     player: Player,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     if (player.path == null) {
         return content
     }
@@ -192,8 +173,8 @@ export function clearPlayerPath(
 
 function removeAllPhantomsAttached(
     to: ComponentId,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     let i = 0
     while (i < content.components.length) {
         const component = content.components[i]
@@ -213,8 +194,8 @@ function removeAllPhantomsAttached(
 
 export function removePlayer(
     player: PlayerLike,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     content = removeAllActionsTargeting(player.id, content)
     content = removeAllPhantomsAttached(player.id, content)
 
@@ -266,8 +247,8 @@ export function removePlayer(
 export function truncatePlayerPath(
     player: Player,
     phantom: PlayerPhantom,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     if (player.path == null) return content
 
     const path = player.path!
@@ -300,7 +281,7 @@ export function truncatePlayerPath(
 export function changePlayerBallState(
     player: PlayerLike,
     newState: BallState,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     return spreadNewStateFromOriginStateChange(player, newState, content)
 }

src/editor/TacticContentDomains.ts

@@ -15,8 +15,9 @@ import {
 import {
     ComponentId,
     TacticComponent,
-    TacticContent,
+    StepContent,
 } from "../model/tactic/Tactic"
+
 import {overlaps} from "../geo/Box"
 import {RackedCourtObject, RackedPlayer} from "./RackedItems"
 import {changePlayerBallState, getComponent, getOrigin} from "./PlayerDomains"
@@ -45,14 +46,15 @@ export function placeObjectAt(
     refBounds: DOMRect,
     courtBounds: DOMRect,
     rackedObject: RackedCourtObject,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     const pos = ratioWithinBase(refBounds, courtBounds)
 
+
     let courtObject: CourtObject
 
     switch (rackedObject.key) {
-        case BALL_TYPE:
+        case BALL_TYPE: {
             const playerCollidedIdx = getComponentCollided(
                 refBounds,
                 content.components,
@@ -69,7 +71,7 @@ export function placeObjectAt(
                 actions: [],
             }
             break
-
+        }
         default:
             throw new Error("unknown court object " + rackedObject.key)
     }
@@ -82,9 +84,9 @@ export function placeObjectAt(
 
 export function dropBallOnComponent(
     targetedComponentIdx: number,
-    content: TacticContent,
+    content: StepContent,
     setAsOrigin: boolean,
-): TacticContent {
+): StepContent {
     const component = content.components[targetedComponentIdx]
 
     if (component.type === "player" || component.type === "phantom") {
@@ -101,7 +103,7 @@ export function dropBallOnComponent(
     return removeBall(content)
 }
 
-export function removeBall(content: TacticContent): TacticContent {
+export function removeBall(content: StepContent): StepContent {
     const ballObjIdx = content.components.findIndex((o) => o.type == "ball")
 
     if (ballObjIdx == -1) {
@@ -117,8 +119,8 @@ export function removeBall(content: TacticContent): TacticContent {
 export function placeBallAt(
     refBounds: DOMRect,
     courtBounds: DOMRect,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     if (!overlaps(courtBounds, refBounds)) {
         return removeBall(content)
     }
@@ -162,9 +164,9 @@ export function moveComponent(
     component: TacticComponent,
     info: PlayerInfo,
     courtBounds: DOMRect,
-    content: TacticContent,
+    content: StepContent,
-    removed: (content: TacticContent) => TacticContent,
+    removed: (content: StepContent) => StepContent,
-): TacticContent {
+): StepContent {
     const playerBounds = document
         .getElementById(info.id)!
         .getBoundingClientRect()
@@ -232,8 +234,8 @@ export function moveComponent(
 
 export function removeComponent(
     componentId: ComponentId,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     return {
         ...content,
         components: content.components.filter((c) => c.id !== componentId),
@@ -242,8 +244,8 @@ export function removeComponent(
 
 export function updateComponent(
     component: TacticComponent,
-    content: TacticContent,
+    content: StepContent,
-): TacticContent {
+): StepContent {
     return {
         ...content,
         components: content.components.map((c) =>

src/model/tactic/Tactic.ts

@@ -2,21 +2,27 @@ import { Player, PlayerPhantom } from "./Player"
 import { Action } from "./Action"
 import { CourtObject } from "./CourtObjects"
 
-export type CourtType = "HALF" | "PLAIN"
-
 export interface Tactic {
-    id: number
+    readonly id: number
-    name: string
+    readonly name: string
-    courtType: CourtType
+    readonly courtType: CourtType
-    content: TacticContent
+    readonly currentStepContent: StepContent
+    readonly rootStepNode: StepInfoNode
+}
+
+export interface StepContent {
+    readonly stepId: number
+    readonly components: TacticComponent[]
 }
 
-export interface TacticContent {
+export interface StepInfoNode {
-    components: TacticComponent[]
+    readonly id: number
+    readonly children: StepInfoNode[]
 }
 
 export type TacticComponent = Player | CourtObject | PlayerPhantom
 export type ComponentId = string
+export type CourtType = "PLAIN" | "HALF"
 
 export interface Component<T, Positioning> {
     /**

src/pages/Editor.tsx

@@ -20,22 +20,19 @@ import { Rack } from "../components/Rack"
 import {PlayerPiece} from "../components/editor/PlayerPiece"
 
 import {
-    CourtType,
+    CourtType, StepContent, StepInfoNode,
     Tactic,
     TacticComponent,
-    TacticContent,
 } from "../model/tactic/Tactic"
 import { fetchAPI, fetchAPIGet } from "../Fetcher"
 
-import SavingState, {
+import SavingState, {SaveState, SaveStates,} from "../components/editor/SavingState"
-    SaveState,
-    SaveStates,
-} from "../components/editor/SavingState"
 
 import { BALL_TYPE } from "../model/tactic/CourtObjects"
 import { CourtAction } from "../components/editor/CourtAction"
 import { ActionPreview, BasketCourt } from "../components/editor/BasketCourt"
 import { overlaps } from "../geo/Box"
+
 import {
     dropBallOnComponent,
     getComponentCollided,
@@ -47,21 +44,11 @@ import {
     removeBall,
     updateComponent,
 } from "../editor/TacticContentDomains"
-import {
+
-    BallState,
+import {BallState, Player, PlayerInfo, PlayerLike, PlayerTeam,} from "../model/tactic/Player"
-    Player,
-    PlayerInfo,
-    PlayerLike,
-    PlayerTeam,
-} from "../model/tactic/Player"
 import {RackedCourtObject, RackedPlayer} from "../editor/RackedItems"
 import CourtPlayer from "../components/editor/CourtPlayer"
-import {
+import {createAction, getActionKind, isActionValid, removeAction,} from "../editor/ActionsDomains"
-    createAction,
-    getActionKind,
-    isActionValid,
-    removeAction,
-} from "../editor/ActionsDomains"
 import ArrowAction from "../components/actions/ArrowAction"
 import {middlePos, Pos, ratioWithinBase} from "../geo/Pos"
 import {Action, ActionKind} from "../model/tactic/Action"
@@ -75,6 +62,7 @@ import {
 import { CourtBall } from "../components/editor/CourtBall"
 import { useNavigate, useParams } from "react-router-dom"
 import { DEFAULT_TACTIC_NAME } from "./NewTacticPage.tsx"
+import StepsTree from "../components/editor/StepsTree"
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -85,7 +73,7 @@ const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
 
 export interface EditorViewProps {
     tactic: Tactic
-    onContentChange: (tactic: TacticContent) => Promise<SaveState>
+    onContentChange: (tactic: StepContent) => Promise<SaveState>
     onNameChange: (name: string) => Promise<boolean>
 }
 interface TacticDto {
@@ -93,6 +81,7 @@ interface TacticDto {
     name: string
     courtType: CourtType
     content: string
+    root: StepInfoNode
 }
 
 interface EditorPageProps {
@@ -107,6 +96,7 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
                 courtType: "PLAIN",
                 content: '{"components": []}',
                 name: DEFAULT_TACTIC_NAME,
+                root: {id: 1, children: []}
             }
         }
         return null
@@ -120,9 +110,11 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
 
         async function initialize() {
             const infoResponsePromise = fetchAPIGet(`tactics/${id}`)
+            const treeResponsePromise = fetchAPIGet(`tactics/${id}/tree`)
             const contentResponsePromise = fetchAPIGet(`tactics/${id}/steps/1`)
 
             const infoResponse = await infoResponsePromise
+            const treeResponse = await treeResponsePromise
             const contentResponse = await contentResponsePromise
 
             if (infoResponse.status == 401 || contentResponse.status == 401) {
@@ -132,8 +124,9 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
 
             const { name, courtType } = await infoResponse.json()
             const content = await contentResponse.text()
+            const { root } = await treeResponse.json()
 
-            setTactic({ id, name, courtType, content })
+            setTactic({ id, name, courtType, content, root })
         }
 
         initialize()
@@ -143,6 +136,7 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
         return (
             <Editor
                 id={id}
+                rootStepNode={tactic.root}
                 courtType={tactic.courtType}
                 content={tactic.content}
                 name={tactic.name}
@@ -161,14 +155,15 @@ export interface EditorProps {
     id: number
     name: string
     content: string
-    courtType: CourtType
+    courtType: CourtType,
+    rootStepNode: StepInfoNode
 }
 
-function Editor({ id, name, courtType, content }: EditorProps) {
+function Editor({ id, name, courtType, content, rootStepNode }: EditorProps) {
     const isInGuestMode = id == -1
 
     const storageContent = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
-    const editorContent =
+    const stepContent =
         isInGuestMode && storageContent != null ? storageContent : content
 
     const storageName = localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY)
@@ -182,9 +177,13 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                 name: editorName,
                 id,
                 courtType,
-                content: JSON.parse(editorContent),
+                currentStepContent: {
+                    stepId: 1,
+                    ...JSON.parse(stepContent)
+                },
+                rootStepNode,
             }}
-            onContentChange={async (content: TacticContent) => {
+            onContentChange={async (content: StepContent) => {
                 if (isInGuestMode) {
                     localStorage.setItem(
                         GUEST_MODE_CONTENT_STORAGE_KEY,
@@ -196,6 +195,7 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                     `tactics/${id}/steps/1`,
                     { content },
                     "PUT",
+
                 )
                 if (response.status == 401) {
                     navigate("/login")
@@ -212,20 +212,38 @@ function Editor({ id, name, courtType, content }: EditorProps) {
                     `tactics/${id}/name`,
                     { name },
                     "PUT",
+
                 )
                 if (response.status == 401) {
                     navigate("/login")
                 }
                 return response.ok
             }}
+            onStepSelected={() => {
+            }}
+            stepsContentsRoot={rootStepNode}
+            courtType={courtType}
         />
     )
 }
 
+export interface EditorViewProps {
+    tactic: Tactic
+    onContentChange: (tactic: StepContent) => Promise<SaveState>
+    onStepSelected: (stepId: number) => void,
+    onNameChange: (name: string) => Promise<boolean>
+    stepsContentsRoot: StepInfoNode
+    courtType: "PLAIN" | "HALF"
+}
+
 function EditorView({
-    tactic: { id, name, content: initialContent, courtType },
+
+                        tactic: {id, name, currentStepContent: initialContent},
                         onContentChange,
                         onNameChange,
+                        onStepSelected,
+                        stepsContentsRoot,
+                        courtType,
                     }: EditorViewProps) {
     const isInGuestMode = id == -1
 
@@ -251,6 +269,8 @@ function EditorView({
         null,
     )
 
+    const [isStepsTreeVisible, setStepsTreeVisible] = useState(false)
+
     const courtRef = useRef<HTMLDivElement>(null)
 
     const setComponents = (action: SetStateAction<TacticComponent[]>) => {
@@ -532,9 +552,14 @@ function EditorView({
                         )}
                     />
                 </div>
-                <div id="topbar-right" />
+                <div id="topbar-right">
+                    <button onClick={() => setStepsTreeVisible((b) => !b)}>
+                        STEPS
+                    </button>
+                </div>
             </div>
-            <div id="edit-div">
+            <div id="editor-div">
+                <div id="content-div">
                     <div id="racks">
                         <PlayerRack
                             id={"allies"}
@@ -592,6 +617,69 @@ function EditorView({
                         </div>
                     </div>
                 </div>
+                <EditorStepsTree isVisible={isStepsTreeVisible} root={stepsContentsRoot}/>
+            </div>
+        </div>
+    )
+}
+
+interface EditorStepsTreeProps {
+    isVisible: boolean
+    root: StepInfoNode
+}
+
+function EditorStepsTree({isVisible, root}: EditorStepsTreeProps) {
+    const fakeRoot: StepInfoNode = {
+        id: 0,
+        children: [
+            {
+                id: 1,
+                children: [
+                    {
+                        id: 2,
+                        children: []
+                    },
+                    {
+                        id: 3,
+                        children: [{
+                            id: 4,
+                            children: []
+                        }]
+                    }
+                ]
+            },
+            {
+                id: 5,
+                children: [
+                    {
+                        id: 6,
+                        children: []
+                    },
+                    {
+                        id: 7,
+                        children: []
+                    }
+                ]
+            },
+            {
+                id: 8,
+                children: [
+                    {
+                        id: 9,
+                        children: [
+                            {
+                                id: 10,
+                                children: []
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+    return (
+        <div id="steps-div" style={{transform: isVisible ? "translateX(0)" : "translateX(100%)"}}>
+            <StepsTree root={fakeRoot}/>
         </div>
     )
 }
@@ -659,8 +747,8 @@ interface CourtPlayerArrowActionProps {
     player: PlayerLike
     isInvalid: boolean
 
-    content: TacticContent
+    content: StepContent
-    setContent: (state: SetStateAction<TacticContent>) => void
+    setContent: (state: SetStateAction<StepContent>) => void
     setPreviewAction: (state: SetStateAction<ActionPreview | null>) => void
     courtRef: RefObject<HTMLDivElement>
 }
@@ -768,7 +856,7 @@ function CourtPlayerArrowAction({
     )
 }
 
-function isBallOnCourt(content: TacticContent) {
+function isBallOnCourt(content: StepContent) {
     return (
         content.components.findIndex(
             (c) =>

src/style/editor.css

@@ -26,13 +26,13 @@
     width: 100%;
     display: flex;
     background-color: var(--main-color);
-    margin-bottom: 3px;
 
     justify-content: space-between;
     align-items: stretch;
 }
 
 #racks {
+    margin: 3px 6px 0 6px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -44,8 +44,28 @@
     align-self: center;
 }
 
-#edit-div {
+#editor-div {
+    display: flex;
+    flex-direction: row;
+}
+
+#content-div,
+#editor-div {
     height: 100%;
+    width: 100%;
+}
+
+#content-div {
+    width: 100%;
+}
+
+#steps-div {
+    background-color: var(--editor-tree-background);
+    overflow: hidden;
+    width: 20%;
+
+    transform: translateX(100%);
+    transition: transform 500ms;
 }
 
 #allies-rack,

src/style/steps-tree.css

@@ -0,0 +1,48 @@
+.step-piece {
+    font-family: monospace;
+    pointer-events: all;
+
+    background-color: var(--editor-tree-step-piece);
+    color: var(--selected-team-secondarycolor);
+
+    border-radius: 100px;
+
+    width: 20px;
+    height: 20px;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    user-select: none;
+}
+
+.step-children {
+    margin-top: 10vh;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+
+.step-group {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+}
+
+.steps-tree {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 10%;
+
+    height: 100%;
+}

src/style/theme/default.css

@@ -29,4 +29,6 @@
     --main-contrast-color: #e6edf3;
     --font-title: Helvetica;
     --font-content: Helvetica;
+    --editor-tree-background: #503636;
+    --editor-tree-step-piece: #0bd9d9;
 }