Refine advancement copy and linked round UI

Author: coder13

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.stories.tsx

@@ -73,6 +73,15 @@ export const ParticipationConditionLinkedRounds: Story = {
   },
 };
 
+export const ParticipationConditionLinkedRoundsStart: Story = {
+  parameters: {
+    competitionFixture: storybookParticipationConditionLinkedRoundsFixture,
+  },
+  args: {
+    round: storybookParticipationConditionLinkedRoundsFixture.events[0].rounds[0],
+  },
+};
+
 export const CutoffAndTimeLimit: Story = {
   args: {
     round: getStorybookRoundFixture('222-r1'),

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.test.tsx

@@ -67,10 +67,40 @@ jest.mock('react-i18next', () => ({
         return `Round ${options?.roundNumber}`;
       }
 
+      if (key === 'common.wca.advancement.ranking') {
+        return `Top ${options?.level} advance to ${options?.what}`;
+      }
+
+      if (key === 'common.wca.advancement.percent') {
+        return `Top ${options?.level}% advance to ${options?.what}`;
+      }
+
+      if (key === 'common.wca.advancement.linkedRanking') {
+        return `Top ${options?.level} in dual rounds ${options?.rounds} advance to ${options?.what}`;
+      }
+
+      if (key === 'common.wca.advancement.linkedPercent') {
+        return `Top ${options?.level}% in dual rounds ${options?.rounds} advance to ${options?.what}`;
+      }
+
+      if (key === 'common.wca.advancement.nextRound') {
+        return 'next round';
+      }
+
+      if (key === 'common.wca.advancement.final') {
+        return 'final';
+      }
+
+      if (key === 'common.wca.advancement.resultThresholdUnknown') {
+        return 'an unknown result';
+      }
+
       if (options?.defaultValue) {
         return String(options.defaultValue)
           .replace('{{level}}', String(options.level ?? ''))
           .replace('{{rounds}}', String(options.rounds ?? ''))
+          .replace('{{round}}', String(options.round ?? ''))
+          .replace('{{what}}', String(options.what ?? ''))
           .replace('{{scope}}', String(options.scope ?? ''))
           .replace('{{result}}', String(options.result ?? ''));
       }
@@ -134,6 +164,42 @@ const wcifMock = {
         },
       ],
     },
+    {
+      id: '222',
+      rounds: [
+        {
+          id: '222-r1',
+          format: 'a',
+          cutoff: null,
+          timeLimit: null,
+          results: [],
+        },
+        {
+          id: '222-r2',
+          format: 'a',
+          cutoff: null,
+          timeLimit: null,
+          results: [],
+        },
+        {
+          id: '222-r3',
+          format: 'a',
+          cutoff: null,
+          timeLimit: null,
+          participationRuleset: {
+            participationSource: {
+              type: 'linkedRounds',
+              roundIds: ['222-r1', '222-r2'],
+              resultCondition: {
+                type: 'ranking',
+                value: 8,
+              },
+            },
+          },
+          results: [],
+        },
+      ],
+    },
   ],
 };
 
@@ -181,7 +247,7 @@ describe('CutoffTimeLimitPanel', () => {
   it('shows the legacy advancement text for stable wcif rounds', () => {
     renderPanel(wcifMock.events[0].rounds[0] as unknown as Round);
 
-    expect(screen.getByText('Top 16 to next round')).toBeInTheDocument();
+    expect(screen.getByText('Top 16 advance to next round')).toBeInTheDocument();
   });
 
   it('shows advancement text derived from the next round participation ruleset', () => {
@@ -190,14 +256,18 @@ describe('CutoffTimeLimitPanel', () => {
       advancementCondition: null,
     } as Round);
 
-    expect(screen.getByText('Top 75% to next round')).toBeInTheDocument();
+    expect(screen.getByText('Top 75% advance to next round')).toBeInTheDocument();
   });
 
   it('shows linked-round advancement text when a later round depends on combined results', () => {
     renderPanel(wcifMock.events[0].rounds[1] as unknown as Round);
 
-    expect(
-      screen.getByText('Top 12 combined across Round 1 and Round 2 advance to next round'),
-    ).toBeInTheDocument();
+    expect(screen.getByText('Top 12 in dual rounds 1 & 2 advance to final')).toBeInTheDocument();
+  });
+
+  it('shows the same dual-round advancement text for the first round in a linked-round set', () => {
+    renderPanel(wcifMock.events[1].rounds[0] as unknown as Round);
+
+    expect(screen.getByText('Top 8 in dual rounds 1 & 2 advance to final')).toBeInTheDocument();
   });
 });

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.tsx

