fix: show advancement details for participation rounds

Author: coder13

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.test.tsx

@@ -22,24 +22,122 @@ jest.mock('react-tiny-popover', () => ({
 }));
 
 jest.mock('react-i18next', () => ({
-  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
+  Trans: ({ i18nKey, values }: { i18nKey: string; values?: Record<string, unknown> }) => {
+    if (i18nKey === 'common.wca.advancement.ranking') {
+      return `Top ${values?.level} to next round`;
+    }
+
+    if (i18nKey === 'common.wca.advancement.percent') {
+      return `Top ${values?.level}% to next round`;
+    }
+
+    if (i18nKey === 'common.wca.cumulativeTimelimit') {
+      return `Time Limit: ${values?.time} Cumulative`;
+    }
+
+    if (i18nKey === 'common.wca.cumulativeTimelimitWithrounds') {
+      return `Time Limit: ${values?.time} Total with:`;
+    }
+
+    return i18nKey;
+  },
   useTranslation: () => ({
-    t: (key: string) => key,
+    t: (key: string, options?: Record<string, unknown>) => {
+      if (key === 'common.help') {
+        return 'help';
+      }
+
+      if (key === 'common.wca.cutoff') {
+        return 'Cutoff';
+      }
+
+      if (key === 'common.wca.timeLimit') {
+        return 'Time Limit';
+      }
+
+      if (key === 'common.activityCodeToName.round') {
+        return `Round ${options?.roundNumber}`;
+      }
+
+      if (options?.defaultValue) {
+        return String(options.defaultValue)
+          .replace('{{level}}', String(options.level ?? ''))
+          .replace('{{rounds}}', String(options.rounds ?? ''))
+          .replace('{{scope}}', String(options.scope ?? ''))
+          .replace('{{result}}', String(options.result ?? ''));
+      }
+
+      return key;
+    },
   }),
 }));
 
+const wcifMock = {
+  id: 'TestComp2026',
+  schedule: { venues: [] },
+  events: [
+    {
+      id: '333',
+      rounds: [
+        {
+          id: '333-r1',
+          format: 'a',
+          cutoff: null,
+          timeLimit: null,
+          advancementCondition: {
+            type: 'ranking',
+            level: 16,
+          },
+          results: [],
+        },
+        {
+          id: '333-r2',
+          format: 'a',
+          cutoff: null,
+          timeLimit: null,
+          participationRuleset: {
+            participationSource: {
+              type: 'round',
+              roundId: '333-r1',
+              resultCondition: {
+                type: 'percent',
+                value: 75,
+              },
+            },
+          },
+          results: [],
+        },
+        {
+          id: '333-r3',
+          format: 'a',
+          cutoff: null,
+          timeLimit: null,
+          participationRuleset: {
+            participationSource: {
+              type: 'linkedRounds',
+              roundIds: ['333-r1', '333-r2'],
+              resultCondition: {
+                type: 'ranking',
+                value: 12,
+              },
+            },
+          },
+          results: [],
+        },
+      ],
+    },
+  ],
+};
+
 jest.mock('@/providers/WCIFProvider', () => ({
   useWCIF: () => ({
     competitionId: 'TestComp2026',
-    wcif: {
-      id: 'TestComp2026',
-      schedule: { venues: [] },
-    },
+    wcif: wcifMock,
     setTitle: () => {},
   }),
 }));
 
