From dd69be05aa1307e9adfc62e5c5bd58da3ee05591 Mon Sep 17 00:00:00 2001
From: Ian Paschal <ianpaschal@users.noreply.github.com>
Date: Wed, 29 Apr 2026 19:55:05 +0200
Subject: [PATCH 1/2] CC-39: Setting Player Faction Breaks Flexible Alignment

Fixes CC-39

This is a temporary fix to replace the functionality lost by removing the `clearable` prop from `<Select/>`. Long term it should be replaced by creating dummy lists which later have files attached.
---
 .../DetailsFields/DetailsFields.module.scss   |  6 ++-
 .../DetailsFields/DetailsFields.tsx           | 53 ++++++++++++-------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.module.scss b/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.module.scss
index ccf72fa8..1c6be2a4 100644
--- a/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.module.scss
+++ b/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;
 }
diff --git a/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx b/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx
index 0770b259..8de9ab18 100644
--- a/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx
+++ b/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,48 @@ 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?.alignment === '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" />
+        </>
       )}
       {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>
   );

From b3c7b3f76ba2f7a0bc816d3bea51395336906fe4 Mon Sep 17 00:00:00 2001
From: Ian Paschal <ianpaschal@users.noreply.github.com>
Date: Wed, 29 Apr 2026 20:06:03 +0200
Subject: [PATCH 2/2] Update DetailsFields.tsx

---
 .../components/DetailsFields/DetailsFields.tsx           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx b/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx
index 8de9ab18..18821d79 100644
--- a/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx
+++ b/src/components/TournamentRegistrationForm/components/DetailsFields/DetailsFields.tsx
@@ -58,7 +58,7 @@ export const DetailsFields = ({
     },
   ];
 
-  const factionRequired = tournament.registrationDetails?.alignment === 'required';
+  const factionRequired = tournament.registrationDetails?.faction === 'required';
   const factionOptions = [
     ...getFactionOptions(),
     {
@@ -80,7 +80,12 @@ export const DetailsFields = ({
           >
             <Select options={alignmentOptions} />
           </FormField>
-          <Button icon={<X />} onClick={() => setValue('details.alignment', null)} size="small" />
+          <Button
+            icon={<X />}
+            onClick={() => setValue('details.alignment', null)}
+            size="small"
+            disabled={!!declaredFaction}
+          />
         </>
       )}
       {showFactionField && (