format

src/components/editor/CourtBall.tsx

@@ -13,13 +13,18 @@ export interface EditableCourtBallProps extends CourtBallProps {
     onRemove: () => void
 }
 
-
+export function CourtBall({
-export function CourtBall({ onPosValidated, ball, onRemove }: EditableCourtBallProps) {
+    onPosValidated,
+    ball,
+    onRemove,
+}: EditableCourtBallProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
 
-    function courtBallPiece({ x, y }: Pos,
+    function courtBallPiece(
+        { x, y }: Pos,
         pieceRef?: RefObject<HTMLDivElement>,
-                            onKeyUp?: KeyboardEventHandler) {
+        onKeyUp?: KeyboardEventHandler,
+    ) {
         return (
             <div
                 className={"ball-div"}
@@ -47,16 +52,9 @@ export function CourtBall({ onPosValidated, ball, onRemove }: EditableCourtBallP
             }
             position={NULL_POS}
             nodeRef={pieceRef}>
-            {courtBallPiece(
+            {courtBallPiece(ball.pos, pieceRef, (e) => {
-                ball.pos,
-                pieceRef,
-                (e) => {
                 if (e.key == "Delete") onRemove()
-                },
+            })}
-            )}
         </Draggable>
     )
 }
-
-
-

src/editor/TacticContentDomains.ts

@@ -77,7 +77,7 @@ export function placeObjectAt(
                 id: BALL_ID,
                 pos,
                 actions: [],
-                frozen: false
+                frozen: false,
             }
             break
         }
@@ -403,7 +403,12 @@ export function drainTerminalStateOnChildContent(
 
     //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)))
+        components: childContent.components.filter(
+            (comp) =>
+                comp.type === "phantom" ||
+                (comp.frozen &&
+                    tryGetComponent(comp.id, parentTerminalState.components)),
+        ),
     }
 
     for (const parentComponent of parentTerminalState.components) {

src/pages/Editor.tsx

@@ -156,7 +156,9 @@ function GuestModeEditor() {
         )
     }
 
-    const tacticName = localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY) ?? "Nouvelle Tactique"
+    const tacticName =
+        localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY) ??
+        "Nouvelle Tactique"
 
     const courtRef = useRef<HTMLDivElement>(null)
     const [stepId, setStepId] = useState(ROOT_STEP_ID)
