#156

- Added popup for leaving the game.

src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx

@@ -6,16 +6,21 @@ import PlayerHand from '../_subcomponents/PlayerTray/PlayerHand';
 import DeckDiscard from '../_subcomponents/PlayerTray/DeckDiscard';
 import { IOpponentCardTrayProps } from '@/app/_components/Gameboard/GameboardTypes';
 import { useGame } from '@/app/_contexts/Game.context';
-import { useRouter } from 'next/navigation';
 import { s3CardImageURL } from '@/app/_utils/s3Utils';
+import { v4 as uuidv4 } from 'uuid';
+import { usePopup } from '@/app/_contexts/Popup.context';
+import { PopupSource } from '@/app/_components/_sharedcomponents/Popup/Popup.types';
 
 const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer, preferenceToggle }) => {
-    const { gameState, connectedPlayer, getOpponent, sendMessage } = useGame();
-    const router = useRouter();
-    const handleExitButton = () =>{
-        sendMessage('manualDisconnect');
-        router.push('/');
-    }
+    const { gameState, connectedPlayer, getOpponent } = useGame();
+    const { openPopup } = usePopup();
+    const handleExitButton = () => {
+        const popupId = `${uuidv4()}`;
+        openPopup('leaveGame', {
+            uuid: popupId,
+            source: PopupSource.User
+        });
+    };
 
     const hasInitiative = gameState.players[connectedPlayer].hasInitiative;
     const initiativeClaimed = gameState.initiativeClaimed;

src/app/_components/_sharedcomponents/Popup/Popup.tsx

@@ -9,6 +9,7 @@ import { SelectCardsPopupModal } from './PopupVariant/SelectCardsPopup';
 import { contentStyle } from './Popup.styles';
 import { useGame } from '@/app/_contexts/Game.context';
 import { DropdownPopupModal } from './PopupVariant/DropdownPopup';
+import { LeaveGamePopupModule } from '@/app/_components/_sharedcomponents/Popup/PopupVariant/LeaveGamePopup';
 
 const overlayStyle = {
     position: 'absolute',
@@ -79,6 +80,8 @@ const PopupShell: React.FC = () => {
                 return <SelectCardsPopupModal data={data as SelectCardsPopup} />;
             case 'dropdown':
                 return <DropdownPopupModal data={data as DropdownPopup} />;
+            case 'leaveGame':
+                return <LeaveGamePopupModule uuid={data.uuid} />;
             default:
                 return null;
         }

src/app/_components/_sharedcomponents/Popup/Popup.types.ts

@@ -54,4 +54,10 @@ export type DropdownPopup = {
     description?: string;
     options: string[];
     source: PopupSource;
+};
+
+export type LeaveGamePopup = {
+    type: 'leaveGame';
+    uuid: string;
+    source: PopupSource;
 };

src/app/_components/_sharedcomponents/Popup/PopupVariant/LeaveGamePopup.tsx

@@ -0,0 +1,56 @@
+import { useGame } from '@/app/_contexts/Game.context';
+import { usePopup } from '@/app/_contexts/Popup.context';
+import { Box, Typography } from '@mui/material';
+import { useRouter } from 'next/navigation';
+import {
+    containerStyle,
+    footerStyle,
+    headerStyle,
+    textStyle,
+    titleStyle,
+} from '../Popup.styles';
+import PreferenceButton from '@/app/_components/_sharedcomponents/Preferences/_subComponents/PreferenceButton';
+
+interface LeaveGamePopupProps {
+    uuid: string;
+}
+
+export const LeaveGamePopupModule = ({ uuid }: LeaveGamePopupProps) => {
+    const { sendMessage } = useGame();
+    const { closePopup } = usePopup();
+    const router = useRouter();
+
+    const handleConfirm = () => {
+        sendMessage('manualDisconnect');
+        closePopup(uuid);
+        router.push('/');
+    };
+
+    const handleCancel = () => {
+        closePopup(uuid);
+    };
+
+    return (
+        <Box sx={containerStyle}>
+            <Box sx={headerStyle(false)}>
+                <Typography sx={titleStyle}>Leave Game</Typography>
+            </Box>
+            <Typography sx={textStyle}>
+                Leaving the game will concede.
+            </Typography>
+            <Box sx={footerStyle}>
+                <PreferenceButton
+                    variant={'standard'}
+                    buttonFnc={handleCancel}
+                    text={'Cancel'}
+                />
+                <PreferenceButton
+                    variant={'concede'}
+                    buttonFnc={handleConfirm}
+                    text={'Leave game'}
+                />
+
+            </Box>
+        </Box>
+    );
+};

src/app/_contexts/Popup.context.tsx

@@ -5,14 +5,15 @@ import {
     DropdownPopup,
     PilePopup,
     SelectCardsPopup,
-    PopupSource
+    PopupSource, LeaveGamePopup
 } from '../_components/_sharedcomponents/Popup/Popup.types';
 
 export type PopupData =
   | DefaultPopup
   | SelectCardsPopup
   | PilePopup
-  | DropdownPopup;
+  | DropdownPopup
+  | LeaveGamePopup;
 
 export type PopupType = PopupData['type'];