|
|
|
@ -1,18 +1,38 @@
|
|
|
|
|
import { CSSProperties, useRef, useState } from "react"
|
|
|
|
|
import {
|
|
|
|
|
CSSProperties,
|
|
|
|
|
Dispatch,
|
|
|
|
|
SetStateAction,
|
|
|
|
|
useCallback,
|
|
|
|
|
useRef,
|
|
|
|
|
useState,
|
|
|
|
|
} from "react"
|
|
|
|
|
import "../style/editor.css"
|
|
|
|
|
import TitleInput from "../components/TitleInput"
|
|
|
|
|
import { API } from "../Constants"
|
|
|
|
|
import { BasketCourt } from "../components/editor/BasketCourt"
|
|
|
|
|
|
|
|
|
|
import { Rack } from "../components/Rack"
|
|
|
|
|
import { PlayerPiece } from "../components/editor/PlayerPiece"
|
|
|
|
|
import { Player } from "../data/Player"
|
|
|
|
|
import { Team } from "../data/Team"
|
|
|
|
|
|
|
|
|
|
import { Player } from "../tactic/Player"
|
|
|
|
|
import { Tactic, TacticContent } from "../tactic/Tactic"
|
|
|
|
|
import { fetchAPI } from "../Fetcher"
|
|
|
|
|
import { Team } from "../tactic/Team"
|
|
|
|
|
import { calculateRatio } from "../Utils"
|
|
|
|
|
import SavingState, {
|
|
|
|
|
SaveState,
|
|
|
|
|
SaveStates,
|
|
|
|
|
} from "../components/editor/SavingState"
|
|
|
|
|
|
|
|
|
|
const ERROR_STYLE: CSSProperties = {
|
|
|
|
|
borderColor: "red",
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface EditorViewProps {
|
|
|
|
|
tactic: Tactic
|
|
|
|
|
onContentChange: (tactic: TacticContent) => Promise<boolean>
|
|
|
|
|
onNameChange: (name: string) => Promise<boolean>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* information about a player that is into a rack
|
|
|
|
|
*/
|
|
|
|
@ -21,17 +41,48 @@ interface RackedPlayer {
|
|
|
|
|
key: string
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function Editor({ id, name }: { id: number; name: string }) {
|
|
|
|
|
export default function Editor({
|
|
|
|
|
id,
|
|
|
|
|
name,
|
|
|
|
|
content,
|
|
|
|
|
}: {
|
|
|
|
|
id: number
|
|
|
|
|
name: string
|
|
|
|
|
content: string
|
|
|
|
|
}) {
|
|
|
|
|
return (
|
|
|
|
|
<EditorView
|
|
|
|
|
tactic={{ name, id, content: JSON.parse(content) }}
|
|
|
|
|
onContentChange={(content: TacticContent) =>
|
|
|
|
|
fetchAPI(`tactic/${id}/save`, { content }).then((r) => r.ok)
|
|
|
|
|
}
|
|
|
|
|
onNameChange={(name: string) =>
|
|
|
|
|
fetchAPI(`tactic/${id}/edit/name`, { name }).then((r) => r.ok)
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function EditorView({
|
|
|
|
|
tactic: { name, content: initialContent },
|
|
|
|
|
onContentChange,
|
|
|
|
|
onNameChange,
|
|
|
|
|
}: EditorViewProps) {
|
|
|
|
|
const [style, setStyle] = useState<CSSProperties>({})
|
|
|
|
|
const positions = ["1", "2", "3", "4", "5"]
|
|
|
|
|
const [content, setContent, saveState] = useContentState(
|
|
|
|
|
initialContent,
|
|
|
|
|
(content) =>
|
|
|
|
|
onContentChange(content).then((success) =>
|
|
|
|
|
success ? SaveStates.Ok : SaveStates.Err,
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
const [allies, setAllies] = useState(
|
|
|
|
|
positions.map((key) => ({ team: Team.Allies, key })),
|
|
|
|
|
getRackPlayers(Team.Allies, content.players),
|
|
|
|
|
)
|
|
|
|
|
const [opponents, setOpponents] = useState(
|
|
|
|
|
positions.map((key) => ({ team: Team.Opponents, key })),
|
|
|
|
|
getRackPlayers(Team.Opponents, content.players),
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const [players, setPlayers] = useState<Player[]>([])
|
|
|
|
|
const courtDivContentRef = useRef<HTMLDivElement>(null)
|
|
|
|
|
|
|
|
|
|
const canDetach = (ref: HTMLDivElement) => {
|
|
|
|
@ -51,53 +102,42 @@ export default function Editor({ id, name }: { id: number; name: string }) {
|
|
|
|
|
const refBounds = ref.getBoundingClientRect()
|
|
|
|
|
const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
|
|
|
|
|
|
|
|
|
|
const relativeXPixels = refBounds.x - courtBounds.x
|
|
|
|
|
const relativeYPixels = refBounds.y - courtBounds.y
|
|
|
|
|
|
|
|
|
|
const xRatio = relativeXPixels / courtBounds.width
|
|
|
|
|
const yRatio = relativeYPixels / courtBounds.height
|
|
|
|
|
|
|
|
|
|
setPlayers((players) => {
|
|
|
|
|
return [
|
|
|
|
|
...players,
|
|
|
|
|
{
|
|
|
|
|
id: players.length,
|
|
|
|
|
team: element.team,
|
|
|
|
|
role: element.key,
|
|
|
|
|
rightRatio: xRatio,
|
|
|
|
|
bottomRatio: yRatio,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
const { x, y } = calculateRatio(refBounds, courtBounds)
|
|
|
|
|
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
return {
|
|
|
|
|
players: [
|
|
|
|
|
...content.players,
|
|
|
|
|
{
|
|
|
|
|
team: element.team,
|
|
|
|
|
role: element.key,
|
|
|
|
|
rightRatio: x,
|
|
|
|
|
bottomRatio: y,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div id="main-div">
|
|
|
|
|
<div id="topbar-div">
|
|
|
|
|
<div>LEFT</div>
|
|
|
|
|
<TitleInput
|
|
|
|
|
style={style}
|
|
|
|
|
default_value={name}
|
|
|
|
|
on_validated={(new_name) => {
|
|
|
|
|
fetch(`${API}/tactic/${id}/edit/name`, {
|
|
|
|
|
method: "POST",
|
|
|
|
|
headers: {
|
|
|
|
|
Accept: "application/json",
|
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
name: new_name,
|
|
|
|
|
}),
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
setStyle({})
|
|
|
|
|
} else {
|
|
|
|
|
setStyle(ERROR_STYLE)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<div>RIGHT</div>
|
|
|
|
|
<div id="topbar-left">
|
|
|
|
|
LEFT
|
|
|
|
|
<SavingState state={saveState} />
|
|
|
|
|
</div>
|
|
|
|
|
<div id="title-input-div">
|
|
|
|
|
<TitleInput
|
|
|
|
|
style={style}
|
|
|
|
|
default_value={name}
|
|
|
|
|
on_validated={(new_name) => {
|
|
|
|
|
onNameChange(new_name).then((success) => {
|
|
|
|
|
setStyle(success ? {} : ERROR_STYLE)
|
|
|
|
|
})
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="topbar-right">RIGHT</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="edit-div">
|
|
|
|
|
<div id="racks">
|
|
|
|
@ -125,33 +165,40 @@ export default function Editor({ id, name }: { id: number; name: string }) {
|
|
|
|
|
<div id="court-div">
|
|
|
|
|
<div id="court-div-bounds" ref={courtDivContentRef}>
|
|
|
|
|
<BasketCourt
|
|
|
|
|
players={players}
|
|
|
|
|
players={content.players}
|
|
|
|
|
onPlayerChange={(player) => {
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
players: toSplicedPlayers(
|
|
|
|
|
content.players,
|
|
|
|
|
player,
|
|
|
|
|
true,
|
|
|
|
|
),
|
|
|
|
|
}))
|
|
|
|
|
}}
|
|
|
|
|
onPlayerRemove={(player) => {
|
|
|
|
|
setPlayers((players) => {
|
|
|
|
|
const idx = players.indexOf(player)
|
|
|
|
|
return players.toSpliced(idx, 1)
|
|
|
|
|
})
|
|
|
|
|
setContent((content) => ({
|
|
|
|
|
players: toSplicedPlayers(
|
|
|
|
|
content.players,
|
|
|
|
|
player,
|
|
|
|
|
false,
|
|
|
|
|
),
|
|
|
|
|
}))
|
|
|
|
|
let setter
|
|
|
|
|
switch (player.team) {
|
|
|
|
|
case Team.Opponents:
|
|
|
|
|
setOpponents((opponents) => [
|
|
|
|
|
...opponents,
|
|
|
|
|
{
|
|
|
|
|
team: player.team,
|
|
|
|
|
pos: player.role,
|
|
|
|
|
key: player.role,
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
setter = setOpponents
|
|
|
|
|
break
|
|
|
|
|
case Team.Allies:
|
|
|
|
|
setAllies((allies) => [
|
|
|
|
|
...allies,
|
|
|
|
|
{
|
|
|
|
|
team: player.team,
|
|
|
|
|
pos: player.role,
|
|
|
|
|
key: player.role,
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
setter = setAllies
|
|
|
|
|
}
|
|
|
|
|
setter((players) => [
|
|
|
|
|
...players,
|
|
|
|
|
{
|
|
|
|
|
team: player.team,
|
|
|
|
|
pos: player.role,
|
|
|
|
|
key: player.role,
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
@ -160,3 +207,51 @@ export default function Editor({ id, name }: { id: number; name: string }) {
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getRackPlayers(team: Team, 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 useContentState<S>(
|
|
|
|
|
initialContent: S,
|
|
|
|
|
saveStateCallback: (s: S) => Promise<SaveState>,
|
|
|
|
|
): [S, Dispatch<SetStateAction<S>>, SaveState] {
|
|
|
|
|
const [content, setContent] = useState(initialContent)
|
|
|
|
|
const [savingState, setSavingState] = useState(SaveStates.Ok)
|
|
|
|
|
|
|
|
|
|
const setContentSynced = useCallback((newState: SetStateAction<S>) => {
|
|
|
|
|
setContent((content) => {
|
|
|
|
|
const state =
|
|
|
|
|
typeof newState === "function"
|
|
|
|
|
? (newState as (state: S) => S)(content)
|
|
|
|
|
: newState
|
|
|
|
|
if (state !== content) {
|
|
|
|
|
setSavingState(SaveStates.Saving)
|
|
|
|
|
saveStateCallback(state)
|
|
|
|
|
.then(setSavingState)
|
|
|
|
|
.catch(() => setSavingState(SaveStates.Err))
|
|
|
|
|
}
|
|
|
|
|
return state
|
|
|
|
|
})
|
|
|
|
|
}, [saveStateCallback])
|
|
|
|
|
|
|
|
|
|
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] : []))
|
|
|
|
|
}
|
|
|
|
|