IQBall
/
Application-Web
6
0
Fork 0
Code Issues 49 Pull Requests Packages Projects 5 Releases Wiki Activity

format

Browse Source
pull/114/head
maxime 1 year ago
parent 32b79ed5c4
commit 64e8362e53
3 changed files with 154 additions and 132 deletions
Show Stats Download Patch File Download Diff File

24
src/components/editor/CourtBall.tsx
Unescape View File

@ -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<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(
ball.pos,
pieceRef,
(e) => {
{courtBallPiece(ball.pos, pieceRef, (e) => {
if (e.key == "Delete") onRemove()
},
)}
})}
</Draggable>
)
}

9
src/editor/TacticContentDomains.ts
Unescape View File

@ -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) {

85
src/pages/Editor.tsx
Unescape View File

@ -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(
async (content: StepContent) => {
debounceAsync(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(
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + stepId,
)!)
const courtBounds = courtRef.current!.getBoundingClientRect()
const relativePositions = computeRelativePositions(courtBounds, content)
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(
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 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],
)
@ -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, 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,
)
}
})

Write Preview
Loading…
Cancel
Save