add back to edition button in visualizer if tactic is editable

src/components/Visualizer.tsx

@@ -129,8 +129,6 @@ export function VisualizerFrame({
                                     courtType,
                                 }: VisualizerFrameProps) {
 
-    console.log(content, parentContent)
-
     const courtRef = useRef<HTMLDivElement>(null)
 
     const courtBounds = useCallback(

src/pages/Editor.tsx

@@ -291,7 +291,6 @@ function EditorPageWrapper({
             stepsVersions.set(stepId, versions)
             versions.insertAndCut(contentResult)
 
-            console.log(contentResult)
             setStepContent(contentResult, false)
         }
 
@@ -716,7 +715,7 @@ function EditorPage({
 
     const contentNode = (
         <div id="content-div">
-            <div id="racks">
+            <div id="racks" >
                 <PlayerRack
                     id={"allies"}
                     objects={allies}

src/pages/VisualizerPage.tsx

@@ -1,5 +1,5 @@
 import { ServiceError, TacticService } from "../service/MutableTacticService.ts"
-import { useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
 import { useCallback, useEffect, useMemo, useReducer, useState } from "react"
 import { VisualizerState, VisualizerStateActionKind, visualizerStateReducer } from "../visualizer/VisualizerState.ts"
 import { getParent } from "../domains/StepsDomain.ts"
@@ -19,25 +19,36 @@ export interface VisualizerPageProps {
 
 export function VisualizerPage({ guestMode }: VisualizerPageProps) {
     const { tacticId: idStr } = useParams()
+    const navigate = useNavigate()
 
     if (guestMode || !idStr) {
         return (
-            <ServedVisualizerPage service={LocalStorageTacticService.init()} />
+            <ServedVisualizerPage service={LocalStorageTacticService.init()}
+                                  openEditor={() => navigate("/tactic/edit-guest")} />
         )
     }
 
     return (
-        <ServedVisualizerPage service={new APITacticService(parseInt(idStr))} />
+        <ServedVisualizerPage service={new APITacticService(parseInt(idStr))}
+                              openEditor={() => navigate(`/tactic/${idStr}/edit`)} />
     )
 }
 
 interface VisualizerService {
     selectStep(step: number): Promise<void | ServiceError>
+
+    openEditor(): Promise<void>
+}
+
+interface ServedVisualizerPageProps {
+    service: TacticService
+    openEditor: () => void
 }
 
-function ServedVisualizerPage({ service }: { service: TacticService }) {
+function ServedVisualizerPage({ service, openEditor }: ServedVisualizerPageProps) {
     const [panicMessage, setPanicMessage] = useState<string>()
     const [state, dispatch] = useReducer(visualizerStateReducer, null)
+    const [canEdit, setCanEdit] = useState(false)
 
     useEffect(() => {
         async function init() {
@@ -45,7 +56,7 @@ function ServedVisualizerPage({ service }: { service: TacticService }) {
             if (typeof contextResult === "string") {
                 setPanicMessage(
                     "There has been an error retrieving the editor initial context : " +
-                        contextResult,
+                    contextResult,
                 )
                 return
             }
@@ -56,11 +67,13 @@ function ServedVisualizerPage({ service }: { service: TacticService }) {
             if (typeof contentResult === "string") {
                 setPanicMessage(
                     "There has been an error retrieving the tactic's root step content : " +
-                        contentResult,
+                    contentResult,
                 )
                 return
             }
 
+            setCanEdit(await service.canBeEdited())
+
             dispatch({
                 type: VisualizerStateActionKind.INIT,
                 state: {
@@ -96,10 +109,14 @@ function ServedVisualizerPage({ service }: { service: TacticService }) {
                     stepId: step,
                 })
             },
+            async openEditor() {
+                openEditor()
+            },
         }),
-        [service, state],
+        [openEditor, service, state],
     )
 
+
     if (panicMessage) {
         return <p>{panicMessage}</p>
     }
@@ -108,18 +125,20 @@ function ServedVisualizerPage({ service }: { service: TacticService }) {
         return <p>Retrieving tactic context. Please wait...</p>
     }
 
-    return <VisualizerPageContent state={state} service={visualizerService} />
+    return <VisualizerPageContent state={state} service={visualizerService} showEditButton={canEdit} />
 }
 
 interface VisualizerPageContentProps {
     state: VisualizerState
     service: VisualizerService
+    showEditButton: boolean
 }
 
 function VisualizerPageContent({
-    state: { content, parentContent, stepId, stepsTree, courtType, tacticName },
-    service,
-}: VisualizerPageContentProps) {
+                                   state: { content, parentContent, stepId, stepsTree, courtType, tacticName },
+                                   service,
+                                   showEditButton,
+                               }: VisualizerPageContentProps) {
     const [isStepsTreeVisible, setStepsTreeVisible] = useState(false)
 
     const [editorContentCurtainWidth, setEditorContentCurtainWidth] =
@@ -150,13 +169,20 @@ function VisualizerPageContent({
 
     return (
         <div id="visualizer">
-            <div id="topbar-div">
+            <div id="header-page">
                 <p id="title">{tacticName}</p>
-                <button
-                    id={"show-steps-button"}
-                    onClick={() => setStepsTreeVisible((b) => !b)}>
-                    ETAPES
-                </button>
+                <div id="header-page-right">
+                    <button
+                        id={"show-steps-button"}
+                        onClick={() => setStepsTreeVisible((b) => !b)}>
+                        ETAPES
+                    </button>
+                    {showEditButton && <button
+                        onClick={() => service.openEditor()}>
+                        EDITER
+                    </button>}
+                </div>
+
             </div>
 
             <div id="editor-div">

src/service/APITacticService.ts

@@ -13,6 +13,12 @@ export class APITacticService implements MutableTacticService {
         this.tacticId = tacticId
     }
 
+    async canBeEdited(): Promise<boolean> {
+        const response = await fetchAPIGet(`tactics/${this.tacticId}/can-edit`)
+        const { canEdit } = await response.json()
+        return canEdit
+    }
+
     async getContext(): Promise<TacticContext | ServiceError> {
         const infoResponsePromise = fetchAPIGet(`tactics/${this.tacticId}`)
         const infoResponse = await infoResponsePromise

src/service/LocalStorageTacticService.ts

@@ -17,6 +17,10 @@ const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
 export class LocalStorageTacticService implements MutableTacticService {
     private constructor() {}
 
+    canBeEdited(): Promise<boolean> {
+        return Promise.resolve(true)
+    }
+
     static init(): LocalStorageTacticService {
         const root = localStorage.getItem(
             GUEST_MODE_STEP_ROOT_NODE_INFO_STORAGE_KEY,

src/service/MutableTacticService.ts

@@ -14,6 +14,7 @@ export enum ServiceError {
 export interface TacticService {
     getContext(): Promise<TacticContext | ServiceError>
     getContent(step: number): Promise<StepContent | ServiceError>
+    canBeEdited(): Promise<boolean>
 }
 
 export interface MutableTacticService extends TacticService {

src/style/editor.css

@@ -39,6 +39,10 @@
     justify-content: space-between;
     align-items: center;
     height: 25px;
+    z-index: 1;
+
+    align-content: space-between;
+    width: 100%;
 }
 
 .title-input {
@@ -63,13 +67,6 @@
     flex-direction: column;
 }
 
-#racks {
-    display: flex;
-    align-content: space-between;
-    justify-content: space-between;
-    width: 100%;
-}
-
 .curtain {
     width: 100%;
 }

src/style/visualizer.css

@@ -31,16 +31,16 @@
     height: 100%;
 }
 
-#topbar-div {
-    position: relative;
+#header-page {
     width: 100%;
     display: flex;
     background-color: var(--main-color);
-    align-content: flex-end;
     justify-content: flex-end;
+    align-content: flex-end;
 }
 
-#show-steps-button {
+#header-page-right {
+    display: flex;
     user-select: none;
     align-self: flex-end;
     height: 100%;