CC-39: Setting Player Faction Breaks Flexible Alignment

src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.module.scss

@@ -1,5 +1,9 @@
 @use "/src/style/flex";
 
 .FactionFields {
-  @include flex.column;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  row-gap: 1rem;
+  column-gap: 0.5rem;
+  align-items: flex-end;
 }

src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx

@@ -1,8 +1,13 @@
 import { useEffect } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { Select } from '@ianpaschal/combat-command-components';
+import {
+  Button,
+  RadioCardOption,
+  Select,
+} from '@ianpaschal/combat-command-components';
 import { getGameSystem } from '@ianpaschal/combat-command-game-systems/common';
 import clsx from 'clsx';
+import { X } from 'lucide-react';
 
 import { Tournament, TournamentRegistration } from '~/api';
 import { FormField } from '~/components/generic/Form';
@@ -27,6 +32,7 @@ export const DetailsFields = ({
     getFactionAlignment,
   } = getGameSystem(tournament.gameSystem);
   const { setValue, watch } = useFormContext<FormData>();
+
   const declaredFaction = watch('details.faction');
 
   useEffect(() => {
@@ -42,37 +48,53 @@ export const DetailsFields = ({
     return null;
   }
 
-  const alignmentOptions = [
-    ...(tournament.registrationDetails?.alignment === 'optional' ? [{
+  const alignmentRequired = tournament.registrationDetails?.alignment === 'required';
+  const alignmentOptions: RadioCardOption[] = [
+    ...getAlignmentOptions(),
+    {
       value: null,
       label: 'Undecided',
-    }] : []),
-    ...getAlignmentOptions(),
+      disabled: alignmentRequired,
+    },
   ];
 
+  const factionRequired = tournament.registrationDetails?.faction === 'required';
   const factionOptions = [
-    ...(tournament.registrationDetails?.faction === 'optional' ? [{
+    ...getFactionOptions(),
+    {
       value: null,
       label: 'Undecided',
-    }] : []),
-    ...getFactionOptions(),
+      disabled: factionRequired,
+    },
   ];
 
   return (
     <div className={clsx(styles.FactionFields, className)}>
       {showAlignmentField && (
-        <FormField
-          name="details.alignment"
-          label="Alignment"
-          disabled={!!declaredFaction}
-        >
-          <Select options={alignmentOptions} />
-        </FormField>
+        <>
+          <FormField
+            name="details.alignment"
+            label="Alignment"
+            disabled={!!declaredFaction}
+            description={alignmentRequired ? 'This tournament requires you to choose an alignment in order to ensure even numbers of players.' : undefined}
+          >
+            <Select options={alignmentOptions} />
+          </FormField>
+          <Button
+            icon={<X />}
+            onClick={() => setValue('details.alignment', null)}
+            size="small"
+            disabled={!!declaredFaction}
+          />
+        </>
       )}
       {showFactionField && (
-        <FormField name="details.faction" label="Faction">
-          <Select options={factionOptions} />
-        </FormField>
+        <>
+          <FormField name="details.faction" label="Faction">
+            <Select options={factionOptions} />
+          </FormField>
+          <Button icon={<X />} onClick={() => setValue('details.faction', null)} size="small" />
+        </>
       )}
     </div>
   );