add loby page

src/MancalaApp.tsx

@@ -13,13 +13,18 @@ import { initContext } from './context/context';
 import { RTMTWS } from './rtmt/rtmt_websocket';
 import { getColorByBrightness } from './util/ColorUtil';
 import { ConnectionState } from './models/ConnectionState';
+import { Theme } from './theme/Theme';
+import LobyPage from './routes/LobyPage';
 const context = initContext();
 
 const MancalaApp: FunctionComponent = () => {
+
     const [userKey, setUserKey] = useState<string | undefined>(undefined);
 
     const [connectionState, setConnetionState] = useState<ConnectionState>("connecting");
 
+    const [theme, setTheme] = useState<Theme>(context.themeManager.theme);
+
     const onConnectionDone = () => {
         setConnetionState("connected");
     };
@@ -48,6 +53,9 @@ const MancalaApp: FunctionComponent = () => {
     };
     React.useEffect(() => {
         connectToServer("connecting");
+        context.themeManager.onThemeChange = (theme: Theme) => {
+            setTheme(theme);
+        }
         return () => {
             // todo: dispose rtmt.dispose
             //context.rtmt.dispose();
@@ -74,10 +82,12 @@ const MancalaApp: FunctionComponent = () => {
         <>
             <BrowserRouter>
                 <Routes>
-                    <Route index element={<Home context={context} userKey={userKey} connectionState={connectionState}/>} />
+                    <Route index element={<Home context={context} theme={theme} userKey={userKey} />} />
                     <Route path="/" >
                         <Route path="game" >
-                            <Route path=":gameId" element={<GamePage context={context} />}  ></Route>
+                            <Route path=":gameId" element={<GamePage context={context} theme={theme} userKey={userKey} />}  ></Route>
+                        </Route>
+                        <Route path="loby" element={<LobyPage context={context} theme={theme} userKey={userKey} />}>
                         </Route>
                     </Route>
                 </Routes>

src/routes/LobyPage.tsx

@@ -0,0 +1,68 @@
+import { CommonMancalaGame, MancalaGame } from 'mancala.js';
+import * as React from 'react';
+import { FunctionComponent, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Center from '../components/Center';
+import CircularPanel from '../components/CircularPanel';
+import HeaderBar from '../components/headerbar/HeaderBar';
+import HeaderbarIcon from '../components/headerbar/HeaderbarIcon';
+import HeaderbarTitle from '../components/headerbar/HeaderbarTitle';
+import ThemeSwitchMenu from '../components/headerbar/ThemeSwitchMenu';
+import PageContainer from '../components/PageContainer';
+import Row from '../components/Row';
+import { channel_on_game_start } from '../const/channel_names';
+import { Context } from '../context/context';
+import { Theme } from '../theme/Theme';
+import { getColorByBrightness } from '../util/ColorUtil';
+
+const LobyPage: FunctionComponent<{
+    context: Context,
+    userKey?: string,
+    theme: Theme
+}> = ({ context, userKey, theme }) => {
+
+    let navigate = useNavigate();
+
+    useEffect(() => {
+        listenMessages();
+        context.rtmt.sendMessage("new_game", {});
+    }, []);
+
+    const listenMessages = () => {
+        context.rtmt.listenMessage(channel_on_game_start, (message: Object) => {
+            const newGame: CommonMancalaGame = message as CommonMancalaGame;
+            navigate(`/game/${newGame.id}`)
+        });
+    }
+
+    const textColorOnAppBar = getColorByBrightness(
+        context.themeManager.theme.appBarBgColor,
+        context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
+    );
+    const textColorOnBoard = getColorByBrightness(
+        context.themeManager.theme.boardColor,
+        context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
+    );
+    return (
+        <PageContainer theme={theme!}>
+            <HeaderBar color={theme?.appBarBgColor}>
+                <Row>
+                    <HeaderbarIcon />
+                    <HeaderbarTitle title={context.texts.Mancala} color={textColorOnAppBar} />
+                </Row>
+                <Row>
+                    <ThemeSwitchMenu context={context} textColor={textColorOnAppBar} />
+                </Row>
+            </HeaderBar>
+            <Center>
+                <CircularPanel color={context.themeManager.theme.boardColor}>
+                    <h4 style={{ margin: "0", color: textColorOnBoard }}>{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}</h4>
+                </CircularPanel>
+            </Center>
+        </PageContainer>
+    );
+}
+
+export default LobyPage;