@@ -1,10 +1,11 @@
-import { Competition, Cutoff, Round, parseActivityCode } from '@wca/helpers';
+import { Cutoff, Round, parseActivityCode } from '@wca/helpers';
 import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Popover } from 'react-tiny-popover';
 import { renderCentiseconds, renderCutoff } from '@/lib/results';
+import { getEventRoundsForRound, joinLabels } from '@/lib/roundLabels';
 import { CompatibleRound, getAdvancementConditionForRound, ResultCondition } from '@/lib/wcif';
 import { useWCIF } from '@/providers/WCIFProvider';
 
@@ -92,7 +93,7 @@ export function CutoffTimeLimitPanel({
         </div>
         {advancement && (
           <div className="px-2">
-            {renderAdvancementText(t, advancement.sourceType, advancement)}
+            {renderAdvancementText(t, eventRounds, advancement.sourceType, advancement)}
           </div>
         )}
       </div>
@@ -103,117 +104,108 @@ export function CutoffTimeLimitPanel({
   );
 }
 
-function getEventRoundsForRound(events: Competition['events'] | undefined, roundId: string) {
-  const { eventId } = parseActivityCode(roundId);
-
-  return (
-    events
-      ?.find((event) => event.id === eventId)
-      ?.rounds?.map((candidate) => candidate as CompatibleRound) || []
-  );
-}
-
 function getCumulativeRoundIds(timeLimit: Round['timeLimit'], roundId: string) {
   return timeLimit?.cumulativeRoundIds.filter((activityCode) => activityCode !== roundId) || [];
 }
 
 function renderAdvancementText(
   t: ReturnType<typeof useTranslation>['t'],
+  eventRounds: CompatibleRound[],
   sourceType: 'registrations' | 'round' | 'linkedRounds',
   advancement: NonNullable<ReturnType<typeof getAdvancementConditionForRound>>,
 ) {
-  const isLinkedRounds = sourceType === 'linkedRounds';
+  if (sourceType === 'linkedRounds') {
+    return renderLinkedRoundsAdvancementText(t, eventRounds, advancement);
+  }
+
+  return renderSingleRoundAdvancementText(t, eventRounds, advancement);
+}
+
+function renderLinkedRoundsAdvancementText(
+  t: ReturnType<typeof useTranslation>['t'],
+  eventRounds: CompatibleRound[],
+  advancement: NonNullable<ReturnType<typeof getAdvancementConditionForRound>>,
+) {
   const { resultCondition } = advancement;
-  const sourceRoundNames = advancement.sourceRoundIds.map((roundId) =>
-    activityCodeToRoundName(t, roundId),
-  );
+  const sourceRoundNames = advancement.sourceRoundIds.map((roundId) => {
+    const roundNumber = parseActivityCode(roundId).roundNumber;
+    return roundNumber ? roundNumber.toString() : '';
+  });
   const sourceRoundsLabel = joinLabels(sourceRoundNames);
+  const targetLabel = getAdvancementTargetLabel(t, eventRounds, advancement.targetRoundId);
 
   switch (resultCondition.type) {
     case 'ranking':
-      return isLinkedRounds ? (
-        <>
-          {t('common.wca.advancement.linkedRanking', {
-            defaultValue: 'Top {{level}} combined across {{rounds}} advance to next round',
-            level: resultCondition.value,
-            rounds: sourceRoundsLabel,
-          })}
-        </>
-      ) : (
-        <Trans
-          i18nKey={'common.wca.advancement.ranking'}
-          values={{ level: resultCondition.value }}
-          components={{ b: <span className="font-semibold" /> }}
-        />
-      );
+      return t('common.wca.advancement.linkedRanking', {
+        level: resultCondition.value,
+        rounds: sourceRoundsLabel,
+        what: targetLabel,
+      });
     case 'percent':
-      return isLinkedRounds ? (
-        <>
-          {t('common.wca.advancement.linkedPercent', {
-            defaultValue: 'Top {{level}}% combined across {{rounds}} advance to next round',
-            level: resultCondition.value,
-            rounds: sourceRoundsLabel,
-          })}
-        </>
-      ) : (
-        <Trans
-          i18nKey={'common.wca.advancement.percent'}
-          values={{ level: resultCondition.value }}
-          components={{ b: <span className="font-semibold" /> }}
-        />
-      );
-    case 'resultAchieved': {
-      const thresholdCondition = resultCondition as Extract<
-        ResultCondition,
-        { type: 'resultAchieved' }
-      >;
-      const scopeLabel = t(`common.wca.resultType.${thresholdCondition.scope}`, {
-        defaultValue: thresholdCondition.scope,
-      }).toLowerCase();
-      const resultValue =
-        thresholdCondition.value === null
-          ? t('common.wca.advancement.resultThresholdUnknown', {
-              defaultValue: 'an unknown result',
-            })
-          : renderCentiseconds(thresholdCondition.value);
-
-      return (
-        <>
-          {t(
-            isLinkedRounds
-              ? 'common.wca.advancement.linkedResultAchieved'
-              : 'common.wca.advancement.resultAchieved',
-            {
-              scope: scopeLabel,
-              result: resultValue,
-              rounds: sourceRoundsLabel,
-            },
-          )}
-        </>
-      );
-    }
+      return t('common.wca.advancement.linkedPercent', {
+        level: resultCondition.value,
+        rounds: sourceRoundsLabel,
+        what: targetLabel,
+      });
+    case 'resultAchieved':
+      return t('common.wca.advancement.linkedResultAchieved', {
+        scope: t(`common.wca.advancement.scope.${resultCondition.scope}`),
+        result:
+          resultCondition.value === null
+            ? t('common.wca.advancement.resultThresholdUnknown')
+            : renderCentiseconds(resultCondition.value),
+        rounds: sourceRoundsLabel,
+        what: targetLabel,
+      });
   }
 }
 
-function activityCodeToRoundName(t: ReturnType<typeof useTranslation>['t'], roundId: string) {
-  const { roundNumber } = parseActivityCode(roundId);
+function renderSingleRoundAdvancementText(
+  t: ReturnType<typeof useTranslation>['t'],
+  eventRounds: CompatibleRound[],
+  advancement: NonNullable<ReturnType<typeof getAdvancementConditionForRound>>,
+) {
+  const { resultCondition } = advancement;
+  const targetLabel = getAdvancementTargetLabel(t, eventRounds, advancement.targetRoundId);
 
-  return t('common.activityCodeToName.round', {
-    defaultValue: `Round ${roundNumber}`,
-    roundNumber,
-  });
+  switch (resultCondition.type) {
+    case 'ranking':
+      return t('common.wca.advancement.ranking', {
+        level: resultCondition.value,
+        what: targetLabel,
+      });
+    case 'percent':
+      return t('common.wca.advancement.percent', {
+        level: resultCondition.value,
+        what: targetLabel,
+      });
+    case 'resultAchieved':
+      return t('common.wca.advancement.resultAchieved', {
+        scope: t(`common.wca.advancement.scope.${resultCondition.scope}`),
+        result:
+          resultCondition.value === null
+            ? t('common.wca.advancement.resultThresholdUnknown')
+            : renderCentiseconds(resultCondition.value),
+        what: targetLabel,
+      });
+  }
 }
 
-function joinLabels(labels: string[]) {
-  if (labels.length <= 1) {
-    return labels[0] || '';
+function getAdvancementTargetLabel(
+  t: ReturnType<typeof useTranslation>['t'],
+  eventRounds: CompatibleRound[],
+  targetRoundId: string | null | undefined,
+) {
+  if (!targetRoundId) {
+    return t('common.wca.advancement.unknown');
   }
 
-  if (labels.length === 2) {
-    return `${labels[0]} and ${labels[1]}`;
+  const targetRoundIndex = eventRounds.findIndex((candidate) => candidate.id === targetRoundId);
+  if (targetRoundIndex === eventRounds.length - 1) {
+    return t('common.wca.advancement.final');
   }
 
-  return `${labels.slice(0, -1).join(', ')}, and ${labels[labels.length - 1]}`;
+  return t('common.wca.advancement.nextRound');
 }
 
 function CutoffTimeLimitPopover({ cutoff }: { cutoff: Cutoff | null }) {

src/containers/CompetitionRound/CompetitionRound.stories.tsx

@@ -53,6 +53,26 @@ export const ParticipationConditionLinkedRounds: Story = {
   },
 };
 
+export const DualRoundWithPreviousRound: Story = {
+  parameters: {
+    competitionFixture: storybookParticipationConditionLinkedRoundsFixture,
+  },
+  args: {
+    competitionId: 'SeattleSummerOpen2026',
+    roundId: '333-r2',
+  },
+};
+
+export const DualRoundWithNextRound: Story = {
+  parameters: {
+    competitionFixture: storybookParticipationConditionLinkedRoundsFixture,
+  },
+  args: {
+    competitionId: 'SeattleSummerOpen2026',
+    roundId: '333-r1',
+  },
+};
+
 export const FinalRound: Story = {
   parameters: {
     competitionFixture: makeStorybookCompetitionFixtureWithRound('333-r3', (round) => ({