set titles

client/src/App.tsx

@@ -11,18 +11,12 @@ import { AppBar, CssBaseline, Toolbar, Typography } from '@mui/material';
 
 import { useAppSelector } from './hooks';
 
+type SetTitleType = {setTitle: (string) => void, setSubtitle: (string) => void}
+export const SetTitleContext = React.createContext<SetTitleType>({setTitle: () => {}, setSubtitle: () => {}})
+
 function App() {
-  const [conclusion, setConclusion] = useState("")
-  const [levelTitle, setLevelTitle] = useState("")
-  const [nbLevels, setNbLevels] = useState(0)
-  const [curLevel, setCurLevel] = useState(0)
-  const [finished, setFinished] = useState(false)
-
-  function startGame() {
-    setCurLevel(1)
-  }
-
-  const title = ""//useAppSelector(state => state.gameApi.data.title)
+  const [title, setTitle] = useState("")
+  const [subtitle, setSubtitle] = useState("")
 
   return (
     <div className="App">
@@ -33,11 +27,13 @@ function App() {
           {title}
         </Typography>
         <Typography variant="h6" noWrap component="div">
-          {levelTitle}
+          {subtitle}
         </Typography>
         </Toolbar>
       </AppBar>
-      <Outlet />
+      <SetTitleContext.Provider value={{setTitle, setSubtitle}}>
+        <Outlet />
+      </SetTitleContext.Provider>
     </div>
   )
 }

client/src/components/Level.tsx

@@ -32,6 +32,7 @@ import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles';
 import { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 import Divider from '@mui/material/Divider';
 import Markdown from './Markdown';
+import { SetTitleContext } from '../App';
 
 
 
@@ -133,6 +134,16 @@ function Level() {
   const {editor, infoProvider} =
     useLevelEditor(worldId, levelId, codeviewRef, infoviewRef, initialCode, onDidChangeContent)
 
+  const {setTitle, setSubtitle} = React.useContext(SetTitleContext);
+
+  useEffect(() => {
+    setTitle(`World: ${worldId}`)
+  }, [worldId])
+
+  useEffect(() => {
+    setSubtitle(`Level ${levelId}: ${level?.data?.title}`)
+  }, [level?.data?.title])
+
   return <>
     <Box style={level.isLoading ? null : {display: "none"}} display="flex" alignItems="center" justifyContent="center" sx={{ height: "calc(100vh - 64px)" }}><CircularProgress /></Box>
     <Box style={level.isLoading ? {display: "none"} : null} display="flex" className="level" sx={{ mt: 0, ml: 0, mr: 0 }} >