support breaks inside the qual schedule

Author: NixFey

shared/DbTypes.ts

@@ -60,6 +60,12 @@ export type PlayoffMatch = {
 export type QualMatch = {
   number: number;
   participants: Record<DriverStation, number>;
+  type: 'match'
+};
+
+export type QualBreak = {
+  description: string
+  type: 'break'
 };
 
 export type Break = {

src/components/QualDisplay/MatchDisplay/index.tsx

@@ -1,9 +1,9 @@
 import { h, Fragment } from 'preact';
-import { DriverStation, QualMatch } from '@shared/DbTypes';
+import { DriverStation, QualBreak, QualMatch } from '@shared/DbTypes';
 import styles from './styles.module.scss';
 
 type MatchDisplayProps = {
-  match: QualMatch | null;
+  match: QualMatch | QualBreak | null;
   // Temp disable till I figure out what to do with avatars
   // teamAvatars: TeamAvatars | undefined;
   halfWidth?: boolean;
@@ -43,15 +43,22 @@ function MatchDisplay({ halfWidth, match, className }: MatchDisplayProps): JSX.E
         Either we're in a test match or at the end of the schedule
       */}
       {match && (
-      <>
-        <span className={styles.matchNumber}>{match.number}</span>
-        <span className={styles.red}>
-          {[1, 2, 3].map((n) => <TeamDisplay key={`${match?.number}r${n}`} team={match?.participants[`Red${n}` as DriverStation]} />)}
-        </span>
-        <span className={styles.blue}>
-          {[1, 2, 3].map((n) => <TeamDisplay key={`${match?.number}b${n}`} team={match?.participants[`Blue${n}` as DriverStation]} />)}
-        </span>
-      </>
+        <>
+          {match && match.type === 'break' && (
+            <div className={styles.break}>{match.description}</div>
+          )}
+          {match?.type !== 'break' && (
+            <>
+              <span className={styles.matchNumber}>{match.number}</span>
+              <span className={styles.red}>
+                {[1, 2, 3].map((n) => <TeamDisplay key={`${match?.number}r${n}`} team={match?.participants[`Red${n}` as DriverStation]} />)}
+              </span>
+              <span className={styles.blue}>
+                {[1, 2, 3].map((n) => <TeamDisplay key={`${match?.number}b${n}`} team={match?.participants[`Blue${n}` as DriverStation]} />)}
+              </span>
+            </>
+          )}
+        </>
       )}
     </div>
   );

src/components/QualDisplay/MatchDisplay/styles.module.scss

@@ -51,4 +51,10 @@
             font-size: min(4vh, 4vw);
         }
     }
+
+    .break {
+      text-align: center;
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
 }

src/components/QualDisplay/Queueing/index.tsx

@@ -6,7 +6,7 @@ import {
   useContext, useEffect, useState, useRef, useReducer,
 } from 'preact/hooks';
 
-import { AppMode, QualMatch } from '@shared/DbTypes';
+import { AppMode, QualBreak, QualMatch } from '@shared/DbTypes';
 import { TeamRanking } from '@/types';
 import AppContext from '@/AppContext';
 import styles from './styles.module.scss';
@@ -25,9 +25,9 @@ const Queueing = () => {
   const dbEventRef = useRef<DatabaseReference>();
   const [qualMatches, setQualMatches] = useState<QualMatch[]>([]);
   const [displayMatches, setDisplayMatches] = useState<{
-    currentMatch: QualMatch | null,
-    nextMatch: QualMatch | null,
-    queueingMatches: QualMatch[]
+    currentMatch: QualMatch | QualBreak | null,
+    nextMatch: QualMatch | QualBreak | null,
+    queueingMatches: QualMatch[] | QualBreak[]
   }>({ currentMatch: null, nextMatch: null, queueingMatches: [] });
   const [rankings, setRankings] = useState<TeamRanking[]>([]);
 
@@ -46,9 +46,13 @@ const Queueing = () => {
     };
   }, [event.eventCode, season, token]);
 
-  const getMatchByNumber = (matchNumber: number): QualMatch | null => qualMatches?.find(
+  const getMatchIdxByNumber = (matchNumber: number): number | null => qualMatches?.findIndex(
     (x) => x.number === matchNumber,
   ) ?? null;
+  const getMatchByIndex = (index: number | null): QualMatch | QualBreak | null => (
+    index && qualMatches
+      ? (qualMatches[index] ?? null)
+      : null);
 
   const updateMatches = (): void => {
     const matchNumber = event.currentMatchNumber;
@@ -62,13 +66,23 @@ const Queueing = () => {
     }
 
     try {
-      setDisplayMatches({
-        currentMatch: getMatchByNumber(matchNumber),
-        nextMatch: getMatchByNumber(matchNumber + 1),
-        // By default, we'll take the three matches after the one on deck
-        queueingMatches: [2, 3, 4].map((x) => getMatchByNumber(matchNumber + x))
-          .filter((x) => x !== null) as QualMatch[],
-      });
+      const currentIdx = getMatchIdxByNumber(matchNumber);
+      if (currentIdx !== null) {
+        setDisplayMatches({
+          currentMatch: getMatchByIndex(currentIdx),
+          nextMatch: getMatchByIndex(currentIdx + 1),
+          // By default, we'll take the three matches after the one on deck
+          queueingMatches: [2, 3, 4].map((x) => getMatchByIndex(currentIdx + x))
+            .filter((x) => x !== null) as QualMatch[],
+        });
+      } else {
+        setDisplayMatches({
+          currentMatch: null,
+          nextMatch: null,
+          queueingMatches: [],
+        });
+      }
+
       setLoadingState('ready');
     } catch (e) {
       setLoadingState('error');