|
|
|
@ -1,23 +1,34 @@
|
|
|
|
import {CSSProperties, Dispatch, SetStateAction, useCallback, useMemo, useRef, useState,} from "react"
|
|
|
|
import {
|
|
|
|
|
|
|
|
CSSProperties,
|
|
|
|
|
|
|
|
Dispatch,
|
|
|
|
|
|
|
|
SetStateAction,
|
|
|
|
|
|
|
|
useCallback,
|
|
|
|
|
|
|
|
useMemo,
|
|
|
|
|
|
|
|
useRef,
|
|
|
|
|
|
|
|
useState,
|
|
|
|
|
|
|
|
} from "react"
|
|
|
|
import "../style/editor.css"
|
|
|
|
import "../style/editor.css"
|
|
|
|
import TitleInput from "../components/TitleInput"
|
|
|
|
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 {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,
|
|
|
|
@ -26,19 +37,30 @@ import {
|
|
|
|
placeBallAt,
|
|
|
|
placeBallAt,
|
|
|
|
placeObjectAt,
|
|
|
|
placeObjectAt,
|
|
|
|
placePlayerAt,
|
|
|
|
placePlayerAt,
|
|
|
|
removeBall, updateComponent,
|
|
|
|
removeBall,
|
|
|
|
|
|
|
|
updateComponent,
|
|
|
|
} from "../editor/TacticContentDomains"
|
|
|
|
} from "../editor/TacticContentDomains"
|
|
|
|
import {BallState, Player, PlayerInfo, PlayerPhantom, PlayerTeam,} from "../model/tactic/Player"
|
|
|
|
import {
|
|
|
|
import {RackedCourtObject} from "../editor/RackedItems"
|
|
|
|
BallState,
|
|
|
|
|
|
|
|
Player,
|
|
|
|
|
|
|
|
PlayerInfo,
|
|
|
|
|
|
|
|
PlayerPhantom,
|
|
|
|
|
|
|
|
PlayerTeam,
|
|
|
|
|
|
|
|
} from "../model/tactic/Player"
|
|
|
|
|
|
|
|
import { RackedCourtObject } from "../editor/RackedItems"
|
|
|
|
import CourtPlayer from "../components/editor/CourtPlayer"
|
|
|
|
import CourtPlayer from "../components/editor/CourtPlayer"
|
|
|
|
import {getActionKind, placeArrow, repositionActionsRelatedTo,} from "../editor/ActionsDomains"
|
|
|
|
import { getActionKind, placeArrow } from "../editor/ActionsDomains"
|
|
|
|
import ArrowAction from "../components/actions/ArrowAction"
|
|
|
|
import ArrowAction from "../components/actions/ArrowAction"
|
|
|
|
import {middlePos, ratioWithinBase} from "../geo/Pos"
|
|
|
|
import { middlePos, 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 {getOrigin, removePlayer, truncatePlayerPath,} from "../editor/PlayerDomains"
|
|
|
|
import {
|
|
|
|
import {CourtBall} from "../components/editor/CourtBall"
|
|
|
|
getOrigin,
|
|
|
|
import {BASE} from "../Constants"
|
|
|
|
removePlayer,
|
|
|
|
|
|
|
|
truncatePlayerPath,
|
|
|
|
|
|
|
|
} 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",
|
|
|
|
@ -61,7 +83,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)
|
|
|
|
@ -87,7 +109,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,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
@ -96,7 +118,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,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
@ -106,11 +128,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>({})
|
|
|
|
@ -130,27 +152,24 @@ function EditorView({
|
|
|
|
),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const [allies, setAllies] = useState(
|
|
|
|
const [allies, setAllies] = useState(() =>
|
|
|
|
() => getRackPlayers(PlayerTeam.Allies, content.components),
|
|
|
|
getRackPlayers(PlayerTeam.Allies, content.components),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
const [opponents, setOpponents] = useState(
|
|
|
|
const [opponents, setOpponents] = useState(() =>
|
|
|
|
() => getRackPlayers(PlayerTeam.Opponents, content.components),
|
|
|
|
getRackPlayers(PlayerTeam.Opponents, content.components),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(
|
|
|
|
const [objects, setObjects] = useState<RackedCourtObject[]>(() =>
|
|
|
|
() => isBallOnCourt(content) ? [] : [{key: "ball"}],
|
|
|
|
isBallOnCourt(content) ? [] : [{ key: "ball" }],
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const [previewAction, setPreviewAction] = useState<Action | null>(null)
|
|
|
|
const [previewAction, setPreviewAction] = useState<ActionPreview | null>(
|
|
|
|
|
|
|
|
null,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const courtRef = useRef<HTMLDivElement>(null)
|
|
|
|
const courtRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
|
|
|
|
|
|
const setActions = (action: SetStateAction<Action[]>) => {
|
|
|
|
const actionsReRenderHooks = []
|
|
|
|
setContent((c) => ({
|
|
|
|
|
|
|
|
...c,
|
|
|
|
|
|
|
|
actions: typeof action == "function" ? action(c.actions) : action,
|
|
|
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const setComponents = (action: SetStateAction<TacticComponent[]>) => {
|
|
|
|
const setComponents = (action: SetStateAction<TacticComponent[]>) => {
|
|
|
|
setContent((c) => ({
|
|
|
|
setContent((c) => ({
|
|
|
|
@ -170,7 +189,7 @@ function EditorView({
|
|
|
|
setter = setAllies
|
|
|
|
setter = setAllies
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (player.ballState == BallState.HOLDS) {
|
|
|
|
if (player.ballState == BallState.HOLDS) {
|
|
|
|
setObjects([{key: "ball"}])
|
|
|
|
setObjects([{ key: "ball" }])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setter((players) => [
|
|
|
|
setter((players) => [
|
|
|
|
...players,
|
|
|
|
...players,
|
|
|
|
@ -184,14 +203,14 @@ function EditorView({
|
|
|
|
|
|
|
|
|
|
|
|
const doMoveBall = (newBounds: DOMRect) => {
|
|
|
|
const doMoveBall = (newBounds: DOMRect) => {
|
|
|
|
setContent((content) => {
|
|
|
|
setContent((content) => {
|
|
|
|
const {newContent, removed} = placeBallAt(
|
|
|
|
const { newContent, removed } = placeBallAt(
|
|
|
|
newBounds,
|
|
|
|
newBounds,
|
|
|
|
courtBounds(),
|
|
|
|
courtBounds(),
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
if (removed) {
|
|
|
|
if (removed) {
|
|
|
|
setObjects((objects) => [...objects, {key: "ball"}])
|
|
|
|
setObjects((objects) => [...objects, { key: "ball" }])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return newContent
|
|
|
|
return newContent
|
|
|
|
@ -209,13 +228,18 @@ function EditorView({
|
|
|
|
const origin = getOrigin(component, content.components)
|
|
|
|
const origin = getOrigin(component, content.components)
|
|
|
|
const path = origin.path!
|
|
|
|
const path = origin.path!
|
|
|
|
// phantoms can only place other arrows if they are the head of the path
|
|
|
|
// phantoms can only place other arrows if they are the head of the path
|
|
|
|
canPlaceArrows = path.items.indexOf(component.id) == path.items.length - 1
|
|
|
|
canPlaceArrows =
|
|
|
|
|
|
|
|
path.items.indexOf(component.id) == path.items.length - 1
|
|
|
|
if (canPlaceArrows) {
|
|
|
|
if (canPlaceArrows) {
|
|
|
|
// and if their only action is to shoot the ball
|
|
|
|
// and if their only action is to shoot the ball
|
|
|
|
|
|
|
|
|
|
|
|
// list the actions the phantoms does
|
|
|
|
// list the actions the phantoms does
|
|
|
|
const phantomArrows = content.actions.filter(c => c.fromId == component.id)
|
|
|
|
const phantomActions = component.actions
|
|
|
|
canPlaceArrows = phantomArrows.length == 0 || phantomArrows.findIndex(c => c.type != ActionKind.SHOOT) == -1
|
|
|
|
canPlaceArrows =
|
|
|
|
|
|
|
|
phantomActions.length == 0 ||
|
|
|
|
|
|
|
|
phantomActions.findIndex(
|
|
|
|
|
|
|
|
(c) => c.type != ActionKind.SHOOT,
|
|
|
|
|
|
|
|
) == -1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
info = {
|
|
|
|
info = {
|
|
|
|
@ -230,7 +254,11 @@ function EditorView({
|
|
|
|
// a player
|
|
|
|
// a player
|
|
|
|
info = component
|
|
|
|
info = component
|
|
|
|
// can place arrows only if the
|
|
|
|
// can place arrows only if the
|
|
|
|
canPlaceArrows = component.path == null || content.actions.findIndex(p => p.fromId == component.id && p.type != ActionKind.SHOOT) == -1
|
|
|
|
canPlaceArrows =
|
|
|
|
|
|
|
|
component.path == null ||
|
|
|
|
|
|
|
|
component.actions.findIndex(
|
|
|
|
|
|
|
|
(p) => p.type != ActionKind.SHOOT,
|
|
|
|
|
|
|
|
) == -1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
@ -238,11 +266,6 @@ function EditorView({
|
|
|
|
key={component.id}
|
|
|
|
key={component.id}
|
|
|
|
className={isPhantom ? "phantom" : "player"}
|
|
|
|
className={isPhantom ? "phantom" : "player"}
|
|
|
|
playerInfo={info}
|
|
|
|
playerInfo={info}
|
|
|
|
onMoves={() =>
|
|
|
|
|
|
|
|
setActions((actions) =>
|
|
|
|
|
|
|
|
repositionActionsRelatedTo(info.id, courtBounds(), actions),
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
onPositionValidated={(newPos) => {
|
|
|
|
onPositionValidated={(newPos) => {
|
|
|
|
setContent((content) =>
|
|
|
|
setContent((content) =>
|
|
|
|
moveComponent(
|
|
|
|
moveComponent(
|
|
|
|
@ -264,13 +287,16 @@ function EditorView({
|
|
|
|
if (!isPhantom) insertRackedPlayer(component)
|
|
|
|
if (!isPhantom) insertRackedPlayer(component)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
courtRef={courtRef}
|
|
|
|
courtRef={courtRef}
|
|
|
|
availableActions={(pieceRef) => [
|
|
|
|
availableActions={() => [
|
|
|
|
canPlaceArrows && (
|
|
|
|
canPlaceArrows && (
|
|
|
|
<ArrowAction
|
|
|
|
<ArrowAction
|
|
|
|
key={1}
|
|
|
|
key={1}
|
|
|
|
onHeadMoved={(headPos) => {
|
|
|
|
onHeadMoved={(headPos) => {
|
|
|
|
const arrowHeadPos = middlePos(headPos)
|
|
|
|
const arrowHeadPos = middlePos(headPos)
|
|
|
|
const targetIdx = getComponentCollided(headPos, content.components)
|
|
|
|
const targetIdx = getComponentCollided(
|
|
|
|
|
|
|
|
headPos,
|
|
|
|
|
|
|
|
content.components,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
setPreviewAction((action) => ({
|
|
|
|
setPreviewAction((action) => ({
|
|
|
|
...action!,
|
|
|
|
...action!,
|
|
|
|
@ -282,20 +308,20 @@ function EditorView({
|
|
|
|
),
|
|
|
|
),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
type: getActionKind(targetIdx != -1, info.ballState),
|
|
|
|
type: getActionKind(
|
|
|
|
|
|
|
|
targetIdx != -1,
|
|
|
|
|
|
|
|
info.ballState,
|
|
|
|
|
|
|
|
),
|
|
|
|
}))
|
|
|
|
}))
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
onHeadPicked={(headPos) => {
|
|
|
|
onHeadPicked={(headPos) => {
|
|
|
|
(document.activeElement as HTMLElement).blur()
|
|
|
|
;(document.activeElement as HTMLElement).blur()
|
|
|
|
|
|
|
|
|
|
|
|
setPreviewAction({
|
|
|
|
setPreviewAction({
|
|
|
|
|
|
|
|
origin: component.id,
|
|
|
|
type: getActionKind(false, info.ballState),
|
|
|
|
type: getActionKind(false, info.ballState),
|
|
|
|
fromId: info.id,
|
|
|
|
target: ratioWithinBase(
|
|
|
|
toId: null,
|
|
|
|
headPos,
|
|
|
|
moveFrom: ratioWithinBase(
|
|
|
|
|
|
|
|
middlePos(
|
|
|
|
|
|
|
|
pieceRef.getBoundingClientRect(),
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
courtBounds(),
|
|
|
|
courtBounds(),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
segments: [
|
|
|
|
segments: [
|
|
|
|
@ -310,25 +336,41 @@ function EditorView({
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
onHeadDropped={(headRect) => {
|
|
|
|
onHeadDropped={(headRect) => {
|
|
|
|
setContent((content) => {
|
|
|
|
setContent((content) => {
|
|
|
|
let {createdAction, newContent} = placeArrow(
|
|
|
|
let { createdAction, newContent } =
|
|
|
|
component,
|
|
|
|
placeArrow(
|
|
|
|
courtBounds(),
|
|
|
|
component,
|
|
|
|
headRect,
|
|
|
|
courtBounds(),
|
|
|
|
content,
|
|
|
|
headRect,
|
|
|
|
)
|
|
|
|
content,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
let originNewBallState = component.ballState
|
|
|
|
let originNewBallState = component.ballState
|
|
|
|
|
|
|
|
|
|
|
|
if (createdAction.type == ActionKind.SHOOT) {
|
|
|
|
if (
|
|
|
|
const targetIdx = newContent.components.findIndex(c => c.id == createdAction.toId)
|
|
|
|
createdAction.type == ActionKind.SHOOT
|
|
|
|
newContent = dropBallOnComponent(targetIdx, newContent)
|
|
|
|
) {
|
|
|
|
|
|
|
|
const targetIdx =
|
|
|
|
|
|
|
|
newContent.components.findIndex(
|
|
|
|
|
|
|
|
(c) =>
|
|
|
|
|
|
|
|
c.id ==
|
|
|
|
|
|
|
|
createdAction.target,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
newContent = dropBallOnComponent(
|
|
|
|
|
|
|
|
targetIdx,
|
|
|
|
|
|
|
|
newContent,
|
|
|
|
|
|
|
|
)
|
|
|
|
originNewBallState = BallState.SHOOTED
|
|
|
|
originNewBallState = BallState.SHOOTED
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
newContent = updateComponent({
|
|
|
|
newContent = updateComponent(
|
|
|
|
...(newContent.components.find(c => c.id == component.id)! as Player | PlayerPhantom),
|
|
|
|
{
|
|
|
|
ballState: originNewBallState
|
|
|
|
...(newContent.components.find(
|
|
|
|
}, newContent)
|
|
|
|
(c) => c.id == component.id,
|
|
|
|
|
|
|
|
)! as Player | PlayerPhantom),
|
|
|
|
|
|
|
|
ballState: originNewBallState,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
newContent,
|
|
|
|
|
|
|
|
)
|
|
|
|
return newContent
|
|
|
|
return newContent
|
|
|
|
})
|
|
|
|
})
|
|
|
|
setPreviewAction(null)
|
|
|
|
setPreviewAction(null)
|
|
|
|
@ -336,16 +378,54 @@ function EditorView({
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
info.ballState != BallState.NONE && (
|
|
|
|
info.ballState != BallState.NONE && (
|
|
|
|
<BallAction
|
|
|
|
<BallAction key={2} onDrop={doMoveBall} />
|
|
|
|
key={2}
|
|
|
|
|
|
|
|
onDrop={doMoveBall}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
),
|
|
|
|
),
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const doDeleteAction = (
|
|
|
|
|
|
|
|
action: Action,
|
|
|
|
|
|
|
|
idx: number,
|
|
|
|
|
|
|
|
component: TacticComponent,
|
|
|
|
|
|
|
|
) => {
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
|
|
|
content = updateComponent(
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
...component,
|
|
|
|
|
|
|
|
actions: component.actions.toSpliced(idx, 1),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
content,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (action.target == null) return content
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const target = content.components.find(
|
|
|
|
|
|
|
|
(c) => action.target == c.id,
|
|
|
|
|
|
|
|
)!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (target.type == "phantom") {
|
|
|
|
|
|
|
|
let path = null
|
|
|
|
|
|
|
|
if (component.type == "player") {
|
|
|
|
|
|
|
|
path = component.path
|
|
|
|
|
|
|
|
} else if (component.type == "phantom") {
|
|
|
|
|
|
|
|
path = getOrigin(component, content.components).path
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
|
|
|
path == null ||
|
|
|
|
|
|
|
|
path.items.find((c) => c == target.id) == null
|
|
|
|
|
|
|
|
) {
|
|
|
|
|
|
|
|
return content
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
content = removePlayer(target, content)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return content
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div id="main-div">
|
|
|
|
<div id="main-div">
|
|
|
|
<div id="topbar-div">
|
|
|
|
<div id="topbar-div">
|
|
|
|
@ -353,7 +433,7 @@ 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
|
|
|
|
@ -366,7 +446,7 @@ function EditorView({
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</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">
|
|
|
|
@ -387,7 +467,7 @@ function EditorView({
|
|
|
|
),
|
|
|
|
),
|
|
|
|
])
|
|
|
|
])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
render={({team, key}) => (
|
|
|
|
render={({ team, key }) => (
|
|
|
|
<PlayerPiece
|
|
|
|
<PlayerPiece
|
|
|
|
team={team}
|
|
|
|
team={team}
|
|
|
|
text={key}
|
|
|
|
text={key}
|
|
|
|
@ -434,7 +514,7 @@ function EditorView({
|
|
|
|
),
|
|
|
|
),
|
|
|
|
])
|
|
|
|
])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
render={({team, key}) => (
|
|
|
|
render={({ team, key }) => (
|
|
|
|
<PlayerPiece
|
|
|
|
<PlayerPiece
|
|
|
|
team={team}
|
|
|
|
team={team}
|
|
|
|
text={key}
|
|
|
|
text={key}
|
|
|
|
@ -448,8 +528,7 @@ function EditorView({
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
<div id="court-div-bounds">
|
|
|
|
<BasketCourt
|
|
|
|
<BasketCourt
|
|
|
|
components={content.components}
|
|
|
|
components={content.components}
|
|
|
|
actions={content.actions}
|
|
|
|
courtImage={<Court courtType={courtType} />}
|
|
|
|
courtImage={<Court courtType={courtType}/>}
|
|
|
|
|
|
|
|
courtRef={courtRef}
|
|
|
|
courtRef={courtRef}
|
|
|
|
previewAction={previewAction}
|
|
|
|
previewAction={previewAction}
|
|
|
|
renderComponent={(component) => {
|
|
|
|
renderComponent={(component) => {
|
|
|
|
@ -465,20 +544,14 @@ function EditorView({
|
|
|
|
key="ball"
|
|
|
|
key="ball"
|
|
|
|
ball={component}
|
|
|
|
ball={component}
|
|
|
|
onPosValidated={doMoveBall}
|
|
|
|
onPosValidated={doMoveBall}
|
|
|
|
onMoves={() =>
|
|
|
|
|
|
|
|
setActions((actions) =>
|
|
|
|
|
|
|
|
repositionActionsRelatedTo(
|
|
|
|
|
|
|
|
component.id,
|
|
|
|
|
|
|
|
courtBounds(),
|
|
|
|
|
|
|
|
actions,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
onRemove={() => {
|
|
|
|
onRemove={() => {
|
|
|
|
setContent((content) =>
|
|
|
|
setContent((content) =>
|
|
|
|
removeBall(content),
|
|
|
|
removeBall(content),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
setObjects(objects => [...objects, {key: "ball"}])
|
|
|
|
setObjects((objects) => [
|
|
|
|
|
|
|
|
...objects,
|
|
|
|
|
|
|
|
{ key: "ball" },
|
|
|
|
|
|
|
|
])
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
@ -487,60 +560,35 @@ function EditorView({
|
|
|
|
"unknown tactic component " + component,
|
|
|
|
"unknown tactic component " + component,
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
renderAction={(action, i) => (
|
|
|
|
renderActions={(component) =>
|
|
|
|
<CourtAction
|
|
|
|
component.actions.map((action, i) => (
|
|
|
|
key={i}
|
|
|
|
<CourtAction
|
|
|
|
action={action}
|
|
|
|
key={"action-" + component.id + "-" + i}
|
|
|
|
courtRef={courtRef}
|
|
|
|
action={action}
|
|
|
|
onActionDeleted={() => {
|
|
|
|
origin={component.id}
|
|
|
|
setContent((content) => {
|
|
|
|
courtRef={courtRef}
|
|
|
|
content = {
|
|
|
|
onActionDeleted={() => {
|
|
|
|
...content,
|
|
|
|
doDeleteAction(action, i, component)
|
|
|
|
actions:
|
|
|
|
}}
|
|
|
|
content.actions.toSpliced(
|
|
|
|
onActionChanges={(a) =>
|
|
|
|
i,
|
|
|
|
setContent((content) =>
|
|
|
|
1,
|
|
|
|
updateComponent(
|
|
|
|
),
|
|
|
|
{
|
|
|
|
}
|
|
|
|
...component,
|
|
|
|
|
|
|
|
actions:
|
|
|
|
if (action.toId == null)
|
|
|
|
component.actions.toSpliced(
|
|
|
|
return content
|
|
|
|
i,
|
|
|
|
|
|
|
|
1,
|
|
|
|
const target =
|
|
|
|
a,
|
|
|
|
content.components.find(
|
|
|
|
),
|
|
|
|
(c) => action.toId == c.id,
|
|
|
|
},
|
|
|
|
)!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (target.type == "phantom") {
|
|
|
|
|
|
|
|
const origin = getOrigin(
|
|
|
|
|
|
|
|
target,
|
|
|
|
|
|
|
|
content.components,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
if (origin.id != action.fromId) {
|
|
|
|
|
|
|
|
return content
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
content = truncatePlayerPath(
|
|
|
|
|
|
|
|
origin,
|
|
|
|
|
|
|
|
target,
|
|
|
|
|
|
|
|
content,
|
|
|
|
content,
|
|
|
|
)
|
|
|
|
),
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
return content
|
|
|
|
/>
|
|
|
|
})
|
|
|
|
))
|
|
|
|
}}
|
|
|
|
}
|
|
|
|
onActionChanges={(a) =>
|
|
|
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
|
|
|
...content,
|
|
|
|
|
|
|
|
actions: content.actions.toSpliced(
|
|
|
|
|
|
|
|
i,
|
|
|
|
|
|
|
|
1,
|
|
|
|
|
|
|
|
a,
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
}))
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -552,25 +600,27 @@ function EditorView({
|
|
|
|
function isBallOnCourt(content: TacticContent) {
|
|
|
|
function isBallOnCourt(content: TacticContent) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
content.components.findIndex(
|
|
|
|
content.components.findIndex(
|
|
|
|
(c) => (c.type == "player" && c.ballState == BallState.HOLDS) || c.type == BALL_TYPE,
|
|
|
|
(c) =>
|
|
|
|
|
|
|
|
(c.type == "player" && c.ballState == BallState.HOLDS) ||
|
|
|
|
|
|
|
|
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