You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
57 lines
1.5 KiB
import {ReactElement, ReactNode, RefObject, useLayoutEffect, useState,} from "react"
|
|
import {Action} from "../../model/tactic/Action"
|
|
|
|
import {CourtAction} from "../../views/editor/CourtAction"
|
|
import {TacticComponent} from "../../model/tactic/Tactic"
|
|
|
|
export interface BasketCourtProps {
|
|
components: TacticComponent[]
|
|
actions: Action[]
|
|
previewAction: Action | null
|
|
|
|
renderComponent: (comp: TacticComponent) => ReactNode
|
|
renderAction: (action: Action, idx: number) => ReactNode
|
|
|
|
courtImage: ReactElement
|
|
courtRef: RefObject<HTMLDivElement>
|
|
}
|
|
|
|
export function BasketCourt({
|
|
components,
|
|
actions,
|
|
previewAction,
|
|
|
|
renderComponent,
|
|
renderAction,
|
|
|
|
courtImage,
|
|
courtRef,
|
|
}: BasketCourtProps) {
|
|
const [internActions, setInternActions] = useState<Action[]>([])
|
|
|
|
useLayoutEffect(() => setInternActions(actions), [actions])
|
|
|
|
return (
|
|
<div
|
|
className="court-container"
|
|
ref={courtRef}
|
|
style={{ position: "relative" }}>
|
|
{courtImage}
|
|
|
|
{components.map(renderComponent)}
|
|
|
|
{internActions.map((action, idx) => renderAction(action, idx))}
|
|
|
|
{previewAction && (
|
|
<CourtAction
|
|
courtRef={courtRef}
|
|
action={previewAction}
|
|
//do nothing on interacted, not really possible as it's a preview arrow
|
|
onActionDeleted={() => {}}
|
|
onActionChanges={() => {}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|