92 lines
3.2 KiB
TypeScript
92 lines
3.2 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';
|
|
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; |