|
|
|
|
@ -14,28 +14,25 @@ import TitleInput from "../components/TitleInput"
|
|
|
|
|
import PlainCourt from "../assets/court/full_court.svg?react"
|
|
|
|
|
import HalfCourt from "../assets/court/half_court.svg?react"
|
|
|
|
|
|
|
|
|
|
import { BallPiece } from "../components/editor/BallPiece"
|
|
|
|
|
import {BallPiece} from "../components/editor/BallPiece"
|
|
|
|
|
|
|
|
|
|
import { Rack } from "../components/Rack"
|
|
|
|
|
import { PlayerPiece } from "../components/editor/PlayerPiece"
|
|
|
|
|
import {Rack} from "../components/Rack"
|
|
|
|
|
import {PlayerPiece} from "../components/editor/PlayerPiece"
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
CourtType,
|
|
|
|
|
CourtType, StepContent, StepInfoNode,
|
|
|
|
|
Tactic,
|
|
|
|
|
TacticComponent,
|
|
|
|
|
TacticContent,
|
|
|
|
|
} from "../model/tactic/Tactic"
|
|
|
|
|
import { fetchAPI, fetchAPIGet } from "../Fetcher"
|
|
|
|
|
|
|
|
|
|
import SavingState, {
|
|
|
|
|
SaveState,
|
|
|
|
|
SaveStates,
|
|
|
|
|
} from "../components/editor/SavingState"
|
|
|
|
|
import SavingState, {SaveState, SaveStates,} from "../components/editor/SavingState"
|
|
|
|
|
|
|
|
|
|
import { BALL_TYPE } from "../model/tactic/CourtObjects"
|
|
|
|
|
import { CourtAction } from "../components/editor/CourtAction"
|
|
|
|
|
import { ActionPreview, BasketCourt } from "../components/editor/BasketCourt"
|
|
|
|
|
import { overlaps } from "../geo/Box"
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
dropBallOnComponent,
|
|
|
|
|
getComponentCollided,
|
|
|
|
|
@ -47,24 +44,14 @@ import {
|
|
|
|
|
removeBall,
|
|
|
|
|
updateComponent,
|
|
|
|
|
} from "../editor/TacticContentDomains"
|
|
|
|
|
import {
|
|
|
|
|
BallState,
|
|
|
|
|
Player,
|
|
|
|
|
PlayerInfo,
|
|
|
|
|
PlayerLike,
|
|
|
|
|
PlayerTeam,
|
|
|
|
|
} from "../model/tactic/Player"
|
|
|
|
|
import { RackedCourtObject, RackedPlayer } from "../editor/RackedItems"
|
|
|
|
|
|
|
|
|
|
import {BallState, Player, PlayerInfo, PlayerLike, PlayerTeam,} from "../model/tactic/Player"
|
|
|
|
|
import {RackedCourtObject, RackedPlayer} from "../editor/RackedItems"
|
|
|
|
|
import CourtPlayer from "../components/editor/CourtPlayer"
|
|
|
|
|
import {
|
|
|
|
|
createAction,
|
|
|
|
|
getActionKind,
|
|
|
|
|
isActionValid,
|
|
|
|
|
removeAction,
|
|
|
|
|
} from "../editor/ActionsDomains"
|
|
|
|
|
import {createAction, getActionKind, isActionValid, removeAction,} from "../editor/ActionsDomains"
|
|
|
|
|
import ArrowAction from "../components/actions/ArrowAction"
|
|
|
|
|
import { middlePos, Pos, ratioWithinBase } from "../geo/Pos"
|
|
|
|
|
import { Action, ActionKind } from "../model/tactic/Action"
|
|
|
|
|
import {middlePos, Pos, ratioWithinBase} from "../geo/Pos"
|
|
|
|
|
import {Action, ActionKind} from "../model/tactic/Action"
|
|
|
|
|
import BallAction from "../components/actions/BallAction"
|
|
|
|
|
import {
|
|
|
|
|
changePlayerBallState,
|
|
|
|
|
@ -75,6 +62,7 @@ import {
|
|
|
|
|
import { CourtBall } from "../components/editor/CourtBall"
|
|
|
|
|
import { useNavigate, useParams } from "react-router-dom"
|
|
|
|
|
import { DEFAULT_TACTIC_NAME } from "./NewTacticPage.tsx"
|
|
|
|
|
import StepsTree from "../components/editor/StepsTree"
|
|
|
|
|
|
|
|
|
|
const ERROR_STYLE: CSSProperties = {
|
|
|
|
|
borderColor: "red",
|
|
|
|
|
@ -85,7 +73,7 @@ const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
|
|
|
|
|
|
|
|
|
|
export interface EditorViewProps {
|
|
|
|
|
tactic: Tactic
|
|
|
|
|
onContentChange: (tactic: TacticContent) => Promise<SaveState>
|
|
|
|
|
onContentChange: (tactic: StepContent) => Promise<SaveState>
|
|
|
|
|
onNameChange: (name: string) => Promise<boolean>
|
|
|
|
|
}
|
|
|
|
|
interface TacticDto {
|
|
|
|
|
@ -93,6 +81,7 @@ interface TacticDto {
|
|
|
|
|
name: string
|
|
|
|
|
courtType: CourtType
|
|
|
|
|
content: string
|
|
|
|
|
root: StepInfoNode
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface EditorPageProps {
|
|
|
|
|
@ -107,6 +96,7 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
|
|
|
|
|
courtType: "PLAIN",
|
|
|
|
|
content: '{"components": []}',
|
|
|
|
|
name: DEFAULT_TACTIC_NAME,
|
|
|
|
|
root: {id: 1, children: []}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null
|
|
|
|
|
@ -120,9 +110,11 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
|
|
|
|
|
|
|
|
|
|
async function initialize() {
|
|
|
|
|
const infoResponsePromise = fetchAPIGet(`tactics/${id}`)
|
|
|
|
|
const treeResponsePromise = fetchAPIGet(`tactics/${id}/tree`)
|
|
|
|
|
const contentResponsePromise = fetchAPIGet(`tactics/${id}/steps/1`)
|
|
|
|
|
|
|
|
|
|
const infoResponse = await infoResponsePromise
|
|
|
|
|
const treeResponse = await treeResponsePromise
|
|
|
|
|
const contentResponse = await contentResponsePromise
|
|
|
|
|
|
|
|
|
|
if (infoResponse.status == 401 || contentResponse.status == 401) {
|
|
|
|
|
@ -132,8 +124,9 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
|
|
|
|
|
|
|
|
|
|
const { name, courtType } = await infoResponse.json()
|
|
|
|
|
const content = await contentResponse.text()
|
|
|
|
|
const { root } = await treeResponse.json()
|
|
|
|
|
|
|
|
|
|
setTactic({ id, name, courtType, content })
|
|
|
|
|
setTactic({ id, name, courtType, content, root })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
initialize()
|
|
|
|
|
@ -143,6 +136,7 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
|
|
|
|
|
return (
|
|
|
|
|
<Editor
|
|
|
|
|
id={id}
|
|
|
|
|
rootStepNode={tactic.root}
|
|
|
|
|
courtType={tactic.courtType}
|
|
|
|
|
content={tactic.content}
|
|
|
|
|
name={tactic.name}
|
|
|
|
|
@ -161,14 +155,15 @@ export interface EditorProps {
|
|
|
|
|
id: number
|
|
|
|
|
name: string
|
|
|
|
|
content: string
|
|
|
|
|
courtType: CourtType
|
|
|
|
|
courtType: CourtType,
|
|
|
|
|
rootStepNode: StepInfoNode
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Editor({ id, name, courtType, content }: EditorProps) {
|
|
|
|
|
function Editor({ id, name, courtType, content, rootStepNode }: EditorProps) {
|
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
|
|
|
|
|
|
const storageContent = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
|
|
|
|
|
const editorContent =
|
|
|
|
|
const stepContent =
|
|
|
|
|
isInGuestMode && storageContent != null ? storageContent : content
|
|
|
|
|
|
|
|
|
|
const storageName = localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY)
|
|
|
|
|
@ -182,9 +177,13 @@ function Editor({ id, name, courtType, content }: EditorProps) {
|
|
|
|
|
name: editorName,
|
|
|
|
|
id,
|
|
|
|
|
courtType,
|
|
|
|
|
content: JSON.parse(editorContent),
|
|
|
|
|
currentStepContent: {
|
|
|
|
|
stepId: 1,
|
|
|
|
|
...JSON.parse(stepContent)
|
|
|
|
|
},
|
|
|
|
|
rootStepNode,
|
|
|
|
|
}}
|
|
|
|
|
onContentChange={async (content: TacticContent) => {
|
|
|
|
|
onContentChange={async (content: StepContent) => {
|
|
|
|
|
if (isInGuestMode) {
|
|
|
|
|
localStorage.setItem(
|
|
|
|
|
GUEST_MODE_CONTENT_STORAGE_KEY,
|
|
|
|
|
@ -196,6 +195,7 @@ function Editor({ id, name, courtType, content }: EditorProps) {
|
|
|
|
|
`tactics/${id}/steps/1`,
|
|
|
|
|
{ content },
|
|
|
|
|
"PUT",
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
if (response.status == 401) {
|
|
|
|
|
navigate("/login")
|
|
|
|
|
@ -212,21 +212,39 @@ function Editor({ id, name, courtType, content }: EditorProps) {
|
|
|
|
|
`tactics/${id}/name`,
|
|
|
|
|
{ name },
|
|
|
|
|
"PUT",
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
if (response.status == 401) {
|
|
|
|
|
navigate("/login")
|
|
|
|
|
}
|
|
|
|
|
return response.ok
|
|
|
|
|
}}
|
|
|
|
|
onStepSelected={() => {
|
|
|
|
|
}}
|
|
|
|
|
stepsContentsRoot={rootStepNode}
|
|
|
|
|
courtType={courtType}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface EditorViewProps {
|
|
|
|
|
tactic: Tactic
|
|
|
|
|
onContentChange: (tactic: StepContent) => Promise<SaveState>
|
|
|
|
|
onStepSelected: (stepId: number) => void,
|
|
|
|
|
onNameChange: (name: string) => Promise<boolean>
|
|
|
|
|
stepsContentsRoot: StepInfoNode
|
|
|
|
|
courtType: "PLAIN" | "HALF"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function EditorView({
|
|
|
|
|
tactic: { id, name, content: initialContent, courtType },
|
|
|
|
|
onContentChange,
|
|
|
|
|
onNameChange,
|
|
|
|
|
}: EditorViewProps) {
|
|
|
|
|
|
|
|
|
|
tactic: {id, name, currentStepContent: initialContent},
|
|
|
|
|
onContentChange,
|
|
|
|
|
onNameChange,
|
|
|
|
|
onStepSelected,
|
|
|
|
|
stepsContentsRoot,
|
|
|
|
|
courtType,
|
|
|
|
|
}: EditorViewProps) {
|
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
|
|
|
|
|
|
const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
|
|
|
|
|
@ -244,13 +262,15 @@ function EditorView({
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(() =>
|
|
|
|
|
isBallOnCourt(content) ? [] : [{ key: "ball" }],
|
|
|
|
|
isBallOnCourt(content) ? [] : [{key: "ball"}],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const [previewAction, setPreviewAction] = useState<ActionPreview | null>(
|
|
|
|
|
null,
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const [isStepsTreeVisible, setStepsTreeVisible] = useState(false)
|
|
|
|
|
|
|
|
|
|
const courtRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
|
|
|
|
const setComponents = (action: SetStateAction<TacticComponent[]>) => {
|
|
|
|
|
@ -267,7 +287,7 @@ function EditorView({
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setObjects(isBallOnCourt(content) ? [] : [{ key: "ball" }])
|
|
|
|
|
setObjects(isBallOnCourt(content) ? [] : [{key: "ball"}])
|
|
|
|
|
}, [setObjects, content])
|
|
|
|
|
|
|
|
|
|
const insertRackedPlayer = (player: Player) => {
|
|
|
|
|
@ -280,7 +300,7 @@ function EditorView({
|
|
|
|
|
setter = setAllies
|
|
|
|
|
}
|
|
|
|
|
if (player.ballState == BallState.HOLDS_BY_PASS) {
|
|
|
|
|
setObjects([{ key: "ball" }])
|
|
|
|
|
setObjects([{key: "ball"}])
|
|
|
|
|
}
|
|
|
|
|
setter((players) => [
|
|
|
|
|
...players,
|
|
|
|
|
@ -479,7 +499,7 @@ function EditorView({
|
|
|
|
|
setContent((content) => removeBall(content))
|
|
|
|
|
setObjects((objects) => [
|
|
|
|
|
...objects,
|
|
|
|
|
{ key: "ball" },
|
|
|
|
|
{key: "ball"},
|
|
|
|
|
])
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
@ -516,7 +536,7 @@ function EditorView({
|
|
|
|
|
<div id="main-div">
|
|
|
|
|
<div id="topbar-div">
|
|
|
|
|
<div id="topbar-left">
|
|
|
|
|
<SavingState state={saveState} />
|
|
|
|
|
<SavingState state={saveState}/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="title-input-div">
|
|
|
|
|
<TitleInput
|
|
|
|
|
@ -532,70 +552,138 @@ function EditorView({
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="topbar-right" />
|
|
|
|
|
<div id="topbar-right">
|
|
|
|
|
<button onClick={() => setStepsTreeVisible((b) => !b)}>
|
|
|
|
|
STEPS
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="edit-div">
|
|
|
|
|
<div id="racks">
|
|
|
|
|
<PlayerRack
|
|
|
|
|
id={"allies"}
|
|
|
|
|
objects={allies}
|
|
|
|
|
setObjects={setAllies}
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
/>
|
|
|
|
|
<div id="editor-div">
|
|
|
|
|
<div id="content-div">
|
|
|
|
|
<div id="racks">
|
|
|
|
|
<PlayerRack
|
|
|
|
|
id={"allies"}
|
|
|
|
|
objects={allies}
|
|
|
|
|
setObjects={setAllies}
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<Rack
|
|
|
|
|
id={"objects"}
|
|
|
|
|
objects={objects}
|
|
|
|
|
onChange={setObjects}
|
|
|
|
|
canDetach={useCallback(
|
|
|
|
|
(div) =>
|
|
|
|
|
overlaps(
|
|
|
|
|
courtBounds(),
|
|
|
|
|
div.getBoundingClientRect(),
|
|
|
|
|
),
|
|
|
|
|
[courtBounds],
|
|
|
|
|
)}
|
|
|
|
|
onElementDetached={useCallback(
|
|
|
|
|
(r, e: RackedCourtObject) =>
|
|
|
|
|
setContent((content) =>
|
|
|
|
|
placeObjectAt(
|
|
|
|
|
r.getBoundingClientRect(),
|
|
|
|
|
<Rack
|
|
|
|
|
id={"objects"}
|
|
|
|
|
objects={objects}
|
|
|
|
|
onChange={setObjects}
|
|
|
|
|
canDetach={useCallback(
|
|
|
|
|
(div) =>
|
|
|
|
|
overlaps(
|
|
|
|
|
courtBounds(),
|
|
|
|
|
e,
|
|
|
|
|
content,
|
|
|
|
|
div.getBoundingClientRect(),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
)}
|
|
|
|
|
render={renderCourtObject}
|
|
|
|
|
/>
|
|
|
|
|
[courtBounds],
|
|
|
|
|
)}
|
|
|
|
|
onElementDetached={useCallback(
|
|
|
|
|
(r, e: RackedCourtObject) =>
|
|
|
|
|
setContent((content) =>
|
|
|
|
|
placeObjectAt(
|
|
|
|
|
r.getBoundingClientRect(),
|
|
|
|
|
courtBounds(),
|
|
|
|
|
e,
|
|
|
|
|
content,
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
)}
|
|
|
|
|
render={renderCourtObject}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<PlayerRack
|
|
|
|
|
id={"opponents"}
|
|
|
|
|
objects={opponents}
|
|
|
|
|
setObjects={setOpponents}
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="court-div">
|
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
|
<BasketCourt
|
|
|
|
|
components={content.components}
|
|
|
|
|
courtImage={<Court courtType={courtType} />}
|
|
|
|
|
<PlayerRack
|
|
|
|
|
id={"opponents"}
|
|
|
|
|
objects={opponents}
|
|
|
|
|
setObjects={setOpponents}
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
previewAction={previewAction}
|
|
|
|
|
renderComponent={renderComponent}
|
|
|
|
|
renderActions={renderActions}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="court-div">
|
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
|
<BasketCourt
|
|
|
|
|
components={content.components}
|
|
|
|
|
courtImage={<Court courtType={courtType}/>}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
previewAction={previewAction}
|
|
|
|
|
renderComponent={renderComponent}
|
|
|
|
|
renderActions={renderActions}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<EditorStepsTree isVisible={isStepsTreeVisible} root={stepsContentsRoot}/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface EditorStepsTreeProps {
|
|
|
|
|
isVisible: boolean
|
|
|
|
|
root: StepInfoNode
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function EditorStepsTree({isVisible, root}: EditorStepsTreeProps) {
|
|
|
|
|
const fakeRoot: StepInfoNode = {
|
|
|
|
|
id: 0,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
children: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
children: [{
|
|
|
|
|
id: 4,
|
|
|
|
|
children: []
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 5,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
id: 6,
|
|
|
|
|
children: []
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 7,
|
|
|
|
|
children: []
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 8,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
id: 9,
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
id: 10,
|
|
|
|
|
children: []
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<div id="steps-div" style={{transform: isVisible ? "translateX(0)" : "translateX(100%)"}}>
|
|
|
|
|
<StepsTree root={fakeRoot}/>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface PlayerRackProps {
|
|
|
|
|
id: string
|
|
|
|
|
objects: RackedPlayer[]
|
|
|
|
|
@ -607,12 +695,12 @@ interface PlayerRackProps {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function PlayerRack({
|
|
|
|
|
id,
|
|
|
|
|
objects,
|
|
|
|
|
setObjects,
|
|
|
|
|
courtRef,
|
|
|
|
|
setComponents,
|
|
|
|
|
}: PlayerRackProps) {
|
|
|
|
|
id,
|
|
|
|
|
objects,
|
|
|
|
|
setObjects,
|
|
|
|
|
courtRef,
|
|
|
|
|
setComponents,
|
|
|
|
|
}: PlayerRackProps) {
|
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
[courtRef],
|
|
|
|
|
@ -640,7 +728,7 @@ function PlayerRack({
|
|
|
|
|
[courtBounds, setComponents],
|
|
|
|
|
)}
|
|
|
|
|
render={useCallback(
|
|
|
|
|
({ team, key }: { team: PlayerTeam; key: string }) => (
|
|
|
|
|
({team, key}: { team: PlayerTeam; key: string }) => (
|
|
|
|
|
<PlayerPiece
|
|
|
|
|
team={team}
|
|
|
|
|
text={key}
|
|
|
|
|
@ -659,22 +747,22 @@ interface CourtPlayerArrowActionProps {
|
|
|
|
|
player: PlayerLike
|
|
|
|
|
isInvalid: boolean
|
|
|
|
|
|
|
|
|
|
content: TacticContent
|
|
|
|
|
setContent: (state: SetStateAction<TacticContent>) => void
|
|
|
|
|
content: StepContent
|
|
|
|
|
setContent: (state: SetStateAction<StepContent>) => void
|
|
|
|
|
setPreviewAction: (state: SetStateAction<ActionPreview | null>) => void
|
|
|
|
|
courtRef: RefObject<HTMLDivElement>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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],
|
|
|
|
|
@ -729,7 +817,7 @@ function CourtPlayerArrowAction({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
let { createdAction, newContent } = createAction(
|
|
|
|
|
let {createdAction, newContent} = createAction(
|
|
|
|
|
player,
|
|
|
|
|
courtBounds(),
|
|
|
|
|
headRect,
|
|
|
|
|
@ -768,7 +856,7 @@ function CourtPlayerArrowAction({
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isBallOnCourt(content: TacticContent) {
|
|
|
|
|
function isBallOnCourt(content: StepContent) {
|
|
|
|
|
return (
|
|
|
|
|
content.components.findIndex(
|
|
|
|
|
(c) =>
|
|
|
|
|
@ -782,18 +870,18 @@ function isBallOnCourt(content: TacticContent) {
|
|
|
|
|
|
|
|
|
|
function renderCourtObject(courtObject: RackedCourtObject) {
|
|
|
|
|
if (courtObject.key == "ball") {
|
|
|
|
|
return <BallPiece />
|
|
|
|
|
return <BallPiece/>
|
|
|
|
|
}
|
|
|
|
|
throw new Error("unknown racked court object " + courtObject.key)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Court({ courtType }: { courtType: string }) {
|
|
|
|
|
function Court({courtType}: { courtType: string }) {
|
|
|
|
|
return (
|
|
|
|
|
<div id="court-image-div">
|
|
|
|
|
{courtType == "PLAIN" ? (
|
|
|
|
|
<PlainCourt id="court-image" />
|
|
|
|
|
<PlainCourt id="court-image"/>
|
|
|
|
|
) : (
|
|
|
|
|
<HalfCourt id="court-image" />
|
|
|
|
|
<HalfCourt id="court-image"/>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
|
maxime
1 year ago