add MancalaApp and refactor connection state floating panel

src/App.tsx

@@ -1,9 +1,6 @@
-import { initContext } from './context/context';
-initContext();
-
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 const container = document.getElementById('main');
 const root = createRoot(container!); 
-import Home from './routes/Home';
+import MancalaApp from './MancalaApp';
-root.render(<Home/>);
+root.render(<MancalaApp/>);

src/MancalaApp.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { FunctionComponent, useState } from 'react';
+import {
+    BrowserRouter,
+    Routes,
+    Route,
+} from "react-router-dom";
+import FloatingPanel from './components/FloatingPanel';
+import GamePage from './routes/GamePage';
+import Home from './routes/Home';
+
+import { initContext } from './context/context';
+import { RTMTWS } from './rtmt/rtmt_websocket';
+import { getColorByBrightness } from './util/ColorUtil';
+import { ConnectionState } from './models/ConnectionState';
+const context = initContext();
+
+const MancalaApp: FunctionComponent = () => {
+    const [userKey, setUserKey] = useState<string | undefined>(undefined);
+
+    const [connectionState, setConnetionState] = useState<ConnectionState>("connecting");
+
+    const onConnectionDone = () => {
+        setConnetionState("connected");
+    };
+    const onConnectionLost = () => {
+        connectToServer("reconnecting");
+    };
+    const onConnectionError = (event: Event) => {
+        setConnetionState("error");
+    };
+    const connectToServer = (connectionState: ConnectionState) => {
+        setConnetionState(connectionState);
+        context.userKeyStore.getUserKey((userKey: string) => {
+            setUserKey(userKey);
+            const rtmtws = context.rtmt as RTMTWS;
+            if (rtmtws) {
+                rtmtws.initWebSocket(
+                    userKey,
+                    onConnectionDone,
+                    onConnectionLost,
+                    onConnectionError
+                );
+            } else {
+                console.error("context.rtmt is not RTMTWS");
+            }
+        });
+    };
+    React.useEffect(() => {
+        connectToServer("connecting");
+        return () => {
+            // todo: dispose rtmt.dispose
+            //context.rtmt.dispose();
+        };
+    }, []);
+
+    const showConnectionState = connectionState != "connected";
+    const floatingPanelColor = context.themeManager.theme.boardColor;
+    const connectionStateText = () => {
+        const map: { [key: string]: string } = {
+            connecting: context.texts.Connecting,
+            connected: context.texts.Connected,
+            error: context.texts.CannotConnect,
+            reconnecting: context.texts.ConnectingAgain,
+        };
+        return map[connectionState];
+    };
+    const textColorOnBoard = getColorByBrightness(
+        context.themeManager.theme.boardColor,
+        context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
+    );
+    return (
+        <>
+            <BrowserRouter>
+                <Routes>
+                    <Route index element={<Home context={context} userKey={userKey} connectionState={connectionState}/>} />
+                    <Route path="/" >
+                        <Route path="game" >
+                            <Route path=":gameId" element={<GamePage context={context} />}  ></Route>
+                        </Route>
+                    </Route>
+                </Routes>
+            </BrowserRouter>
+            <FloatingPanel context={context} color={floatingPanelColor} visible={showConnectionState}>
+                <span style={{ color: textColorOnBoard }}>{connectionStateText()}</span>
+            </FloatingPanel>
+        </>
+    );
+}
+
+export default MancalaApp;

src/context/context.tsx

@@ -11,7 +11,7 @@ export type Context = {
   themeManager: ThemeManager;
 };
 
