From 91c77a0d9359e47f1bb3a52424d441c2dfc5b00f Mon Sep 17 00:00:00 2001
From: Alexander Bentkamp <bentkamp@gmail.com>
Date: Thu, 15 Dec 2022 14:18:21 +0100
Subject: [PATCH] set titles

---
 client/src/App.tsx              | 22 +++++++++-------------
 client/src/components/Level.tsx | 11 +++++++++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index d781d04..467cdec 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -11,18 +11,12 @@ import { AppBar, CssBaseline, Toolbar, Typography } from '@mui/material';
 
 import { useAppSelector } from './hooks';
 
-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)
-  }
+type SetTitleType = {setTitle: (string) => void, setSubtitle: (string) => void}
+export const SetTitleContext = React.createContext<SetTitleType>({setTitle: () => {}, setSubtitle: () => {}})
 
-  const title = ""//useAppSelector(state => state.gameApi.data.title)
+function App() {
+  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>
   )
 }
diff --git a/client/src/components/Level.tsx b/client/src/components/Level.tsx
index d23d228..9ce5701 100644
--- a/client/src/components/Level.tsx
+++ b/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 }} >