Frontend cleanup

src/app/GameBoard/page.tsx

@@ -50,9 +50,10 @@ const GameBoard = () => {
     const winners = gameState?.winner ? gameState.winner : undefined;
     // const winners = ['order66']
     // we set tabs
+    // ['endGame','keyboardShortcuts','cardSleeves','gameOptions']
     const preferenceTabs = winners
-        ? ['endGame','keyboardShortcuts','cardSleeves','gameOptions']
-        :['currentGame','keyboardShortcuts','cardSleeves','gameOptions']
+        ? ['endGame']
+        :['currentGame']
 
     if (!gameState || !connectedPlayer) {
         return null;
@@ -118,6 +119,7 @@ const GameBoard = () => {
 
             <ChatDrawer
                 sidebarOpen={sidebarOpen}
+                toggleSidebar={toggleSidebar}
             />
 
             <Box sx={styles.centralPromptContainer}>
@@ -129,6 +131,7 @@ const GameBoard = () => {
 
             <PopupShell/>
             <PreferencesComponent
+                sidebarOpen={sidebarOpen}
                 isPreferenceOpen={isPreferenceOpen}
                 preferenceToggle={handlePreferenceToggle}
                 tabs={preferenceTabs}

src/app/Preferences/page.tsx

@@ -44,6 +44,7 @@ const Preferences: React.FC = () => {
         <Box sx={styles.mainContainer}>
             <Typography sx={styles.lobbyTextStyle} onClick={handleExit}>KARABAST</Typography>
             <PreferencesComponent
+                sidebarOpen={false}
                 isPreferenceOpen={true}
                 tabs={['keyboardShortcuts','cardSleeves','gameOptions','blockList']}
                 variant={'homePage'}

src/app/_components/Gameboard/GameboardTypes.ts

@@ -14,6 +14,7 @@ export interface IParticipant {
 
 export interface IChatDrawerProps {
     sidebarOpen: boolean;
+    toggleSidebar: () => void;
 }
 
 export interface IPlayerCardTrayProps {

src/app/_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer.tsx

@@ -3,8 +3,9 @@ import { Drawer, Box, Typography } from '@mui/material';
 import Chat from '@/app/_components/_sharedcomponents/Chat/Chat';
 import { IChatDrawerProps } from '@/app/_components/Gameboard/GameboardTypes';
 import { useGame } from '@/app/_contexts/Game.context';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
-const ChatDrawer: React.FC<IChatDrawerProps> = ({ sidebarOpen }) => {
+const ChatDrawer: React.FC<IChatDrawerProps> = ({ sidebarOpen, toggleSidebar }) => {
     const { gameState, sendGameMessage } = useGame();
     const [chatMessage, setChatMessage] = useState('')
 
@@ -43,10 +44,11 @@ const ChatDrawer: React.FC<IChatDrawerProps> = ({ sidebarOpen }) => {
             variant="persistent"
             sx={styles.drawerStyle}
         >
+            <ChevronRightIcon onClick={toggleSidebar} />
             <Box sx={styles.headerBoxStyle}>
-                <Typography variant="h3">
+                {/* <Typography variant="h3">
                     ROUND
-                </Typography>
+                </Typography> */}
             </Box>
 
             {/* Use the ChatComponent here */}

src/app/_components/HomePage/HomePageTypes.ts

@@ -1,4 +1,5 @@
 import { ICardData } from '@/app/_components/_sharedcomponents/Cards/CardTypes';
+import { SwuGameFormat } from '@/app/_constants/constants';
 
 export interface IHexagonProps {
     backgroundColor: string;
@@ -17,8 +18,14 @@ export interface IPublicGameInProgressProps {
     };
 }
 
-export interface IPublicGamesProps {
-    format: string;
+export interface ILobby {
+    id: string;
+    name: string;
+    format: SwuGameFormat;
+}
+
+export interface IJoinableGameProps {
+    lobby: ILobby;
 }
 
 export type IArticle = {

src/app/_components/HomePage/PublicGames/PublicGames.tsx

@@ -1,10 +1,29 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card, CardContent, Typography, Divider } from '@mui/material';
 import JoinableGame from '../_subcomponents/JoinableGame/JoinableGame';
 import GamesInProgress from '../_subcomponents/GamesInProgress/GamesInProgress';
-import { IPublicGamesProps } from '../HomePageTypes';
+import { ILobby } from '../HomePageTypes';
+import { SwuGameFormat } from '@/app/_constants/constants';
 
-const PublicGames: React.FC<IPublicGamesProps> = ({ format }) => {
+const PublicGames: React.FC = () => {
+    const [lobbies, setLobbies] = useState<ILobby[]>([]);
+    useEffect(() => {
+        // Fetch unfilled lobbies from the server
+        const fetchLobbies = async () => {
+            try {
+                const response = await fetch(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/available-lobbies`);
+                if (!response.ok) {
+                    throw new Error(`Error fetching lobbies: ${response.statusText}`);
+                }
+                const data: ILobby[] = await response.json();
+                setLobbies(data);
+                console.log(data)
+            } catch (error) {
+                console.error('Error fetching lobbies:', error);
+            }
+        };
+        fetchLobbies();
+    }, []);
     const styles = {
         publicGamesWrapper: {
             height: '100%',
@@ -24,13 +43,16 @@ const PublicGames: React.FC<IPublicGamesProps> = ({ format }) => {
         <Card variant="black" sx={styles.publicGamesWrapper}>
             <CardContent sx={styles.cardContent}>
                 <Typography variant="h2">Public Games</Typography>
-                <Typography variant="h3">{format}</Typography>
+                <Typography variant="h3">Premier</Typography>
                 <Divider sx={styles.divider} />
-                <JoinableGame />
-                <Typography variant="h3">
-                    Request-Undo {format}
-                </Typography>
+                { lobbies.filter((lobby) => lobby.format === SwuGameFormat.Premier).map((lobby) => (
+                    <JoinableGame key={lobby.id} lobby={lobby} />
+                ))}
+                <Typography variant="h3">Next Set Preview</Typography>
                 <Divider sx={styles.divider} />
+                { lobbies.filter((lobby) => lobby.format === SwuGameFormat.NextSetPreview).map((lobby) => (
+                    <JoinableGame key={lobby.id} lobby={lobby} />
+                ))}
                 <GamesInProgress />
             </CardContent>
         </Card>

src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx

@@ -1,35 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import { useRouter } from 'next/navigation';
 import { useUser } from '@/app/_contexts/User.context';
-interface ILobby {
-    id: string;
-    name: string;
-}
+import { IJoinableGameProps } from '../../HomePageTypes';
 
-const JoinableGame: React.FC = () => {
-    // const randomGameId = Math.floor(Math.random() * 10000);
+const JoinableGame: React.FC<IJoinableGameProps> = ({ lobby }) => {
     const router = useRouter();
     const { user } = useUser();
-    const [lobbies, setLobbies] = useState<ILobby[]>([]);
-    useEffect(() => {
-        // Fetch unfilled lobbies from the server
-        const fetchLobbies = async () => {
-            try {
-                const response = await fetch(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/available-lobbies`);
-                if (!response.ok) {
-                    throw new Error(`Error fetching lobbies: ${response.statusText}`);
-                }
-                const data: ILobby[] = await response.json();
-                setLobbies(data);
-            } catch (error) {
-                console.error('Error fetching lobbies:', error);
-            }
-        };
-
-        fetchLobbies();
-    }, []);
-
     const joinLobby = async (lobbyId: string) => {
         // we need to set the user
         try {
@@ -76,12 +53,10 @@ const JoinableGame: React.FC = () => {
 
     return (
         <>
-            {lobbies.map((lobby) => (
-                <Box sx={styles.box} key={lobby.id}>
-                    <Typography variant="body1" sx={styles.matchType}>{lobby.name}</Typography>
-                    <Button onClick={() => joinLobby(lobby.id)}>Join Game</Button>
-                </Box>
-            ))}
+            <Box sx={styles.box} key={lobby.id}>
+                <Typography variant="body1" sx={styles.matchType}>{lobby.name}</Typography>
+                <Button onClick={() => joinLobby(lobby.id)}>Join Game</Button>
+            </Box>
         </>
     );
 };

src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx

@@ -151,7 +151,7 @@ const ControlHub: React.FC<IControlHubProps> = ({
                     </Box>
                     <Box sx={styles.socialIconsBox}>
                         <NextLinkMui
-                            href="https://discord.com"
+                            href="https://discord.gg/hKRaqHND4v"
                             target="_blank"
                             rel="noopener noreferrer"
                         >

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

@@ -27,6 +27,7 @@ export type IBlockedUser = {
 
 export interface IPreferenceProps {
     isPreferenceOpen: boolean,
+    sidebarOpen: boolean,
     tabs: string[],
     preferenceToggle?: () => void,
     variant?: 'gameBoard' | 'homePage'

src/app/_components/_sharedcomponents/Preferences/PreferencesComponent.tsx

@@ -6,6 +6,7 @@ import { IPreferenceProps } from '@/app/_components/_sharedcomponents/Preference
 
 const PreferencesComponent: React.FC<IPreferenceProps> = ({
     isPreferenceOpen,
+    sidebarOpen,
     preferenceToggle,
     tabs = [],
     title,
@@ -17,10 +18,11 @@ const PreferencesComponent: React.FC<IPreferenceProps> = ({
         containerStyle:{
             display: isPreferenceOpen && variant ==='gameBoard' ? 'block' : 'none',
             position: 'absolute',
-            width: '100%',
+            width: sidebarOpen ? 'calc(100% - 280px)' : '100%',
             height: '100%',
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            zIndex: 9,
+            zIndex: 999,
+            padding: '2rem',
         },
         overlayStyle:{
             display: isPreferenceOpen ? 'block' : 'none',
@@ -34,17 +36,13 @@ const PreferencesComponent: React.FC<IPreferenceProps> = ({
 
             borderRadius:'15px',
             ...(variant === 'homePage' ? {
-                width: '95vw',
+                width: '100%',
                 justifySelf:'center',
                 height: '81vh',
             } : {
                 borderColor: '#30434B',
-                height: '90vh',
-                transform: 'translate(-50%, -50%)',
-                top: '50%',
-                left: '50%',
-                position: 'absolute',
-                width: '90vw',
+                height: '100%',
+                width: '100%',
             })
         },
         headerBox:{
@@ -68,19 +66,19 @@ const PreferencesComponent: React.FC<IPreferenceProps> = ({
     return (
         <>
             <Box sx={styles.containerStyle}>
-            </Box>
-            <Box sx={styles.overlayStyle}>
-                {title && (
-                    <Box sx={styles.headerBox}>
-                        <Typography variant="h1">{title}</Typography>
-                        <Typography variant="h2">{subtitle}</Typography>
+                <Box sx={styles.overlayStyle}>
+                    {title && (
+                        <Box sx={styles.headerBox}>
+                            <Typography variant="h1">{title}</Typography>
+                            <Typography variant="h2">{subtitle}</Typography>
+                        </Box>
+                    )}
+                    {variant === 'gameBoard' && (
+                        <CloseOutlined onClick={preferenceToggle} sx={{ ...styles.closeButton, cursor:'pointer' }}/>
+                    )}
+                    <Box sx={styles.tabContainer}>
+                        <VerticalTabs tabs={tabs} variant={variant}/>
                     </Box>
-                )}
-                {variant === 'gameBoard' && (
-                    <CloseOutlined onClick={preferenceToggle} sx={{ ...styles.closeButton, cursor:'pointer' }}/>
-                )}
-                <Box sx={styles.tabContainer}>
-                    <VerticalTabs tabs={tabs} variant={variant}/>
                 </Box>
             </Box>
         </>

src/app/page.tsx

@@ -40,7 +40,7 @@ const Home: React.FC = () => {
 
             <Grid container size={12} sx={styles.columnContainer}>
                 <Grid size={4} sx={styles.column}>
-                    <PublicGames format={'Premier'} />
+                    <PublicGames />
                 </Grid>
                 <Grid size={4} sx={styles.column}>
                     <HomePagePlayMode />