jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: cancel new game

Browse Source
This commit is contained in:
Halit Aksoy 2024-03-31 17:54:07 +03:00
parent d21b9df2cc
commit f65da457bc
8 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/consts/channel_names.ts
View File

@ -1,4 +1,5 @@
export const channel_new_game = "new_game"
export const channel_cancel_new_game = "cancel_new_game"
export const channel_on_game_start = "on_game_start"
export const channel_game_move = "game_move"
export const channel_on_game_update = "on_game_update"

5
backend/src/game/GameManager.ts
View File

@ -3,6 +3,7 @@ import { RTMT } from "../rtmt/rtmt";
import { GameStore } from "./gamestore/GameStore";
import { generateKey } from "../util/key_factory";
import {
channel_cancel_new_game,
channel_game_move,
channel_leave_game,
channel_listen_game_events,
@ -42,6 +43,10 @@ export class GameManager {
this.matchMaker.join(userKey);
});
this.rtmt.listenMessage(channel_cancel_new_game, (userKey: string, message: Object) => {
this.matchMaker.cancel(userKey);
});
this.rtmt.listenMessage(channel_game_move, (userKey: string, message: Object) => {
this.onGameMove(userKey, message as GameMove);
});

1
backend/src/matchmaker/MatchMaker.ts
View File

@ -2,5 +2,6 @@ export type OnPlayersPaired = (player1Id: string, player2Id: string)=> void;
export interface MatchMaker {
join(playerId : string): void;
cancel(playerId : string): boolean;
listenOnPlayersPaired(onPlayersPaired: OnPlayersPaired ) : void;
}

9
backend/src/matchmaker/MatchMakerImpl.ts
View File

@ -30,6 +30,15 @@ export class MatchMakerImpl implements MatchMaker {
}
}
public cancel(playerId: string): boolean {
if(playerId === this.waitingPlayerId) {
this.waitingPlayerId = undefined;
return true;
}
return false;
}
public listenOnPlayersPaired(onPlayersPaired: OnPlayersPaired): void {
this.onPlayersPaired = onPlayersPaired;
}

1
frontend/src/const/channel_names.ts
View File

@ -1,4 +1,5 @@
export const channel_new_game = "new_game"
export const channel_cancel_new_game = "cancel_new_game"
export const channel_on_game_start = "on_game_start"
export const channel_game_move = "game_move"
export const channel_on_game_update = "on_game_update"

27
frontend/src/routes/LobyPage.tsx
View File

@ -10,10 +10,11 @@ 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 { channel_cancel_new_game, channel_on_game_start } from '../const/channel_names';
import { Context } from '../context/context';
import { Theme } from '../theme/Theme';
import { getColorByBrightness } from '../util/ColorUtil';
import Button from "../components/Button";
const LobyPage: FunctionComponent<{
context: Context,
@ -28,6 +29,12 @@ const LobyPage: FunctionComponent<{
navigate(`/game/${newGame.id}`)
}
const onCancelNewGameClick = () => {
if (context.rtmt.connectionState === "connected") {
context.rtmt.sendMessage(channel_cancel_new_game, "");
}
navigate("/")
}
useEffect(() => {
context.rtmt.addMessageListener(channel_on_game_start, onGameStart);
context.rtmt.sendMessage("new_game", {});
@ -62,9 +69,21 @@ const LobyPage: FunctionComponent<{
</Row>
</HeaderBar>
<Center>
<CircularPanel color={context.themeManager.theme.boardColor}>
<h4 style={{ margin: "0", color: textColorOnBoard }}>{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}</h4>
</CircularPanel>
<div style={{
display: "flex",
flexDirection: "column",
alignContent: "center"
}}>
<CircularPanel color={context.themeManager.theme.boardColor}>
<h4 style={{ margin: "0", color: textColorOnBoard }}>{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}</h4>
</CircularPanel>
<Button
context={context}
color={context.themeManager.theme.boardColor}
text={context.texts.Cancel}
onClick={onCancelNewGameClick} />
</div>
</Center>
</PageContainer>
);

1
mobile/src/const/channel_names.ts
View File

@ -1,4 +1,5 @@
export const channel_new_game = "new_game"
export const channel_cancel_new_game = "cancel_new_game"
export const channel_on_game_start = "on_game_start"
export const channel_game_move = "game_move"
export const channel_on_game_update = "on_game_update"

21
mobile/src/screens/LobyScreen.tsx
View File

@ -1,10 +1,11 @@
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { View, Text, Button, Pressable } from 'react-native';
import { useTranslation } from 'react-i18next';
import { LobyScreenProps } from '../types';
import { useEffect } from 'react';
import { CommonMancalaGame } from 'mancala.js';
import { channel_on_game_start } from '../const/channel_names';
import { channel_cancel_new_game, channel_on_game_start } from '../const/channel_names';
import CircularPanel from '../components/CircularPanel';
export default function LobyScreen({ navigation, route }: LobyScreenProps) {
@ -17,6 +18,14 @@ export default function LobyScreen({ navigation, route }: LobyScreenProps) {
navigation.replace("Game", { context, gameId: newGame.id, userKey })
}
const onCancelNewGameClick = () => {
if (context.rtmt.connectionState === "connected") {
context.rtmt.sendMessage(channel_cancel_new_game, "");
}
navigation.replace("Home", { context })
}
useEffect(() => {
context.rtmt.addMessageListener(channel_on_game_start, onGameStart);
context.rtmt.sendMessage("new_game", {});
@ -26,8 +35,12 @@ export default function LobyScreen({ navigation, route }: LobyScreenProps) {
}, []);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: context.themeManager.theme?.background }}>
<Text style={{color: "#000"}}>{t('SearchingOpponent')}</Text>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: context.themeManager.theme?.background }}>
<CircularPanel color={context.themeManager.theme?.boardColor} children={<Text style={{ color: "#000" }}>{t('SearchingOpponent') + " " + t('PleaseWait') + "..."}</Text>} />
<View style={{height: 10}}></View>
<Pressable onPress={onCancelNewGameClick}>
<CircularPanel color={context.themeManager.theme?.boardColor} children={<Text style={{ color: context.themeManager.theme.textColor }}>{t('Cancel')}</Text>} />
</Pressable>
</View>
);
}