|
|
|
@ -14,20 +14,23 @@ import TitleInput from "../components/TitleInput"
|
|
|
|
import PlainCourt from "../assets/court/full_court.svg?react"
|
|
|
|
import PlainCourt from "../assets/court/full_court.svg?react"
|
|
|
|
import HalfCourt from "../assets/court/half_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 { Rack } from "../components/Rack"
|
|
|
|
import {PlayerPiece} from "../components/editor/PlayerPiece"
|
|
|
|
import { PlayerPiece } from "../components/editor/PlayerPiece"
|
|
|
|
|
|
|
|
|
|
|
|
import {Tactic, TacticComponent, TacticContent} from "../model/tactic/Tactic"
|
|
|
|
import { Tactic, TacticComponent, TacticContent } from "../model/tactic/Tactic"
|
|
|
|
import {fetchAPI} from "../Fetcher"
|
|
|
|
import { fetchAPI } 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 { BALL_TYPE } from "../model/tactic/CourtObjects"
|
|
|
|
import {CourtAction} from "./editor/CourtAction"
|
|
|
|
import { CourtAction } from "./editor/CourtAction"
|
|
|
|
import {ActionPreview, BasketCourt} from "../components/editor/BasketCourt"
|
|
|
|
import { ActionPreview, BasketCourt } from "../components/editor/BasketCourt"
|
|
|
|
import {overlaps} from "../geo/Box"
|
|
|
|
import { overlaps } from "../geo/Box"
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
dropBallOnComponent,
|
|
|
|
dropBallOnComponent,
|
|
|
|
getComponentCollided,
|
|
|
|
getComponentCollided,
|
|
|
|
@ -39,17 +42,32 @@ import {
|
|
|
|
removeBall,
|
|
|
|
removeBall,
|
|
|
|
updateComponent,
|
|
|
|
updateComponent,
|
|
|
|
} from "../editor/TacticContentDomains"
|
|
|
|
} from "../editor/TacticContentDomains"
|
|
|
|
import {BallState, Player, PlayerInfo, PlayerPhantom, PlayerTeam,} from "../model/tactic/Player"
|
|
|
|
import {
|
|
|
|
import {RackedCourtObject, RackedPlayer} from "../editor/RackedItems"
|
|
|
|
BallState,
|
|
|
|
|
|
|
|
Player,
|
|
|
|
|
|
|
|
PlayerInfo,
|
|
|
|
|
|
|
|
PlayerPhantom,
|
|
|
|
|
|
|
|
PlayerTeam,
|
|
|
|
|
|
|
|
} from "../model/tactic/Player"
|
|
|
|
|
|
|
|
import { RackedCourtObject, RackedPlayer } from "../editor/RackedItems"
|
|
|
|
import CourtPlayer from "../components/editor/CourtPlayer"
|
|
|
|
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 ArrowAction from "../components/actions/ArrowAction"
|
|
|
|
import {middlePos, Pos, ratioWithinBase} from "../geo/Pos"
|
|
|
|
import { middlePos, Pos, ratioWithinBase } from "../geo/Pos"
|
|
|
|
import {Action, ActionKind} from "../model/tactic/Action"
|
|
|
|
import { Action, ActionKind } from "../model/tactic/Action"
|
|
|
|
import BallAction from "../components/actions/BallAction"
|
|
|
|
import BallAction from "../components/actions/BallAction"
|
|
|
|
import {changePlayerBallState, getOrigin, removePlayer,} from "../editor/PlayerDomains"
|
|
|
|
import {
|
|
|
|
import {CourtBall} from "../components/editor/CourtBall"
|
|
|
|
changePlayerBallState,
|
|
|
|
import {BASE} from "../Constants"
|
|
|
|
getOrigin,
|
|
|
|
|
|
|
|
removePlayer,
|
|
|
|
|
|
|
|
} from "../editor/PlayerDomains"
|
|
|
|
|
|
|
|
import { CourtBall } from "../components/editor/CourtBall"
|
|
|
|
|
|
|
|
import { BASE } from "../Constants"
|
|
|
|
|
|
|
|
|
|
|
|
const ERROR_STYLE: CSSProperties = {
|
|
|
|
const ERROR_STYLE: CSSProperties = {
|
|
|
|
borderColor: "red",
|
|
|
|
borderColor: "red",
|
|
|
|
@ -72,7 +90,7 @@ export interface EditorProps {
|
|
|
|
courtType: "PLAIN" | "HALF"
|
|
|
|
courtType: "PLAIN" | "HALF"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default function Editor({id, name, courtType, content}: EditorProps) {
|
|
|
|
export default function Editor({ id, name, courtType, content }: EditorProps) {
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
|
|
|
|
|
|
|
|
const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
|
|
|
|
const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
|
|
|
|
@ -98,7 +116,7 @@ export default function Editor({id, name, courtType, content}: EditorProps) {
|
|
|
|
)
|
|
|
|
)
|
|
|
|
return SaveStates.Guest
|
|
|
|
return SaveStates.Guest
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return fetchAPI(`tactic/${id}/save`, {content}).then((r) =>
|
|
|
|
return fetchAPI(`tactic/${id}/save`, { content }).then((r) =>
|
|
|
|
r.ok ? SaveStates.Ok : SaveStates.Err,
|
|
|
|
r.ok ? SaveStates.Ok : SaveStates.Err,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
@ -107,7 +125,7 @@ export default function Editor({id, name, courtType, content}: EditorProps) {
|
|
|
|
localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
|
|
|
|
localStorage.setItem(GUEST_MODE_TITLE_STORAGE_KEY, name)
|
|
|
|
return true //simulate that the name has been changed
|
|
|
|
return true //simulate that the name has been changed
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return fetchAPI(`tactic/${id}/edit/name`, {name}).then(
|
|
|
|
return fetchAPI(`tactic/${id}/edit/name`, { name }).then(
|
|
|
|
(r) => r.ok,
|
|
|
|
(r) => r.ok,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
@ -117,12 +135,11 @@ export default function Editor({id, name, courtType, content}: EditorProps) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function EditorView({
|
|
|
|
function EditorView({
|
|
|
|
tactic: {id, name, content: initialContent},
|
|
|
|
tactic: { id, name, content: initialContent },
|
|
|
|
onContentChange,
|
|
|
|
onContentChange,
|
|
|
|
onNameChange,
|
|
|
|
onNameChange,
|
|
|
|
courtType,
|
|
|
|
courtType,
|
|
|
|
}: EditorViewProps) {
|
|
|
|
}: EditorViewProps) {
|
|
|
|
|
|
|
|
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
|
|
|
|
|
|
|
|
const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
|
|
|
|
const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
|
|
|
|
@ -150,7 +167,7 @@ function EditorView({
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(() =>
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(() =>
|
|
|
|
isBallOnCourt(content) ? [] : [{key: "ball"}],
|
|
|
|
isBallOnCourt(content) ? [] : [{ key: "ball" }],
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const [previewAction, setPreviewAction] = useState<ActionPreview | null>(
|
|
|
|
const [previewAction, setPreviewAction] = useState<ActionPreview | null>(
|
|
|
|
@ -167,11 +184,14 @@ function EditorView({
|
|
|
|
}))
|
|
|
|
}))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const courtBounds = useCallback(() => courtRef.current!.getBoundingClientRect(), [courtRef])
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
|
|
|
[courtRef],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
setObjects(isBallOnCourt(content) ? [] : [{key: "ball"}])
|
|
|
|
setObjects(isBallOnCourt(content) ? [] : [{ key: "ball" }])
|
|
|
|
}, [setObjects, content]);
|
|
|
|
}, [setObjects, content])
|
|
|
|
|
|
|
|
|
|
|
|
const insertRackedPlayer = (player: Player) => {
|
|
|
|
const insertRackedPlayer = (player: Player) => {
|
|
|
|
let setter
|
|
|
|
let setter
|
|
|
|
@ -183,7 +203,7 @@ function EditorView({
|
|
|
|
setter = setAllies
|
|
|
|
setter = setAllies
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (player.ballState == BallState.HOLDS_BY_PASS) {
|
|
|
|
if (player.ballState == BallState.HOLDS_BY_PASS) {
|
|
|
|
setObjects([{key: "ball"}])
|
|
|
|
setObjects([{ key: "ball" }])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setter((players) => [
|
|
|
|
setter((players) => [
|
|
|
|
...players,
|
|
|
|
...players,
|
|
|
|
@ -195,28 +215,35 @@ function EditorView({
|
|
|
|
])
|
|
|
|
])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const doRemovePlayer = useCallback((component: Player | PlayerPhantom) => {
|
|
|
|
const doRemovePlayer = useCallback(
|
|
|
|
|
|
|
|
(component: Player | PlayerPhantom) => {
|
|
|
|
setContent((c) => removePlayer(component, c))
|
|
|
|
setContent((c) => removePlayer(component, c))
|
|
|
|
if (component.type == "player") insertRackedPlayer(component)
|
|
|
|
if (component.type == "player") insertRackedPlayer(component)
|
|
|
|
}, [setContent])
|
|
|
|
},
|
|
|
|
|
|
|
|
[setContent],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const doMoveBall = useCallback((newBounds: DOMRect, from?: Player | PlayerPhantom) => {
|
|
|
|
const doMoveBall = useCallback(
|
|
|
|
|
|
|
|
(newBounds: DOMRect, from?: Player | PlayerPhantom) => {
|
|
|
|
setContent((content) => {
|
|
|
|
setContent((content) => {
|
|
|
|
if (from) {
|
|
|
|
if (from) {
|
|
|
|
content = changePlayerBallState(from, BallState.NONE, content)
|
|
|
|
content = changePlayerBallState(
|
|
|
|
}
|
|
|
|
from,
|
|
|
|
|
|
|
|
BallState.NONE,
|
|
|
|
content = placeBallAt(
|
|
|
|
|
|
|
|
newBounds,
|
|
|
|
|
|
|
|
courtBounds(),
|
|
|
|
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
content = placeBallAt(newBounds, courtBounds(), content)
|
|
|
|
|
|
|
|
|
|
|
|
return content
|
|
|
|
return content
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}, [courtBounds, setContent])
|
|
|
|
},
|
|
|
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const validatePlayerPosition = useCallback((player: Player | PlayerPhantom, info: PlayerInfo, newPos: Pos) => {
|
|
|
|
const validatePlayerPosition = useCallback(
|
|
|
|
|
|
|
|
(player: Player | PlayerPhantom, info: PlayerInfo, newPos: Pos) => {
|
|
|
|
setContent((content) =>
|
|
|
|
setContent((content) =>
|
|
|
|
moveComponent(
|
|
|
|
moveComponent(
|
|
|
|
newPos,
|
|
|
|
newPos,
|
|
|
|
@ -231,9 +258,12 @@ function EditorView({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}, [courtBounds, setContent])
|
|
|
|
},
|
|
|
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const renderAvailablePlayerActions = useCallback((info: PlayerInfo, player: Player | PlayerPhantom) => {
|
|
|
|
const renderAvailablePlayerActions = useCallback(
|
|
|
|
|
|
|
|
(info: PlayerInfo, player: Player | PlayerPhantom) => {
|
|
|
|
let canPlaceArrows: boolean
|
|
|
|
let canPlaceArrows: boolean
|
|
|
|
|
|
|
|
|
|
|
|
if (player.type == "player") {
|
|
|
|
if (player.type == "player") {
|
|
|
|
@ -259,7 +289,6 @@ function EditorView({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
return [
|
|
|
|
canPlaceArrows && (
|
|
|
|
canPlaceArrows && (
|
|
|
|
<CourtPlayerArrowAction
|
|
|
|
<CourtPlayerArrowAction
|
|
|
|
@ -273,15 +302,22 @@ function EditorView({
|
|
|
|
setContent={setContent}
|
|
|
|
setContent={setContent}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
(info.ballState === BallState.HOLDS_ORIGIN || info.ballState === BallState.PASSED_ORIGIN) && (
|
|
|
|
(info.ballState === BallState.HOLDS_ORIGIN ||
|
|
|
|
<BallAction key={2} onDrop={(ballBounds) => {
|
|
|
|
info.ballState === BallState.PASSED_ORIGIN) && (
|
|
|
|
|
|
|
|
<BallAction
|
|
|
|
|
|
|
|
key={2}
|
|
|
|
|
|
|
|
onDrop={(ballBounds) => {
|
|
|
|
doMoveBall(ballBounds, player)
|
|
|
|
doMoveBall(ballBounds, player)
|
|
|
|
}}/>
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}, [content, doMoveBall, previewAction?.isInvalid, setContent])
|
|
|
|
},
|
|
|
|
|
|
|
|
[content, doMoveBall, previewAction?.isInvalid, setContent],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const renderPlayer = useCallback((component: Player | PlayerPhantom) => {
|
|
|
|
const renderPlayer = useCallback(
|
|
|
|
|
|
|
|
(component: Player | PlayerPhantom) => {
|
|
|
|
let info: PlayerInfo
|
|
|
|
let info: PlayerInfo
|
|
|
|
const isPhantom = component.type == "phantom"
|
|
|
|
const isPhantom = component.type == "phantom"
|
|
|
|
if (isPhantom) {
|
|
|
|
if (isPhantom) {
|
|
|
|
@ -303,29 +339,39 @@ function EditorView({
|
|
|
|
key={component.id}
|
|
|
|
key={component.id}
|
|
|
|
className={isPhantom ? "phantom" : "player"}
|
|
|
|
className={isPhantom ? "phantom" : "player"}
|
|
|
|
playerInfo={info}
|
|
|
|
playerInfo={info}
|
|
|
|
onPositionValidated={(newPos) => validatePlayerPosition(component, info, newPos)}
|
|
|
|
onPositionValidated={(newPos) =>
|
|
|
|
|
|
|
|
validatePlayerPosition(component, info, newPos)
|
|
|
|
|
|
|
|
}
|
|
|
|
onRemove={() => doRemovePlayer(component)}
|
|
|
|
onRemove={() => doRemovePlayer(component)}
|
|
|
|
courtRef={courtRef}
|
|
|
|
courtRef={courtRef}
|
|
|
|
availableActions={() => renderAvailablePlayerActions(info, component)}
|
|
|
|
availableActions={() =>
|
|
|
|
|
|
|
|
renderAvailablePlayerActions(info, component)
|
|
|
|
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}, [content.components, doRemovePlayer, renderAvailablePlayerActions, validatePlayerPosition])
|
|
|
|
},
|
|
|
|
|
|
|
|
[
|
|
|
|
|
|
|
|
content.components,
|
|
|
|
|
|
|
|
doRemovePlayer,
|
|
|
|
|
|
|
|
renderAvailablePlayerActions,
|
|
|
|
|
|
|
|
validatePlayerPosition,
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const doDeleteAction = useCallback((
|
|
|
|
const doDeleteAction = useCallback(
|
|
|
|
action: Action,
|
|
|
|
(action: Action, idx: number, origin: TacticComponent) => {
|
|
|
|
idx: number,
|
|
|
|
|
|
|
|
origin: TacticComponent,
|
|
|
|
|
|
|
|
) => {
|
|
|
|
|
|
|
|
setContent((content) => removeAction(origin, action, idx, content))
|
|
|
|
setContent((content) => removeAction(origin, action, idx, content))
|
|
|
|
}, [setContent])
|
|
|
|
},
|
|
|
|
|
|
|
|
[setContent],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const doUpdateAction = useCallback((component: TacticComponent, action: Action, actionIndex: number) => {
|
|
|
|
const doUpdateAction = useCallback(
|
|
|
|
|
|
|
|
(component: TacticComponent, action: Action, actionIndex: number) => {
|
|
|
|
setContent((content) =>
|
|
|
|
setContent((content) =>
|
|
|
|
updateComponent(
|
|
|
|
updateComponent(
|
|
|
|
{
|
|
|
|
{
|
|
|
|
...component,
|
|
|
|
...component,
|
|
|
|
actions:
|
|
|
|
actions: component.actions.toSpliced(
|
|
|
|
component.actions.toSpliced(
|
|
|
|
|
|
|
|
actionIndex,
|
|
|
|
actionIndex,
|
|
|
|
1,
|
|
|
|
1,
|
|
|
|
action,
|
|
|
|
action,
|
|
|
|
@ -334,13 +380,13 @@ function EditorView({
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}, [setContent])
|
|
|
|
},
|
|
|
|
|
|
|
|
[setContent],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const renderComponent = useCallback((component: TacticComponent) => {
|
|
|
|
const renderComponent = useCallback(
|
|
|
|
if (
|
|
|
|
(component: TacticComponent) => {
|
|
|
|
component.type == "player" ||
|
|
|
|
if (component.type == "player" || component.type == "phantom") {
|
|
|
|
component.type == "phantom"
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return renderPlayer(component)
|
|
|
|
return renderPlayer(component)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (component.type == BALL_TYPE) {
|
|
|
|
if (component.type == BALL_TYPE) {
|
|
|
|
@ -350,23 +396,22 @@ function EditorView({
|
|
|
|
ball={component}
|
|
|
|
ball={component}
|
|
|
|
onPosValidated={doMoveBall}
|
|
|
|
onPosValidated={doMoveBall}
|
|
|
|
onRemove={() => {
|
|
|
|
onRemove={() => {
|
|
|
|
setContent((content) =>
|
|
|
|
setContent((content) => removeBall(content))
|
|
|
|
removeBall(content),
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
setObjects((objects) => [
|
|
|
|
setObjects((objects) => [
|
|
|
|
...objects,
|
|
|
|
...objects,
|
|
|
|
{key: "ball"},
|
|
|
|
{ key: "ball" },
|
|
|
|
])
|
|
|
|
])
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
throw new Error(
|
|
|
|
throw new Error("unknown tactic component " + component)
|
|
|
|
"unknown tactic component " + component,
|
|
|
|
},
|
|
|
|
|
|
|
|
[renderPlayer, doMoveBall, setContent],
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}, [renderPlayer, doMoveBall, setContent])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const renderActions = useCallback((component: TacticComponent) =>
|
|
|
|
const renderActions = useCallback(
|
|
|
|
|
|
|
|
(component: TacticComponent) =>
|
|
|
|
component.actions.map((action, i) => {
|
|
|
|
component.actions.map((action, i) => {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<CourtAction
|
|
|
|
<CourtAction
|
|
|
|
@ -383,7 +428,9 @@ function EditorView({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}), [doDeleteAction, doUpdateAction])
|
|
|
|
}),
|
|
|
|
|
|
|
|
[doDeleteAction, doUpdateAction],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div id="main-div">
|
|
|
|
<div id="main-div">
|
|
|
|
@ -392,34 +439,48 @@ function EditorView({
|
|
|
|
Home
|
|
|
|
Home
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<div id="topbar-left">
|
|
|
|
<div id="topbar-left">
|
|
|
|
<SavingState state={saveState}/>
|
|
|
|
<SavingState state={saveState} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="title-input-div">
|
|
|
|
<div id="title-input-div">
|
|
|
|
<TitleInput
|
|
|
|
<TitleInput
|
|
|
|
style={titleStyle}
|
|
|
|
style={titleStyle}
|
|
|
|
default_value={name}
|
|
|
|
default_value={name}
|
|
|
|
onValidated={useCallback((new_name) => {
|
|
|
|
onValidated={useCallback(
|
|
|
|
|
|
|
|
(new_name) => {
|
|
|
|
onNameChange(new_name).then((success) => {
|
|
|
|
onNameChange(new_name).then((success) => {
|
|
|
|
setTitleStyle(success ? {} : ERROR_STYLE)
|
|
|
|
setTitleStyle(success ? {} : ERROR_STYLE)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}, [onNameChange])}
|
|
|
|
},
|
|
|
|
|
|
|
|
[onNameChange],
|
|
|
|
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="topbar-right"/>
|
|
|
|
<div id="topbar-right" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="edit-div">
|
|
|
|
<div id="edit-div">
|
|
|
|
<div id="racks">
|
|
|
|
<div id="racks">
|
|
|
|
<PlayerRack id={"allies"} objects={allies} setObjects={setAllies} setComponents={setComponents}
|
|
|
|
<PlayerRack
|
|
|
|
courtRef={courtRef}/>
|
|
|
|
id={"allies"}
|
|
|
|
|
|
|
|
objects={allies}
|
|
|
|
|
|
|
|
setObjects={setAllies}
|
|
|
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<Rack
|
|
|
|
<Rack
|
|
|
|
id={"objects"}
|
|
|
|
id={"objects"}
|
|
|
|
objects={objects}
|
|
|
|
objects={objects}
|
|
|
|
onChange={setObjects}
|
|
|
|
onChange={setObjects}
|
|
|
|
canDetach={useCallback((div) =>
|
|
|
|
canDetach={useCallback(
|
|
|
|
overlaps(courtBounds(), div.getBoundingClientRect())
|
|
|
|
(div) =>
|
|
|
|
, [courtBounds])}
|
|
|
|
overlaps(
|
|
|
|
onElementDetached={useCallback((r, e: RackedCourtObject) =>
|
|
|
|
courtBounds(),
|
|
|
|
|
|
|
|
div.getBoundingClientRect(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
[courtBounds],
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
onElementDetached={useCallback(
|
|
|
|
|
|
|
|
(r, e: RackedCourtObject) =>
|
|
|
|
setContent((content) =>
|
|
|
|
setContent((content) =>
|
|
|
|
placeObjectAt(
|
|
|
|
placeObjectAt(
|
|
|
|
r.getBoundingClientRect(),
|
|
|
|
r.getBoundingClientRect(),
|
|
|
|
@ -427,19 +488,25 @@ function EditorView({
|
|
|
|
e,
|
|
|
|
e,
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
),
|
|
|
|
, [courtBounds, setContent])}
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
|
|
|
)}
|
|
|
|
render={renderCourtObject}
|
|
|
|
render={renderCourtObject}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<PlayerRack id={"opponents"} objects={opponents} setObjects={setOpponents}
|
|
|
|
<PlayerRack
|
|
|
|
setComponents={setComponents} courtRef={courtRef}/>
|
|
|
|
id={"opponents"}
|
|
|
|
|
|
|
|
objects={opponents}
|
|
|
|
|
|
|
|
setObjects={setOpponents}
|
|
|
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="court-div">
|
|
|
|
<div id="court-div">
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
<BasketCourt
|
|
|
|
<BasketCourt
|
|
|
|
components={content.components}
|
|
|
|
components={content.components}
|
|
|
|
courtImage={<Court courtType={courtType}/>}
|
|
|
|
courtImage={<Court courtType={courtType} />}
|
|
|
|
courtRef={courtRef}
|
|
|
|
courtRef={courtRef}
|
|
|
|
previewAction={previewAction}
|
|
|
|
previewAction={previewAction}
|
|
|
|
renderComponent={renderComponent}
|
|
|
|
renderComponent={renderComponent}
|
|
|
|
@ -456,23 +523,35 @@ interface PlayerRackProps {
|
|
|
|
id: string
|
|
|
|
id: string
|
|
|
|
objects: RackedPlayer[]
|
|
|
|
objects: RackedPlayer[]
|
|
|
|
setObjects: (state: RackedPlayer[]) => void
|
|
|
|
setObjects: (state: RackedPlayer[]) => void
|
|
|
|
setComponents: (f: (components: TacticComponent[]) => TacticComponent[]) => void
|
|
|
|
setComponents: (
|
|
|
|
|
|
|
|
f: (components: TacticComponent[]) => TacticComponent[],
|
|
|
|
|
|
|
|
) => void
|
|
|
|
courtRef: RefObject<HTMLDivElement>
|
|
|
|
courtRef: RefObject<HTMLDivElement>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function PlayerRack({id, objects, setObjects, courtRef, setComponents}: PlayerRackProps) {
|
|
|
|
function PlayerRack({
|
|
|
|
|
|
|
|
id,
|
|
|
|
const courtBounds = useCallback(() => courtRef.current!.getBoundingClientRect(), [courtRef])
|
|
|
|
objects,
|
|
|
|
|
|
|
|
setObjects,
|
|
|
|
|
|
|
|
courtRef,
|
|
|
|
|
|
|
|
setComponents,
|
|
|
|
|
|
|
|
}: PlayerRackProps) {
|
|
|
|
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
|
|
|
[courtRef],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Rack
|
|
|
|
<Rack
|
|
|
|
id={id}
|
|
|
|
id={id}
|
|
|
|
objects={objects}
|
|
|
|
objects={objects}
|
|
|
|
onChange={setObjects}
|
|
|
|
onChange={setObjects}
|
|
|
|
canDetach={useCallback((div) =>
|
|
|
|
canDetach={useCallback(
|
|
|
|
overlaps(courtBounds(), div.getBoundingClientRect())
|
|
|
|
(div) => overlaps(courtBounds(), div.getBoundingClientRect()),
|
|
|
|
, [courtBounds])}
|
|
|
|
[courtBounds],
|
|
|
|
onElementDetached={useCallback((r, e: RackedPlayer) =>
|
|
|
|
)}
|
|
|
|
|
|
|
|
onElementDetached={useCallback(
|
|
|
|
|
|
|
|
(r, e: RackedPlayer) =>
|
|
|
|
setComponents((components) => [
|
|
|
|
setComponents((components) => [
|
|
|
|
...components,
|
|
|
|
...components,
|
|
|
|
placePlayerAt(
|
|
|
|
placePlayerAt(
|
|
|
|
@ -480,16 +559,20 @@ function PlayerRack({id, objects, setObjects, courtRef, setComponents}: PlayerRa
|
|
|
|
courtBounds(),
|
|
|
|
courtBounds(),
|
|
|
|
e,
|
|
|
|
e,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
])
|
|
|
|
]),
|
|
|
|
, [courtBounds, setComponents])}
|
|
|
|
[courtBounds, setComponents],
|
|
|
|
render={useCallback(({team, key}: { team: PlayerTeam, key: string }) => (
|
|
|
|
)}
|
|
|
|
|
|
|
|
render={useCallback(
|
|
|
|
|
|
|
|
({ team, key }: { team: PlayerTeam; key: string }) => (
|
|
|
|
<PlayerPiece
|
|
|
|
<PlayerPiece
|
|
|
|
team={team}
|
|
|
|
team={team}
|
|
|
|
text={key}
|
|
|
|
text={key}
|
|
|
|
key={key}
|
|
|
|
key={key}
|
|
|
|
hasBall={false}
|
|
|
|
hasBall={false}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
), [])}
|
|
|
|
),
|
|
|
|
|
|
|
|
[],
|
|
|
|
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -513,10 +596,12 @@ function CourtPlayerArrowAction({
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
setContent,
|
|
|
|
setContent,
|
|
|
|
setPreviewAction,
|
|
|
|
setPreviewAction,
|
|
|
|
courtRef
|
|
|
|
courtRef,
|
|
|
|
}: CourtPlayerArrowActionProps) {
|
|
|
|
}: CourtPlayerArrowActionProps) {
|
|
|
|
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
const courtBounds = useCallback(() => courtRef.current!.getBoundingClientRect(), [courtRef])
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
|
|
|
[courtRef],
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ArrowAction
|
|
|
|
<ArrowAction
|
|
|
|
@ -533,29 +618,22 @@ function CourtPlayerArrowAction({
|
|
|
|
...action!,
|
|
|
|
...action!,
|
|
|
|
segments: [
|
|
|
|
segments: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
next: ratioWithinBase(
|
|
|
|
next: ratioWithinBase(arrowHeadPos, courtBounds()),
|
|
|
|
arrowHeadPos,
|
|
|
|
|
|
|
|
courtBounds(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
type: getActionKind(
|
|
|
|
type: getActionKind(target, playerInfo.ballState),
|
|
|
|
target,
|
|
|
|
isInvalid:
|
|
|
|
playerInfo.ballState,
|
|
|
|
!overlaps(headPos, courtBounds()) ||
|
|
|
|
),
|
|
|
|
!isActionValid(player, target, content.components),
|
|
|
|
isInvalid: !overlaps(headPos, courtBounds()) || !isActionValid(player, target, content.components)
|
|
|
|
|
|
|
|
}))
|
|
|
|
}))
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
onHeadPicked={(headPos) => {
|
|
|
|
onHeadPicked={(headPos) => {
|
|
|
|
(document.activeElement as HTMLElement).blur()
|
|
|
|
;(document.activeElement as HTMLElement).blur()
|
|
|
|
|
|
|
|
|
|
|
|
setPreviewAction({
|
|
|
|
setPreviewAction({
|
|
|
|
origin: playerInfo.id,
|
|
|
|
origin: playerInfo.id,
|
|
|
|
type: getActionKind(null, playerInfo.ballState),
|
|
|
|
type: getActionKind(null, playerInfo.ballState),
|
|
|
|
target: ratioWithinBase(
|
|
|
|
target: ratioWithinBase(headPos, courtBounds()),
|
|
|
|
headPos,
|
|
|
|
|
|
|
|
courtBounds(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
segments: [
|
|
|
|
segments: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
next: ratioWithinBase(
|
|
|
|
next: ratioWithinBase(
|
|
|
|
@ -564,7 +642,7 @@ function CourtPlayerArrowAction({
|
|
|
|
),
|
|
|
|
),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
isInvalid: false
|
|
|
|
isInvalid: false,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
onHeadDropped={(headRect) => {
|
|
|
|
onHeadDropped={(headRect) => {
|
|
|
|
@ -574,27 +652,21 @@ function CourtPlayerArrowAction({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
setContent((content) => {
|
|
|
|
let {createdAction, newContent} =
|
|
|
|
let { createdAction, newContent } = createAction(
|
|
|
|
createAction(
|
|
|
|
|
|
|
|
player,
|
|
|
|
player,
|
|
|
|
courtBounds(),
|
|
|
|
courtBounds(),
|
|
|
|
headRect,
|
|
|
|
headRect,
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
if (createdAction.type == ActionKind.SHOOT) {
|
|
|
|
createdAction.type == ActionKind.SHOOT
|
|
|
|
const targetIdx = newContent.components.findIndex(
|
|
|
|
) {
|
|
|
|
(c) => c.id == createdAction.target,
|
|
|
|
const targetIdx =
|
|
|
|
|
|
|
|
newContent.components.findIndex(
|
|
|
|
|
|
|
|
(c) =>
|
|
|
|
|
|
|
|
c.id ==
|
|
|
|
|
|
|
|
createdAction.target,
|
|
|
|
|
|
|
|
)
|
|
|
|
)
|
|
|
|
newContent = dropBallOnComponent(
|
|
|
|
newContent = dropBallOnComponent(
|
|
|
|
targetIdx,
|
|
|
|
targetIdx,
|
|
|
|
newContent,
|
|
|
|
newContent,
|
|
|
|
false
|
|
|
|
false,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
newContent = updateComponent(
|
|
|
|
newContent = updateComponent(
|
|
|
|
{
|
|
|
|
{
|
|
|
|
@ -607,7 +679,6 @@ function CourtPlayerArrowAction({
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return newContent
|
|
|
|
return newContent
|
|
|
|
})
|
|
|
|
})
|
|
|
|
setPreviewAction(null)
|
|
|
|
setPreviewAction(null)
|
|
|
|
@ -620,26 +691,28 @@ function isBallOnCourt(content: TacticContent) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
content.components.findIndex(
|
|
|
|
content.components.findIndex(
|
|
|
|
(c) =>
|
|
|
|
(c) =>
|
|
|
|
(c.type == "player" && (c.ballState === BallState.HOLDS_ORIGIN || c.ballState === BallState.HOLDS_BY_PASS)) ||
|
|
|
|
((c.type === "player" || c.type === "phantom") &&
|
|
|
|
c.type == BALL_TYPE,
|
|
|
|
(c.ballState === BallState.HOLDS_ORIGIN ||
|
|
|
|
|
|
|
|
c.ballState === BallState.PASSED_ORIGIN)) ||
|
|
|
|
|
|
|
|
c.type === BALL_TYPE,
|
|
|
|
) != -1
|
|
|
|
) != -1
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function renderCourtObject(courtObject: RackedCourtObject) {
|
|
|
|
function renderCourtObject(courtObject: RackedCourtObject) {
|
|
|
|
if (courtObject.key == "ball") {
|
|
|
|
if (courtObject.key == "ball") {
|
|
|
|
return <BallPiece/>
|
|
|
|
return <BallPiece />
|
|
|
|
}
|
|
|
|
}
|
|
|
|
throw new Error("unknown racked court object " + courtObject.key)
|
|
|
|
throw new Error("unknown racked court object " + courtObject.key)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function Court({courtType}: { courtType: string }) {
|
|
|
|
function Court({ courtType }: { courtType: string }) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div id="court-image-div">
|
|
|
|
<div id="court-image-div">
|
|
|
|
{courtType == "PLAIN" ? (
|
|
|
|
{courtType == "PLAIN" ? (
|
|
|
|
<PlainCourt id="court-image"/>
|
|
|
|
<PlainCourt id="court-image" />
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<HalfCourt id="court-image"/>
|
|
|
|
<HalfCourt id="court-image" />
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
maxime
1 year ago