68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
|
import { CommonMancalaGame, MancalaGame } from 'mancala.js';
|
||
|
|
import * as React from 'react';
|
||
|
|
import { FunctionComponent, useEffect } from 'react';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import Center from '../components/Center';
|
||
|
|
import CircularPanel from '../components/CircularPanel';
|
||
|
|
import HeaderBar from '../components/headerbar/HeaderBar';
|
||
|
|
import HeaderbarIcon from '../components/headerbar/HeaderbarIcon';
|
||
|
|
import HeaderbarTitle from '../components/headerbar/HeaderbarTitle';
|
||
|
|
import ThemeSwitchMenu from '../components/headerbar/ThemeSwitchMenu';
|
||
|
|
import PageContainer from '../components/PageContainer';
|
||
|
|
import Row from '../components/Row';
|
||
|
|
import { channel_on_game_start } from '../const/channel_names';
|
||
|
|
import { Context } from '../context/context';
|
||
|
|
import { Theme } from '../theme/Theme';
|
||
|
|
import { getColorByBrightness } from '../util/ColorUtil';
|
||
|
|
|
||
|
|
const LobyPage: FunctionComponent<{
|
||
|
|
context: Context,
|
||
|
|
userKey?: string,
|
||
|
|
theme: Theme
|
||
|
|
}> = ({ context, userKey, theme }) => {
|
||
|
|
|
||
|
|
let navigate = useNavigate();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
listenMessages();
|
||
|
|
context.rtmt.sendMessage("new_game", {});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const listenMessages = () => {
|
||
|
|
context.rtmt.listenMessage(channel_on_game_start, (message: Object) => {
|
||
|
|
const newGame: CommonMancalaGame = message as CommonMancalaGame;
|
||
|
|
navigate(`/game/${newGame.id}`)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const textColorOnAppBar = getColorByBrightness(
|
||
|
|
context.themeManager.theme.appBarBgColor,
|
||
|
|
context.themeManager.theme.textColor,
|
||
|
|
context.themeManager.theme.textLightColor
|
||
|
|
);
|
||
|
|
const textColorOnBoard = getColorByBrightness(
|
||
|
|
context.themeManager.theme.boardColor,
|
||
|
|
context.themeManager.theme.textColor,
|
||
|
|
context.themeManager.theme.textLightColor
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<PageContainer theme={theme!}>
|
||
|
|
<HeaderBar color={theme?.appBarBgColor}>
|
||
|
|
<Row>
|
||
|
|
<HeaderbarIcon />
|
||
|
|
<HeaderbarTitle title={context.texts.Mancala} color={textColorOnAppBar} />
|
||
|
|
</Row>
|
||
|
|
<Row>
|
||
|
|
<ThemeSwitchMenu context={context} textColor={textColorOnAppBar} />
|
||
|
|
</Row>
|
||
|
|
</HeaderBar>
|
||
|
|
<Center>
|
||
|
|
<CircularPanel color={context.themeManager.theme.boardColor}>
|
||
|
|
<h4 style={{ margin: "0", color: textColorOnBoard }}>{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}</h4>
|
||
|
|
</CircularPanel>
|
||
|
|
</Center>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LobyPage;
|