mancala/src/MancalaApp.tsx

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;