From 55d8e633e9507ac52b8375aa4a6dadab89a260ae Mon Sep 17 00:00:00 2001
From: matevz <matevz.ogrinc@ijs.si>
Date: Thu, 27 Feb 2025 17:20:26 +0100
Subject: [PATCH] #Public games - Made it so quickgames and public games are
 available to anon users. Some details could use a little polish.

---
 .../_components/HomePage/HomePagePlayMode.tsx | 12 ++---
 .../JoinableGame/JoinableGame.tsx             |  8 +++-
 .../CreateGameForm/CreateGameForm.tsx         |  6 +--
 .../QuickGameForm/QuickGameForm.tsx           | 47 ++++++++++---------
 src/app/_contexts/Game.context.tsx            |  2 +-
 5 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/app/_components/HomePage/HomePagePlayMode.tsx b/src/app/_components/HomePage/HomePagePlayMode.tsx
index a8b6a9c0..f9dc54ca 100644
--- a/src/app/_components/HomePage/HomePagePlayMode.tsx
+++ b/src/app/_components/HomePage/HomePagePlayMode.tsx
@@ -82,17 +82,15 @@ const HomePagePlayMode: React.FC = () => {
             <CardContent>
                 <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: '1rem' }}>
                     <Tabs value={value} variant="fullWidth" onChange={handleChange}>
-                        {user && <Tab sx={styles.tabStyles} label="Play" />}
+                        <Tab sx={styles.tabStyles} label="Play" />
                         <Tab sx={styles.tabStyles} label="Create" />
                         {showTestGames && <Tab sx={styles.tabStyles} label="Test" />}
                     </Tabs>
                 </Box>
