[+/*] dropdown popup & header styling

src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx

@@ -9,7 +9,7 @@ const DeckDiscard: React.FC<IDeckDiscardProps> = (
     trayPlayer
 ) => {
     const { gameState } = useGame();
-    const { openPopup } = usePopup();
+    const { togglePopup } = usePopup();
 
     // ------------------------STYLES------------------------//
     const containerStyle = {
@@ -20,12 +20,21 @@ const DeckDiscard: React.FC<IDeckDiscardProps> = (
         alignItems: 'center',
     };
 
-    const discardCardStyle = {
+    const cardPileStyle = {
         backgroundColor: '#282828E6',
         width: '7vh',
         height: '9.5vh',
     };
 
+    const selectableStyle = {
+        '&:hover': {
+            backgroundColor: '#282828',
+            cursor: 'pointer',
+            scale: '1.1',
+            transition: 'all ease-in-out 0.15s',
+        },
+    }
+
     const cardContentStyle = {
         height: '100%',
         display: 'flex',
@@ -41,34 +50,20 @@ const DeckDiscard: React.FC<IDeckDiscardProps> = (
         color: 'white',
     };
 
-    const pileStyle = {
-        backgroundColor: 'transparent',
-        padding: '0',
-        borderRadius: '16px',
-    };
-
     return (
         <Box sx={containerStyle}>
-            <Button
-                variant="text"
-                sx={pileStyle}
-                onClick={() =>
-                    openPopup('pile', {
-                        uuid: `${trayPlayer.trayPlayer}-discard`,
-                        title: `${trayPlayer.trayPlayer}'s discard`,
-                        cards:
-                            gameState?.players[trayPlayer.trayPlayer]?.cardPiles['discard'],
-                    })
-                }
-            >
-
-                <Card sx={discardCardStyle}>
-                    <CardContent sx={cardContentStyle}>
-                        <Typography sx={discardTextStyle}>Discard</Typography>
-                    </CardContent>
-                </Card>
-            </Button>
-            <Card sx={discardCardStyle}>
+            <Card sx={[cardPileStyle, selectableStyle]} onClick={() =>
+                togglePopup('pile', {
+                    uuid: `${trayPlayer.trayPlayer}-discard`,
+                    title: `${trayPlayer.trayPlayer}'s discard`,
+                    cards:
+                        gameState?.players[trayPlayer.trayPlayer]?.cardPiles['discard'],
+                })}>
+                <CardContent sx={cardContentStyle}>
+                    <Typography sx={discardTextStyle}>Discard</Typography>
+                </CardContent>
+            </Card>
+            <Card sx={cardPileStyle}>
                 <CardContent sx={cardContentStyle}>
                     <Typography sx={discardTextStyle}>Deck</Typography>
                 </CardContent>

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

@@ -31,7 +31,6 @@ export const contentStyle = (index: number) => ({
     background:
     'linear-gradient(#0F1F27, #030C13) padding-box, linear-gradient(to top, #30434B, #50717D) border-box',
     zIndex: 11 + index,
-    marginTop: index * 30,
 });
 
 export const containerStyle = {
@@ -53,10 +52,11 @@ export const containerStyle = {
 export const headerStyle = (isMinimized: boolean) => ({
     display: 'flex',
     width: '100%',
-    justifyContent: 'space-between',
     alignItems: 'center',
+    justifyContent: 'center',
     marginTop: '-10px',
     marginBottom: isMinimized ? '-20px' : '0',
+    position: 'relative',
 });
 
 export const footerStyle = {
@@ -68,20 +68,20 @@ export const footerStyle = {
     width: '100%',
 };
 
-export const minimalButtonStyle = {
+export const minimizeButtonStyle = {
     marginTop: '-15px',
     color: 'white',
-    display: 'flex',
+    position: 'absolute',
+    right: 0,
+
 };
 
 export const titleStyle = {
     color: 'white',
     fontSize: '1.25rem',
     fontWeight: 'bold',
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    textAlign: 'center',
+    width: '80%'
 };
 
 export const textStyle = {

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

@@ -2,12 +2,13 @@
 import { PopupData, PopupType, usePopup } from '@/app/_contexts/Popup.context';
 import { Box, Button, SxProps, Theme } from '@mui/material';
 import React from 'react';
-import { DefaultPopup, PilePopup, SelectCardsPopup } from './Popup.types';
+import { DefaultPopup, DropdownPopup, PilePopup, SelectCardsPopup } from './Popup.types';
 import { DefaultPopupModal } from './PopupVariant/DefaultPopup';
 import { PilePopupModal } from './PopupVariant/PilePopup';
 import { SelectCardsPopupModal } from './PopupVariant/SelectCardsPopup';
 import { contentStyle } from './Popup.styles';
 import { useGame } from '@/app/_contexts/Game.context';
+import { DropdownPopupModal } from './PopupVariant/DropdownPopup';
 
 const overlayStyle = {
     position: 'absolute',
@@ -19,27 +20,27 @@ const overlayStyle = {
     zIndex: 10,
 };
 
-const focusHandlerStyle = (type: PopupType, data: PopupData, index: number, playerName:string): SxProps<Theme> => ({
+const focusHandlerStyle = (type: PopupType, data: PopupData, index: number, playerName:string, containCards?:boolean): SxProps<Theme> => ({
     zIndex: 11 + index,
-    padding: 0,
-    minWidth: 'auto',
-    '&:hover': {
-        backgroundColor: 'transparent',
-    },
     pointerEvents: 'auto',
-    ...getPopupPosition(type, data, index, playerName)
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...getPopupPosition(type, data, index, playerName, containCards)
 });
 
-export const getPopupPosition = (type: PopupType, data: PopupData, index: number, playerName:string) => {
+export const getPopupPosition = (type: PopupType, data: PopupData, index: number, playerName:string, containCards?:boolean) => {
     const basePosition = {
         position: 'absolute',
-        left: '50%',
-        transform: `translate(-50%, 0) translate(0px, ${index * 10}px)`,
+        left:'50%',
+        marginTop: '150px',
+        transform: `translate(0px, ${index * 50}px)`,
     };
 
     const pilePosition = {
         position: 'absolute',
-        left: '325px',
+        left: containCards ? '-23%' : '-30.5%',
+        width: '100%',
     }
 
     if (type === 'pile') {
@@ -64,6 +65,7 @@ export const getPopupPosition = (type: PopupType, data: PopupData, index: number
 const PopupShell: React.FC = () => {
     const { popups, focusPopup } = usePopup();
     const { connectedPlayer }= useGame();
+    const isPilePopup = (popup: PopupData): popup is PilePopup => popup.type === 'pile';
 
     if (popups.length === 0) return null; // No popup to display
 
@@ -75,22 +77,22 @@ const PopupShell: React.FC = () => {
                 return <PilePopupModal data={data as PilePopup} />;
             case 'select':
                 return <SelectCardsPopupModal data={data as SelectCardsPopup} />;
+            case 'dropdown':
+                return <DropdownPopupModal data={data as DropdownPopup} />;
             default:
                 return null;
         }
     };
 
     const renderPopup= (popup: PopupData, index:number) => {
         return (
-            <Button
+            <Box
                 key={popup.uuid}
-                disableRipple
-                variant="text"
-                sx={focusHandlerStyle(popup.type, popup, index, connectedPlayer)}
+                sx={focusHandlerStyle(popup.type, popup, index, connectedPlayer, isPilePopup(popup) && popup.cards.length > 0)}
                 onClick={() => focusPopup(popup.uuid)}
             >
                 <Box sx={contentStyle(index)}>{renderPopupContent(popup.type, popup)}</Box>
-            </Button>
+            </Box>
         )
     }
 

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

@@ -25,17 +25,17 @@ export type SelectCardsPopup = {
     onConfirm: (cards: ICardData[]) => void;
 };
 
-// Necessary ?
-export type SelectFromPilePopup = {
-    type: 'pile-select';
-    uuid: string;
-    pile: ICardData[];
-    onConfirm: (cards: ICardData[]) => void;
-};
-
 export type PilePopup = {
     type: 'pile';
     uuid: string;
     title: string;
     cards: ICardData[];
+};
+
+export type DropdownPopup = {
+    type: 'dropdown';
+    uuid: string;
+    title: string;
+    description?: string;
+    options: string[];
 };

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

@@ -8,7 +8,7 @@ import {
     containerStyle,
     footerStyle,
     headerStyle,
-    minimalButtonStyle,
+    minimizeButtonStyle,
     textStyle,
     titleStyle,
 } from '../Popup.styles';
@@ -59,7 +59,7 @@ export const DefaultPopupModal = ({ data }: ButtonProps) => {
             <Box sx={headerStyle(isMinimized)}>
                 <Typography sx={titleStyle}>{data.title}</Typography>
                 <IconButton
-                    sx={minimalButtonStyle}
+                    sx={minimizeButtonStyle}
                     aria-label="minimize"
                     onClick={handleMinimize}
                 >

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

@@ -0,0 +1,87 @@
+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 { MouseEvent, useState } from 'react';
+import { BiMinus, BiPlus } from 'react-icons/bi';
+import {
+    buttonStyle,
+    containerStyle,
+    footerStyle,
+    headerStyle,
+    minimizeButtonStyle,
+    textStyle,
+    titleStyle,
+} from '../Popup.styles';
+import { DropdownPopup } from '../Popup.types';
+
+interface ButtonProps {
+    data: DropdownPopup;
+}
+
+export const DropdownPopupModal = ({ data }: ButtonProps) => {
+    const { sendGameMessage } = useGame();
+    const { closePopup } = usePopup();
+    const [isMinimized, setIsMinimized] = useState(false);
+    const [selectedOption, setSelectedOption] = useState('');
+
+    const handleChange = (event: SelectChangeEvent) => {
+        setSelectedOption(event.target.value as string);
+    };
+
+    const handleDone = () => {
+        sendGameMessage(['menuButton', selectedOption, data.uuid]);
+        closePopup(data.uuid);
+    };
+
+    const renderPopupContent = () => {
+        if (isMinimized) return null;
+        return (
+            <>
+                {data.description && (
+                    <Typography sx={textStyle}>{data.description}</Typography>
+                )}
+
+                <Select value={selectedOption} sx={{ width: '50%', color: 'white' }}
+
+                    onChange={handleChange}>
+                    {data.options.map((option, index) => (
+                        <MenuItem key={index} value={option}>
+                            {option}
+                        </MenuItem>
+                    ))}
+                </Select>
+                <Box sx={footerStyle}>
+                    <Button
+                        onClick={handleDone}
+                        disabled={selectedOption === ''}
+                        sx={buttonStyle}
+                        variant="contained"
+                    >
+                        Done
+                    </Button>
+                </Box>
+            </>
+        );
+    };
+
+    const handleMinimize = (e: MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        setIsMinimized(!isMinimized);
+    };
+
+    return (
+        <Box sx={containerStyle}>
+            <Box sx={headerStyle(isMinimized)}>
+                <Typography sx={titleStyle}>{data.title}</Typography>
+                <IconButton
+                    sx={minimizeButtonStyle}
+                    aria-label="minimize"
+                    onClick={handleMinimize}
+                >
+                    {isMinimized ? <BiPlus /> : <BiMinus />}
+                </IconButton>
+            </Box>
+            {renderPopupContent()}
+        </Box>
+    );
+};

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

@@ -8,7 +8,7 @@ import {
     containerStyle,
     footerStyle,
     headerStyle,
-    minimalButtonStyle,
+    minimizeButtonStyle,
     titleStyle,
 } from '../Popup.styles';
 import { PilePopup } from '../Popup.types';
@@ -56,6 +56,8 @@ export const PilePopupModal = ({ data }: ButtonProps) => {
                     ))}
                 </Grid2>
 
+                {data.cards.length === 0 && <Typography>No cards to display</Typography>}
+
                 <Box sx={footerStyle}>
                     <Button onClick={() => closePopup(data.uuid)} sx={buttonStyle}>
                         Done
@@ -75,7 +77,7 @@ export const PilePopupModal = ({ data }: ButtonProps) => {
             <Box sx={headerStyle(isMinimized)}>
                 <Typography sx={titleStyle}>{data.title}</Typography>
                 <IconButton
-                    sx={minimalButtonStyle}
+                    sx={minimizeButtonStyle}
                     aria-label="minimize"
                     onClick={handleMinimize}
                 >