add hidden hints button

client/src/components/Level.tsx

@@ -226,10 +226,11 @@ function PlayableLevel({worldId, levelId}) {
   return <>
     <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
     <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
+    <HintContext.Provider value={{showHiddenHints, setShowHiddenHints, hints, setHints}}>
       <LevelAppBar isLoading={level.isLoading} levelTitle={levelTitle} worldId={worldId} levelId={levelId} />
       <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
         <div ref={chatPanelRef} className="chat-panel">
-          <HintContext.Provider value={{showHiddenHints, setShowHiddenHints, hints, setHints}}>
+          <div className="chat">
             {level?.data?.introduction &&
               <div className="message info">
                 <Markdown>{level?.data?.introduction}</Markdown>
@@ -255,15 +256,24 @@ function PlayableLevel({worldId, levelId}) {
                     <Markdown>{level?.data?.conclusion}</Markdown>
                   </div>
                 }
-              {/* { hints.map(hint => <div className="message info"><Markdown>{hint.text}</Markdown></div>) } */}
-              <Hints hints={hints} showHidden={showHiddenHints}/>
                 {levelId >= gameInfo.data?.worldSize[worldId] ?
                 <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
                 <Button to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}>
                   Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>}
               </>
             }
-          </HintContext.Provider>
+
+            {/* { hints.map(hint => <div className="message info"><Markdown>{hint.text}</Markdown></div>) } */}
+            <Hints hints={hints} showHidden={showHiddenHints}/>
+            {/* TODO: Remove this debugging message: */}
+            {showHiddenHints && <p>Hidden Hints are displayed</p>}
+          </div>
+          <div className="toggle-hidden-hints">
+            <FormControlLabel
+              control={<Switch checked={showHiddenHints} onChange={() => setShowHiddenHints((prev) => !prev)} />}
+              label="Show more help!"
+            />
+          </div>
         </div>
         <div className="exercise-panel">
           <EditorContext.Provider value={editorConnection}>
@@ -294,6 +304,7 @@ function PlayableLevel({worldId, levelId}) {
           }
         </div>
       </Split>
+    </HintContext.Provider>
     </InputModeContext.Provider>
   </>
 }

client/src/components/level.css

@@ -171,3 +171,14 @@ td code  {
   border: 1px solid rgb(255, 0, 0);
   margin: 1px;
 } */
+
+.chat {
+  height: calc(100% - 3.5em);
+  overflow-y: scroll;
+}
+
+.toggle-hidden-hints {
+  width:100%;
+  height: 3.5em;
+  border-top:  0.1em solid #aaa;
+}