99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
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 = () => {
|
|
setConnetionState("reconnecting");
|
|
connectToServer();
|
|
};
|
|
const onConnectionError = (event: Event) => {
|
|
setConnetionState("error");
|
|
connectToServer();
|
|
};
|
|
const onThemeChange = (theme: Theme) => {
|
|
setTheme(theme)
|
|
}
|
|
const connectToServer = async () => {
|
|
const userKey = await context.userKeyStore.getUserKey();
|
|
setUserKey(userKey);
|
|
(context.rtmt as RTMTWS).initWebSocket(userKey);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
context.rtmt.on("open", onConnectionDone);
|
|
context.rtmt.on("close", onConnectionLost);
|
|
context.rtmt.on("error", onConnectionError);
|
|
context.themeManager.on("themechange", onThemeChange);
|
|
setConnetionState("connecting");
|
|
connectToServer();
|
|
return () => {
|
|
context.rtmt.dispose();
|
|
context.themeManager.off("themechange", onThemeChange);
|
|
};
|
|
}, []);
|
|
|
|
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; |