Apply suggestion

src/components/Visualizer.tsx

@@ -1,8 +1,23 @@
-import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import {
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react"
 import { APITacticService } from "../service/APITacticService.ts"
-import { CourtType, StepContent, StepInfoNode, TacticComponent } from "../model/tactic/Tactic.ts"
+import {
+    CourtType,
+    StepContent,
+    StepInfoNode,
+    TacticComponent,
+} from "../model/tactic/Tactic.ts"
 import { getParent } from "../domains/StepsDomain.ts"
-import { computeRelativePositions, getPhantomInfo } from "../domains/PlayerDomains.ts"
+import {
+    computeRelativePositions,
+    getPhantomInfo,
+} from "../domains/PlayerDomains.ts"
 import { PlayerInfo, PlayerLike } from "../model/tactic/Player.ts"
 import { CourtPlayer } from "./editor/CourtPlayer.tsx"
 import { BALL_TYPE } from "../model/tactic/CourtObjects.ts"
@@ -11,7 +26,6 @@ import { CourtAction } from "./editor/CourtAction.tsx"
 import { BasketCourt, Court } from "./editor/BasketCourt.tsx"
 import { TacticService } from "../service/MutableTacticService.ts"
 
-
 export interface VisualizerProps {
     tacticId: number
     stepId?: number
@@ -33,13 +47,11 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
                 return
             }
 
-
             const rootStep = contextResult.stepsTree
             setStepsTree(rootStep)
             setCourtType(contextResult.courtType)
         }