-                {user &&
-                    <TabPanel index={0} value={value}>
-                        <QuickGameForm/>
-                    </TabPanel>
-                }
-                <TabPanel index={user ? 1 : 0} value={value}>
+                <TabPanel index={0} value={value}>
+                    <QuickGameForm/>
+                </TabPanel>
+                <TabPanel index={1} value={value}>
                     <CreateGameForm />
                 </TabPanel>
                 {showTestGames && 
diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
index e8867994..8787e09e 100644
--- a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
+++ b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
@@ -31,13 +31,19 @@ const JoinableGame: React.FC = () => {
     }, []);
 
     const joinLobby = async (lobbyId: string) => {
+        // we need to set the user
         try {
+            const payload = {
+                lobbyId: lobbyId,
+                user: { id: user?.id || sessionStorage.getItem('anonymousUserId'),
+                    username:user?.username || 'anonymousUser'+sessionStorage.getItem('anonymousUserId')?.substring(0,6) },
+            };
             const response = await fetch(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/join-lobby`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ lobbyId, user }),
+                body: JSON.stringify(payload),
             });
 
             if (!response.ok) {
diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
index 6d98b5c0..28200b8e 100644
--- a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
+++ b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
@@ -81,7 +81,8 @@ const CreateGameForm = () => {
         }
         try {
             const payload = {
-                user: user || sessionStorage.getItem('anonymousUserId'),
+                user: { id: user?.id || sessionStorage.getItem('anonymousUserId'),
+                    username:user?.username || 'anonymousUser'+sessionStorage.getItem('anonymousUserId')?.substring(0,6) },
                 deck: deckData,
                 isPrivate: privacy === 'Private',
                 format: format,
@@ -283,7 +284,7 @@ const CreateGameForm = () => {
                                     value: string
                                 ) => setPrivacy(value)}
                             >
-                                {user && <FormControlLabel
+                                <FormControlLabel
                                     value="Public"
                                     control={<Radio sx={styles.checkboxStyle} />}
                                     label={
@@ -292,7 +293,6 @@ const CreateGameForm = () => {
                                         </Typography>
                                     }
                                 />
-                                }
                                 <FormControlLabel
                                     value="Private"
                                     control={<Radio sx={styles.checkboxStyle} />}
diff --git a/src/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm.tsx b/src/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm.tsx
index 6f142506..72f1fd78 100644
--- a/src/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm.tsx
+++ b/src/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm.tsx
@@ -63,7 +63,8 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
         }
         try {
             const payload = {
-                user: user,
+                user: { id: user?.id || sessionStorage.getItem('anonymousUserId'),
+                    username:user?.username || 'anonymousUser'+sessionStorage.getItem('anonymousUserId')?.substring(0,6) },
                 deck: deckData,
             };
             const response = await fetch(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/enter-queue`,
@@ -138,24 +139,25 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
             </Typography>
             <form onSubmit={handleJoinGameQueue}>
                 {/* Favourite Decks Input */}
-                <FormControl fullWidth sx={styles.formControlStyle}>
-                    <Typography variant="body1" sx={styles.labelTextStyle}>Favourite Decks</Typography>
-                    <StyledTextField
-                        select
-                        value={favouriteDeck}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            setFavouriteDeck(e.target.value)
-                        }
-                        placeholder="Vader Green Ramp"
-                    >
-                        {deckOptions.map((deck) => (
-                            <MenuItem key={deck} value={deck}>
-                                {deck}
-                            </MenuItem>
-                        ))}
-                    </StyledTextField>
-                </FormControl>
-
+                {user &&
+                    <FormControl fullWidth sx={styles.formControlStyle}>
+                        <Typography variant="body1" sx={styles.labelTextStyle}>Favourite Decks</Typography>
+                        <StyledTextField
+                            select
+                            value={favouriteDeck}
+                            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                setFavouriteDeck(e.target.value)
+                            }
+                            placeholder="Vader Green Ramp"
+                        >
+                            {deckOptions.map((deck) => (
+                                <MenuItem key={deck} value={deck}>
+                                    {deck}
+                                </MenuItem>
+                            ))}
+                        </StyledTextField>
+                    </FormControl>
+                }
                 {/* Deck Link Input */}
                 <FormControl fullWidth sx={{ mb: 0 }}>
                     <Box sx={styles.labelTextStyle}>
@@ -166,10 +168,10 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
                         <Link href="https://www.swudb.com/" target="_blank" sx={{ color: 'lightblue' }}>
                             SWUDB
                         </Link>{' '}
-                        or{' '}
+                        {/* or{' '}
                         <Link href="https://www.sw-unlimited-db.com/" target="_blank" sx={{ color: 'lightblue' }}>
                             SW-Unlimited-DB
-                        </Link>{' '}
+                        </Link>{' '} */}
                         Deck Link{' '}
                         <Typography variant="body1" sx={styles.labelTextStyleSecondary}>
                             (use the URL or &apos;Deck Link&apos; button)
@@ -197,7 +199,7 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
                     )}
                 </FormControl>
 
-                {/* Save Deck To Favourites Checkbox */}
+                {/* Save Deck To Favourites Checkbox
                 <FormControlLabel
                     sx={{ mb: '1rem' }}
                     control={
@@ -216,6 +218,7 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
                         </Typography>
                     }
                 />
+                */}
 
                 {/* Submit Button */}
                 <Button type="submit" disabled={queueState} variant="contained" sx={{ ...styles.submitButtonStyle,
diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx
index 1e32da66..ef81dbff 100644
--- a/src/app/_contexts/Game.context.tsx
+++ b/src/app/_contexts/Game.context.tsx
@@ -62,7 +62,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
         const newSocket = io(`${process.env.NEXT_PUBLIC_ROOT_URL}`, {
             path: '/ws',
             query: {
-                user: JSON.stringify(user ? user : { username: '', id: anonymousUserId }),
+                user: JSON.stringify(user ? user : { username: 'anonymousUser'+anonymousUserId?.substring(0,6), id: anonymousUserId }),
                 lobby: JSON.stringify({ lobbyId:lobbyId ? lobbyId : null })
             },
         });