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.
64 lines
1.6 KiB
64 lines
1.6 KiB
import {
|
|
ReactElement,
|
|
ReactNode,
|
|
RefObject,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useState,
|
|
} from "react"
|
|
import { Action } from "../../model/tactic/Action"
|
|
|
|
import { CourtAction } from "../../views/editor/CourtAction"
|
|
import { ComponentId, TacticComponent } from "../../model/tactic/Tactic"
|
|
|
|
export interface BasketCourtProps {
|
|
components: TacticComponent[]
|
|
previewAction: ActionPreview | null
|
|
|
|
renderComponent: (comp: TacticComponent) => ReactNode
|
|
renderActions: (comp: TacticComponent) => ReactNode[]
|
|
|
|
courtImage: ReactElement
|
|
courtRef: RefObject<HTMLDivElement>
|
|
}
|
|
|
|
export interface ActionPreview extends Action {
|
|
origin: ComponentId
|
|
isInvalid: boolean
|
|
}
|
|
|
|
export function BasketCourt({
|
|
components,
|
|
previewAction,
|
|
|
|
renderComponent,
|
|
renderActions,
|
|
|
|
courtImage,
|
|
courtRef,
|
|
}: BasketCourtProps) {
|
|
return (
|
|
<div
|
|
className="court-container"
|
|
ref={courtRef}
|
|
style={{ position: "relative" }}>
|
|
{courtImage}
|
|
|
|
{components.map(renderComponent)}
|
|
{components.flatMap(renderActions)}
|
|
|
|
{previewAction && (
|
|
<CourtAction
|
|
courtRef={courtRef}
|
|
action={previewAction}
|
|
origin={previewAction.origin}
|
|
isInvalid={previewAction.isInvalid}
|
|
//do nothing on interacted, not really possible as it's a preview arrow
|
|
onActionDeleted={() => {}}
|
|
onActionChanges={() => {}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|