move input context

client/src/components/Level.tsx

@@ -192,7 +192,6 @@ function PlayableLevel({worldId, levelId}) {
   // If this state is set to a pair `(name, type)` then the according doc will be open.
   const [inventoryDoc, setInventoryDoc] = useState<{name: string, type: string}>(null)
 
-  // TODO: This seems like a useless wrapper to me
   function openInventoryDoc(name, type) {
     setInventoryDoc({name, type})
   }
@@ -204,75 +203,75 @@ function PlayableLevel({worldId, levelId}) {
 
   return <>
     <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
-    <LevelAppBar isLoading={level.isLoading} levelTitle={levelTitle} worldId={worldId} levelId={levelId} />
+    <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
-    <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
+      <LevelAppBar isLoading={level.isLoading} levelTitle={levelTitle} worldId={worldId} levelId={levelId} />
-      <div ref={chatPanelRef} className="chat-panel">
+      <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
-        {level?.data?.introduction &&
+        <div ref={chatPanelRef} className="chat-panel">
-          <div className="message info">
+          {level?.data?.introduction &&
-            <Markdown>{level?.data?.introduction}</Markdown>
-          </div>
-        }
-        {hints.map(hint =>
-          <div className="message info"><Markdown>{hint.text}</Markdown></div>)
-        }
-        {completed &&
-          <>
             <div className="message info">
-              Level completed! 🎉
+              <Markdown>{level?.data?.introduction}</Markdown>
             </div>
-            {level?.data?.conclusion?.trim() &&
+          }
+          {hints.map(hint =>
+            <div className="message info"><Markdown>{hint.text}</Markdown></div>)
+          }
+          {completed &&
+            <>
               <div className="message info">
-                <Markdown>{level?.data?.conclusion}</Markdown>
+                Level completed! 🎉
               </div>
-            }
+              {level?.data?.conclusion?.trim() &&
-            { hints.map(hint => <div className="message info"><Markdown>{hint.text}</Markdown></div>) }
+                <div className="message info">
-            {levelId >= gameInfo.data?.worldSize[worldId] ?
+                  <Markdown>{level?.data?.conclusion}</Markdown>
-            <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
+                </div>
-            <Button to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}>
+              }
-              Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>}
+              { hints.map(hint => <div className="message info"><Markdown>{hint.text}</Markdown></div>) }
-          </>
+              {levelId >= gameInfo.data?.worldSize[worldId] ?
-        }
+              <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
-      </div>
+              <Button to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}>
-      <div className="exercise-panel">
+                Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>}
-        <div className="exercise">
+            </>
-          <Markdown>
+          }
-            {(level?.data?.statementName ?
-              `**Theorem** \`${level?.data?.statementName}\`: `
-              :
-              level?.data?.descrText && "**Exercise**: ")
-              + `${level?.data?.descrText}`
-            }
-          </Markdown>
-          <div className={`statement ${commandLineMode ? 'hidden' : ''}`}><code>{level?.data?.descrFormat}</code></div>
-          <div ref={codeviewRef} className={`codeview ${commandLineMode ? 'hidden' : ''}`}></div>
-        </div>
-        <div className="input-mode-switch">
-          {commandLineMode && <button className="btn" onClick={handleUndo} disabled={!canUndo}><FontAwesomeIcon icon={faRotateLeft} /> Undo</button>}
-          <FormGroup>
-            <FormControlLabel control={<Switch onChange={(ev) => { setCommandLineMode(!commandLineMode) }} />} label="Editor mode" />
-          </FormGroup>
         </div>
+        <div className="exercise-panel">
+          <div className="exercise">
+            <Markdown>
+              {(level?.data?.statementName ?
+                `**Theorem** \`${level?.data?.statementName}\`: `
+                :
+                level?.data?.descrText && "**Exercise**: ")
+                + `${level?.data?.descrText}`
+              }
+            </Markdown>
+            <div className={`statement ${commandLineMode ? 'hidden' : ''}`}><code>{level?.data?.descrFormat}</code></div>
+            <div ref={codeviewRef} className={`codeview ${commandLineMode ? 'hidden' : ''}`}></div>
+          </div>
+          <div className="input-mode-switch">
+            {commandLineMode && <button className="btn" onClick={handleUndo} disabled={!canUndo}><FontAwesomeIcon icon={faRotateLeft} /> Undo</button>}
+            <FormGroup>
+              <FormControlLabel control={<Switch onChange={(ev) => { setCommandLineMode(!commandLineMode) }} />} label="Editor mode" />
+            </FormGroup>
+          </div>
 
-        <HintContext.Provider value={{hints, setHints}}>
+          <HintContext.Provider value={{hints, setHints}}>
-        <EditorContext.Provider value={editorConnection}>
+          <EditorContext.Provider value={editorConnection}>
-          <MonacoEditorContext.Provider value={editor}>
+            <MonacoEditorContext.Provider value={editor}>
-            <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
+                {editorConnection && <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} />}
-              {editorConnection && <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} />}
+            </MonacoEditorContext.Provider>
-            </InputModeContext.Provider>
+            </EditorContext.Provider>
-          </MonacoEditorContext.Provider>
+            </HintContext.Provider>
-          </EditorContext.Provider>
+        </div>
-          </HintContext.Provider>
+        <div className="inventory-panel">
-      </div>
+          {!level.isLoading &&
-      <div className="inventory-panel">
+            <>{inventoryDoc ?
-        {!level.isLoading &&
+              <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
-          <>{inventoryDoc ?
+              :
-            <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
+              <Inventory levelInfo={level?.data} openDoc={openInventoryDoc} />
-            :
+            }</>
-            <Inventory levelInfo={level?.data} openDoc={openInventoryDoc} />
+          }
-          }</>
+        </div>
-        }
+      </Split>
-      </div>
+    </InputModeContext.Provider>
-    </Split>
   </>
 }