starting on fgc displays

front-end/src/apps/audience-display/audience-display.tsx

@@ -6,7 +6,7 @@ import { SyncOnPrestart } from 'src/components/sync-effects/sync-on-prestart';
 import { SyncOnCommit } from 'src/components/sync-effects/sync-on-commit';
 import ChromaLayout from 'src/layouts/ChromaLayout';
 import { currentEventKeyAtom, displayIdAtom } from 'src/stores/NewRecoil';
-import Displays from './displays';
+import { DisplaySwitcher } from './displays';
 
 export const AudienceDisplay: FC = () => {
   const eventKey = useRecoilValue(currentEventKeyAtom);
@@ -29,7 +29,7 @@ export const AudienceDisplay: FC = () => {
         <SyncOnPrestart />
         <SyncOnCommit />
         <SyncDisplayToRecoil />
-        <Displays id={displayId} eventKey={eventKey} />
+        <DisplaySwitcher id={displayId} eventKey={eventKey} />
       </ChromaLayout>
     </Suspense>
   );

front-end/src/apps/audience-display/displays/ad-default.tsx

@@ -1,32 +1,35 @@
 import { FC } from 'react';
-import { DisplayProps } from 'src/apps/audience-display/displays';
-import { MatchPreview } from './seasons/frc_default/match-preview';
+import { DisplayModeProps } from 'src/apps/audience-display/displays';
 import { useRecoilValue } from 'recoil';
 import { matchOccurringAtom, matchOccurringRanksAtom } from 'src/stores/recoil';
 import { useEvent } from 'src/api/use-event-data';
 import { Displays } from '@toa-lib/models';
-import { MatchPlay } from './seasons/frc_default/match-play';
-import { MatchResults } from './seasons/frc_default/match-results';
+import { getDisplays } from './displays';
 
 /**
  * Classic audience display that handles all scenarios.
  */
-export const AudDisplayDefault: FC<DisplayProps> = ({ eventKey, id }) => {
-  // TODO - Is this how we want to handle the data flow?
-  // TODO - Get rankings for teams in the match
-  const { data: event } = useEvent(eventKey);
+export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
   const match = useRecoilValue(matchOccurringAtom);
   const ranks = useRecoilValue(matchOccurringRanksAtom);
-  if (!match || !event || !ranks) return null;
+  // Make sure you use the event key from the match to make sure we get the correct event, not
+  // the one loaded from the url.
+  const { data: event } = useEvent(match?.eventKey);
+  const displays = getDisplays(event?.seasonKey || '');
+  // TODO - Have better error handling here.
+  if (!match || !event || !ranks || !displays) return null;
   switch (id) {
     case Displays.BLANK:
-      return null;
     case Displays.MATCH_PREVIEW:
-      return <MatchPreview event={event} match={match} ranks={ranks} />;
+      return (
+        <displays.matchPreview event={event} match={match} ranks={ranks} />
+      );
     case Displays.MATCH_START:
-      return <MatchPlay match={match} />;
+      return <displays.matchPlay event={event} match={match} ranks={ranks} />;
     case Displays.MATCH_RESULTS:
-      return <MatchResults event={event} match={match} ranks={ranks} />;
+      return (
+        <displays.matchResults event={event} match={match} ranks={ranks} />
+      );
     default:
       return null;
   }

front-end/src/apps/audience-display/displays/ad-stream.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { DisplayProps } from 'src/apps/audience-display/displays';
+import { DisplayModeProps } from 'src/apps/audience-display/displays';
 
 /**
  * Timer audience display that displays only the match timer and nothing else.
  */
-export const AudDisplayStream: FC<DisplayProps> = () => {
+export const AudDisplayStream: FC<DisplayModeProps> = () => {
   return null;
 };

front-end/src/apps/audience-display/displays/ad-timer.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
-import { DisplayProps } from 'src/apps/audience-display/displays';
+import { DisplayModeProps } from 'src/apps/audience-display/displays';
 
 /**
  * Timer audience display that displays only the match timer and nothing else.
  */
-export const AudDisplayTimer: FC<DisplayProps> = () => {
+export const AudDisplayTimer: FC<DisplayModeProps> = () => {
   return null;
 };

front-end/src/apps/audience-display/displays/display-switcher.tsx

@@ -0,0 +1,33 @@
+import { DisplayModes } from '@toa-lib/models';
+import { FC } from 'react';
+import { AudDisplayDefault } from './ad-default';
+import { AudDisplayTimer } from './ad-timer';
+import { AudDisplayStream } from './ad-stream';
+
+export interface DisplayModeProps {
+  id: number;
+  eventKey: string | null | undefined;
+}
+
+interface Props {
+  id: number;
+  eventKey: string | null | undefined;
+  mode?: DisplayModes;
+}
+
+export const DisplaySwitcher: FC<Props> = ({
+  id,
+  mode = DisplayModes.DEFAULT,
+  eventKey
+}) => {
+  switch (mode) {
+    case DisplayModes.DEFAULT:
+      return <AudDisplayDefault id={id} eventKey={eventKey} />;
+    case DisplayModes.TIMER_ONLY:
+      return <AudDisplayTimer id={id} eventKey={eventKey} />;
+    case DisplayModes.STREAM:
+      return <AudDisplayStream id={id} eventKey={eventKey} />;
+    default:
+      return <AudDisplayDefault id={id} eventKey={eventKey} />;
+  }
+};

front-end/src/apps/audience-display/displays/displays.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { Event, Match, Ranking } from '@toa-lib/models';
+import * as FRCDefault from './seasons/frc_default';
+import * as FGCDefault from './seasons/fgc_default';
+
+export interface DisplayProps {
+  event: Event;
+  match: Match<any>;
+  ranks: Ranking[];
+}
+
+interface SeasonDisplay {
+  matchPreview: FC<DisplayProps>;
+  matchPlay: FC<DisplayProps>;
+  matchResults: FC<DisplayProps>;
+}
+
+export const frcDefault: SeasonDisplay = {
+  matchPlay: FRCDefault.MatchPlay,
+  matchPreview: FRCDefault.MatchPreview,
+  matchResults: FRCDefault.MatchResults
+};
+
+export const fgcDefault: SeasonDisplay = {
+  matchPlay: FGCDefault.MatchPlay,
+  matchPreview: FGCDefault.MatchPreview,
+  matchResults: FGCDefault.MatchResults
+};
+
+// Map that contains all the displays for their seasons.
+export const displayMap: Map<string, SeasonDisplay> = new Map();
+displayMap.set('frc_default', frcDefault);
+displayMap.set('fgc_default', fgcDefault);
+
+const getDefaultDisplay = (seasonKey: string): SeasonDisplay => {
+  const program = seasonKey.substring(0, 3);
+  if (program === 'frc') {
+    return frcDefault;
+  } else if (program === 'fgc') {
+    return fgcDefault;
+  }
+  return frcDefault;
+};
+
+export const getDisplays = (seasonKey: string): SeasonDisplay => {
+  const displays = displayMap.get(seasonKey);
+  return displays ? displays : getDefaultDisplay(seasonKey);
+};

front-end/src/apps/audience-display/displays/index.tsx

@@ -1,31 +1,5 @@
-import { DisplayModes } from '@toa-lib/models';
-import { FC } from 'react';
-import { AudDisplayDefault } from './ad-default';
-import { AudDisplayTimer } from './ad-timer';
-import { AudDisplayStream } from './ad-stream';
+import { DisplaySwitcher, DisplayModeProps } from './display-switcher';
+import { DisplayProps } from './displays';
 
-export interface DisplayProps {
-  id: number;
-  eventKey: string | null | undefined;
-}
-
-interface Props {
-  id: number;
-  eventKey: string | null | undefined;
-  mode?: DisplayModes;
-}
-
-const Displays: FC<Props> = ({ id, mode = DisplayModes.DEFAULT, eventKey }) => {
-  switch (mode) {
-    case DisplayModes.DEFAULT:
-      return <AudDisplayDefault id={id} eventKey={eventKey} />;
-    case DisplayModes.TIMER_ONLY:
-      return <AudDisplayTimer id={id} eventKey={eventKey} />;
-    case DisplayModes.STREAM:
-      return <AudDisplayStream id={id} eventKey={eventKey} />;
-    default:
-      return <AudDisplayDefault id={id} eventKey={eventKey} />;
-  }
-};
-
-export default Displays;
+export { DisplaySwitcher };
+export type { DisplayModeProps, DisplayProps };

front-end/src/apps/audience-display/displays/seasons/fgc_default/index.ts

@@ -0,0 +1,5 @@
+import { MatchPreview } from './match-preview';
+import { MatchPlay } from './match-play';
+import { MatchResults } from './match-results';
+
+export { MatchPreview, MatchPlay, MatchResults };

front-end/src/apps/audience-display/displays/seasons/fgc_default/match-play.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { DisplayProps } from '../../displays';
+
+export const MatchPlay: FC<DisplayProps> = () => {
+  return <div>FGC Match Play</div>;
+};

front-end/src/apps/audience-display/displays/seasons/fgc_default/match-preview.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { DisplayProps } from '../../displays';
+
+export const MatchPreview: FC<DisplayProps> = () => {
+  return <div>FGC Match Preview</div>;
+};

front-end/src/apps/audience-display/displays/seasons/fgc_default/match-results.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { DisplayProps } from '../../displays';
+
+export const MatchResults: FC<DisplayProps> = () => {
+  return <div>FGC Match Results</div>;
+};

front-end/src/apps/audience-display/displays/seasons/frc_default/index.ts

@@ -0,0 +1,5 @@
+import { MatchPlay } from './match-play';
+import { MatchPreview } from './match-preview';
+import { MatchResults } from './match-results';
+
+export { MatchPlay, MatchPreview, MatchResults };

front-end/src/apps/audience-display/displays/seasons/frc_default/match-play.tsx

@@ -5,7 +5,7 @@ import { MatchAlliancePlay } from './components/match-alliance-play';
 import { MatchBillboard } from './components/match-billboard';
 import { MatchTimer } from 'src/components/util/match-timer';
 import { SmartToyOutlined } from '@mui/icons-material';
-import { Match } from '@toa-lib/models';
+import { DisplayProps } from '../../displays';
 
 const Container = styled.div`
   position: absolute;
@@ -24,11 +24,7 @@ const ScoreText = styled.span`
   font-size: 3vh;
 `;
 
-interface Props {
-  match: Match<any>;
-}
-
-export const MatchPlay: FC<Props> = ({ match }) => {
+export const MatchPlay: FC<DisplayProps> = ({ match }) => {
   const { redScore, blueScore } = match;
   return (
     <Container>

front-end/src/apps/audience-display/displays/seasons/frc_default/match-preview.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { MatchInfoBar } from './components/match-info-bar';
 import { MatchBottomBar } from './components/match-bottom-bar';
 import { MatchAlliancePreview } from './components/match-alliance-preview';
-import { Event, Match, Ranking } from '@toa-lib/models';
+import { DisplayProps } from '../../displays';
 
 const Container = styled.div`
   display: grid;
@@ -25,13 +25,7 @@ const Content = styled.div`
   width: 100%;
 `;
 
-interface Props {
-  match: Match<any>;
-  event: Event;
-  ranks: Ranking[];
-}
-
-export const MatchPreview: FC<Props> = ({ event, match, ranks }) => {
+export const MatchPreview: FC<DisplayProps> = ({ event, match, ranks }) => {
   return (
     <Container>
       <MatchInfoBar title={match.name} />

front-end/src/apps/audience-display/displays/seasons/frc_default/match-results.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { MatchInfoBar } from './components/match-info-bar';
 import { MatchBottomBar } from './components/match-bottom-bar';
 import { MatchAllianceResult } from './components/match-alliance-result';
-import { Event, Match, Ranking } from '@toa-lib/models';
+import { DisplayProps } from '../../displays';
 
 const Container = styled.div`
   display: grid;
@@ -24,13 +24,7 @@ const Content = styled.div`
   position: relative;
 `;
 
-interface Props {
-  event: Event;
-  match: Match<any>;
-  ranks: Ranking[];
-}
-
-export const MatchResults: FC<Props> = ({ event, match, ranks }) => {
+export const MatchResults: FC<DisplayProps> = ({ event, match, ranks }) => {
   return (
     <Container>
       <MatchInfoBar title={match.name} />