Add formats to create game form (#125)

SWU-Karabast · Feb 24, 2025 · 2e48889 · 2e48889
1 parent e639748
commit 2e48889
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/src/app/_components/HomePage/HomePagePlayMode.tsx b/src/app/_components/HomePage/HomePagePlayMode.tsx
@@ -93,7 +93,7 @@ const HomePagePlayMode: React.FC = () => {
                     </TabPanel>
                 }
                 <TabPanel index={user ? 1 : 0} value={value}>
-                    <CreateGameForm format={'Premier'} />
+                    <CreateGameForm />
                 </TabPanel>
                 {showTestGames && 
                     <TabPanel index={2} value={value}>

diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
@@ -20,23 +20,14 @@ import {
     DeckValidationFailureReason,
     IDeckValidationFailures
 } from '@/app/_validators/DeckValidation/DeckValidationTypes';
-
-interface ICreateGameFormProps {
-    format?: string | null;
-    setFormat?: (format: string) => void;
-}
+import { SwuGameFormat, FormatLabels } from '@/app/_constants/constants';
 
 const deckOptions: string[] = [
     'Order66',
     'ThisIsTheWay',
 ];
 
-const formatOptions: string[] = ['Premier'];
-
-const CreateGameForm: React.FC<ICreateGameFormProps> = ({
-    format,
-    setFormat,
-}) => {
+const CreateGameForm = () => {
     const pathname = usePathname();
     const router = useRouter();
     const isCreateGamePath = pathname === '/creategame';
@@ -47,6 +38,10 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
     const [deckLink, setDeckLink] = useState<string>('');
     const [saveDeck, setSaveDeck] = useState<boolean>(false);
     const [errorModalOpen, setErrorModalOpen] = useState(false);
+    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);
@@ -58,6 +53,11 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
     const [gameName, setGameName] = useState<string>('');
     const [privacy, setPrivacy] = useState<string>(user ? 'Public' : 'Private');
 
+    const handleChangeFormat = (format: SwuGameFormat) => {
+        localStorage.setItem('format', format);
+        setFormat(format);
+    }
+
     // Handle Create Game Submission
     const handleCreateGameSubmit = async (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -84,6 +84,7 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
                 user: user || sessionStorage.getItem('anonymousUserId'),
                 deck: deckData,
                 isPrivate: privacy === 'Private',
+                format: format,
             };
             const response = await fetch(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/create-lobby`,
                 {
@@ -257,14 +258,14 @@ const CreateGameForm: React.FC<ICreateGameFormProps> = ({
                             <StyledTextField
                                 select
                                 value={format}
+                                required
                                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                                    setFormat ? setFormat(e.target.value) : null
+                                    handleChangeFormat(e.target.value as SwuGameFormat)
                                 }
-                                required
                             >
                                 {formatOptions.map((fmt) => (
                                     <MenuItem key={fmt} value={fmt}>
-                                        {fmt}
+                                        {FormatLabels[fmt] || fmt}
                                     </MenuItem>
                                 ))}
                             </StyledTextField>

diff --git a/src/app/_constants/constants.ts b/src/app/_constants/constants.ts
@@ -2,4 +2,16 @@ export enum MatchType {
     Custom = 'Custom',
     Private = 'Private',
     Quick = 'Quick',
-}
+}
+
+export enum SwuGameFormat {
+    Premier = 'premier',
+    NextSetPreview = 'nextSetPreview',
+    Open = 'open'
+}
+
+export const FormatLabels: Record<SwuGameFormat, string> = {
+    [SwuGameFormat.Premier]: 'Premier',
+    [SwuGameFormat.NextSetPreview]: 'Next Set Preview',
+    [SwuGameFormat.Open]: 'Open',
+};