-        if (isNotInit)
-            init()
+        if (isNotInit) init()
     }, [isNotInit, service])
 
     if (panicMessage) {
@@ -49,12 +61,14 @@ export function Visualizer({ tacticId, stepId }: VisualizerProps) {
         return <p>Loading...</p>
     }
 
-    return <StepVisualizer
+    return (
+        <StepVisualizer
             courtType={courtType}
             stepsTree={stepsTree}
             stepId={stepId}
             service={service}
         />
+    )
 }
 
 export interface StepVisualizerProps {
@@ -64,7 +78,12 @@ export interface StepVisualizerProps {
     service: TacticService
 }
 
-export function StepVisualizer({stepId, stepsTree, courtType, service}: StepVisualizerProps) {
+export function StepVisualizer({
+    stepId,
+    stepsTree,
+    courtType,
+    service,
+}: StepVisualizerProps) {
     const [panicMessage, setPanicMessage] = useState<string | null>(null)
     const [content, setContent] = useState<StepContent | null>(null)
     const [parentContent, setParentContent] = useState<StepContent | null>()
@@ -73,7 +92,6 @@ export function StepVisualizer({stepId, stepsTree, courtType, service}: StepVisu
 
     useEffect(() => {
         async function init() {
-
             const contentStepId = stepId ?? stepsTree.id
 
             const contentResult = await service.getContent(contentStepId)
@@ -127,8 +145,7 @@ export function VisualizerFrame({
     content,
     parentContent,
     courtType,
-                                }: VisualizerFrameProps) {
-
+}: VisualizerFrameProps) {
     const courtRef = useRef<HTMLDivElement>(null)
 
     const courtBounds = useCallback(

src/components/editor/BasketCourt.tsx

@@ -2,7 +2,11 @@ import { ReactElement, ReactNode, RefObject, useEffect, useState } from "react"
 import { Action } from "../../model/tactic/Action"
 
 import { CourtAction } from "./CourtAction"
-import { ComponentId, TacticComponent } from "../../model/tactic/Tactic"
+import {
+    ComponentId,
+    CourtType,
+    TacticComponent,
+} from "../../model/tactic/Tactic"
 import PlainCourt from "../../assets/court/full_court.svg?react"
 import HalfCourt from "../../assets/court/half_court.svg?react"
 
@@ -34,7 +38,6 @@ export function BasketCourt({
     courtImage,
     courtRef,
 }: BasketCourtProps) {
-
     const [court, setCourt] = useState(courtRef.current)
 
     //force update once the court reference is set
@@ -49,15 +52,11 @@ export function BasketCourt({
             style={{ position: "relative" }}>
             {courtImage}
 
-            {court &&
-                parentComponents?.map((i) => renderComponent(i, true))}
-            {court &&
-                parentComponents?.flatMap((i) => renderActions(i, true))}
+            {court && parentComponents?.map((i) => renderComponent(i, true))}
+            {court && parentComponents?.flatMap((i) => renderActions(i, true))}
 
-            {court &&
-                components.map((i) => renderComponent(i, false))}
-            {court &&
-                components.flatMap((i) => renderActions(i, false))}
+            {court && components.map((i) => renderComponent(i, false))}
+            {court && components.flatMap((i) => renderActions(i, false))}
 
             {previewAction && (
                 <CourtAction
@@ -75,14 +74,11 @@ export function BasketCourt({
     )
 }
 
-export function Court({ courtType }: { courtType: string }) {
+export function Court({ courtType }: { courtType: CourtType }) {
+    const CourtSvg = courtType === "PLAIN" ? PlainCourt : HalfCourt
     return (
         <div className="court-image-div">
-            {courtType == "PLAIN" ? (
-                <PlainCourt className="court-image" />
-            ) : (
-                <HalfCourt className="court-image" />
-            )}
+            <CourtSvg className="court-image" />
         </div>
     )
 }

src/components/editor/StepsTree.tsx

@@ -20,7 +20,7 @@ export default function StepsTree({
     onAddChildren,
     onRemoveNode,
     onStepSelected,
-                                  }: StepsTreeProps) {
+}: StepsTreeProps) {
     return (
         <div className="steps-tree">
             <StepsTreeNode
@@ -52,7 +52,7 @@ function StepsTreeNode({
     onAddChildren,
     onRemoveNode,
     onStepSelected,
-                       }: StepsTreeContentProps) {
+}: StepsTreeContentProps) {
     const ref = useRef<HTMLDivElement>(null)
 
     return (
@@ -67,8 +67,7 @@ function StepsTreeNode({
                             next: "step-piece-" + child.id,
                         },
                     ]}
-                    onSegmentsChanges={() => {
-                    }}
+                    onSegmentsChanges={() => {}}
                     forceStraight={true}
                     wavy={false}
                     readOnly={true}
@@ -80,9 +79,8 @@ function StepsTreeNode({
             <StepPiece
                 id={node.id}
                 isSelected={selectedStepId === node.id}
-                onAddButtonClicked={onAddChildren
-                    ? () => onAddChildren(node)
-                    : undefined
+                onAddButtonClicked={
+                    onAddChildren ? () => onAddChildren(node) : undefined
                 }
                 onRemoveButtonClicked={
                     rootNode.id === node.id || !onRemoveNode
@@ -132,7 +130,7 @@ function StepPiece({
     onRemoveButtonClicked,
     onSelected,
     children,
-                   }: StepPieceProps) {
+}: StepPieceProps) {
     return (
         <div
             id={"step-piece-" + id}

src/domains/TacticContentDomains.ts

@@ -408,7 +408,6 @@ 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 = {
@@ -432,7 +431,6 @@ export function drainTerminalStateOnChildContent(
                 },
                 childContent,
             )
-
         }
 
         // ensure that the component is a player

src/pages/Editor.tsx

@@ -715,7 +715,7 @@ function EditorPage({
 
     const contentNode = (
         <div id="content-div">
-            <div id="racks" >
+            <div id="racks">
                 <PlayerRack
                     id={"allies"}
                     objects={allies}

src/pages/VisualizerPage.tsx

@@ -1,7 +1,11 @@
 import { ServiceError, TacticService } from "../service/MutableTacticService.ts"
 import { useNavigate, useParams } from "react-router-dom"
-import { useCallback, useEffect, useMemo, useReducer, useState } from "react"
-import { VisualizerState, VisualizerStateActionKind, visualizerStateReducer } from "../visualizer/VisualizerState.ts"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import {
+    useVisualizer,
+    VisualizerState,
+    VisualizerStateActionKind,
+} from "../visualizer/VisualizerState.ts"
 import { getParent } from "../domains/StepsDomain.ts"
 import { mapToParentContent } from "../domains/TacticContentDomains.ts"
 import StepsTree from "../components/editor/StepsTree.tsx"
@@ -23,14 +27,18 @@ export function VisualizerPage({ guestMode }: VisualizerPageProps) {
 
     if (guestMode || !idStr) {
         return (
-            <ServedVisualizerPage service={LocalStorageTacticService.init()}
-                                  openEditor={() => navigate("/tactic/edit-guest")} />
+            <ServedVisualizerPage
+                service={LocalStorageTacticService.init()}
+                openEditor={() => navigate("/tactic/edit-guest")}
+            />
         )
     }
 
     return (
-        <ServedVisualizerPage service={new APITacticService(parseInt(idStr))}
-                              openEditor={() => navigate(`/tactic/${idStr}/edit`)} />
+        <ServedVisualizerPage
+            service={new APITacticService(parseInt(idStr))}
+            openEditor={() => navigate(`/tactic/${idStr}/edit`)}
+        />
     )
 }
 
@@ -45,9 +53,12 @@ interface ServedVisualizerPageProps {
     openEditor: () => void
 }
 
-function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps) {
+function ServedVisualizerPage({
+    service,
+    openEditor,
+}: ServedVisualizerPageProps) {
     const [panicMessage, setPanicMessage] = useState<string>()
-    const [state, dispatch] = useReducer(visualizerStateReducer, null)
+    const [state, dispatch] = useVisualizer(null)
     const [canEdit, setCanEdit] = useState(false)
 
     useEffect(() => {
@@ -116,7 +127,6 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
         [openEditor, service, state],
     )
 
-
     if (panicMessage) {
         return <p>{panicMessage}</p>
     }
@@ -125,7 +135,13 @@ function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps
         return <p>Retrieving tactic context. Please wait...</p>
     }
 
-    return <VisualizerPageContent state={state} service={visualizerService} showEditButton={canEdit} />
+    return (
+        <VisualizerPageContent
+            state={state}
+            service={visualizerService}
+            showEditButton={canEdit}
+        />
+    )
 }
 
 interface VisualizerPageContentProps {
@@ -138,7 +154,7 @@ function VisualizerPageContent({
     state: { content, parentContent, stepId, stepsTree, courtType, tacticName },
     service,
     showEditButton,
-                               }: VisualizerPageContentProps) {
+}: VisualizerPageContentProps) {
     const [isStepsTreeVisible, setStepsTreeVisible] = useState(true)
 
     const [editorContentCurtainWidth, setEditorContentCurtainWidth] =
@@ -177,12 +193,12 @@ function VisualizerPageContent({
                         onClick={() => setStepsTreeVisible((b) => !b)}>
                         ETAPES
                     </button>
-                    {showEditButton && <button
-                        onClick={() => service.openEditor()}>
+                    {showEditButton && (
+                        <button onClick={() => service.openEditor()}>
                             EDITER
-                    </button>}
+                        </button>
+                    )}
                 </div>
-
             </div>
 
             <div id="editor-div">

src/service/LocalStorageTacticService.ts

@@ -33,7 +33,7 @@ export class LocalStorageTacticService implements MutableTacticService {
             )
             localStorage.setItem(
                 GUEST_MODE_STEP_CONTENT_STORAGE_KEY + 1,
-                JSON.stringify(<StepContent>{components: []})
+                JSON.stringify(<StepContent>{ components: [] }),
             )
         }
 

src/visualizer/VisualizerState.ts

@@ -1,4 +1,5 @@
 import { CourtType, StepContent, StepInfoNode } from "../model/tactic/Tactic.ts"
+import { useReducer } from "react"
 
 export interface VisualizerState {
     stepId: number
@@ -9,7 +10,7 @@ export interface VisualizerState {
     parentContent: StepContent | null
 }
 
-export enum VisualizerStateActionKind {
+export const enum VisualizerStateActionKind {
     INIT,
     SET_CONTENTS,
 }
@@ -26,7 +27,11 @@ export type VisualizerStateAction =
           stepId: number
       }
 
-export function visualizerStateReducer(
+export function useVisualizer(initialState: VisualizerState | null) {
+    return useReducer(visualizerStateReducer, initialState)
+}
+
+function visualizerStateReducer(
     state: VisualizerState | null,
     action: VisualizerStateAction,
 ): VisualizerState | null {