|
|
|
|
@ -1,8 +1,10 @@
|
|
|
|
|
import {
|
|
|
|
|
CSSProperties,
|
|
|
|
|
Dispatch,
|
|
|
|
|
RefObject,
|
|
|
|
|
SetStateAction,
|
|
|
|
|
useCallback,
|
|
|
|
|
useEffect,
|
|
|
|
|
useMemo,
|
|
|
|
|
useRef,
|
|
|
|
|
useState,
|
|
|
|
|
@ -16,22 +18,55 @@ import { BallPiece } from "../components/editor/BallPiece"
|
|
|
|
|
|
|
|
|
|
import { Rack } from "../components/Rack"
|
|
|
|
|
import { PlayerPiece } from "../components/editor/PlayerPiece"
|
|
|
|
|
import { Player } from "../model/tactic/Player"
|
|
|
|
|
|
|
|
|
|
import { Tactic, TacticContent } from "../model/tactic/Tactic"
|
|
|
|
|
import { Tactic, TacticComponent, TacticContent } from "../model/tactic/Tactic"
|
|
|
|
|
import { fetchAPI } from "../Fetcher"
|
|
|
|
|
import { PlayerTeam } from "../model/tactic/Player"
|
|
|
|
|
|
|
|
|
|
import SavingState, {
|
|
|
|
|
SaveState,
|
|
|
|
|
SaveStates,
|
|
|
|
|
} from "../components/editor/SavingState"
|
|
|
|
|
|
|
|
|
|
import { CourtObject } from "../model/tactic/Ball"
|
|
|
|
|
import { BALL_TYPE } from "../model/tactic/CourtObjects"
|
|
|
|
|
import { CourtAction } from "./editor/CourtAction"
|
|
|
|
|
import { BasketCourt } from "../components/editor/BasketCourt"
|
|
|
|
|
import { ratioWithinBase } from "../components/arrows/Pos"
|
|
|
|
|
import { ActionPreview, BasketCourt } from "../components/editor/BasketCourt"
|
|
|
|
|
import { overlaps } from "../geo/Box"
|
|
|
|
|
import {
|
|
|
|
|
dropBallOnComponent,
|
|
|
|
|
getComponentCollided,
|
|
|
|
|
getRackPlayers,
|
|
|
|
|
moveComponent,
|
|
|
|
|
placeBallAt,
|
|
|
|
|
placeObjectAt,
|
|
|
|
|
placePlayerAt,
|
|
|
|
|
removeBall,
|
|
|
|
|
updateComponent,
|
|
|
|
|
} from "../editor/TacticContentDomains"
|
|
|
|
|
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 ArrowAction from "../components/actions/ArrowAction"
|
|
|
|
|
import { middlePos, Pos, ratioWithinBase } from "../geo/Pos"
|
|
|
|
|
import { Action, ActionKind } from "../model/tactic/Action"
|
|
|
|
|
import BallAction from "../components/actions/BallAction"
|
|
|
|
|
import {
|
|
|
|
|
changePlayerBallState,
|
|
|
|
|
getOrigin,
|
|
|
|
|
removePlayer,
|
|
|
|
|
} from "../editor/PlayerDomains"
|
|
|
|
|
import { CourtBall } from "../components/editor/CourtBall"
|
|
|
|
|
import { BASE } from "../Constants"
|
|
|
|
|
|
|
|
|
|
const ERROR_STYLE: CSSProperties = {
|
|
|
|
|
@ -55,16 +90,6 @@ export interface EditorProps {
|
|
|
|
|
courtType: "PLAIN" | "HALF"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* information about a player that is into a rack
|
|
|
|
|
*/
|
|
|
|
|
interface RackedPlayer {
|
|
|
|
|
team: PlayerTeam
|
|
|
|
|
key: string
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type RackedCourtObject = { key: "ball" }
|
|
|
|
|
|
|
|
|
|
export default function Editor({ id, name, courtType, content }: EditorProps) {
|
|
|
|
|
const isInGuestMode = id == -1
|
|
|
|
|
|
|
|
|
|
@ -126,263 +151,278 @@ function EditorView({
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const [allies, setAllies] = useState(
|
|
|
|
|
getRackPlayers(PlayerTeam.Allies, content.players),
|
|
|
|
|
const [allies, setAllies] = useState(() =>
|
|
|
|
|
getRackPlayers(PlayerTeam.Allies, content.components),
|
|
|
|
|
)
|
|
|
|
|
const [opponents, setOpponents] = useState(
|
|
|
|
|
getRackPlayers(PlayerTeam.Opponents, content.players),
|
|
|
|
|
const [opponents, setOpponents] = useState(() =>
|
|
|
|
|
getRackPlayers(PlayerTeam.Opponents, content.components),
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(
|
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(() =>
|
|
|
|
|
isBallOnCourt(content) ? [] : [{ key: "ball" }],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const courtDivContentRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
const [previewAction, setPreviewAction] = useState<ActionPreview | null>(
|
|
|
|
|
null,
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const isBoundsOnCourt = (bounds: DOMRect) => {
|
|
|
|
|
const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
|
|
|
|
|
const courtRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
|
|
|
|
// check if refBounds overlaps courtBounds
|
|
|
|
|
return !(
|
|
|
|
|
bounds.top > courtBounds.bottom ||
|
|
|
|
|
bounds.right < courtBounds.left ||
|
|
|
|
|
bounds.bottom < courtBounds.top ||
|
|
|
|
|
bounds.left > courtBounds.right
|
|
|
|
|
)
|
|
|
|
|
const setComponents = (action: SetStateAction<TacticComponent[]>) => {
|
|
|
|
|
setContent((c) => ({
|
|
|
|
|
...c,
|
|
|
|
|
components:
|
|
|
|
|
typeof action == "function" ? action(c.components) : action,
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onPieceDetach = (ref: HTMLDivElement, element: RackedPlayer) => {
|
|
|
|
|
const refBounds = ref.getBoundingClientRect()
|
|
|
|
|
const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
|
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
[courtRef],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const { x, y } = ratioWithinBase(refBounds, courtBounds)
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setObjects(isBallOnCourt(content) ? [] : [{ key: "ball" }])
|
|
|
|
|
}, [setObjects, content])
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
players: [
|
|
|
|
|
...content.players,
|
|
|
|
|
const insertRackedPlayer = (player: Player) => {
|
|
|
|
|
let setter
|
|
|
|
|
switch (player.team) {
|
|
|
|
|
case PlayerTeam.Opponents:
|
|
|
|
|
setter = setOpponents
|
|
|
|
|
break
|
|
|
|
|
case PlayerTeam.Allies:
|
|
|
|
|
setter = setAllies
|
|
|
|
|
}
|
|
|
|
|
if (player.ballState == BallState.HOLDS_BY_PASS) {
|
|
|
|
|
setObjects([{ key: "ball" }])
|
|
|
|
|
}
|
|
|
|
|
setter((players) => [
|
|
|
|
|
...players,
|
|
|
|
|
{
|
|
|
|
|
id: "player-" + element.key + "-" + element.team,
|
|
|
|
|
team: element.team,
|
|
|
|
|
role: element.key,
|
|
|
|
|
rightRatio: x,
|
|
|
|
|
bottomRatio: y,
|
|
|
|
|
hasBall: false,
|
|
|
|
|
team: player.team,
|
|
|
|
|
pos: player.role,
|
|
|
|
|
key: player.role,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
actions: content.actions,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
])
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onObjectDetach = (
|
|
|
|
|
ref: HTMLDivElement,
|
|
|
|
|
rackedObject: RackedCourtObject,
|
|
|
|
|
) => {
|
|
|
|
|
const refBounds = ref.getBoundingClientRect()
|
|
|
|
|
const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
|
|
|
|
|
|
|
|
|
|
const { x, y } = ratioWithinBase(refBounds, courtBounds)
|
|
|
|
|
|
|
|
|
|
let courtObject: CourtObject
|
|
|
|
|
|
|
|
|
|
switch (rackedObject.key) {
|
|
|
|
|
case "ball":
|
|
|
|
|
const ballObj = content.objects.findIndex(
|
|
|
|
|
(o) => o.type == "ball",
|
|
|
|
|
)
|
|
|
|
|
const playerCollidedIdx = getPlayerCollided(
|
|
|
|
|
refBounds,
|
|
|
|
|
content.players,
|
|
|
|
|
const doRemovePlayer = useCallback(
|
|
|
|
|
(component: PlayerLike) => {
|
|
|
|
|
setContent((c) => removePlayer(component, c))
|
|
|
|
|
if (component.type == "player") insertRackedPlayer(component)
|
|
|
|
|
},
|
|
|
|
|
[setContent],
|
|
|
|
|
)
|
|
|
|
|
if (playerCollidedIdx != -1) {
|
|
|
|
|
onBallDropOnPlayer(playerCollidedIdx)
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
objects: content.objects.toSpliced(ballObj, 1),
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
courtObject = {
|
|
|
|
|
type: "ball",
|
|
|
|
|
rightRatio: x,
|
|
|
|
|
bottomRatio: y,
|
|
|
|
|
const doMoveBall = useCallback(
|
|
|
|
|
(newBounds: DOMRect, from?: PlayerLike) => {
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
if (from) {
|
|
|
|
|
content = changePlayerBallState(
|
|
|
|
|
from,
|
|
|
|
|
BallState.NONE,
|
|
|
|
|
content,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
break
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
throw new Error("unknown court object " + rackedObject.key)
|
|
|
|
|
}
|
|
|
|
|
content = placeBallAt(newBounds, courtBounds(), content)
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
objects: [...content.objects, courtObject],
|
|
|
|
|
}
|
|
|
|
|
return content
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const getPlayerCollided = (
|
|
|
|
|
bounds: DOMRect,
|
|
|
|
|
players: Player[],
|
|
|
|
|
): number | -1 => {
|
|
|
|
|
for (let i = 0; i < players.length; i++) {
|
|
|
|
|
const player = players[i]
|
|
|
|
|
const playerBounds = document
|
|
|
|
|
.getElementById(player.id)!
|
|
|
|
|
.getBoundingClientRect()
|
|
|
|
|
const doesOverlap = !(
|
|
|
|
|
bounds.top > playerBounds.bottom ||
|
|
|
|
|
bounds.right < playerBounds.left ||
|
|
|
|
|
bounds.bottom < playerBounds.top ||
|
|
|
|
|
bounds.left > playerBounds.right
|
|
|
|
|
},
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
)
|
|
|
|
|
if (doesOverlap) {
|
|
|
|
|
return i
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return -1
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateActions(actions: Action[], players: Player[]) {
|
|
|
|
|
return actions.map((action) => {
|
|
|
|
|
const originHasBall = players.find(
|
|
|
|
|
(p) => p.id == action.fromPlayerId,
|
|
|
|
|
)!.hasBall
|
|
|
|
|
|
|
|
|
|
let type = action.type
|
|
|
|
|
const validatePlayerPosition = useCallback(
|
|
|
|
|
(player: PlayerLike, info: PlayerInfo, newPos: Pos) => {
|
|
|
|
|
setContent((content) =>
|
|
|
|
|
moveComponent(
|
|
|
|
|
newPos,
|
|
|
|
|
player,
|
|
|
|
|
info,
|
|
|
|
|
courtBounds(),
|
|
|
|
|
content,
|
|
|
|
|
|
|
|
|
|
if (originHasBall && type == ActionKind.MOVE) {
|
|
|
|
|
type = ActionKind.DRIBBLE
|
|
|
|
|
} else if (originHasBall && type == ActionKind.SCREEN) {
|
|
|
|
|
type = ActionKind.SHOOT
|
|
|
|
|
} else if (type == ActionKind.DRIBBLE) {
|
|
|
|
|
type = ActionKind.MOVE
|
|
|
|
|
} else if (type == ActionKind.SHOOT) {
|
|
|
|
|
type = ActionKind.SCREEN
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
...action,
|
|
|
|
|
type,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
(content) => {
|
|
|
|
|
if (player.type == "player") insertRackedPlayer(player)
|
|
|
|
|
return removePlayer(player, content)
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const onBallDropOnPlayer = (playerCollidedIdx: number) => {
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
const ballObj = content.objects.findIndex((o) => o.type == "ball")
|
|
|
|
|
let player = content.players.at(playerCollidedIdx) as Player
|
|
|
|
|
const players = content.players.toSpliced(playerCollidedIdx, 1, {
|
|
|
|
|
...player,
|
|
|
|
|
hasBall: true,
|
|
|
|
|
})
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
actions: updateActions(content.actions, players),
|
|
|
|
|
players,
|
|
|
|
|
objects: content.objects.toSpliced(ballObj, 1),
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const renderAvailablePlayerActions = useCallback(
|
|
|
|
|
(info: PlayerInfo, player: PlayerLike) => {
|
|
|
|
|
let canPlaceArrows: boolean
|
|
|
|
|
|
|
|
|
|
if (player.type == "player") {
|
|
|
|
|
canPlaceArrows =
|
|
|
|
|
player.path == null ||
|
|
|
|
|
player.actions.findIndex(
|
|
|
|
|
(p) => p.type != ActionKind.SHOOT,
|
|
|
|
|
) == -1
|
|
|
|
|
} else {
|
|
|
|
|
const origin = getOrigin(player, content.components)
|
|
|
|
|
const path = origin.path!
|
|
|
|
|
// phantoms can only place other arrows if they are the head of the path
|
|
|
|
|
canPlaceArrows =
|
|
|
|
|
path.items.indexOf(player.id) == path.items.length - 1
|
|
|
|
|
if (canPlaceArrows) {
|
|
|
|
|
// and if their only action is to shoot the ball
|
|
|
|
|
const phantomActions = player.actions
|
|
|
|
|
canPlaceArrows =
|
|
|
|
|
phantomActions.length == 0 ||
|
|
|
|
|
phantomActions.findIndex(
|
|
|
|
|
(c) => c.type != ActionKind.SHOOT,
|
|
|
|
|
) == -1
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
canPlaceArrows && (
|
|
|
|
|
<CourtPlayerArrowAction
|
|
|
|
|
key={1}
|
|
|
|
|
player={player}
|
|
|
|
|
isInvalid={previewAction?.isInvalid ?? false}
|
|
|
|
|
setPreviewAction={setPreviewAction}
|
|
|
|
|
playerInfo={info}
|
|
|
|
|
content={content}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
setContent={setContent}
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
(info.ballState === BallState.HOLDS_ORIGIN ||
|
|
|
|
|
info.ballState === BallState.PASSED_ORIGIN) && (
|
|
|
|
|
<BallAction
|
|
|
|
|
key={2}
|
|
|
|
|
onDrop={(ballBounds) => {
|
|
|
|
|
doMoveBall(ballBounds, player)
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
[content, doMoveBall, previewAction?.isInvalid, setContent],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const onBallDrop = (refBounds: DOMRect) => {
|
|
|
|
|
if (!isBoundsOnCourt(refBounds)) {
|
|
|
|
|
removeCourtBall()
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
const playerCollidedIdx = getPlayerCollided(refBounds, content.players)
|
|
|
|
|
if (playerCollidedIdx != -1) {
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
players: content.players.map((player) => ({
|
|
|
|
|
...player,
|
|
|
|
|
hasBall: false,
|
|
|
|
|
})),
|
|
|
|
|
const renderPlayer = useCallback(
|
|
|
|
|
(component: PlayerLike) => {
|
|
|
|
|
let info: PlayerInfo
|
|
|
|
|
const isPhantom = component.type == "phantom"
|
|
|
|
|
if (isPhantom) {
|
|
|
|
|
const origin = getOrigin(component, content.components)
|
|
|
|
|
info = {
|
|
|
|
|
id: component.id,
|
|
|
|
|
team: origin.team,
|
|
|
|
|
role: origin.role,
|
|
|
|
|
bottomRatio: component.bottomRatio,
|
|
|
|
|
rightRatio: component.rightRatio,
|
|
|
|
|
ballState: component.ballState,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
onBallDropOnPlayer(playerCollidedIdx)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (content.objects.findIndex((o) => o.type == "ball") != -1) {
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
info = component
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
|
|
|
|
|
const { x, y } = ratioWithinBase(refBounds, courtBounds)
|
|
|
|
|
let courtObject: CourtObject
|
|
|
|
|
|
|
|
|
|
courtObject = {
|
|
|
|
|
type: "ball",
|
|
|
|
|
rightRatio: x,
|
|
|
|
|
bottomRatio: y,
|
|
|
|
|
return (
|
|
|
|
|
<CourtPlayer
|
|
|
|
|
key={component.id}
|
|
|
|
|
className={isPhantom ? "phantom" : "player"}
|
|
|
|
|
playerInfo={info}
|
|
|
|
|
onPositionValidated={(newPos) =>
|
|
|
|
|
validatePlayerPosition(component, info, newPos)
|
|
|
|
|
}
|
|
|
|
|
onRemove={() => doRemovePlayer(component)}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
availableActions={() =>
|
|
|
|
|
renderAvailablePlayerActions(info, component)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
content.components,
|
|
|
|
|
doRemovePlayer,
|
|
|
|
|
renderAvailablePlayerActions,
|
|
|
|
|
validatePlayerPosition,
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const players = content.players.map((player) => ({
|
|
|
|
|
...player,
|
|
|
|
|
hasBall: false,
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
actions: updateActions(content.actions, players),
|
|
|
|
|
players,
|
|
|
|
|
objects: [...content.objects, courtObject],
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
const doDeleteAction = useCallback(
|
|
|
|
|
(action: Action, idx: number, origin: TacticComponent) => {
|
|
|
|
|
setContent((content) => removeAction(origin, action, idx, content))
|
|
|
|
|
},
|
|
|
|
|
[setContent],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const removePlayer = (player: Player) => {
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
...content,
|
|
|
|
|
players: toSplicedPlayers(content.players, player, false),
|
|
|
|
|
objects: [...content.objects],
|
|
|
|
|
actions: content.actions.filter(
|
|
|
|
|
(a) =>
|
|
|
|
|
a.toPlayerId !== player.id && a.fromPlayerId !== player.id,
|
|
|
|
|
),
|
|
|
|
|
}))
|
|
|
|
|
let setter
|
|
|
|
|
switch (player.team) {
|
|
|
|
|
case PlayerTeam.Opponents:
|
|
|
|
|
setter = setOpponents
|
|
|
|
|
break
|
|
|
|
|
case PlayerTeam.Allies:
|
|
|
|
|
setter = setAllies
|
|
|
|
|
}
|
|
|
|
|
if (player.hasBall) {
|
|
|
|
|
setObjects([{ key: "ball" }])
|
|
|
|
|
}
|
|
|
|
|
setter((players) => [
|
|
|
|
|
...players,
|
|
|
|
|
const doUpdateAction = useCallback(
|
|
|
|
|
(component: TacticComponent, action: Action, actionIndex: number) => {
|
|
|
|
|
setContent((content) =>
|
|
|
|
|
updateComponent(
|
|
|
|
|
{
|
|
|
|
|
team: player.team,
|
|
|
|
|
pos: player.role,
|
|
|
|
|
key: player.role,
|
|
|
|
|
...component,
|
|
|
|
|
actions: component.actions.toSpliced(
|
|
|
|
|
actionIndex,
|
|
|
|
|
1,
|
|
|
|
|
action,
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
content,
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
[setContent],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const renderComponent = useCallback(
|
|
|
|
|
(component: TacticComponent) => {
|
|
|
|
|
if (component.type == "player" || component.type == "phantom") {
|
|
|
|
|
return renderPlayer(component)
|
|
|
|
|
}
|
|
|
|
|
if (component.type == BALL_TYPE) {
|
|
|
|
|
return (
|
|
|
|
|
<CourtBall
|
|
|
|
|
key="ball"
|
|
|
|
|
ball={component}
|
|
|
|
|
onPosValidated={doMoveBall}
|
|
|
|
|
onRemove={() => {
|
|
|
|
|
setContent((content) => removeBall(content))
|
|
|
|
|
setObjects((objects) => [
|
|
|
|
|
...objects,
|
|
|
|
|
{ key: "ball" },
|
|
|
|
|
])
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
throw new Error("unknown tactic component " + component)
|
|
|
|
|
},
|
|
|
|
|
[renderPlayer, doMoveBall, setContent],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const removeCourtBall = () => {
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
const ballObj = content.objects.findIndex((o) => o.type == "ball")
|
|
|
|
|
return {
|
|
|
|
|
...content,
|
|
|
|
|
players: content.players.map((player) => ({
|
|
|
|
|
...player,
|
|
|
|
|
hasBall: false,
|
|
|
|
|
})),
|
|
|
|
|
objects: content.objects.toSpliced(ballObj, 1),
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
setObjects([{ key: "ball" }])
|
|
|
|
|
const renderActions = useCallback(
|
|
|
|
|
(component: TacticComponent) =>
|
|
|
|
|
component.actions.map((action, i) => {
|
|
|
|
|
return (
|
|
|
|
|
<CourtAction
|
|
|
|
|
key={"action-" + component.id + "-" + i}
|
|
|
|
|
action={action}
|
|
|
|
|
origin={component.id}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
isInvalid={false}
|
|
|
|
|
onActionDeleted={() => {
|
|
|
|
|
doDeleteAction(action, i, component)
|
|
|
|
|
}}
|
|
|
|
|
onActionChanges={(action) =>
|
|
|
|
|
doUpdateAction(component, action, i)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}),
|
|
|
|
|
[doDeleteAction, doUpdateAction],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div id="main-div">
|
|
|
|
|
@ -397,138 +437,262 @@ function EditorView({
|
|
|
|
|
<TitleInput
|
|
|
|
|
style={titleStyle}
|
|
|
|
|
default_value={name}
|
|
|
|
|
on_validated={(new_name) => {
|
|
|
|
|
onValidated={useCallback(
|
|
|
|
|
(new_name) => {
|
|
|
|
|
onNameChange(new_name).then((success) => {
|
|
|
|
|
setTitleStyle(success ? {} : ERROR_STYLE)
|
|
|
|
|
})
|
|
|
|
|
}}
|
|
|
|
|
},
|
|
|
|
|
[onNameChange],
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="topbar-right" />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="edit-div">
|
|
|
|
|
<div id="racks">
|
|
|
|
|
<Rack
|
|
|
|
|
id="allies-rack"
|
|
|
|
|
<PlayerRack
|
|
|
|
|
id={"allies"}
|
|
|
|
|
objects={allies}
|
|
|
|
|
onChange={setAllies}
|
|
|
|
|
canDetach={(div) =>
|
|
|
|
|
isBoundsOnCourt(div.getBoundingClientRect())
|
|
|
|
|
}
|
|
|
|
|
onElementDetached={onPieceDetach}
|
|
|
|
|
render={({ team, key }) => (
|
|
|
|
|
<PlayerPiece
|
|
|
|
|
team={team}
|
|
|
|
|
text={key}
|
|
|
|
|
key={key}
|
|
|
|
|
hasBall={false}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
setObjects={setAllies}
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<Rack
|
|
|
|
|
id={"objects"}
|
|
|
|
|
objects={objects}
|
|
|
|
|
onChange={setObjects}
|
|
|
|
|
canDetach={(div) =>
|
|
|
|
|
isBoundsOnCourt(div.getBoundingClientRect())
|
|
|
|
|
}
|
|
|
|
|
onElementDetached={onObjectDetach}
|
|
|
|
|
canDetach={useCallback(
|
|
|
|
|
(div) =>
|
|
|
|
|
overlaps(
|
|
|
|
|
courtBounds(),
|
|
|
|
|
div.getBoundingClientRect(),
|
|
|
|
|
),
|
|
|
|
|
[courtBounds],
|
|
|
|
|
)}
|
|
|
|
|
onElementDetached={useCallback(
|
|
|
|
|
(r, e: RackedCourtObject) =>
|
|
|
|
|
setContent((content) =>
|
|
|
|
|
placeObjectAt(
|
|
|
|
|
r.getBoundingClientRect(),
|
|
|
|
|
courtBounds(),
|
|
|
|
|
e,
|
|
|
|
|
content,
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
[courtBounds, setContent],
|
|
|
|
|
)}
|
|
|
|
|
render={renderCourtObject}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<Rack
|
|
|
|
|
id="opponent-rack"
|
|
|
|
|
<PlayerRack
|
|
|
|
|
id={"opponents"}
|
|
|
|
|
objects={opponents}
|
|
|
|
|
onChange={setOpponents}
|
|
|
|
|
canDetach={(div) =>
|
|
|
|
|
isBoundsOnCourt(div.getBoundingClientRect())
|
|
|
|
|
setObjects={setOpponents}
|
|
|
|
|
setComponents={setComponents}
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
|
/>
|
|
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
onElementDetached={onPieceDetach}
|
|
|
|
|
render={({ team, key }) => (
|
|
|
|
|
|
|
|
|
|
interface PlayerRackProps {
|
|
|
|
|
id: string
|
|
|
|
|
objects: RackedPlayer[]
|
|
|
|
|
setObjects: (state: RackedPlayer[]) => void
|
|
|
|
|
setComponents: (
|
|
|
|
|
f: (components: TacticComponent[]) => TacticComponent[],
|
|
|
|
|
) => void
|
|
|
|
|
courtRef: RefObject<HTMLDivElement>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function PlayerRack({
|
|
|
|
|
id,
|
|
|
|
|
objects,
|
|
|
|
|
setObjects,
|
|
|
|
|
courtRef,
|
|
|
|
|
setComponents,
|
|
|
|
|
}: PlayerRackProps) {
|
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
[courtRef],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Rack
|
|
|
|
|
id={id}
|
|
|
|
|
objects={objects}
|
|
|
|
|
onChange={setObjects}
|
|
|
|
|
canDetach={useCallback(
|
|
|
|
|
(div) => overlaps(courtBounds(), div.getBoundingClientRect()),
|
|
|
|
|
[courtBounds],
|
|
|
|
|
)}
|
|
|
|
|
onElementDetached={useCallback(
|
|
|
|
|
(r, e: RackedPlayer) =>
|
|
|
|
|
setComponents((components) => [
|
|
|
|
|
...components,
|
|
|
|
|
placePlayerAt(
|
|
|
|
|
r.getBoundingClientRect(),
|
|
|
|
|
courtBounds(),
|
|
|
|
|
e,
|
|
|
|
|
),
|
|
|
|
|
]),
|
|
|
|
|
[courtBounds, setComponents],
|
|
|
|
|
)}
|
|
|
|
|
render={useCallback(
|
|
|
|
|
({ team, key }: { team: PlayerTeam; key: string }) => (
|
|
|
|
|
<PlayerPiece
|
|
|
|
|
team={team}
|
|
|
|
|
text={key}
|
|
|
|
|
key={key}
|
|
|
|
|
hasBall={false}
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
[],
|
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="court-div">
|
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
|
<BasketCourt
|
|
|
|
|
players={content.players}
|
|
|
|
|
objects={content.objects}
|
|
|
|
|
actions={content.actions}
|
|
|
|
|
onBallMoved={onBallDrop}
|
|
|
|
|
courtImage={<Court courtType={courtType} />}
|
|
|
|
|
courtRef={courtDivContentRef}
|
|
|
|
|
setActions={(actions) =>
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
...content,
|
|
|
|
|
players: content.players,
|
|
|
|
|
actions: actions(content.actions),
|
|
|
|
|
}))
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
renderAction={(action, i) => (
|
|
|
|
|
<CourtAction
|
|
|
|
|
key={i}
|
|
|
|
|
action={action}
|
|
|
|
|
courtRef={courtDivContentRef}
|
|
|
|
|
onActionDeleted={() => {
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
...content,
|
|
|
|
|
actions: content.actions.toSpliced(
|
|
|
|
|
i,
|
|
|
|
|
1,
|
|
|
|
|
),
|
|
|
|
|
|
|
|
|
|
interface CourtPlayerArrowActionProps {
|
|
|
|
|
playerInfo: PlayerInfo
|
|
|
|
|
player: PlayerLike
|
|
|
|
|
isInvalid: boolean
|
|
|
|
|
|
|
|
|
|
content: TacticContent
|
|
|
|
|
setContent: (state: SetStateAction<TacticContent>) => void
|
|
|
|
|
setPreviewAction: (state: SetStateAction<ActionPreview | null>) => void
|
|
|
|
|
courtRef: RefObject<HTMLDivElement>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function CourtPlayerArrowAction({
|
|
|
|
|
playerInfo,
|
|
|
|
|
player,
|
|
|
|
|
isInvalid,
|
|
|
|
|
|
|
|
|
|
content,
|
|
|
|
|
setContent,
|
|
|
|
|
setPreviewAction,
|
|
|
|
|
courtRef,
|
|
|
|
|
}: CourtPlayerArrowActionProps) {
|
|
|
|
|
const courtBounds = useCallback(
|
|
|
|
|
() => courtRef.current!.getBoundingClientRect(),
|
|
|
|
|
[courtRef],
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ArrowAction
|
|
|
|
|
key={1}
|
|
|
|
|
onHeadMoved={(headPos) => {
|
|
|
|
|
const arrowHeadPos = middlePos(headPos)
|
|
|
|
|
const targetIdx = getComponentCollided(
|
|
|
|
|
headPos,
|
|
|
|
|
content.components,
|
|
|
|
|
)
|
|
|
|
|
const target = content.components[targetIdx]
|
|
|
|
|
|
|
|
|
|
setPreviewAction((action) => ({
|
|
|
|
|
...action!,
|
|
|
|
|
segments: [
|
|
|
|
|
{
|
|
|
|
|
next: ratioWithinBase(arrowHeadPos, courtBounds()),
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
type: getActionKind(target, playerInfo.ballState).kind,
|
|
|
|
|
isInvalid:
|
|
|
|
|
!overlaps(headPos, courtBounds()) ||
|
|
|
|
|
!isActionValid(player, target, content.components),
|
|
|
|
|
}))
|
|
|
|
|
}}
|
|
|
|
|
onActionChanges={(a) =>
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
...content,
|
|
|
|
|
actions: content.actions.toSpliced(
|
|
|
|
|
i,
|
|
|
|
|
1,
|
|
|
|
|
a,
|
|
|
|
|
onHeadPicked={(headPos) => {
|
|
|
|
|
;(document.activeElement as HTMLElement).blur()
|
|
|
|
|
|
|
|
|
|
setPreviewAction({
|
|
|
|
|
origin: playerInfo.id,
|
|
|
|
|
type: getActionKind(null, playerInfo.ballState).kind,
|
|
|
|
|
target: ratioWithinBase(headPos, courtBounds()),
|
|
|
|
|
segments: [
|
|
|
|
|
{
|
|
|
|
|
next: ratioWithinBase(
|
|
|
|
|
middlePos(headPos),
|
|
|
|
|
courtBounds(),
|
|
|
|
|
),
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
onPlayerChange={(player) => {
|
|
|
|
|
const playerBounds = document
|
|
|
|
|
.getElementById(player.id)!
|
|
|
|
|
.getBoundingClientRect()
|
|
|
|
|
if (!isBoundsOnCourt(playerBounds)) {
|
|
|
|
|
removePlayer(player)
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
isInvalid: false,
|
|
|
|
|
})
|
|
|
|
|
}}
|
|
|
|
|
onHeadDropped={(headRect) => {
|
|
|
|
|
if (isInvalid) {
|
|
|
|
|
setPreviewAction(null)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
...content,
|
|
|
|
|
players: toSplicedPlayers(
|
|
|
|
|
content.players,
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
let { createdAction, newContent } = createAction(
|
|
|
|
|
player,
|
|
|
|
|
true,
|
|
|
|
|
),
|
|
|
|
|
}))
|
|
|
|
|
courtBounds(),
|
|
|
|
|
headRect,
|
|
|
|
|
content,
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
if (createdAction.type == ActionKind.SHOOT) {
|
|
|
|
|
const targetIdx = newContent.components.findIndex(
|
|
|
|
|
(c) => c.id == createdAction.target,
|
|
|
|
|
)
|
|
|
|
|
newContent = dropBallOnComponent(
|
|
|
|
|
targetIdx,
|
|
|
|
|
newContent,
|
|
|
|
|
false,
|
|
|
|
|
)
|
|
|
|
|
const ballState =
|
|
|
|
|
player.ballState === BallState.HOLDS_ORIGIN
|
|
|
|
|
? BallState.PASSED_ORIGIN
|
|
|
|
|
: BallState.PASSED
|
|
|
|
|
newContent = updateComponent(
|
|
|
|
|
{
|
|
|
|
|
...(newContent.components.find(
|
|
|
|
|
(c) => c.id == player.id,
|
|
|
|
|
)! as PlayerLike),
|
|
|
|
|
ballState,
|
|
|
|
|
},
|
|
|
|
|
newContent,
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return newContent
|
|
|
|
|
})
|
|
|
|
|
setPreviewAction(null)
|
|
|
|
|
}}
|
|
|
|
|
onPlayerRemove={removePlayer}
|
|
|
|
|
onBallRemove={removeCourtBall}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isBallOnCourt(content: TacticContent) {
|
|
|
|
|
if (content.players.findIndex((p) => p.hasBall) != -1) {
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
return content.objects.findIndex((o) => o.type == "ball") != -1
|
|
|
|
|
return (
|
|
|
|
|
content.components.findIndex(
|
|
|
|
|
(c) =>
|
|
|
|
|
((c.type === "player" || c.type === "phantom") &&
|
|
|
|
|
(c.ballState === BallState.HOLDS_ORIGIN ||
|
|
|
|
|
c.ballState === BallState.PASSED_ORIGIN)) ||
|
|
|
|
|
c.type === BALL_TYPE,
|
|
|
|
|
) != -1
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderCourtObject(courtObject: RackedCourtObject) {
|
|
|
|
|
@ -550,16 +714,6 @@ function Court({ courtType }: { courtType: string }) {
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getRackPlayers(team: PlayerTeam, players: Player[]): RackedPlayer[] {
|
|
|
|
|
return ["1", "2", "3", "4", "5"]
|
|
|
|
|
.filter(
|
|
|
|
|
(role) =>
|
|
|
|
|
players.findIndex((p) => p.team == team && p.role == role) ==
|
|
|
|
|
-1,
|
|
|
|
|
)
|
|
|
|
|
.map((key) => ({ team, key }))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function debounceAsync<A, B>(
|
|
|
|
|
f: (args: A) => Promise<B>,
|
|
|
|
|
delay = 1000,
|
|
|
|
|
@ -588,6 +742,7 @@ function useContentState<S>(
|
|
|
|
|
typeof newState === "function"
|
|
|
|
|
? (newState as (state: S) => S)(content)
|
|
|
|
|
: newState
|
|
|
|
|
|
|
|
|
|
if (state !== content) {
|
|
|
|
|
setSavingState(SaveStates.Saving)
|
|
|
|
|
saveStateCallback(state)
|
|
|
|
|
@ -602,15 +757,3 @@ function useContentState<S>(
|
|
|
|
|
|
|
|
|
|
return [content, setContentSynced, savingState]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function toSplicedPlayers(
|
|
|
|
|
players: Player[],
|
|
|
|
|
player: Player,
|
|
|
|
|
replace: boolean,
|
|
|
|
|
): Player[] {
|
|
|
|
|
const idx = players.findIndex(
|
|
|
|
|
(p) => p.team === player.team && p.role === player.role,
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return players.toSpliced(idx, 1, ...(replace ? [player] : []))
|
|
|
|
|
}
|
|
|
|
|
|
