#QuickPlay

src/app/ClientLayout.tsx

@@ -14,7 +14,7 @@ const Navbar = dynamic(() => import('./Navigation/NavBar'), { ssr: false });
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
     const path = usePathname();
-    const pagesWithWebsocket = ['/GameBoard', '/lobby'];
+    const pagesWithWebsocket = ['/GameBoard', '/lobby', '/quickGame'];
     const isPageWithWebsocket = pagesWithWebsocket.includes(path);
 
     return (

src/app/_components/HomePage/HomePagePlayMode.tsx

@@ -3,6 +3,7 @@ import { Typography, Box, Tab, Tabs, Card, Button } from '@mui/material';
 import { useRouter } from 'next/navigation';
 import CreateGameForm from '../_sharedcomponents/CreateGameForm/CreateGameForm';
 import { useUser } from '@/app/_contexts/User.context';
+import QuickGameForm from '@/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm';
 
 const HomePagePlayMode: React.FC = () => {
     const router = useRouter();
@@ -83,7 +84,7 @@ const HomePagePlayMode: React.FC = () => {
                     </Tabs>
                 </Box>
                 <TabPanel index={0} value={value}>
-                    <Box>PlayGame</Box>
+                    <QuickGameForm/>
                 </TabPanel>
                 <TabPanel index={1} value={value}>
                     <CreateGameForm format={'Premier'} />

src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx

@@ -22,7 +22,7 @@ const SetUpCard: React.FC<ISetUpProps> = ({
 
     // ------------------------Additional functions------------------------//
     const handleStartGame = async () => {
-        sendMessage('startGame');
+        sendLobbyMessage(['onStartGame']);
         router.push('/GameBoard');
     };
 

src/app/_components/QuickGame/FoundGame/FoundGame.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Card, Typography } from '@mui/material';
+import LeaderBaseCard from '@/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard';
+import { useGame } from '@/app/_contexts/Game.context';
+import { ILobbyUserProps } from '@/app/_components/Lobby/LobbyTypes';
+import { useRouter } from 'next/navigation'
+
+
+const FoundGame: React.FC = () => {
+    const { lobbyState, connectedPlayer, sendLobbyMessage } = useGame();
+    const connectedUser = lobbyState ? lobbyState.users.find((u: ILobbyUserProps) => u.id === connectedPlayer) : null;
+    const opponentUser = lobbyState ? lobbyState.users.find((u: ILobbyUserProps) => u.id !== connectedPlayer) : null;
+
+    // set connectedPlayer
+    const playerLeader = connectedUser ? connectedUser.deck.leader[0].card : null;
+    const playerBase = connectedUser ? connectedUser.deck.base[0].card : null;
+
+    // set opponent
+    const titleOpponent = opponentUser ? opponentUser.username : null;
+    const opponentLeader = opponentUser ? opponentUser.deck.leader[0].card : null;
+    const opponentBase = opponentUser ? opponentUser.deck.base[0].card : null;
+    const router = useRouter();
+    // --- Countdown State ---
+    const [countdown, setCountdown] = useState(5);
+
+    // When countdown hits 0, emit a socket event
+    useEffect(() => {
+        if (countdown === 0) {
+            sendLobbyMessage(['onStartGame']);
+            router.push('/GameBoard');
+        }
+    }, [countdown, router, sendLobbyMessage]);
+
+    // Decrement countdown every second
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setCountdown((prev) => Math.max(prev - 1, 0));
+        }, 1000);
+
+        // Cleanup interval on unmount
+        return () => clearInterval(timer);
+    }, []);
+
+    // ------------------------STYLES------------------------//
+
+    const styles = {
+        searchBox: {
+            width: '41.875rem',
+            height: '30.375rem',
+            backgroundColor: '#122237',
+            border: '3px solid #122237',
+            borderRadius: '15px',
+            padding: '30px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        },
+        connectingText: {
+            fontFamily: 'var(--font-barlow), sans-serif',
+            fontWeight: '600',
+            fontSize: '2.0em',
+            textAlign: 'center',
+        },
+        playerText: {
+            fontFamily: 'var(--font-barlow), sans-serif',
+            fontWeight: '600',
+            fontSize: '1.5em',
+            textAlign: 'center',
+        },
+        buttonsContainerStyle: {
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+        },
+        readyImg: {
+            width: '15px',
+            height: '15px',
+            backgroundImage: 'url(/ready.png)',
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            marginTop: '7px',
+            marginRight: '5px'
+        },
+        boxGeneralStyling: {
+            backgroundColor: 'transparent',
+            backgroundSize: 'contain',
+            backgroundPosition: 'center',
+            width: '14rem',
+            height: '10.18rem',
+            backgroundImage: 'url(/leaders/boba.webp)',
+            backgroundRepeat: 'no-repeat',
+            textAlign: 'center' as const,
+            color: 'white',
+            display: 'flex',
+            cursor: 'pointer',
+            position: 'relative' as const,
+            mb: '10px',
+        },
+        parentBoxStyling: {
+            position:'absolute',
+        },
+        CardSetContainerStyle:{
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            width: '14.2rem',
+            height: '12.1rem',
+        },
+        playersContainer:{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            width: '100%',
+            height: '12.1rem',
+            paddingLeft: '15px',
+            marginTop:'20px'
+        }
+    };
+
+    return (
+        <Card sx={styles.searchBox}>
+            <Box>
+                <Typography sx={styles.connectingText}>
+                    Match found!
+                </Typography>
+                <Typography sx={styles.playerText}>Starts in {countdown}</Typography>
+            </Box>
+            <Box sx={styles.playersContainer}>
+                <Box sx={styles.CardSetContainerStyle}>
+                    <Box>
+                        <LeaderBaseCard isLobbyView={true} size={'large'} variant={'base'} card={playerBase}/>
+                    </Box>
+                    <Box sx={{ ...styles.parentBoxStyling,left:'-15px',top:'24px' }}>
+                        <LeaderBaseCard isLobbyView={true} size={'large'} variant={'leader'} card={playerLeader}/>
+                    </Box>
+                    <Typography sx={{ ...styles.playerText, marginTop:'24px' }}>
+                        {connectedUser.username}
+                    </Typography>
+                </Box>
+                <Typography sx={{ ...styles.connectingText, display:'flex',alignItems:'center' }}>
+                    Vs
+                </Typography>
+                <Box sx={styles.CardSetContainerStyle}>
+                    <Box>
+                        <LeaderBaseCard isLobbyView={true} size={'large'} variant={'base'} card={opponentBase}/>
+                    </Box>
+                    <Box sx={{ ...styles.parentBoxStyling,left:'-15px',top:'24px' }}>
+                        <LeaderBaseCard isLobbyView={true} size={'large'} variant={'leader'} card={opponentLeader}/>
+                    </Box>
+                    <Typography sx={{ ...styles.playerText, marginTop:'24px' }}>
+                        {titleOpponent}
+                    </Typography>
+                </Box>
+            </Box>
+        </Card>
+    );
+};
+
+export default FoundGame;

src/app/_components/QuickGame/SearchingForGame/SearchingForGame.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box, Card, Typography } from '@mui/material';
+
+const SearchingForGame: React.FC = () => {
+    const styles = {
+        searchBox: {
+            width: '35rem',
+            height: '15rem',
+            minHeight: '15rem',
+            backgroundColor: '#000000',
+            border: '3px solid #2F2F2F',
+            borderRadius: '15px',
+            padding: '30px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        connectingText: {
+            fontFamily: 'var(--font-barlow), sans-serif',
+            fontWeight: '700',
+            fontSize: '2.0em',
+            textAlign: 'center',
+        },
+        subtext: {
+            fontFamily: 'var(--font-barlow), sans-serif',
+            fontWeight: '400',
+            fontSize: '1.5em',
+            textAlign: 'center',
+        }
+    };
+
+    return (
+        <Card sx={styles.searchBox}>
+            <Box>
+                <video
+                    autoPlay
+                    loop
+                    muted
+                    style={{ width: '80px', height: '80px' }} // Adjust sizing/styling as needed
+                >
+                    <source src="/loader.mp4" type="video/mp4"/>
+                    {/* Fallback text if video is not supported */}
+                    Your browser does not support the video tag.
+                </video>
+            </Box>
+            <Box>
+                <Typography sx={styles.connectingText}>
+                    Connecting
+                </Typography>
+                <Typography sx={styles.subtext}>
+                    Looking for an opponent
+                </Typography>
+            </Box>
+        </Card>
+    );
+};
+
+export default SearchingForGame;

