@ -92,6 +92,7 @@ import {
getStepNode ,
removeStepNode ,
} from "../editor/StepsDomain"
import CurtainLayout from "../components/CurtainLayout"
const ERROR_STYLE : CSSProperties = {
borderColor : "red" ,
@ -186,7 +187,7 @@ function GuestModeEditor() {
const content = JSON . parse (
localStorage . getItem (
GUEST_MODE_STEP_CONTENT_STORAGE_KEY +
stepId ,
stepId ,
) ! ,
)
const courtBounds =
@ -360,10 +361,7 @@ function UserModeEditor() {
const { name , courtType } = await infoResponse . json ( )
const { root } = await treeResponse . json ( )
if (
infoResponse . status == 401 ||
treeResponse . status == 401
) {
if ( infoResponse . status == 401 || treeResponse . status == 401 ) {
navigation ( "/login" )
return
}
@ -372,7 +370,6 @@ function UserModeEditor() {
` tactics/ ${ tacticId } /steps/ ${ root . id } ` ,
)
const contentResponse = await contentResponsePromise
if ( contentResponse . status == 401 ) {
@ -485,18 +482,18 @@ export interface EditorViewProps {
}
function EditorPage ( {
tactic : { name , rootStepNode : initialStepsNode , courtType } ,
currentStepId ,
setCurrentStepContent : setContent ,
currentStepContent : content ,
saveState ,
onNameChange ,
selectStep ,
onRemoveStep ,
onAddStep ,
courtRef ,
} : EditorViewProps ) {
tactic : { name , rootStepNode : initialStepsNode , courtType } ,
currentStepId ,
setCurrentStepContent : setContent ,
currentStepContent : content ,
saveState ,
onNameChange ,
selectStep ,
onRemoveStep ,
onAddStep ,
courtRef ,
} : EditorViewProps ) {
const [ titleStyle , setTitleStyle ] = useState < CSSProperties > ( { } )
const [ rootStepsNode , setRootStepsNode ] = useState ( initialStepsNode )
@ -519,6 +516,8 @@ function EditorPage({
[ courtRef ] ,
)
const [ editorContentCurtainWidth , setEditorContentCurtainWidth ] = useState ( 80 )
const relativePositions = useMemo ( ( ) = > {
const courtBounds = courtRef . current ? . getBoundingClientRect ( )
return courtBounds
@ -635,15 +634,15 @@ function EditorPage({
/ >
) ,
! isFrozen &&
( info . ballState === BallState . HOLDS_ORIGIN ||
info . ballState === BallState . PASSED_ORIGIN ) && (
< BallAction
key = { 2 }
onDrop = { ( ballBounds ) = > {
doMoveBall ( ballBounds , player )
} }
/ >
) ,
( info . ballState === BallState . HOLDS_ORIGIN ||
info . ballState === BallState . PASSED_ORIGIN ) && (
< BallAction
key = { 2 }
onDrop = { ( ballBounds ) = > {
doMoveBall ( ballBounds , player )
} }
/ >
) ,
]
} ,
[ content , courtRef , doMoveBall , previewAction ? . isInvalid , setContent ] ,
@ -700,7 +699,15 @@ function EditorPage({
/ >
)
} ,
[ courtRef , content , relativePositions , courtBounds , renderAvailablePlayerActions , validatePlayerPosition , doRemovePlayer ] ,
[
courtRef ,
content ,
relativePositions ,
courtBounds ,
renderAvailablePlayerActions ,
validatePlayerPosition ,
doRemovePlayer ,
] ,
)
const doDeleteAction = useCallback (
@ -771,10 +778,111 @@ function EditorPage({
onActionChanges = { ( action ) = >
doUpdateAction ( component , action , i )
}
renderDependency = { editorContentCurtainWidth }
/ >
)
} ) ,
[ courtRef , doDeleteAction , doUpdateAction ] ,
[ courtRef , doDeleteAction , doUpdateAction , editorContentCurtainWidth ] ,
)
const contentNode = (
< div id = "content-div" >
< div id = "racks" >
< PlayerRack
id = { "allies" }
objects = { allies }
setComponents = { setComponents }
courtRef = { courtRef }
/ >
< Rack
id = { "objects" }
objects = { objects }
onChange = { setObjects }
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 }
/ >
< PlayerRack
id = { "opponents" }
objects = { opponents }
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 >
)
const stepsTreeNode = (
< EditorStepsTree
selectedStepId = { currentStepId }
root = { rootStepsNode }
onAddChildren = { useCallback (
async ( parent ) = > {
const addedNode = await onAddStep (
parent ,
computeTerminalState ( content , relativePositions ) ,
)
if ( addedNode == null ) {
console . error (
"could not add step : onAddStep returned null node" ,
)
return
}
selectStep ( addedNode . id )
setRootStepsNode ( ( root ) = >
addStepNode ( root , parent , addedNode ) ,
)
} ,
[ content , onAddStep , selectStep , relativePositions ] ,
) }
onRemoveNode = { useCallback (
async ( removed ) = > {
const isOk = await onRemoveStep ( removed )
selectStep ( getParent ( rootStepsNode , removed ) ! . id )
if ( isOk )
setRootStepsNode (
( root ) = > removeStepNode ( root , removed ) ! ,
)
} ,
[ rootStepsNode , onRemoveStep , selectStep ] ,
) }
onStepSelected = { useCallback (
( node ) = > selectStep ( node . id ) ,
[ selectStep ] ,
) }
/ >
)
return (
@ -798,117 +906,31 @@ function EditorPage({
/ >
< / div >
< div id = "topbar-right" >
< button onClick = { ( ) = > setStepsTreeVisible ( ( b ) = > ! b ) } >
< button
id = { "show-steps-button" }
onClick = { ( ) = > setStepsTreeVisible ( ( b ) = > ! b ) } >
ETAPES
< / button >
< / div >
< / div >
< div id = "editor-div" >
< div id = "content-div" >
< div id = "racks" >
< PlayerRack
id = { "allies" }
objects = { allies }
setComponents = { setComponents }
courtRef = { courtRef }
/ >
< Rack
id = { "objects" }
objects = { objects }
onChange = { setObjects }
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 }
/ >
< PlayerRack
id = { "opponents" }
objects = { opponents }
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 >
< EditorStepsTree
isVisible = { isStepsTreeVisible }
selectedStepId = { currentStepId }
root = { rootStepsNode }
onAddChildren = { useCallback (
async ( parent ) = > {
const addedNode = await onAddStep (
parent ,
computeTerminalState (
content ,
relativePositions ,
) ,
)
if ( addedNode == null ) {
console . error (
"could not add step : onAddStep returned null node" ,
)
return
}
selectStep ( addedNode . id )
setRootStepsNode ( ( root ) = >
addStepNode ( root , parent , addedNode ) ,
)
} ,
[ content , onAddStep , selectStep , relativePositions ] ,
) }
onRemoveNode = { useCallback (
async ( removed ) = > {
const isOk = await onRemoveStep ( removed )
selectStep ( getParent ( rootStepsNode , removed ) ! . id )
if ( isOk )
setRootStepsNode (
( root ) = > removeStepNode ( root , removed ) ! ,
)
} ,
[ rootStepsNode , onRemoveStep , selectStep ] ,
) }
onStepSelected = { useCallback (
( node ) = > selectStep ( node . id ) ,
[ selectStep ] ,
) }
/ >
{ isStepsTreeVisible ? (
< CurtainLayout
rightWidth = { editorContentCurtainWidth }
onRightWidthChange = { setEditorContentCurtainWidth }
>
{ contentNode }
{ stepsTreeNode }
< / CurtainLayout >
) : (
contentNode
) }
< / div >
< / div >
)
}
interface EditorStepsTreeProps {
isVisible : boolean
selectedStepId : number
root : StepInfoNode
onAddChildren : ( parent : StepInfoNode ) = > void
@ -917,19 +939,14 @@ interface EditorStepsTreeProps {
}
function EditorStepsTree ( {
isVisible ,
selectedStepId ,
root ,
onAddChildren ,
onRemoveNode ,
onStepSelected ,
} : EditorStepsTreeProps ) {
selectedStepId ,
root ,
onAddChildren ,
onRemoveNode ,
onStepSelected ,
} : EditorStepsTreeProps ) {
return (
< div
id = "steps-div"
style = { {
transform : isVisible ? "translateX(0)" : "translateX(100%)" ,
} } >
< div id = "steps-div" >
< StepsTree
root = { root }
selectedStepId = { selectedStepId }
@ -952,12 +969,12 @@ interface PlayerRackProps {
}
function PlayerRack ( {
id ,
objects ,
setObjects ,
courtRef ,
setComponents ,
} : PlayerRackProps ) {
id ,
objects ,
setObjects ,
courtRef ,
setComponents ,
} : PlayerRackProps ) {
const courtBounds = useCallback (
( ) = > courtRef . current ! . getBoundingClientRect ( ) ,
[ courtRef ] ,
@ -1011,15 +1028,15 @@ interface CourtPlayerArrowActionProps {
}
function CourtPlayerArrowAction ( {
playerInfo ,
player ,
isInvalid ,
content ,
setContent ,
setPreviewAction ,
courtRef ,
} : CourtPlayerArrowActionProps ) {
playerInfo ,
player ,
isInvalid ,
content ,
setContent ,
setPreviewAction ,
courtRef ,
} : CourtPlayerArrowActionProps ) {
const courtBounds = useCallback (
( ) = > courtRef . current ! . getBoundingClientRect ( ) ,
[ courtRef ] ,
maxime