support formats in queue

SWU-Karabast · Feb 28, 2025 · 4eefca2 · 4eefca2
1 parent 5d38be4
commit 4eefca2
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
@@ -38,10 +38,11 @@ const CreateGameForm = () => {
     const [deckLink, setDeckLink] = useState<string>('');
     const [saveDeck, setSaveDeck] = useState<boolean>(false);
     const [errorModalOpen, setErrorModalOpen] = useState(false);
+
+    const formatOptions = Object.values(SwuGameFormat);
     const savedFormat = localStorage.getItem('format') || SwuGameFormat.Premier;
     const [format, setFormat] = useState<string>(savedFormat);
 
-    const formatOptions = Object.values(SwuGameFormat);
 
     // For a short, user-friendly error message
     const [deckErrorSummary, setDeckErrorSummary] = useState<string | null>(null);
@@ -175,7 +176,7 @@ const CreateGameForm = () => {
                 </FormControl>
                 }
                 {/* Deck Link Input */}
-                <FormControl fullWidth sx={{ mb: 0 }}>
+                <FormControl fullWidth sx={styles.formControlStyle}>
                     <Box sx={styles.labelTextStyle}>
                         <Link href="https://www.swustats.net/" target="_blank" sx={{ color: 'lightblue' }}>
                             SWU Stats

diff --git a/src/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm.tsx b/src/app/_components/_sharedcomponents/QuickGameForm/QuickGameForm.tsx
@@ -9,6 +9,7 @@ import {
     IDeckValidationFailures
 } from '@/app/_validators/DeckValidation/DeckValidationTypes';
 import { ErrorModal } from '@/app/_components/_sharedcomponents/Error/ErrorModal';
+import { SwuGameFormat, FormatLabels } from '@/app/_constants/constants';
 
 interface ICreateGameFormProps {
     format?: string | null;
@@ -26,6 +27,10 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
     const [saveDeck, setSaveDeck] = useState<boolean>(false);
     const [queueState, setQueueState] = useState<boolean>(false)
 
+    const formatOptions = Object.values(SwuGameFormat);
+    const savedFormat = localStorage.getItem('format') || SwuGameFormat.Premier;
+    const [format, setFormat] = useState<string>(savedFormat);
+
     // error states
     const [errorModalOpen, setErrorModalOpen] = useState(false);
     // For a short, user-friendly error message
@@ -39,6 +44,11 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
         'ThisIsTheWay',
     ];
 
+    const handleChangeFormat = (format: SwuGameFormat) => {
+        localStorage.setItem('format', format);
+        setFormat(format);
+    }
+
     // Handle Create Game Submission
     const handleJoinGameQueue = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -66,6 +76,7 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
                 user: { id: user?.id || sessionStorage.getItem('anonymousUserId'),
                     username:user?.username || 'anonymous '+sessionStorage.getItem('anonymousUserId')?.substring(0,6) },
                 deck: deckData,
+                format: format,
             };
             const response = await fetch(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/enter-queue`,
                 {
@@ -160,7 +171,7 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
                     </FormControl>
                 }
                 {/* Deck Link Input */}
-                <FormControl fullWidth sx={{ mb: 0 }}>
+                <FormControl fullWidth sx={styles.formControlStyle}>
                     <Box sx={styles.labelTextStyle}>
                         <Link href="https://www.swustats.net/" target="_blank" sx={{ color: 'lightblue' }}>
                             SWU Stats
@@ -200,6 +211,24 @@ const QuickGameForm: React.FC<ICreateGameFormProps> = () => {
                     )}
                 </FormControl>
 
+                <FormControl fullWidth sx={styles.formControlStyle}>
+                    <Typography variant="body1" sx={styles.labelTextStyle}>Format</Typography>
+                    <StyledTextField
+                        select
+                        value={format}
+                        required
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            handleChangeFormat(e.target.value as SwuGameFormat)
+                        }
+                    >
+                        {formatOptions.map((fmt) => (
+                            <MenuItem key={fmt} value={fmt}>
+                                {FormatLabels[fmt] || fmt}
+                            </MenuItem>
+                        ))}
+                    </StyledTextField>
+                </FormControl>
+
                 {/* Save Deck To Favourites Checkbox
                 <FormControlLabel
                     sx={{ mb: '1rem' }}

diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx
@@ -14,6 +14,7 @@ import { useUser } from './User.context';
 import { useSearchParams } from 'next/navigation';
 import { usePopup } from './Popup.context';
 import { PopupSource } from '@/app/_components/_sharedcomponents/Popup/Popup.types';
+import { useRouter } from 'next/navigation';
 
 interface IGameContextType {
     gameState: any;
@@ -48,6 +49,7 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
     const { openPopup, clearPopups, prunePromptStatePopups } = usePopup();
     const { user, anonymousUserId } = useUser();
     const searchParams = useSearchParams();
+    const router = useRouter();
     const [distributionPromptData, setDistributionPromptData] = useState<IDistributionPromptData | null>(null);
 
     useEffect(() => {
@@ -117,6 +119,11 @@ export const GameProvider = ({ children }: { children: ReactNode }) => {
             }
         };
 
+        newSocket.on('connection_error', (error: any) => {
+            console.error('Connection error:', error);
+            router.push('/');
+        });
+
         newSocket.on('gamestate', (gameState: any) => {
             if (gameState?.id && gameState.id !== lastGameIdRef.current) {
                 clearPopups();