@@ -165,8 +167,7 @@ function GuestModeEditor() {
         SaveStates.Guest,
         useMemo(
             () =>
-                debounceAsync(
+                debounceAsync(async (content: StepContent) => {
-                    async (content: StepContent) => {
                     localStorage.setItem(
                         GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId,
                         JSON.stringify(content),
@@ -182,23 +183,29 @@ function GuestModeEditor() {
                         stepId,
                         stepsTree,
                         async (stepId) => {
-                                const content = JSON.parse(localStorage.getItem(
+                            const content = JSON.parse(
-                                    GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId,
+                                localStorage.getItem(
-                                )!)
+                                    GUEST_MODE_STEP_CONTENT_STORAGE_KEY +
-                                const courtBounds = courtRef.current!.getBoundingClientRect()
+                                        stepId,
-                                const relativePositions = computeRelativePositions(courtBounds, content)
+                                )!,
+                            )
+                            const courtBounds =
+                                courtRef.current!.getBoundingClientRect()
+                            const relativePositions = computeRelativePositions(
+                                courtBounds,
+                                content,
+                            )
                             return { content, relativePositions }
                         },
-                            async (stepId, content) => localStorage.setItem(
+                        async (stepId, content) =>
+                            localStorage.setItem(
                                 GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId,
                                 JSON.stringify(content),
                             ),
                     )
 
                     return SaveStates.Guest
-                    },
+                }, 250),
-                    250,
-                ),
             [stepId],
         ),
     )
@@ -281,7 +288,6 @@ function UserModeEditor() {
     const tacticId = parseInt(idStr!)
     const navigation = useNavigate()
 
-
     const courtRef = useRef<HTMLDivElement>(null)
     const [stepId, setStepId] = useState(1)
 
@@ -301,12 +307,17 @@ function UserModeEditor() {
                         `tactics/${tacticId}/steps/${id}`,
                     )
                     if (!response.ok)
-                        throw new Error("Error when retrieving children content")
+                        throw new Error(
-
+                            "Error when retrieving children content",
+                        )
 
                     const content = await response.json()
-                    const courtBounds = courtRef.current!.getBoundingClientRect()
+                    const courtBounds =
-                    const relativePositions = computeRelativePositions(courtBounds, content)
+                        courtRef.current!.getBoundingClientRect()
+                    const relativePositions = computeRelativePositions(
+                        courtBounds,
+                        content,
+                    )
                     return {
                         content,
                         relativePositions,
@@ -386,10 +397,7 @@ function UserModeEditor() {
             )
             if (!response.ok) return
             setStepId(step)
-            setStepContent(
+            setStepContent(await response.json(), false)
-                await response.json(),
-                false,
-            )
         },
         [tacticId, setStepContent],
     )
@@ -479,7 +487,7 @@ function EditorPage({
     onAddStep,
 
     courtRef,
-                    }: EditorViewProps) {
+}: EditorViewProps) {
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
 
     const [rootStepsNode, setRootStepsNode] = useState(initialStepsNode)
@@ -508,7 +516,9 @@ function EditorPage({
 
     const relativePositions = useMemo(() => {
         const courtBounds = courtRef.current?.getBoundingClientRect()
-        return courtBounds ? computeRelativePositions(courtBounds, content) : new Map()
+        return courtBounds
+            ? computeRelativePositions(courtBounds, content)
+            : new Map()
     }, [content, courtRef])
 
     // const setContent = useCallback(
@@ -952,7 +962,7 @@ function EditorStepsTree({
     onAddChildren,
     onRemoveNode,
     onStepSelected,
-                         }: EditorStepsTreeProps) {
+}: EditorStepsTreeProps) {
     return (
         <div
             id="steps-div"
@@ -986,7 +996,7 @@ function PlayerRack({
     setObjects,
     courtRef,
     setComponents,
-                    }: PlayerRackProps) {
+}: PlayerRackProps) {
     const courtBounds = useCallback(
         () => courtRef.current!.getBoundingClientRect(),
         [courtRef],
@@ -1048,7 +1058,7 @@ function CourtPlayerArrowAction({
     setContent,
     setPreviewAction,
     courtRef,
-                                }: CourtPlayerArrowActionProps) {
+}: CourtPlayerArrowActionProps) {
     const courtBounds = useCallback(
         () => courtRef.current!.getBoundingClientRect(),
         [courtRef],
@@ -1236,29 +1246,38 @@ function computeRelativePositions(courtBounds: DOMRect, content: StepContent) {
     return relativePositionsCache
 }
 
-async function updateStepContents(stepId: number,
+async function updateStepContents(
+    stepId: number,
     stepsTree: StepInfoNode,
     getStepContent: (stepId: number) => Promise<ComputedStepContent>,
     setStepContent: (stepId: number, content: StepContent) => Promise<void>,
 ) {
-
+    async function updateSteps(
-
+        step: StepInfoNode,
-
+        content: StepContent,
-    async function updateSteps(step: StepInfoNode, content: StepContent, relativePositions: ComputedRelativePositions) {
+        relativePositions: ComputedRelativePositions,
+    ) {
         const terminalStateContent = computeTerminalState(
             content,
             relativePositions,
         )
 
         const tasks = step.children.map(async (child) => {
-            const { content: childContent, relativePositions: childRelativePositions } = await getStepContent(child.id)
+            const {
+                content: childContent,
+                relativePositions: childRelativePositions,
+            } = await getStepContent(child.id)
             const childUpdatedContent = drainTerminalStateOnChildContent(
                 terminalStateContent,
                 childContent,
             )
             if (childUpdatedContent) {
                 await setStepContent(child.id, childUpdatedContent)
-                await updateSteps(child, childUpdatedContent, childRelativePositions)
+                await updateSteps(
+                    child,
+                    childUpdatedContent,
+                    childRelativePositions,
+                )
             }
         })