[*] eslint: Fixed eslint weird indentation and sent all files from Popup handling

src/app/GameBoard/page.tsx

@@ -13,6 +13,7 @@ import { useGame } from '../_contexts/Game.context';
 import { useSidebar } from '../_contexts/Sidebar.context';
 import { transform } from 'next/dist/build/swc';
 import { text } from 'stream/consumers';
+import PopupShell from '../_components/_sharedcomponents/Popup/Popup';
 
 const GameBoard = () => {
     const { getOpponent, connectedPlayer, gameState } = useGame();
@@ -35,7 +36,7 @@ const GameBoard = () => {
     };
 
     useEffect(() => {
-        // Update the drawer width when the drawer opens or closes
+    // Update the drawer width when the drawer opens or closes
         if (drawerRef.current) {
             setDrawerWidth(drawerRef.current.offsetWidth);
         }
@@ -75,7 +76,8 @@ const GameBoard = () => {
         promptStyle: {
             textAlign: 'center',
             fontSize: '1.3em',
-            background: 'radial-gradient(ellipse, rgba(0,0,0, 0.9), rgba(0,0,0,0.7), rgba(0,0,0,0.0))',
+            background:
+        'radial-gradient(ellipse, rgba(0,0,0, 0.9), rgba(0,0,0,0.7), rgba(0,0,0,0.0))',
         },
     };
 
@@ -87,9 +89,7 @@ const GameBoard = () => {
         <Grid container sx={{ height: '100vh' }}>
             <Box component="main" sx={styles.mainBoxStyle}>
                 <OpponentCardTray trayPlayer={getOpponent(connectedPlayer)} />
-                <Board
-                    sidebarOpen={sidebarOpen}
-                />
+                <Board sidebarOpen={sidebarOpen} />
                 <PlayerCardTray
                     trayPlayer={connectedPlayer}
                     handleModalToggle={handleModalToggle}
@@ -110,7 +110,9 @@ const GameBoard = () => {
                 />
             )}
             <Box sx={styles.centralPromptContainer}>
-                <Typography sx={styles.promptStyle}>{gameState.players[connectedPlayer]?.promptState.menuTitle}</Typography>
+                <Typography sx={styles.promptStyle}>
+                    {gameState.players[connectedPlayer]?.promptState.menuTitle}
+                </Typography>
             </Box>
             <ResourcesOverlay
                 isModalOpen={isModalOpen}
@@ -120,6 +122,7 @@ const GameBoard = () => {
                 isBasicPromptOpen={isBasicPromptOpen}
                 handleBasicPromptToggle={handleBasicPromptToggle}
             />
+            <PopupShell/>
         </Grid>
     );
 };

src/app/_components/ClientProviders/ClientProviders.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { PopupProvider } from '@/app/_contexts/Popup.context';
 import { SidebarProvider } from '@/app/_contexts/Sidebar.context';
 import { ThemeContextProvider } from '@/app/_contexts/Theme.context';
 import { UserProvider } from '@/app/_contexts/User.context';
@@ -14,7 +15,9 @@ const ClientProviders: React.FC<IClientProvidersProps> = ({ children }) => {
         <SessionProvider>
             <UserProvider>
                 <SidebarProvider>
-                    <ThemeContextProvider>{children}</ThemeContextProvider>
+                    <PopupProvider>
+                        <ThemeContextProvider>{children}</ThemeContextProvider>
+                    </PopupProvider>
                 </SidebarProvider>
             </UserProvider>
         </SessionProvider>

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

@@ -1,13 +1,16 @@
 import React from 'react';
-import { Card, CardContent, Box, Typography } from '@mui/material';
+import { Card, CardContent, Box, Typography, Button } from '@mui/material';
 import GameCard from '../../../_sharedcomponents/Cards/GameCard/GameCard';
 import { IDeckDiscardProps } from '@/app/_components/Gameboard/GameboardTypes';
 import { useGame } from '@/app/_contexts/Game.context';
+import { usePopup } from '@/app/_contexts/Popup.context';
 
 const DeckDiscard: React.FC<IDeckDiscardProps> = (
     trayPlayer
 ) => {
     const { gameState } = useGame();
+    const { openPopup } = usePopup();
+
     // ------------------------STYLES------------------------//
     const containerStyle = {
         display: 'flex',
@@ -38,13 +41,33 @@ const DeckDiscard: React.FC<IDeckDiscardProps> = (
         color: 'white',
     };
 
+    const pileStyle = {
+        backgroundColor: 'transparent',
+        padding: '0',
+        borderRadius: '16px',
+    };
+
     return (
         <Box sx={containerStyle}>
-            <Card sx={discardCardStyle}>
-                <CardContent sx={cardContentStyle}>
-                    <Typography sx={discardTextStyle}>Discard</Typography>
-                </CardContent>
-            </Card>
+            <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}>
                 <CardContent sx={cardContentStyle}>
                     <Typography sx={discardTextStyle}>Deck</Typography>

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

@@ -0,0 +1,107 @@
+export const buttonStyle = {
+    borderRadius: '15px',
+    backgroundColor: '#1E2D32',
+    padding: '1rem 1.5rem',
+
+    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',
+    backgroundImage: 'linear-gradient(#1E2D32, #1E2D32)',
+    border: '2px solid transparent',
+    background:
+    'linear-gradient(#380707, #380707) padding-box, linear-gradient(to top, #C30101, #7D0807) border-box',
+};
+
+export const contentStyle = (index: number) => ({
+    padding: '2rem',
+    borderRadius: '15px',
+    position: 'absolute',
+    border: '2px solid transparent',
+    background:
+    'linear-gradient(#0F1F27, #030C13) padding-box, linear-gradient(to top, #30434B, #50717D) border-box',
+    zIndex: 11 + index,
+    marginTop: index * 30,
+});
+
+export const containerStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+
+    flex: 1,
+    maxHeight: '550px',
+    minHeigth: '260px',
+    height: '100%',
+    width: '100%',
+    minWidth: '560px',
+    maxWidth: '800px',
+};
+
+export const headerStyle = (isMinimized: boolean) => ({
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: '-10px',
+    marginBottom: isMinimized ? '-20px' : '0',
+});
+
+export const footerStyle = {
+    display: 'flex',
+    gap: '1rem',
+    marginTop: '2rem',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+};
+
+export const minimalButtonStyle = {
+    marginTop: '-15px',
+    color: 'white',
+    display: 'flex',
+};
+
+export const titleStyle = {
+    color: 'white',
+    fontSize: '1.25rem',
+    fontWeight: 'bold',
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+
+export const textStyle = {
+    color: '#C7C7C7',
+};
+
+export const cardButtonStyle = {
+    backgroundColor: 'transparent',
+    padding: '0',
+    borderRadius: '8px',
+};
+
+export const selectedCardBorderStyle = (isSelected: boolean) => ({
+    border: isSelected ? '2px solid #66E5FF' : '2px solid transparent',
+    borderRadius: '8px',
+});
+
+export const selectedIndicatorStyle = (isSelected: boolean) => ({
+    backgroundColor: isSelected ? '#66E5FF' : '#666666',
+    height: '8px',
+    width: '8px',
+    borderRadius: '100%',
+});

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

@@ -0,0 +1,110 @@
+'use client';
+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 { 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';
+
+const overlayStyle = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    display: 'flex',
+    zIndex: 10,
+};
+
+const focusHandlerStyle = (type: PopupType, data: PopupData, index: number, playerName:string): SxProps<Theme> => ({
+    zIndex: 11 + index,
+    padding: 0,
+    minWidth: 'auto',
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+    pointerEvents: 'auto',
+    ...getPopupPosition(type, data, index, playerName)
+});
+
+export const getPopupPosition = (type: PopupType, data: PopupData, index: number, playerName:string) => {
+    const basePosition = {
+        position: 'absolute',
+        left: '50%',
+        transform: `translate(-50%, 0) translate(0px, ${index * 10}px)`,
+    };
+
+    const pilePosition = {
+        position: 'absolute',
+        left: '325px',
+    }
+
+    if (type === 'pile') {
+        if (data.uuid === `${playerName}-discard`) {
+            return {
+                ...pilePosition,
+                bottom: '400px',
+            } as const;
+        }
+        return {
+            ...pilePosition,
+            top: '350px',
+        } as const;
+    }
+
+    return {
+        ...basePosition,
+        top: '150px',
+    } as const;
+}
+
+const PopupShell: React.FC = () => {
+    const { popups, focusPopup } = usePopup();
+    const { connectedPlayer }= useGame();
+
+    if (popups.length === 0) return null; // No popup to display
+
+    const renderPopupContent = (type: PopupType, data: PopupData) => {
+        switch (type) {
+            case 'default':
+                return <DefaultPopupModal data={data as DefaultPopup} />;
+            case 'pile':
+                return <PilePopupModal data={data as PilePopup} />;
+            case 'select':
+                return <SelectCardsPopupModal data={data as SelectCardsPopup} />;
+            default:
+                return null;
+        }
+    };
+
+    const renderPopup= (popup: PopupData, index:number) => {
+        return (
+            <Button
+                key={popup.uuid}
+                disableRipple
+                variant="text"
+                sx={focusHandlerStyle(popup.type, popup, index, connectedPlayer)}
+                onClick={() => focusPopup(popup.uuid)}
+            >
+                <Box sx={contentStyle(index)}>{renderPopupContent(popup.type, popup)}</Box>
+            </Button>
+        )
+    }
+
+    const [nonDefaultPopups, defaultPopups] = [
+        popups.filter((popup) => popup.type !== 'default'),
+        popups.filter((popup) => popup.type === 'default')
+    ];
+
+    return (
+        <Box sx={overlayStyle}>
+            {defaultPopups.map((popup, index) => renderPopup(popup, index))}
+            {nonDefaultPopups.map((popup, index) => renderPopup(popup, index))}
+        </Box>
+    );
+};
+
+export default PopupShell;

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

@@ -0,0 +1,41 @@
+import { ICardData } from '../Cards/CardTypes';
+
+export type PopupButton = {
+    text: string;
+    uuid: string;
+    command: string;
+    arg: string;
+};
+
+export type DefaultPopup = {
+    type: 'default';
+    uuid: string;
+    title: string;
+    promptType?: string;
+    description?: string;
+    buttons: PopupButton[];
+};
+
+export type SelectCardsPopup = {
+    type: 'select';
+    uuid: string;
+    title: string;
+    maxNumber?: number;
+    cards: ICardData[];
+    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[];
+};