#134 feat: Add edition year to tournaments (#147)

* feat: Add edition year to tournaments

* fix: Replace accidentally removed mission matrix options

Author: ianpaschal

convex/_model/tournaments/fields.ts

@@ -22,6 +22,7 @@ export const editableFields = {
   requireRealNames: v.boolean(),
   organizerUserIds: v.array(v.id('users')),
   rulesPackUrl: v.optional(v.string()),
+  editionYear: v.optional(v.number()),
 
   // Denormalized so that we can filter tournaments by game system, and all related fields.
   // The duplicate data is worth the efficiency in querying.

src/components/FowV4MatchResultForm/components/GameConfigFields.tsx

@@ -5,7 +5,7 @@ import {
   fowV4EraOptions,
   fowV4LessonsFromTheFrontVersionOptions,
   fowV4MissionPackOptions,
-  getFowV4MissionsByMissionPackId,
+  getFowV4MissionMatrixOptionsByMissionPackId,
 } from '~/api';
 import { Animate } from '~/components/generic/Animate';
 import { FormField } from '~/components/generic/Form';
@@ -35,10 +35,7 @@ export const GameConfigFields = ({
 
   const missionPackId = watch(`${formPath}.missionPackId`);
 
-  const missionOptions = (getFowV4MissionsByMissionPackId(missionPackId) ?? []).map((mission) => ({
-    label: mission.displayName,
-    value: mission.id,
-  }));
+  const missionMatrixOptions = getFowV4MissionMatrixOptionsByMissionPackId(missionPackId);
 
   return (
     <div className={styles.Root}>
@@ -67,8 +64,8 @@ export const GameConfigFields = ({
             <FormField name={`${formPath}.missionPackId`} label="Mission Pack" disabled={fowV4MissionPackOptions.length < 2}>
               <InputSelect options={fowV4MissionPackOptions} />
             </FormField>
-            <FormField name={`${formPath}.missionMatrixId`} label="Mission Matrix" disabled={missionOptions.length < 2}>
-              <InputSelect options={missionOptions} />
+            <FormField name={`${formPath}.missionMatrixId`} label="Mission Matrix" disabled={missionMatrixOptions.length < 2}>
+              <InputSelect options={missionMatrixOptions} />
             </FormField>
             <FormField name={`${formPath}.useExperimentalMissions`} label="Prefer experimental missions">
               <Switch />

src/components/TournamentCard/TournamentCard.tsx

@@ -10,6 +10,7 @@ import { TournamentInfoBlock } from '~/components/TournamentInfoBlock/';
 import { TournamentProvider } from '~/components/TournamentProvider';
 import { useElementSize } from '~/hooks/useElementSize';
 import { MIN_WIDTH_TABLET, PATHS } from '~/settings';
+import { getTournamentDisplayName } from '~/utils/common/getTournamentDisplayName';
 
 import styles from './TournamentCard.module.scss';
 
@@ -55,7 +56,7 @@ export const TournamentCard = ({
             )}
           </div>
           <div className={styles.TournamentCard_Title}>
-            <h2>{tournament.title}</h2>
+            <h2>{getTournamentDisplayName(tournament)}</h2>
             <div className={styles.TournamentCard_Buttons}>
               {showContextMenu && (
                 <TournamentContextMenu />

src/components/TournamentForm/TournamentForm.schema.ts

@@ -17,7 +17,8 @@ import { fowV4GameSystemConfigDefaultValues, fowV4GameSystemConfigFormSchema } f
 export const tournamentFormSchema = z.object({
 
   // General
-  title: z.string().min(5, 'Title must be at least 5 characters.').max(40, 'Titles are limited to 50 characters.'),
+  title: z.string().min(3, 'Title must be at least 3 characters.').max(40, 'Titles are limited to 40 characters.'),
+  editionYear: z.coerce.number(),
   description: z.string().min(10, 'Please add a description.').max(1000, 'Descriptions are limited to 1000 characters.'),
   rulesPackUrl: z.union([z.string().url('Please provide a valid URL.'), z.literal('')]),
   location: z.object({
@@ -112,4 +113,5 @@ export const defaultValues: DeepPartial<TournamentFormData> = {
   rankingFactors: ['total_wins'],
   logoStorageId: '',
   bannerStorageId: '',
+  editionYear: 2025,
 };

src/components/TournamentForm/components/GeneralFields.module.scss

@@ -1,7 +1,22 @@
 @use "/src/style/flex";
+@use "/src/style/text";
 
 .GeneralFields {
   @include flex.column;
+
+  &_TitleRow {
+    display: grid;
+    grid-template-columns: 1fr 6rem;
+    gap: 1rem;
+  }
+
+  &_Preview {
+    @include flex.column($gap: 0.25rem);
+
+    &_Description {
+      @include text.ui($muted: true);
+    }
+  }
 }
 
 .Stackable {

src/components/TournamentForm/components/GeneralFields.tsx

@@ -4,11 +4,13 @@ import clsx from 'clsx';
 import { FormField } from '~/components/generic/Form';
 import { InputDateTime } from '~/components/generic/InputDateTime';
 import { InputLocation } from '~/components/generic/InputLocation';
+import { InputSelect, InputSelectOption } from '~/components/generic/InputSelect';
 import { InputText } from '~/components/generic/InputText';
 import { InputTextArea } from '~/components/generic/InputTextArea';
 import { Separator } from '~/components/generic/Separator';
 import { InputSingleFile } from '~/components/InputSingleFile/InputSingleFile';
 import { TournamentFormData } from '~/components/TournamentForm/TournamentForm.schema';
+import { getTournamentDisplayName } from '~/utils/common/getTournamentDisplayName';
 
 import styles from './GeneralFields.module.scss';
 
@@ -21,16 +23,43 @@ export const GeneralFields = ({
   className,
   status = 'draft',
 }: GeneralFieldsProps): JSX.Element => {
-  const { resetField } = useFormContext<TournamentFormData>();
+  const { resetField, watch } = useFormContext<TournamentFormData>();
 
   // Once a tournament is active, lock some fields
   const disableFields = !['draft', 'published'].includes(status);
 
+  const getYearOptions = () => {
+    const options: InputSelectOption<string>[] = [{
+      value: '0',
+      label: 'None',
+    }];
+    for (let i = 2010; i < 2027; i += 1) {
+      options.push({
+        value: i.toString(),
+        label: i.toString(),
+      });
+    }
+    return options;
+  };
+
+  const tournament = watch();
+
   return (
     <div className={clsx(styles.GeneralFields, className)}>
-      <FormField name="title" label="Title" description="Avoid including points and other rules in the title." disabled={disableFields}>
-        <InputText type="text" />
-      </FormField>
+      <div className={styles.GeneralFields_TitleRow}>
+        <FormField name="title" label="Title" description="Avoid including points and other rules in the title." disabled={disableFields}>
+          <InputText type="text" />
+        </FormField>
+        <FormField name="editionYear" label="Year" disabled={disableFields}>
+          <InputSelect options={getYearOptions()} />
+        </FormField>
+      </div>
+      {tournament.editionYear > 0 && (
+        <div className={styles.GeneralFields_Preview}>
+          <p className={styles.GeneralFields_Preview_Description}>Your tournament's name will render as:</p>
+          <h2>{getTournamentDisplayName(tournament)}</h2>
+        </div>
+      )}
       <FormField name="description" label="Description" disabled={disableFields}>
         <InputTextArea />
       </FormField>

src/pages/TournamentDetailPage/components/TournamentDetailBanner/TournamentDetailBanner.tsx

@@ -1,23 +1,24 @@
 import { useTournament } from '~/components/TournamentProvider';
 import { TournamentTimer } from '~/components/TournamentTimer';
 import { DeviceSize, useDeviceSize } from '~/hooks/useDeviceSize';
+import { getTournamentDisplayName } from '~/utils/common/getTournamentDisplayName';
 
 import styles from './TournamentDetailBanner.module.scss';
 
 export const TournamentDetailBanner = (): JSX.Element => {
-  const { title, logoUrl, currentRound, status } = useTournament();
+  const tournament = useTournament();
   const [deviceSize] = useDeviceSize();
 
-  const showTimer = status === 'active' && currentRound !== undefined;
+  const showTimer = tournament.status === 'active' && tournament.currentRound !== undefined;
   const compact = deviceSize < DeviceSize.Default;
 
   return (
     <div className={styles.TournamentDetailBanner} data-compact={compact} data-timer={showTimer}>
       <div className={styles.TournamentDetailBanner_Title}>
-        {logoUrl && (
-          <img className={styles.TournamentDetailBanner_Logo} src={logoUrl} />
+        {tournament.logoUrl && (
+          <img className={styles.TournamentDetailBanner_Logo} src={tournament.logoUrl} />
         )}
-        <h1>{title}</h1>
+        <h1>{getTournamentDisplayName(tournament)}</h1>
       </div>
       {showTimer && (
         <div className={styles.TournamentDetailBanner_TimerSection}>

src/style/_text.scss

@@ -11,6 +11,7 @@
   }
 
   @if $muted == true {
+    font-weight: 300;
     color: var(--text-color-muted);
   }
 

src/utils/common/getTournamentDisplayName.ts

@@ -0,0 +1,8 @@
+import { Tournament } from '~/api';
+
+export const getTournamentDisplayName = (tournament: Pick<Tournament, 'editionYear'|'title'>): string => {
+  if (tournament.editionYear) {
+    return `${tournament.title} ${tournament.editionYear}`;
+  }
+  return tournament.title;
+};