-export const initContext = () => {
+export const initContext = () : Context =>  {
   const rtmt = new RTMTWS();
   const userKeyStore = new UserKeyStoreImpl();
   const texts = TrTr;
@@ -23,5 +23,3 @@ export const initContext = () => {
     themeManager,
   };
 };
-
-export const context: Context = initContext();

src/models/ConnectionState.ts

@@ -0,0 +1 @@
+export type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";

src/routes/GamePage.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { useParams } from 'react-router';
+import { Context } from '../context/context';
+
+const GamePage: FunctionComponent<{ context: Context }> = ({ context }) => {
+    let params = useParams<{gameId : string}>();
+    return (
+        <div>
+            Game Route {params.gameId}
+            <style jsx>{`
+                
+            `}</style>
+        </div>
+    );
+}
+
+export default GamePage;

src/routes/Home.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import BoardView from "../components/board/BoardView";
-import { context } from "../context/context";
 import { RTMTWS } from "../rtmt/rtmt_websocket";
 import {
   channel_game_move,
@@ -21,7 +20,6 @@ import { v4 } from "uuid";
 import { getColorByBrightness } from "../util/ColorUtil";
 import { Theme } from "../theme/Theme";
 import HeaderBar from "../components/headerbar/HeaderBar";
-import FloatingPanel from "../components/FloatingPanel";
 import PageContainer from "../components/PageContainer";
 import Row from "../components/Row";
 import HeaderbarIcon from "../components/headerbar/HeaderbarIcon";
@@ -34,14 +32,14 @@ import Center from "../components/Center";
 import CircularPanel from "../components/CircularPanel";
 import useWindowDimensions from "../hooks/useWindowDimensions";
 import { UserConnectionInfo } from "../models/UserConnectionInfo";
+import { Context } from "../context/context";
+import { ConnectionState } from "../models/ConnectionState";
 
-type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
+const Home: FunctionComponent<{
-
+  context: Context,
-const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
+  userKey?: string,
-  const [userKey, setUserKey] = useState<string | undefined>(undefined);
+  connectionState: ConnectionState
-
+}> = ({ context, userKey, connectionState }) => {
-  const [connectionState, setConnetionState] =
-    useState<ConnectionState>("connecting");
 
   const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false);
 
@@ -67,36 +65,6 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const [isOpponentOnline, setIsOpponentOnline] = useState<boolean>(false);
 
-  const onConnectionDone = () => {
-    setConnetionState("connected");
-  };
-
-  const onConnectionLost = () => {
-    connectToServer("reconnecting");
-  };
-
-  const onConnectionError = (event: Event) => {
-    setConnetionState("error");
-  };
-
-  const connectToServer = (connectionState: ConnectionState) => {
-    setConnetionState(connectionState);
-    context.userKeyStore.getUserKey((userKey: string) => {
-      setUserKey(userKey);
-      const rtmtws = context.rtmt as RTMTWS;
-      if (rtmtws) {
-        rtmtws.initWebSocket(
-          userKey,
-          onConnectionDone,
-          onConnectionLost,
-          onConnectionError
-        );
-      } else {
-        console.error("context.rtmt is not RTMTWS");
-      }
-    });
-  };
-
   const listenMessages = (pitAnimator: PitAnimator) => {
     context.rtmt.listenMessage(channel_on_game_start, (message: Object) => {
       const newGame: CommonMancalaGame = message as CommonMancalaGame;
@@ -163,7 +131,6 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     const pitAnimator = new PitAnimator(context, updateBoardViewModel);
     setPitAnimator(pitAnimator);
     listenMessages(pitAnimator);
-    connectToServer("connecting");
     return () => {
       pitAnimator.dispose();
     };
@@ -204,19 +171,6 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.rtmt.sendMessage(channel_game_move, gameMove);
   };
 
-  const showConnectionState = connectionState != "connected";
-
-  const connectionStateText = () => {
-    let map: { [key: string]: string } = {
-      connecting: context.texts.Connecting,
-      connected: context.texts.Connected,
-      error: context.texts.CannotConnect,
-      reconnecting: context.texts.ConnectingAgain,
-    };
-
-    return map[connectionState];
-  };
-
   const textColorOnBoard = getColorByBrightness(
     context.themeManager.theme.boardColor,
     context.themeManager.theme.textColor,
@@ -236,9 +190,6 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   return (
     <PageContainer theme={theme!}>
-      <FloatingPanel context={context} color={context.themeManager.theme.boardColor} visible={showConnectionState}>
-        <span style={{ color: textColorOnBoard }}>{connectionStateText()}</span>
-      </FloatingPanel>
       <HeaderBar color={theme?.appBarBgColor}>
         <Row>
           <HeaderbarIcon />