Polish competition results display

Author: coder13

src/containers/CompetitionResults/CompetitionResults.test.tsx

@@ -7,6 +7,8 @@ import { CompetitionResultsContainer } from './CompetitionResults';
 let mockWcaLiveRoundResults: unknown[] = [];
 let mockWcaCompetitionResults: unknown[] | undefined = [];
 let mockWcaCompetitionResultsStatus = 'success';
+const mockUseWcaLiveRoundLink = jest.fn();
+const mockUseWcaLiveRoundResults = jest.fn();
 
 jest.mock('@/components/Container', () => ({
   Container: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -18,14 +20,8 @@ jest.mock('@/lib/events', () => ({
 }));
 
 jest.mock('@/hooks/queries/useWcaLive', () => ({
-  useWcaLiveRoundLink: () => ({
-    data: 'https://live.worldcubeassociation.org/competitions/TestComp2026/rounds/1',
-    status: 'success',
-  }),
-  useWcaLiveRoundResults: () => ({
-    data: { results: mockWcaLiveRoundResults },
-    status: 'success',
-  }),
+  useWcaLiveRoundLink: (...args: unknown[]) => mockUseWcaLiveRoundLink(...args),
+  useWcaLiveRoundResults: (...args: unknown[]) => mockUseWcaLiveRoundResults(...args),
 }));
 
 jest.mock('@/hooks/queries/useWcaResults', () => ({
@@ -248,6 +244,14 @@ describe('CompetitionResultsContainer', () => {
     mockWcaLiveRoundResults = [];
     mockWcaCompetitionResults = [];
     mockWcaCompetitionResultsStatus = 'success';
+    mockUseWcaLiveRoundLink.mockReturnValue({
+      data: 'https://live.worldcubeassociation.org/competitions/TestComp2026/rounds/1',
+      status: 'success',
+    });
+    mockUseWcaLiveRoundResults.mockImplementation(() => ({
+      data: { results: mockWcaLiveRoundResults },
+      status: 'success',
+    }));
   });
 
   afterEach(() => {
@@ -380,7 +384,11 @@ describe('CompetitionResultsContainer', () => {
         round_type_id: '2',
         format_id: 'a',
         wca_id: '2010THOM03',
-        attempts: [900, 950, 1000],
+        attempts: [900, 950, 1000, 1050, 1200],
+        best_index: 0,
+        worst_index: 4,
+        regional_single_record: 'NR',
+        regional_average_record: 'WR',
       },
     ];
 
@@ -391,10 +399,31 @@ describe('CompetitionResultsContainer', () => {
       'href',
       '/competitions/TestComp2026/persons/1/results',
     );
+    expect(
+      within(screen.getByRole('row', { name: /1 Blake Thompson/ })).getByText('(9.00)'),
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByRole('row', { name: /1 Blake Thompson/ })).getByText('(12.00)'),
+    ).toBeInTheDocument();
     expect(
       within(screen.getByRole('row', { name: /1 Blake Thompson/ })).getAllByText('9.50'),
     ).toHaveLength(2);
-    expect(screen.getAllByText('9.00')).toHaveLength(2);
+    expect(screen.getAllByText('9.00')).toHaveLength(1);
+    expect(screen.getByLabelText('WR record')).toHaveTextContent('WR');
+    expect(screen.getByLabelText('NR record')).toHaveTextContent('NR');
+    expect(
+      within(screen.getByRole('navigation', { name: 'Event rounds' }))
+        .getAllByRole('link')
+        .map((link) => link.getAttribute('href')),
+    ).toEqual([
+      '/competitions/TestComp2026/results/333-r1',
+      '/competitions/TestComp2026/results/333-r2',
+    ]);
+    expect(
+      within(screen.getByRole('navigation', { name: 'Event rounds' })).getByRole('link', {
+        name: /Round 2/,
+      }),
+    ).toHaveClass('bg-blue-700', 'text-white');
     expect(
       within(screen.getByRole('navigation', { name: 'Round' })).getAllByText('Done'),
     ).toHaveLength(2);
@@ -413,16 +442,23 @@ describe('CompetitionResultsContainer', () => {
   });
 
   it('uses WCA Live partial results for the selected round when they are available', () => {
-    jest.useFakeTimers().setSystemTime(new Date('2026-05-03T12:00:00'));
     mockWcaLiveRoundResults = [
       {
         id: 'live-result-1',
         ranking: 3,
         advancing: true,
         advancingQuestionable: true,
-        attempts: [{ result: 1100 }, { result: 1200 }],
+        attempts: [
+          { result: 1100 },
+          { result: 1200 },
+          { result: 1300 },
+          { result: 1400 },
+          { result: 1500 },
+        ],
         best: 1100,
-        average: 0,
+        average: 1300,
+        singleRecordTag: 'PR',
+        averageRecordTag: 'PR',
         person: {
           id: 'live-person-1',
           registrantId: 1,
@@ -433,6 +469,15 @@ describe('CompetitionResultsContainer', () => {
 
     renderResults('333-r1');
 
+    expect(mockUseWcaLiveRoundLink).toHaveBeenCalledWith('TestComp2026', '333', 1, {
+      enabled: true,
+    });
+    expect(mockUseWcaLiveRoundResults).toHaveBeenCalledWith(
+      'https://live.worldcubeassociation.org/competitions/TestComp2026/rounds/1',
+      {
+        enabled: true,
+      },
+    );
     expect(screen.getByRole('link', { name: 'Blake Thompson' })).toHaveAttribute(
       'href',
       '/competitions/TestComp2026/persons/1/results',
@@ -451,14 +496,23 @@ describe('CompetitionResultsContainer', () => {
     expect(
       within(screen.getByRole('row', { name: /Casey Nguyen/ })).getAllByRole('cell')[0],
     ).toBeEmptyDOMElement();
-    expect(screen.getAllByText('11.00')).toHaveLength(2);
+    expect(
+      within(screen.getByRole('row', { name: /3 Blake Thompson/ })).getByText('(11.00)'),
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByRole('row', { name: /3 Blake Thompson/ })).getByText('(15.00)'),
+    ).toBeInTheDocument();
+    expect(screen.getAllByText('11.00')).toHaveLength(1);
+    expect(screen.getAllByLabelText('PR record').map((badge) => badge.textContent)).toEqual([
+      'PR',
+      'PR',
+    ]);
     expect(
       within(screen.getByRole('row', { name: /2 Nick Silvestri/ })).getAllByText('15.00'),
     ).toHaveLength(2);
     expect(
       screen.getByText('Data is pulled from WCA Live and may be delayed.'),
     ).toBeInTheDocument();
-    expect(screen.queryByText('13.00')).not.toBeInTheDocument();
   });
 
   it('opens full result details from a narrow results row', () => {

src/containers/CompetitionResults/CompetitionResults.tsx

@@ -20,6 +20,7 @@ import { AnchorLink, LinkRenderer } from '@/lib/linkRenderer';
 import { findRoundWithEvent, getAllRoundsWithEvents } from '@/lib/rounds';
 import { useWCIF } from '@/providers/WCIFProvider';
 import { CompetitionResultsTable } from './CompetitionResultsTable';
+import { ResultsEventRoundSelector } from './ResultsEventRoundSelector';
 import { getWcaApiResultsByRoundId } from './resultSources';
 import { getRoundResultsFromSources } from './resultsProvider';
 
@@ -82,7 +83,7 @@ function ResultsRoundNav({
   return (
     <nav
       aria-label={t('common.wca.round')}
-      className="hidden overflow-y-auto rounded-md border border-tertiary-weak bg-panel shadow-sm md:sticky md:top-4 md:block md:max-h-[calc(100vh-2rem)]">
+      className="hidden overflow-y-auto rounded-md border border-tertiary-weak bg-panel shadow-sm lg:sticky lg:top-4 lg:block lg:max-h-[calc(100vh-2rem)]">
       <div>
         {groups.map(({ event, rounds }) => (
           <div key={event.id} className="border-b border-tertiary-weak last:border-b-0">
@@ -107,7 +108,7 @@ function ResultsRoundNav({
                     className={classNames(
                       'flex min-h-10 items-center gap-2 px-3 py-2 type-body-sm hover-transition hover:bg-gray-100 dark:hover:bg-gray-700',
                       {
-                        'bg-active text-primary': isSelected,
+                        'bg-blue-700 text-white dark:bg-blue-300 dark:text-gray-950': isSelected,
                         'text-default': !isSelected,
                       },
                     )}>
@@ -218,20 +219,34 @@ export function CompetitionResultsContainer({
     competitionId,
     selectedRound?.event.id ?? '',
     selectedRound?.roundNumber ?? 1,
-    { enabled: Boolean(selectedRound) && isTodayCompetitionDay },
+    { enabled: Boolean(selectedRound) },
   );
   const { data: wcaLiveRound } = useWcaLiveRoundResults(wcaLiveRoundLink, {
-    enabled: isTodayCompetitionDay && wcaLiveRoundLinkStatus === 'success',
+    enabled: wcaLiveRoundLinkStatus === 'success',
   });
   const roundResults = useMemo(
     () => getRoundResultsFromSources({ wcif, selectedRound, wcaLiveRound, wcaApiResults }),
     [selectedRound, wcaApiResults, wcaLiveRound, wcif],
   );
+  const selectedEventRoundLinks = useMemo(
+    () =>
+      selectedRound
+        ? (pickerEvents.find((event) => event.id === selectedRound.event.id)?.rounds ?? []).map(
+            ({ href, id, resultStatus, roundNumber }) => ({
+              href: href ?? `/competitions/${competitionId}/results/${id}`,
+              id,
+              resultStatus,
+              roundNumber,
+            }),
+          )
+        : [],
+    [competitionId, pickerEvents, selectedRound],
+  );
 
   if (selectedRoundId) {
     return (
       <Container className="pt-4" fullWidth>
-        <div className="mx-auto grid w-full max-w-screen-xl gap-4 p-2 type-body md:grid-cols-[16rem_minmax(0,1fr)] md:items-start">
+        <div className="mx-auto grid w-full max-w-screen-xl gap-4 p-2 type-body lg:grid-cols-[16rem_minmax(0,1fr)] lg:items-start">
           <ResultsRoundNav
             competitionId={competitionId}
             groups={eventsWithResults}
@@ -242,7 +257,7 @@ export function CompetitionResultsContainer({
             apiResultsByRoundId={apiResultsByRoundId}
           />
           <div className="flex flex-col min-w-0 space-y-4">
-            <div className="md:hidden">
+            <div className="lg:hidden">
               <LinkButton
                 to={`/competitions/${competitionId}/results`}
                 title={t('competition.results.back')}
@@ -260,6 +275,11 @@ export function CompetitionResultsContainer({
                   })}
                 </h2>
                 <NoteBox text={t('competition.results.liveResultsDelayNote')} />
+                <ResultsEventRoundSelector
+                  selectedRoundId={selectedRound.round.id}
+                  rounds={selectedEventRoundLinks}
+                  LinkComponent={LinkComponent}
+                />
                 {isWcaApiResultsLoading && roundResults.length === 0 ? (
                   <section className="p-4 border rounded-md border-tertiary-weak bg-panel text-muted">
                     <p>{t('common.loading')}</p>