From 0607a1b999b8fca890e47fe10d81c57017828cbf Mon Sep 17 00:00:00 2001
From: HugoHMZ <hugo.humez.p@gmail.com>
Date: Wed, 8 Jan 2025 01:49:11 +0900
Subject: [PATCH 1/3] [+/*] dropdown popup & header styling

---
 .../_subcomponents/PlayerTray/DeckDiscard.tsx | 51 +++++------
 .../_sharedcomponents/Popup/Popup.styles.ts   | 16 ++--
 .../_sharedcomponents/Popup/Popup.tsx         | 36 ++++----
 .../_sharedcomponents/Popup/Popup.types.ts    | 16 ++--
 .../Popup/PopupVariant/DefaultPopup.tsx       |  4 +-
 .../Popup/PopupVariant/DropdownPopup.tsx      | 87 +++++++++++++++++++
 .../Popup/PopupVariant/PilePopup.tsx          |  6 +-
 src/app/_contexts/Game.context.tsx            | 12 ++-
 src/app/_contexts/Popup.context.tsx           | 28 +++---
 9 files changed, 173 insertions(+), 83 deletions(-)
 create mode 100644 src/app/_components/_sharedcomponents/Popup/PopupVariant/DropdownPopup.tsx

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx
index deb68ab3..50cdbca6 100644
--- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx
+++ b/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>
diff --git a/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts b/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts
index 8d7a790e..7d70f803 100644
--- a/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts
+++ b/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 = {
diff --git a/src/app/_components/_sharedcomponents/Popup/Popup.tsx b/src/app/_components/_sharedcomponents/Popup/Popup.tsx
index ce97b46d..b31cb3d3 100644
--- a/src/app/_components/_sharedcomponents/Popup/Popup.tsx
+++ b/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,6 +77,8 @@ 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;
         }
@@ -82,15 +86,13 @@ const PopupShell: React.FC = () => {
 
     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>
         )
     }
 
diff --git a/src/app/_components/_sharedcomponents/Popup/Popup.types.ts b/src/app/_components/_sharedcomponents/Popup/Popup.types.ts
index 738869dd..11302884 100644
--- a/src/app/_components/_sharedcomponents/Popup/Popup.types.ts
+++ b/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[];
 };
\ No newline at end of file
diff --git a/src/app/_components/_sharedcomponents/Popup/PopupVariant/DefaultPopup.tsx b/src/app/_components/_sharedcomponents/Popup/PopupVariant/DefaultPopup.tsx
index 5d56d45d..49ea61f8 100644
--- a/src/app/_components/_sharedcomponents/Popup/PopupVariant/DefaultPopup.tsx
+++ b/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}
                 >
diff --git a/src/app/_components/_sharedcomponents/Popup/PopupVariant/DropdownPopup.tsx b/src/app/_components/_sharedcomponents/Popup/PopupVariant/DropdownPopup.tsx
new file mode 100644
index 00000000..bd02efa0
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/src/app/_components/_sharedcomponents/Popup/PopupVariant/PilePopup.tsx b/src/app/_components/_sharedcomponents/Popup/PopupVariant/PilePopup.tsx
index 14fd6793..9121b5c3 100644
--- a/src/app/_components/_sharedcomponents/Popup/PopupVariant/PilePopup.tsx
+++ b/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}
                 >
diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx
index 8a8ee9f6..e786fc55 100644
--- a/src/app/_contexts/Game.context.tsx
+++ b/src/app/_contexts/Game.context.tsx
@@ -45,17 +45,25 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
             if (!user.id) return;
             if (gameState.players?.[user.id].promptState) {
                 const promptState = gameState.players?.[user.id].promptState;
-                const { buttons, menuTitle, promptUuid, selectCard, promptType } =
+                const { buttons, menuTitle,promptTitle, promptUuid, selectCard, promptType, dropdownListOptions } =
                     promptState;
                 if (promptType === 'actionWindow') return;
                 else if (buttons.length > 0 && menuTitle && promptUuid && !selectCard) {
-                    openPopup('default', {
+                    return openPopup('default', {
                         uuid: promptUuid,
                         title: menuTitle,
                         promptType: promptType,
                         buttons,
                     });
                 }
+                else if (dropdownListOptions.length > 0 && menuTitle && promptUuid && !selectCard) {
+                    return openPopup('dropdown', {
+                        uuid: promptUuid,
+                        title: promptTitle,
+                        description: menuTitle,
+                        options: dropdownListOptions,
+                    });
+                }
             }
         };
 
diff --git a/src/app/_contexts/Popup.context.tsx b/src/app/_contexts/Popup.context.tsx
index b0819494..0db12113 100644
--- a/src/app/_contexts/Popup.context.tsx
+++ b/src/app/_contexts/Popup.context.tsx
@@ -2,17 +2,16 @@
 import React, { createContext, useContext, useState } from 'react';
 import {
     DefaultPopup,
+    DropdownPopup,
     PilePopup,
     SelectCardsPopup,
-    SelectFromPilePopup,
 } from '../_components/_sharedcomponents/Popup/Popup.types';
 
-// TODO: SelectCardsPopup | LeaderAbilityPopup | DrawPopup | SelectCardsWithAspectPopup
 export type PopupData =
   | DefaultPopup
   | SelectCardsPopup
-  | SelectFromPilePopup
-  | PilePopup;
+  | PilePopup
+  | DropdownPopup;
 
 export type PopupType = PopupData['type'];
 
@@ -20,12 +19,13 @@ export type PopupDataMap = {
     default: Omit<DefaultPopup, 'type'>;
     select: Omit<SelectCardsPopup, 'type'>;
     pile: Omit<PilePopup, 'type'>;
-    'pile-select': Omit<SelectFromPilePopup, 'type'>;
+    dropdown: Omit<DropdownPopup, 'type'>;
 };
 
 interface PopupContextProps {
     popups: PopupData[];
     openPopup: <T extends PopupType>(type: T, data: PopupDataMap[T]) => void;
+    togglePopup: <T extends PopupType>(type: T, data: PopupDataMap[T]) => void;
     closePopup: (uuid: string) => void;
     focusPopup: (uuid: string) => void;
 }
@@ -37,23 +37,19 @@ export const PopupProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
     const [popups, setPopups] = useState<PopupData[]>([]);
 
-    function isDefaultPopup(popup: PopupData): popup is DefaultPopup {
-        return (popup as DefaultPopup)?.promptType !== undefined;
-    }
-
     const openPopup = <T extends PopupType>(type: T, data: PopupDataMap[T]) => {
         if (popups.some((popup) => popup.uuid === data.uuid)) return;
-        if (
-            popups.length > 0 &&
-      popups.some((popup) => isDefaultPopup(popup)) &&
-      isDefaultPopup({ type, ...data } as PopupData)
-        )
-            return;
 
         console.log('Opening new popup with uuid', data.uuid);
         setPopups((prev) => [...prev, { type, ...data } as PopupData]);
     };
 
+    const togglePopup = <T extends PopupType>(type: T, data: PopupDataMap[T]) => {
+        if (popups.some((popup) => popup.uuid === data.uuid)) closePopup(data.uuid);
+        else openPopup(type, data);
+    }
+
+
     const closePopup = (uuid: string) => {
         console.log('Closing popup with uuid', uuid);
 
@@ -79,7 +75,7 @@ export const PopupProvider: React.FC<{ children: React.ReactNode }> = ({
 
     return (
         <PopupContext.Provider
-            value={{ openPopup, closePopup, focusPopup, popups }}
+            value={{ openPopup, closePopup, focusPopup, togglePopup, popups }}
         >
             {children}
         </PopupContext.Provider>

From 4c3fd16e0a9113a5d8e978f41293371a71b853e0 Mon Sep 17 00:00:00 2001
From: HugoHMZ <hugo.humez.p@gmail.com>
Date: Thu, 16 Jan 2025 22:33:06 +0900
Subject: [PATCH 2/3] [+] displayCards: top bottom deck cards

---
 .../_sharedcomponents/Popup/Popup.styles.ts   |  17 +++
 .../_sharedcomponents/Popup/Popup.types.ts    |  13 +-
 .../Popup/PopupVariant/SelectCardsPopup.tsx   | 132 ++++++++++--------
 src/app/_contexts/Game.context.tsx            |  20 ++-
 4 files changed, 115 insertions(+), 67 deletions(-)

diff --git a/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts b/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts
index 7d70f803..c6d93bc5 100644
--- a/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts
+++ b/src/app/_components/_sharedcomponents/Popup/Popup.styles.ts
@@ -14,6 +14,23 @@ export const buttonStyle = {
     },
 };
 
+export const perCardButtonStyle = {
+    borderRadius: '15px',
+    backgroundColor: '#1E2D32',
+    padding: '.5rem 1rem',
+    fontSize: '.75rem',
+
+    border: '2px solid transparent',
+    background:
+    'linear-gradient(#1E2D32, #1E2D32) padding-box, linear-gradient(to top, #038FC3, #595A5B) border-box',
+    '&:hover': {
+        background: 'hsl(195, 25%, 16%)',
+    },
+    '&:disabled': {
+        color: '#666666',
+    },
+};
+
 export const concedeButtonStyle = {
     padding: '1rem 1.5rem',
     borderRadius: '15px',
diff --git a/src/app/_components/_sharedcomponents/Popup/Popup.types.ts b/src/app/_components/_sharedcomponents/Popup/Popup.types.ts
index 11302884..689ee2cf 100644
--- a/src/app/_components/_sharedcomponents/Popup/Popup.types.ts
+++ b/src/app/_components/_sharedcomponents/Popup/Popup.types.ts
@@ -7,11 +7,16 @@ export type PopupButton = {
     arg: string;
 };
 
+export type PerCardButton = {
+    arg: string;
+    command: string;
+    text: string;
+};
+
 export type DefaultPopup = {
     type: 'default';
     uuid: string;
     title: string;
-    promptType?: string;
     description?: string;
     buttons: PopupButton[];
 };
@@ -20,9 +25,11 @@ export type SelectCardsPopup = {
     type: 'select';
     uuid: string;
     title: string;
-    maxNumber?: number;
+    description?:string;
+
+
     cards: ICardData[];
-    onConfirm: (cards: ICardData[]) => void;
+    perCardButtons: PerCardButton[];
 };
 
 export type PilePopup = {
diff --git a/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx b/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx
index 3ca52195..59f69d9d 100644
--- a/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx
+++ b/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx
@@ -1,17 +1,22 @@
-import { Box, Button, Typography } from '@mui/material';
-import { useState } from 'react';
-import { ICardData } from '../../Cards/CardTypes';
-import GameCard from '../../Cards/GameCard/GameCard';
+import { Box, Button, IconButton, Typography } from '@mui/material';
+import { MouseEvent, useState } from 'react';
 import {
-    buttonStyle,
-    cardButtonStyle,
     containerStyle,
-    footerStyle,
-    selectedCardBorderStyle,
-    selectedIndicatorStyle,
+    headerStyle,
+    minimizeButtonStyle,
+    perCardButtonStyle,
+    textStyle,
     titleStyle,
 } from '../Popup.styles';
-import { SelectCardsPopup } from '../Popup.types';
+import { PerCardButton, SelectCardsPopup } from '../Popup.types';
+import { usePopup } from '@/app/_contexts/Popup.context';
+import { useGame } from '@/app/_contexts/Game.context';
+import { BiMinus, BiPlus } from 'react-icons/bi';
+import GameCard from '../../Cards/GameCard/GameCard';
+
+interface ButtonProps {
+    data: SelectCardsPopup;
+}
 
 const cardListContainerStyle = {
     display: 'flex',
@@ -27,67 +32,72 @@ const cardSelectorStyle = {
     gap: '.5rem',
 };
 
-interface ButtonProps {
-    data: SelectCardsPopup;
-}
-
 export const SelectCardsPopupModal = ({ data }: ButtonProps) => {
-    const [selectedCards, setSelectedCards] = useState<
-        Record<number, ICardData[]>
-    >([]);
+    const { closePopup } = usePopup();
+    const { sendGameMessage, connectedPlayer } = useGame();
+    const [isMinimized, setIsMinimized] = useState(false);
+
+    const renderPopupContent = () => {
+        if (isMinimized) return null;
+        return (
+            <>
+                {data.description && (
+                    <Typography sx={textStyle}>{data.description}</Typography>
+                )}
+                <Box sx={cardListContainerStyle}>
+                    {data.cards.map((card, index) => {
+                        return (
+                            <Box sx={{ alignItems: 'center', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                                <Box key={`card-${index}-${card.uuid}`} sx={cardSelectorStyle}>
+
+                                    <GameCard card={{ ...card, selectable: false }} />
+                                </Box>
+                                {renderButtons(card.uuid, data.perCardButtons)}
+                            </Box>
+                        )
+                    })}
+                </Box>
+            </>
+        );
+    };
 
-    const handleCardClick = (index: number, card: ICardData) => {
-        if (!selectedCards[index]) {
-            setSelectedCards((prev) => ({
-                ...prev,
-                [index]: [card],
-            }));
-        } else {
-            setSelectedCards((prev) => ({
-                ...prev,
-                [index]: [...prev[index], card],
-            }));
-        }
+    const handleMinimize = (e: MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        setIsMinimized(!isMinimized);
     };
 
-    const isSelectedCard = (index: number) => selectedCards[index] !== undefined;
-    const isButtonDisabled = () =>
-        Object.keys(selectedCards).length === 0 ||
-    (data.maxNumber !== undefined && data.maxNumber > Object.keys(selectedCards).length);
+    const renderButtons = (cardUuid: string, buttons: PerCardButton[]) => {
+        return (
+            <Box sx={{ gap: '1rem', flexDirection: 'column', display: 'flex' }}>
+                {buttons.map((button, index) =>
+                    <Button
+                        key={`${button.arg}:${index}`}
+                        sx={perCardButtonStyle}
+                        variant="contained"
+                        onClick={() => {
+                            sendGameMessage([connectedPlayer, button.arg, cardUuid, data.uuid]); closePopup(data.uuid)
+                        }}
+                    >
+                        {button.text}
+                    </Button>
+                )}</Box>
+        )
+    }
 
-    // sort and not filter cards by selectable true first
-    const sortCards = (cards: ICardData[]) =>
-        cards.sort((a, b) => Number(b.selectable) - Number(a.selectable));
 
     return (
         <Box sx={containerStyle}>
-            <Typography sx={titleStyle}>{data.title}</Typography>
-            <Box sx={cardListContainerStyle}>
-                {sortCards(data.cards).map((card, index) => (
-                    <Box key={`card-${index}-${card.uuid}`} sx={cardSelectorStyle}>
-                        <Button
-                            sx={cardButtonStyle}
-                            onClick={() => handleCardClick(index, card)}
-                            variant="text"
-                        >
-                            <Box sx={selectedCardBorderStyle(isSelectedCard(index))}>
-                                <GameCard card={card} />
-                            </Box>
-                        </Button>
-                        <Box sx={selectedIndicatorStyle(isSelectedCard(index))} />
-                    </Box>
-                ))}
-            </Box>
-            <Box sx={footerStyle}>
-                <Button
-                    disabled={isButtonDisabled()}
-                    onClick={() => data.onConfirm(Object.values(selectedCards).flat())}
-                    sx={buttonStyle}
-                    variant="contained"
+            <Box sx={headerStyle(isMinimized)}>
+                <Typography sx={titleStyle}>{data.title}</Typography>
+                <IconButton
+                    sx={minimizeButtonStyle}
+                    aria-label="minimize"
+                    onClick={handleMinimize}
                 >
-                    Confirm
-                </Button>
+                    {isMinimized ? <BiPlus /> : <BiMinus />}
+                </IconButton>
             </Box>
+            {renderPopupContent()}
         </Box>
     );
 };
\ No newline at end of file
diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx
index 927ff6a6..c44b9d7e 100644
--- a/src/app/_contexts/Game.context.tsx
+++ b/src/app/_contexts/Game.context.tsx
@@ -55,14 +55,28 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
             if (!user || user.id == null) return; // TODO currently this doesn't support private lobbies where players aren't logged in.
             if (gameState.players?.[user.id].promptState) {
                 const promptState = gameState.players?.[user.id].promptState;
-                const { buttons, menuTitle,promptTitle, promptUuid, selectCard, promptType, dropdownListOptions } =
+                const { buttons, menuTitle,promptTitle, promptUuid, selectCard, promptType, dropdownListOptions, perCardButtons, displayCards } =
                     promptState;
                 if (promptType === 'actionWindow') return;
+                else if (promptType === 'displayCards') {
+                    const cards = displayCards.map((card: any) => {
+                        return {
+                            ...card,
+                            uuid: card.cardUuid,
+                        };
+                    });
+                    return openPopup('select', {
+                        uuid: promptUuid,
+                        title: promptTitle,
+                        description: menuTitle,
+                        cards: cards,
+                        perCardButtons: perCardButtons,
+                    });
+                }
                 else if (buttons.length > 0 && menuTitle && promptUuid && !selectCard) {
                     return openPopup('default', {
                         uuid: promptUuid,
                         title: menuTitle,
-                        promptType: promptType,
                         buttons,
                     });
                 }
@@ -151,4 +165,4 @@ export const useGame = () => {
         throw new Error('useGame must be used within a GameProvider');
     }
     return context;
-};
\ No newline at end of file
+};  
\ No newline at end of file

From 2dfa87dbd2a1a4056a2e5088d65e758c2c28063d Mon Sep 17 00:00:00 2001
From: HugoHMZ <hugo.humez.p@gmail.com>
Date: Thu, 16 Jan 2025 23:38:36 +0900
Subject: [PATCH 3/3] [*] gameMessage: undo previous change in gameMessage to
 match the server expectation

---
 .../_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx b/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx
index 59f69d9d..ab32be8d 100644
--- a/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx
+++ b/src/app/_components/_sharedcomponents/Popup/PopupVariant/SelectCardsPopup.tsx
@@ -34,7 +34,7 @@ const cardSelectorStyle = {
 
 export const SelectCardsPopupModal = ({ data }: ButtonProps) => {
     const { closePopup } = usePopup();
-    const { sendGameMessage, connectedPlayer } = useGame();
+    const { sendGameMessage } = useGame();
     const [isMinimized, setIsMinimized] = useState(false);
 
     const renderPopupContent = () => {
@@ -75,7 +75,7 @@ export const SelectCardsPopupModal = ({ data }: ButtonProps) => {
                         sx={perCardButtonStyle}
                         variant="contained"
                         onClick={() => {
-                            sendGameMessage([connectedPlayer, button.arg, cardUuid, data.uuid]); closePopup(data.uuid)
+                            sendGameMessage([button.command, button.arg, cardUuid, data.uuid]); closePopup(data.uuid)
                         }}
                     >
                         {button.text}