@ -102,7 +102,7 @@ const GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY = "guest_mode_step_tree"
const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title" const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
// The step identifier the editor will always open on
// The step identifier the editor will always open on
const = 1 const GUEST_MODE_ ROOT_STEP_ID = 1
type ComputedRelativePositions = Map < ComponentId , Pos > type ComputedRelativePositions = Map < ComponentId , Pos >
@ -131,7 +131,7 @@ function EditorPortal({ guestMode }: EditorPageProps) {
function GuestModeEditor() { function GuestModeEditor() {
const storageContent = localStorage . getItem (
const storageContent = localStorage . getItem (
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + ,
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + GUEST_MODE_ ROOT_STEP_ID,
)
)
const stepInitialContent : StepContent = {
const stepInitialContent : StepContent = {
@ -148,10 +148,10 @@ function GuestModeEditor() {
if ( storageContent == null ) {
if ( storageContent == null ) {
localStorage . setItem (
localStorage . setItem (
GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY ,
GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY ,
JSON . stringify ( { id : , children : [ ] } ) ,
JSON . stringify ( { id : GUEST_MODE_ ROOT_STEP_ID, children : [ ] } ) ,
)
)
localStorage . setItem (
localStorage . setItem (
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + ,
GUEST_MODE_STEP_CONTENT_STORAGE_KEY + GUEST_MODE_ ROOT_STEP_ID,
JSON . stringify ( stepInitialContent ) ,
JSON . stringify ( stepInitialContent ) ,
)
)
}
}
@ -161,7 +161,7 @@ function GuestModeEditor() {
"Nouvelle Tactique"
"Nouvelle Tactique"
const courtRef = useRef < HTMLDivElement > ( null )
const courtRef = useRef < HTMLDivElement > ( null )
const [ stepId , setStepId ] = useState ( )
const [ stepId , setStepId ] = useState ( GUEST_MODE_ ROOT_STEP_ID)
const [ stepContent , setStepContent , saveState ] = useContentState (
const [ stepContent , setStepContent , saveState ] = useContentState (
stepInitialContent ,
stepInitialContent ,
SaveStates . Guest ,
SaveStates . Guest ,
@ -281,7 +281,7 @@ function GuestModeEditor() {
function UserModeEditor() { function UserModeEditor() {
const [ tactic , setTactic ] = useState < TacticDto | null > ( null )
const [ tactic , setTactic ] = useState < TacticDto | null > ( null )
const [ stepsTree , setStepsTree ] = useState < StepInfoNode > ( {
const [ stepsTree , setStepsTree ] = useState < StepInfoNode > ( {
id : ROOT_STEP_ID ,
id : - 1 ,
children : [ ] ,
children : [ ] ,
} )
} )
const { tacticId : idStr } = useParams ( )
const { tacticId : idStr } = useParams ( )
@ -289,7 +289,7 @@ function UserModeEditor() {
const navigation = useNavigate ( )
const navigation = useNavigate ( )
const courtRef = useRef < HTMLDivElement > ( null )
const courtRef = useRef < HTMLDivElement > ( null )
const [ stepId , setStepId ] = useState ( 1 )
const [ stepId , setStepId ] = useState ( - 1 )
const saveContent = useCallback (
const saveContent = useCallback (
async ( content : StepContent ) = > {
async ( content : StepContent ) = > {
@ -353,29 +353,38 @@ function UserModeEditor() {
async function initialize() {
async function initialize() {
const infoResponsePromise = fetchAPIGet ( ` tactics/ ${ tacticId } ` )
const infoResponsePromise = fetchAPIGet ( ` tactics/ ${ tacticId } ` )
const treeResponsePromise = fetchAPIGet ( ` tactics/ ${ tacticId } /tree ` )
const treeResponsePromise = fetchAPIGet ( ` tactics/ ${ tacticId } /tree ` )
const contentResponsePromise = fetchAPIGet (
` tactics/ ${ tacticId } /steps/ ${ ROOT_STEP_ID } ` ,
)
const infoResponse = await infoResponsePromise
const infoResponse = await infoResponsePromise
const treeResponse = await treeResponsePromise
const treeResponse = await treeResponsePromise
const contentResponse = await contentResponsePromise
const { name , courtType } = await infoResponse . json ( )
const { root } = await treeResponse . json ( )
if (
if (
infoResponse . status == 401 ||
infoResponse . status == 401 ||
treeResponse . status == 401 ||
treeResponse . status == 401
contentResponse . status == 401
) {
) {
navigation ( "/login" )
navigation ( "/login" )
return
return
}
}
const { name , courtType } = await infoResponse . json ( )
const contentResponsePromise = fetchAPIGet (
` tactics/ ${ tacticId } /steps/ ${ root . id } ` ,
)
const contentResponse = await contentResponsePromise
if ( contentResponse . status == 401 ) {
navigation ( "/login" )
return
}
const content = await contentResponse . json ( )
const content = await contentResponse . json ( )
const { root } = await treeResponse . json ( )
setTactic ( { id : tacticId , name , courtType } )
setTactic ( { id : tacticId , name , courtType } )
setStepsTree ( root )
setStepsTree ( root )
setStepId ( root . id )
setStepContent ( content , false )
setStepContent ( content , false )
}
}
@ -492,12 +501,8 @@ function EditorPage({
const [ rootStepsNode , setRootStepsNode ] = useState ( initialStepsNode )
const [ rootStepsNode , setRootStepsNode ] = useState ( initialStepsNode )
const [ allies , setAllies ] = useState ( ( ) = >
const allies = getRackPlayers ( PlayerTeam . Allies , content . components )
getRackPlayers ( PlayerTeam . Allies , content . components ) ,
const opponents = getRackPlayers ( PlayerTeam . Opponents , content . components )
)
const [ opponents , setOpponents ] = useState ( ( ) = >
getRackPlayers ( PlayerTeam . Opponents , content . components ) ,
)
const [ objects , setObjects ] = useState < RackedCourtObject [ ] > ( ( ) = >
const [ objects , setObjects ] = useState < RackedCourtObject [ ] > ( ( ) = >
isBallOnCourt ( content ) ? [ ] : [ { key : "ball" } ] ,
isBallOnCourt ( content ) ? [ ] : [ { key : "ball" } ] ,
@ -521,25 +526,6 @@ function EditorPage({
: new Map ( )
: new Map ( )
} , [ content , courtRef ] )
} , [ content , courtRef ] )
// const setContent = useCallback(
// (newState: SetStateAction<StepContent>) => {
// setCurrentStepContent((c) => {
// const state =
// typeof newState === "function"
// ? newState(c.content)
// : newState
//
// const courtBounds = courtRef.current?.getBoundingClientRect()
// const relativePositions: ComputedRelativePositions = courtBounds
// ? computeRelativePositions(courtBounds, state)
// : new Map()
//
// return state
// })
// },
// [setCurrentStepContent],
// )
const setComponents = ( action : SetStateAction < TacticComponent [ ] > ) = > {
const setComponents = ( action : SetStateAction < TacticComponent [ ] > ) = > {
setContent ( ( c ) = > ( {
setContent ( ( c ) = > ( {
. . . c ,
. . . c ,
@ -553,25 +539,9 @@ function EditorPage({
} , [ setObjects , content ] )
} , [ setObjects , content ] )
const insertRackedPlayer = ( player : Player ) = > {
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 ) {
if ( player . ballState == BallState . HOLDS_BY_PASS ) {
setObjects ( [ { key : "ball" } ] )
setObjects ( [ { key : "ball" } ] )
}
}
setter ( ( players ) = > [
. . . players ,
{
team : player.team ,
pos : player.role ,
key : player.role ,
} ,
] )
}
}
const doRemovePlayer = useCallback (
const doRemovePlayer = useCallback (
@ -676,7 +646,7 @@ function EditorPage({
) ,
) ,
]
]
} ,
} ,
[ content , , previewAction ? . isInvalid , setContent ] ,
[ content , courtRef, doMoveBall, previewAction ? . isInvalid , setContent ] ,
)
)
const renderPlayer = useCallback (
const renderPlayer = useCallback (
@ -730,14 +700,7 @@ function EditorPage({
/ >
/ >
)
)
} ,
} ,
[
[ courtRef , content , relativePositions , courtBounds , renderAvailablePlayerActions , validatePlayerPosition , doRemovePlayer ] ,
content ,
relativePositions ,
courtBounds ,
validatePlayerPosition ,
doRemovePlayer ,
renderAvailablePlayerActions ,
] ,
)
)
const doDeleteAction = useCallback (
const doDeleteAction = useCallback (
@ -811,7 +774,7 @@ function EditorPage({
/ >
/ >
)
)
} ) ,
} ) ,
[ , doUpdateAction ] ,
[ courtRef, doDeleteAction, doUpdateAction ] ,
)
)
return (
return (
@ -836,7 +799,7 @@ function EditorPage({
< / div >
< / div >
< div id = "topbar-right" >
< div id = "topbar-right" >
< button onClick = { ( ) = > setStepsTreeVisible ( ( b ) = > ! b ) } >
< button onClick = { ( ) = > setStepsTreeVisible ( ( b ) = > ! b ) } >
STEP S
ETAPE S
< / button >
< / button >
< / div >
< / div >
< / div >
< / div >
@ -846,7 +809,6 @@ function EditorPage({
< PlayerRack
< PlayerRack
id = { "allies" }
id = { "allies" }
objects = { allies }
objects = { allies }
setObjects = { setAllies }
setComponents = { setComponents }
setComponents = { setComponents }
courtRef = { courtRef }
courtRef = { courtRef }
/ >
/ >
@ -881,7 +843,6 @@ function EditorPage({
< PlayerRack
< PlayerRack
id = { "opponents" }
id = { "opponents" }
objects = { opponents }
objects = { opponents }
setObjects = { setOpponents }
setComponents = { setComponents }
setComponents = { setComponents }
courtRef = { courtRef }
courtRef = { courtRef }
/ >
/ >
@ -983,7 +944,7 @@ function EditorStepsTree({
interface PlayerRackProps { interface PlayerRackProps {
id : string
id : string
objects : RackedPlayer [ ]
objects : RackedPlayer [ ]
setObjects ( state : RackedPlayer [ ] ) = > void
setObjects ? : ( state : RackedPlayer [ ] ) = > void
setComponents : (
setComponents : (
f : ( components : TacticComponent [ ] ) = > TacticComponent [ ] ,
f : ( components : TacticComponent [ ] ) = > TacticComponent [ ] ,
) = > void
) = > void
maxime
1 year ago