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