src/app/_components/_sharedcomponents/Cards/CardTypes.ts

@@ -49,4 +49,5 @@ export interface ILeaderBaseCardProps {
     title?: string;
     card: ICardData;
     disabled?: boolean;
+    size?: 'standard' | 'large';
 }

src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
     Card,
-    CardActionArea,
     CardContent,
     Typography,
     Box,
@@ -15,6 +14,7 @@ import { s3CardImageURL } from '@/app/_utils/s3Utils';
 const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
     variant,
     isLobbyView = false,
+    size = 'standard',
     title,
     card,
     disabled = false,
@@ -47,8 +47,8 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
         backgroundImage: `url(${s3CardImageURL(card)})`,
         backgroundSize: 'contain',
         backgroundPosition: 'center',
-        width: '9.5vw',
-        height: '13vh',
+        width: size === 'standard' ? '9.5vw' : '14rem',
+        height: size === 'standard' ? '13vh' : '10.18rem',
         backgroundRepeat: 'no-repeat',
         textAlign: 'center' as const,
         color: 'white',
@@ -60,8 +60,8 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
         backgroundColor: '#00000040',
         backgroundSize: 'contain',
         backgroundPosition: 'center',
-        width: '9.5vw',
-        height: '13vh',
+        width: size === 'standard' ? '9.5vw' : '14rem',
+        height: size === 'standard' ? '13vh' : '10.18rem',
         backgroundRepeat: 'no-repeat',
         textAlign: 'center' as const,
         color: 'white',