-const round = {
+const cutoffOnlyRound = {
   id: '333-r1',
   cutoff: {
     numberOfAttempts: 2,
@@ -49,7 +147,7 @@ const round = {
   advancementCondition: null,
 } as unknown as Round;
 
-function renderPanel() {
+function renderPanel(round: Round) {
   return render(
     <MemoryRouter>
       <CutoffTimeLimitPanel round={round} />
@@ -59,7 +157,7 @@ function renderPanel() {
 
 describe('CutoffTimeLimitPanel', () => {
   it('uses theme-aware popover classes for help content', () => {
-    renderPanel();
+    renderPanel(cutoffOnlyRound);
 
     fireEvent.click(screen.getByRole('button', { name: /help/i }));
 
@@ -71,4 +169,27 @@ describe('CutoffTimeLimitPanel', () => {
     expect(popoverContent).toHaveClass('text-default');
     expect(popoverContent).not.toHaveClass('bg-white');
   });
+
+  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();
+  });
+
+  it('shows advancement text derived from the next round participation ruleset', () => {
+    renderPanel({
+      ...(wcifMock.events[0].rounds[0] as object),
+      advancementCondition: null,
+    } as Round);
+
+    expect(screen.getByText('Top 75% 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();
+  });
 });

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.tsx

@@ -1,10 +1,11 @@
 import { Cutoff, Round, parseActivityCode } from '@wca/helpers';
 import classNames from 'classnames';
-import { useState } from 'react';
+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 { CompatibleRound, getAdvancementConditionForRound, ResultCondition } from '@/lib/wcif';
 import { useWCIF } from '@/providers/WCIFProvider';
 
 export function CutoffTimeLimitPanel({
@@ -20,10 +21,20 @@ export function CutoffTimeLimitPanel({
   const cutoff = round.cutoff;
   const timeLimit = round.timeLimit;
   const timelimitTime = timeLimit && renderCentiseconds(timeLimit?.centiseconds);
+  const eventRounds = useMemo(() => {
+    const { eventId } = parseActivityCode(round.id);
+    return (
+      wcif?.events
+        ?.find((event) => event.id === eventId)
+        ?.rounds?.map((candidate) => candidate as CompatibleRound) || []
+    );
+  }, [round.id, wcif?.events]);
+  const advancement = useMemo(
+    () => getAdvancementConditionForRound(eventRounds, round as CompatibleRound),
+    [eventRounds, round],
+  );
 
-  if (!timeLimit && !cutoff && !round.advancementCondition) return null;
-
-  const level = round.advancementCondition?.level;
+  if (!timeLimit && !cutoff && !advancement) return null;
 
   return (
     <div className={classNames('flex w-full', className)}>
@@ -86,35 +97,9 @@ export function CutoffTimeLimitPanel({
               </div>
             )}
         </div>
-        {round.advancementCondition && (
-          <div>
-            {round.advancementCondition.type === 'ranking' && (
-              <div className="px-2">
-                <Trans
-                  i18nKey={'common.wca.advancement.ranking'}
-                  values={{ level }}
-                  components={{ b: <span className="font-semibold" /> }}
-                />
-              </div>
-            )}
-            {round.advancementCondition.type === 'percent' && (
-              <div className="px-2">
-                <Trans
-                  i18nKey={'common.wca.advancement.percent'}
-                  values={{ level }}
-                  components={{ b: <span className="font-semibold" /> }}
-                />
-              </div>
-            )}
-            {round.advancementCondition.type === 'attemptResult' && (
-              <div className="px-2">
-                <Trans
-                  i18nKey={'common.wca.advancement.attemptResult'}
-                  values={{ level }}
-                  components={{ b: <span className="font-semibold" /> }}
-                />
-              </div>
-            )}
+        {advancement && (
+          <div className="px-2">
+            {renderAdvancementText(t, advancement.sourceType, advancement)}
           </div>
         )}
       </div>
@@ -125,6 +110,108 @@ export function CutoffTimeLimitPanel({
   );
 }
 
+function renderAdvancementText(
+  t: ReturnType<typeof useTranslation>['t'],
+  sourceType: 'registrations' | 'round' | 'linkedRounds',
+  advancement: NonNullable<ReturnType<typeof getAdvancementConditionForRound>>,
+) {
+  const isLinkedRounds = sourceType === 'linkedRounds';
+  const { resultCondition } = advancement;
+  const sourceRoundNames = advancement.sourceRoundIds.map((roundId) =>
+    activityCodeToRoundName(t, roundId),
+  );
+  const sourceRoundsLabel = joinLabels(sourceRoundNames);
+
+  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" /> }}
+        />
+      );
+    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',
+            {
+              defaultValue: isLinkedRounds
+                ? 'Competitors with a {{scope}} better than {{result}} combined across {{rounds}} advance to next round. Minimum of 25% of competitors must be eliminated.'
+                : 'Competitors with a {{scope}} better than {{result}} advance to next round. Minimum of 25% of competitors must be eliminated.',
+              scope: scopeLabel,
+              result: resultValue,
+              rounds: sourceRoundsLabel,
+            },
+          )}
+        </>
+      );
+    }
+  }
+}
+
+function activityCodeToRoundName(t: ReturnType<typeof useTranslation>['t'], roundId: string) {
+  const { roundNumber } = parseActivityCode(roundId);
+
+  return t('common.activityCodeToName.round', {
+    defaultValue: `Round ${roundNumber}`,
+    roundNumber,
+  });
+}
+
+function joinLabels(labels: string[]) {
+  if (labels.length <= 1) {
+    return labels[0] || '';
+  }
+
+  if (labels.length === 2) {
+    return `${labels[0]} and ${labels[1]}`;
+  }
+
+  return `${labels.slice(0, -1).join(', ')}, and ${labels[labels.length - 1]}`;
+}
+
 function CutoffTimeLimitPopover({ cutoff }: { cutoff: Cutoff | null }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);