Popup Manager

src/app/GameBoard/page.tsx

@@ -1,23 +1,23 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-'use client';
-import React, { useState, useRef, useEffect, useContext } from 'react';
-import { Box, Grid2 as Grid, Typography } from '@mui/material';
-import { s3ImageURL } from '../_utils/s3Utils';
-import ChatDrawer from '../_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer';
-import OpponentCardTray from '../_components/Gameboard/OpponentCardTray/OpponentCardTray';
-import Board from '../_components/Gameboard/Board/Board';
-import PlayerCardTray from '../_components/Gameboard/PlayerCardTray/PlayerCardTray';
-import ResourcesOverlay from '../_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay';
-import BasicPrompt from '../_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt';
-import { useGame } from '../_contexts/Game.context';
-import { useSidebar } from '../_contexts/Sidebar.context';
-import { transform } from 'next/dist/build/swc';
-import { text } from 'stream/consumers';
+"use client";
+import { Box, Button, Grid2 as Grid } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import PopupShell from "../_components/_sharedcomponents/Popup/Popup";
+import ChatDrawer from "../_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer";
+import BasicPrompt from "../_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt";
+import ResourcesOverlay from "../_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay";
+import Board from "../_components/Gameboard/Board/Board";
+import OpponentCardTray from "../_components/Gameboard/OpponentCardTray/OpponentCardTray";
+import PlayerCardTray from "../_components/Gameboard/PlayerCardTray/PlayerCardTray";
+import { useGame } from "../_contexts/Game.context";
+import { usePopup } from "../_contexts/Popup.context";
+import { useSidebar } from "../_contexts/Sidebar.context";
+import { s3ImageURL } from "../_utils/s3Utils";
 
 const GameBoard = () => {
     const { getOpponent, connectedPlayer, gameState } = useGame();
     const { sidebarOpen, toggleSidebar } = useSidebar();
-    const [chatMessage, setChatMessage] = useState('');
+    const [chatMessage, setChatMessage] = useState("");
     const [chatHistory, setChatHistory] = useState<string[]>([]);
     const [round, setRound] = useState(2);
     const drawerRef = useRef<HTMLDivElement | null>(null);
@@ -30,7 +30,7 @@ const GameBoard = () => {
     const handleChatSubmit = () => {
         if (chatMessage.trim()) {
             setChatHistory([...chatHistory, chatMessage]);
-            setChatMessage('');
+            setChatMessage("");
         }
     };
 
@@ -51,45 +51,26 @@ const GameBoard = () => {
 
     // ----------------------Styles-----------------------------//
 
-    const styles = {
-        mainBoxStyle: {
-            flexGrow: 1,
-            transition: 'margin-right 0.3s ease',
-            mr: sidebarOpen ? `${drawerWidth}px` : '0',
-            height: '100vh',
-            position: 'relative',
-            backgroundImage: `url(${s3ImageURL('game/board-background-1.png')})`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-        },
-        centralPromptContainer: {
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: '50vw',
-        },
-        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))',
-        },
+    const mainBoxStyle = {
+        flexGrow: 1,
+        transition: "margin-right 0.3s ease",
+        mr: sidebarOpen ? `${drawerWidth}px` : "0",
+        height: "100vh",
+        position: "relative",
+        backgroundImage: `url(${s3ImageURL("game/board-background-1.png")})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
     };
 
     if (!gameState || !connectedPlayer) {
         return null;
     }
 
     return (
-        <Grid container sx={{ height: '100vh' }}>
-            <Box component="main" sx={styles.mainBoxStyle}>
+        <Grid container sx={{ height: "100vh" }}>
+            <Box component="main" sx={mainBoxStyle}>
                 <OpponentCardTray trayPlayer={getOpponent(connectedPlayer)} />
-                <Board
-                    sidebarOpen={sidebarOpen}
-                />
+                <Board sidebarOpen={sidebarOpen} />
                 <PlayerCardTray
                     trayPlayer={connectedPlayer}
                     handleModalToggle={handleModalToggle}
@@ -109,9 +90,6 @@ const GameBoard = () => {
                     currentRound={round}
                 />
             )}
-            <Box sx={styles.centralPromptContainer}>
-                <Typography sx={styles.promptStyle}>{gameState.players[connectedPlayer]?.promptState.menuTitle}</Typography>
-            </Box>
             <ResourcesOverlay
                 isModalOpen={isModalOpen}
                 handleModalToggle={handleModalToggle}
@@ -120,6 +98,7 @@ const GameBoard = () => {
                 isBasicPromptOpen={isBasicPromptOpen}
                 handleBasicPromptToggle={handleBasicPromptToggle}
             />
+            <PopupShell />
         </Grid>
     );
 };

src/app/_components/ClientProviders/ClientProviders.tsx

@@ -1,24 +1,27 @@
-'use client';
+"use client";
 
-import { SidebarProvider } from '@/app/_contexts/Sidebar.context';
-import { ThemeContextProvider } from '@/app/_contexts/Theme.context';
-import { UserProvider } from '@/app/_contexts/User.context';
-import { SessionProvider } from 'next-auth/react';
+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";
+import { SessionProvider } from "next-auth/react";
 
 interface IClientProvidersProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 const ClientProviders: React.FC<IClientProvidersProps> = ({ children }) => {
-    return (
-        <SessionProvider>
-            <UserProvider>
-                <SidebarProvider>
-                    <ThemeContextProvider>{children}</ThemeContextProvider>
-                </SidebarProvider>
-            </UserProvider>
-        </SessionProvider>
-    );
+  return (
+    <SessionProvider>
+      <UserProvider>
+        <SidebarProvider>
+          <PopupProvider>
+            <ThemeContextProvider>{children}</ThemeContextProvider>
+          </PopupProvider>
+        </SidebarProvider>
+      </UserProvider>
+    </SessionProvider>
+  );
 };
 
 export default ClientProviders;

src/app/_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt.tsx

@@ -1,108 +1,111 @@
 // ResourcesOverlay.tsx
 
-import React from 'react';
+import React from "react";
 import {
-    Modal,
-    Card,
-    CardContent,
-    Typography,
-    Box,
-    IconButton,
-    Button,
-} from '@mui/material';
-import { Close } from '@mui/icons-material';
-import { useGame } from '@/app/_contexts/Game.context';
-import { IBasicPromptProps } from '@/app/_components/Gameboard/GameboardTypes';
+	Modal,
+	Card,
+	CardContent,
+	Typography,
+	Box,
+	IconButton,
+	Button,
+} from "@mui/material";
+import { Close } from "@mui/icons-material";
+import { useGame } from "@/app/_contexts/Game.context";
+import { IBasicPromptProps } from "@/app/_components/Gameboard/GameboardTypes";
 
 const BasicPrompt: React.FC<IBasicPromptProps> = ({
-    isBasicPromptOpen,
-    handleBasicPromptToggle,
+	isBasicPromptOpen,
+	handleBasicPromptToggle,
 }) => {
-    const { connectedPlayer, gameState, sendGameMessage } = useGame();
-    if (!gameState) {
-        return null;
-    }
+	const { connectedPlayer, gameState, sendGameMessage } = useGame();
+	if (!gameState) {
+		return null;
+	}
 
-    const playerState = gameState.players[connectedPlayer];
+	const playerState = gameState.players[connectedPlayer];
 
-    return (
-        <Modal
-            open={isBasicPromptOpen}
-            onClose={handleBasicPromptToggle}
-            sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                backgroundColor: '#00000080',
-            }}
-        >
-            <Card
-                sx={{
-                    position: 'relative',
-                    width: '80%',
-                    height: '60%',
-                    p: 2,
-                    backgroundColor: '#000000B3',
-                    textAlign: 'center',
-                }}
-            >
-                <CardContent>
-                    <Typography variant="h6" color="#fff">
-                        {playerState.promptState.menuTitle || 'No Prompt'}
-                    </Typography>
-                    <Typography variant="caption" color="#fff">
-                        {playerState.promptState.promptTitle || ''}
-                    </Typography>
-                    <Box>
-                        {playerState.promptState.buttons.map((button: IButtonsProps) => (
-                            <PromptButton
-                                key={button.arg}
-                                button={button}
-                                sendGameMessage={sendGameMessage}
-                            />
-                        ))}
-                    </Box>
-                </CardContent>
-                <Box
-                    sx={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                    }}
-                >
-                    <IconButton onClick={handleBasicPromptToggle}>
-                        <Close sx={{ color: '#fff' }} />
-                    </IconButton>
-                </Box>
-            </Card>
-        </Modal>
-    );
+	return (
+		<Modal
+			open={isBasicPromptOpen}
+			onClose={handleBasicPromptToggle}
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				backgroundColor: "#00000080",
+			}}
+		>
+			<Card
+				sx={{
+					position: "relative",
+					width: "80%",
+					height: "60%",
+					p: 2,
+					backgroundColor: "#000000B3",
+					textAlign: "center",
+				}}
+			>
+				<CardContent>
+					<Typography variant="h6" color="#fff">
+						{playerState.promptState.menuTitle || "No Prompt"}
+					</Typography>
+					<Typography variant="caption" color="#fff">
+						{playerState.promptState.promptTitle || ""}
+					</Typography>
+					<Box>
+						{playerState.promptState.buttons.map((button: IButtonsProps) => (
+							<PromptButton
+								key={button.arg}
+								button={button}
+								sendGameMessage={sendGameMessage}
+							/>
+						))}
+					</Box>
+				</CardContent>
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						position: "absolute",
+						top: 0,
+						right: 0,
+					}}
+				>
+					<IconButton onClick={handleBasicPromptToggle}>
+						<Close sx={{ color: "#fff" }} />
+					</IconButton>
+				</Box>
+			</Card>
+		</Modal>
+	);
 };
 
 interface IPromptButtonProps {
-    button: IButtonsProps
-    sendGameMessage: (args: [string, string, string]) => void;
+	button: IButtonsProps;
+	sendGameMessage: (args: [string, string, string]) => void;
 }
 
 interface IButtonsProps {
-    command: string;
-    arg: string;
-    text: string;
-    uuid: string;
+	command: string;
+	arg: string;
+	text: string;
+	uuid: string;
 }
 
-const PromptButton: React.FC<IPromptButtonProps> = ({ button, sendGameMessage }) => {
-    return (
-        <Button
-            variant="contained"
-            onClick={() => sendGameMessage([button.command, button.arg, button.uuid])}
-        >
-            {button.text}
-        </Button>
-    );
+const PromptButton: React.FC<IPromptButtonProps> = ({
+	button,
+	sendGameMessage,
+}) => {
+	return (
+		<Button
+			variant="contained"
+			onClick={() => sendGameMessage([button.command, button.arg, button.uuid])}
+		>
+			{button.text}
+		</Button>
+	);
 };
 
 export default BasicPrompt;

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

@@ -1,4 +1,4 @@
-import { Grid2 as Grid, Button, Typography, Box } from '@mui/material';
+import { Grid2 as Grid, Button, Box } from '@mui/material';
 
 import { useGame } from '@/app/_contexts/Game.context';