Merge branch 'main' into resource-popup-improvments

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 focusHandlerStyle = (type: PopupType, data: PopupData, index: number, playerName:string, containCards?:boolean): SxProps<Theme> => ({
     zIndex: 11 + index,
@@ -76,6 +77,8 @@ const PopupShell: React.FC<IPopupShellProps> = ({
                 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

@@ -56,4 +56,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/DropdownPopup.tsx

@@ -1,6 +1,13 @@
 import { useGame } from '@/app/_contexts/Game.context';
 import { usePopup } from '@/app/_contexts/Popup.context';
-import { Box, Button, IconButton, MenuItem, Select, SelectChangeEvent, Typography } from '@mui/material';
+import { 
+    Autocomplete,
+    Box,
+    Button,
+    IconButton,
+    TextField,
+    Typography
+} from '@mui/material';
 import { MouseEvent, useState } from 'react';
 import { BiMinus, BiPlus } from 'react-icons/bi';
 import {
@@ -24,8 +31,8 @@ export const DropdownPopupModal = ({ data }: ButtonProps) => {
     const [isMinimized, setIsMinimized] = useState(false);
     const [selectedOption, setSelectedOption] = useState('');
 
-    const handleChange = (event: SelectChangeEvent) => {
-        setSelectedOption(event.target.value as string);
+    const handleChange = (event: React.SyntheticEvent) => {
+        setSelectedOption((event.target as HTMLElement).innerHTML);
     };
 
     const handleDone = () => {
@@ -41,15 +48,19 @@ export const DropdownPopupModal = ({ data }: ButtonProps) => {
                     <Typography sx={textStyle}>{data.description}</Typography>
                 )}
 
-                <Select value={selectedOption} sx={{ width: '50%', color: 'white' }}
+                <Autocomplete 
+                    options={data.options}
+                    onChange={handleChange}
+                    renderInput={(params) => (
+                        <TextField {...params} />
+                    )}
+                    sx={{ width: '50%', color: 'white' }}
+                    slotProps={{ 
+                        popupIndicator: { sx: { color: 'white' } },
+                        clearIndicator: { sx: { color: 'white' } },
+                    }}
+                />
 
-                    onChange={handleChange}>
-                    {data.options.map((option, index) => (
-                        <MenuItem key={index} value={option}>
-                            {option}
-                        </MenuItem>
-                    ))}
-                </Select>
                 <Box sx={footerStyle}>
                     <Button
                         onClick={handleDone}
@@ -84,4 +95,4 @@ export const DropdownPopupModal = ({ data }: ButtonProps) => {
             {renderPopupContent()}
         </Box>
     );
-};
+};

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, gameState } = useGame();
+    const { closePopup } = usePopup();
+    const router = useRouter();
+    const hasWinner = !!gameState?.winner;
+    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}>
+                {hasWinner ? 'Leave the game and return to homescreen?' : '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'];
 

src/app/_theme/theme.ts

@@ -271,5 +271,21 @@ export const theme: Theme = createTheme({
                 },
             },
         },
+        MuiAutocomplete: {
+            styleOverrides: {
+                input: {
+                    textAlign: 'center',
+                },
+                listbox: {
+                    backgroundColor: '#394452',
+                },
+                option: {
+                    '&:hover': {
+                        backgroundColor: '#4C5C71'
+                    },
+                },
+            }
+        },
+
     },
 });