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';
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");
    };
    const onConnectionLost = () => {
        connectToServer("reconnecting");
    };
    const onConnectionError = (event: Event) => {
        setConnetionState("error");
    };
    const connectToServer = async (connectionState: ConnectionState) => {
        setConnetionState(connectionState);
        const userKey = await context.userKeyStore.getUserKey();
        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");
        context.themeManager.onThemeChange = (theme: Theme) => {
            setTheme(theme);
        }
        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
    );
    if(!userKey) return <></>;
    return (
        <>
            <BrowserRouter>
                <Routes>
                    <Route index element={<Home context={context} theme={theme} userKey={userKey} />} />
                    <Route path="/" >
                        <Route path="game" >
                            <Route path=":gameId" element={<GamePage context={context} theme={theme} userKey={userKey} connectionState={connectionState} />}  ></Route>
                        </Route>
                        <Route path="loby" element={<LobyPage context={context} theme={theme} userKey={userKey} />}>
                        </Route>
                    </Route>
                </Routes>
            </BrowserRouter>
            <FloatingPanel context={context} color={floatingPanelColor} visible={showConnectionState}>
                <span style={{ color: textColorOnBoard }}>{connectionStateText()}</span>
            </FloatingPanel>
        </>
    );
}

export default MancalaApp;