feature: cancel new game

backend/src/consts/channel_names.ts

@@ -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"

backend/src/game/GameManager.ts

@@ -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);
         });

backend/src/matchmaker/MatchMaker.ts

@@ -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;
 }

backend/src/matchmaker/MatchMakerImpl.ts

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

frontend/src/const/channel_names.ts

@@ -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"

frontend/src/routes/LobyPage.tsx

@@ -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}>
+                <div style={{
-                    <h4 style={{ margin: "0", color: textColorOnBoard }}>{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}</h4>
+                    display: "flex",
-                </CircularPanel>
+                    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>
     );

mobile/src/const/channel_names.ts

@@ -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"

mobile/src/screens/LobyScreen.tsx

@@ -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  }}>
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: context.themeManager.theme?.background }}>
-            <Text style={{color: "#000"}}>{t('SearchingOpponent')}</Text>
+            <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>
     );
 }