From 64e8362e53143395360f33d91fa5fc541537280f Mon Sep 17 00:00:00 2001 From: maxime Date: Tue, 5 Mar 2024 20:18:15 +0100 Subject: [PATCH] format --- src/components/editor/CourtBall.tsx | 28 ++-- src/editor/TacticContentDomains.ts | 53 +++---- src/pages/Editor.tsx | 205 +++++++++++++++------------- 3 files changed, 154 insertions(+), 132 deletions(-) diff --git a/src/components/editor/CourtBall.tsx b/src/components/editor/CourtBall.tsx index 6eb1a8a..503f44c 100644 --- a/src/components/editor/CourtBall.tsx +++ b/src/components/editor/CourtBall.tsx @@ -13,13 +13,18 @@ export interface EditableCourtBallProps extends CourtBallProps { onRemove: () => void } - -export function CourtBall({ onPosValidated, ball, onRemove }: EditableCourtBallProps) { +export function CourtBall({ + onPosValidated, + ball, + onRemove, +}: EditableCourtBallProps) { const pieceRef = useRef(null) - function courtBallPiece({ x, y }: Pos, - pieceRef?: RefObject, - onKeyUp?: KeyboardEventHandler) { + function courtBallPiece( + { x, y }: Pos, + pieceRef?: RefObject, + onKeyUp?: KeyboardEventHandler, + ) { return (
- {courtBallPiece( - ball.pos, - pieceRef, - (e) => { - if (e.key == "Delete") onRemove() - }, - )} + {courtBallPiece(ball.pos, pieceRef, (e) => { + if (e.key == "Delete") onRemove() + })} ) } - - - diff --git a/src/editor/TacticContentDomains.ts b/src/editor/TacticContentDomains.ts index e2e8a2f..34dd0f3 100644 --- a/src/editor/TacticContentDomains.ts +++ b/src/editor/TacticContentDomains.ts @@ -77,7 +77,7 @@ export function placeObjectAt( id: BALL_ID, pos, actions: [], - frozen: false + frozen: false, } break } @@ -200,9 +200,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 +210,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 +234,9 @@ export function moveComponent( ...component, pos: isPhantom ? { - type: "fixed", - ...newPos, - } + type: "fixed", + ...newPos, + } : newPos, }, content, @@ -315,15 +315,15 @@ export function computeTerminalState( content.components.filter((c) => c.type !== "phantom") as ( | Player | CourtObject - )[] + )[] const componentsTargetedState = nonPhantomComponents.map((comp) => comp.type === "player" ? getPlayerTerminalState(comp, content, computedPositions) : { - ...comp, - frozen: true, - }, + ...comp, + frozen: true, + }, ) return { @@ -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) { diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index 9d9c4f6..1264466 100644 --- a/src/pages/Editor.tsx +++ b/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(null) const [stepId, setStepId] = useState(ROOT_STEP_ID) @@ -165,40 +167,45 @@ function GuestModeEditor() { SaveStates.Guest, useMemo( () => - debounceAsync( - async (content: StepContent) => { - localStorage.setItem( - GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId, - JSON.stringify(content), - ) + debounceAsync(async (content: StepContent) => { + localStorage.setItem( + GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId, + JSON.stringify(content), + ) - const stepsTree: StepInfoNode = JSON.parse( - localStorage.getItem( - GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY, - )!, - ) + const stepsTree: StepInfoNode = JSON.parse( + localStorage.getItem( + GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY, + )!, + ) - await updateStepContents( - stepId, - stepsTree, - async (stepId) => { - const content = JSON.parse(localStorage.getItem( - GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId, - )!) - const courtBounds = courtRef.current!.getBoundingClientRect() - const relativePositions = computeRelativePositions(courtBounds, content) - return { content, relativePositions } - }, - async (stepId, content) => localStorage.setItem( + await updateStepContents( + stepId, + stepsTree, + async (stepId) => { + const content = JSON.parse( + localStorage.getItem( + GUEST_MODE_STEP_CONTENT_STORAGE_KEY + + stepId, + )!, + ) + const courtBounds = + courtRef.current!.getBoundingClientRect() + const relativePositions = computeRelativePositions( + courtBounds, + content, + ) + return { content, relativePositions } + }, + async (stepId, content) => + localStorage.setItem( GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId, JSON.stringify(content), ), - ) + ) - return SaveStates.Guest - }, - 250, - ), + return SaveStates.Guest + }, 250), [stepId], ), ) @@ -281,7 +288,6 @@ function UserModeEditor() { const tacticId = parseInt(idStr!) const navigation = useNavigate() - const courtRef = useRef(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 relativePositions = computeRelativePositions(courtBounds, content) + const courtBounds = + courtRef.current!.getBoundingClientRect() + const relativePositions = computeRelativePositions( + courtBounds, + content, + ) return { content, relativePositions, @@ -386,10 +397,7 @@ function UserModeEditor() { ) if (!response.ok) return setStepId(step) - setStepContent( - await response.json(), - false, - ) + setStepContent(await response.json(), false) }, [tacticId, setStepContent], ) @@ -468,18 +476,18 @@ export interface EditorViewProps { } function EditorPage({ - tactic: { name, rootStepNode: initialStepsNode, courtType }, - currentStepId, - setCurrentStepContent: setContent, - currentStepContent: content, - saveState, - onNameChange, - selectStep, - onRemoveStep, - onAddStep, - - courtRef, - }: EditorViewProps) { + tactic: { name, rootStepNode: initialStepsNode, courtType }, + currentStepId, + setCurrentStepContent: setContent, + currentStepContent: content, + saveState, + onNameChange, + selectStep, + onRemoveStep, + onAddStep, + + courtRef, +}: EditorViewProps) { const [titleStyle, setTitleStyle] = useState({}) 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( @@ -655,15 +665,15 @@ function EditorPage({ /> ), !isFrozen && - (info.ballState === BallState.HOLDS_ORIGIN || - info.ballState === BallState.PASSED_ORIGIN) && ( - { - doMoveBall(ballBounds, player) - }} - /> - ), + (info.ballState === BallState.HOLDS_ORIGIN || + info.ballState === BallState.PASSED_ORIGIN) && ( + { + doMoveBall(ballBounds, player) + }} + /> + ), ] }, [content, doMoveBall, previewAction?.isInvalid, setContent], @@ -946,13 +956,13 @@ interface EditorStepsTreeProps { } function EditorStepsTree({ - isVisible, - selectedStepId, - root, - onAddChildren, - onRemoveNode, - onStepSelected, - }: EditorStepsTreeProps) { + isVisible, + selectedStepId, + root, + onAddChildren, + onRemoveNode, + onStepSelected, +}: EditorStepsTreeProps) { return (
courtRef.current!.getBoundingClientRect(), [courtRef], @@ -1040,15 +1050,15 @@ interface CourtPlayerArrowActionProps { } function CourtPlayerArrowAction({ - playerInfo, - player, - isInvalid, - - content, - setContent, - setPreviewAction, - courtRef, - }: CourtPlayerArrowActionProps) { + playerInfo, + player, + isInvalid, + + content, + setContent, + setPreviewAction, + courtRef, +}: 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, - stepsTree: StepInfoNode, - getStepContent: (stepId: number) => Promise, - setStepContent: (stepId: number, content: StepContent) => Promise, +async function updateStepContents( + stepId: number, + stepsTree: StepInfoNode, + getStepContent: (stepId: number) => Promise, + setStepContent: (stepId: number, content: StepContent) => Promise, ) { - - - - async function updateSteps(step: StepInfoNode, content: StepContent, relativePositions: ComputedRelativePositions) { + async function updateSteps( + step: StepInfoNode, + content: StepContent, + 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, + ) } }) @@ -1271,4 +1290,4 @@ async function updateStepContents(stepId: number, const startNode = getStepNode(stepsTree!, stepId)! await updateSteps(startNode, content, relativePositions) -} \ No newline at end of file +}