Merge pull request #178 from the-orange-alliance/longer-more-persista…

…nt-results

Longer, more persistant results

front-end/package.json

@@ -13,6 +13,7 @@
     "@ebay/nice-modal-react": "^1.2.10",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.1.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/lab": "^5.0.0-alpha.137",
     "@mui/material": "^5.14.1",

front-end/src/api/events/display-event.ts

@@ -1,8 +1,23 @@
+import { Displays } from '@toa-lib/models';
 import { useRecoilCallback } from 'recoil';
-import { displayIdAtom } from 'src/stores/recoil';
+import {
+  displayIdAtom,
+  matchOccurringAtom,
+  matchOccurringRanksAtom,
+  matchResultsMatchAtom,
+  matchResultsRanksAtom
+} from 'src/stores/recoil';
 
 export const useDisplayEvent = () => {
-  return useRecoilCallback(({ set }) => async (id: number) => {
+  return useRecoilCallback(({ set, snapshot }) => async (id: number) => {
+    // For match result, we store the currentMatchAtom to matchResultsMatchAtom to avoid the results screen updating when the match is updated.
+    if (id === Displays.MATCH_RESULTS) {
+      const match = await snapshot.getPromise(matchOccurringAtom);
+      set(matchResultsMatchAtom, JSON.parse(JSON.stringify(match)));
+
+      const ranks = await snapshot.getPromise(matchOccurringRanksAtom);
+      set(matchResultsRanksAtom, JSON.parse(JSON.stringify(ranks)));
+    }
     set(displayIdAtom, id);
   });
 };

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

@@ -4,6 +4,8 @@ import { useRecoilValue } from 'recoil';
 import {
   matchOccurringAtom,
   matchOccurringRanksAtom,
+  matchResultsMatchAtom,
+  matchResultsRanksAtom,
   matchStateAtom
 } from 'src/stores/recoil';
 import { useEvent } from 'src/api/use-event-data';
@@ -28,7 +30,9 @@ import { useTeamsForEvent } from 'src/api/use-team-data';
  */
 export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
   const match = useRecoilValue(matchOccurringAtom);
+  const matchResultsMatch = useRecoilValue(matchResultsMatchAtom);
   const ranks = useRecoilValue(matchOccurringRanksAtom);
+  const matchResultsRanks = useRecoilValue(matchResultsRanksAtom);
   const matchState = useRecoilValue(matchStateAtom);
   const [searchParams] = useSearchParams();
 
@@ -86,7 +90,7 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
         return (
           <displays.matchPlayStream
             event={event}
-            match={match}
+            match={matchResultsMatch ?? match}
             ranks={ranks}
             teams={teams}
           />
@@ -95,7 +99,7 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
         return (
           <displays.matchResultsStream
             event={event}
-            match={match}
+            match={matchResultsMatch ?? match}
             ranks={ranks}
             teams={teams}
           />
@@ -111,6 +115,25 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
   const showPreviewFull =
     layout[0] === LayoutMode.FULL || layout[1] === LayoutMode.FULL;
 
+  // show the stream results during the preview
+  const showStreamResultsDuringPreview =
+    layout[2] === LayoutMode.STREAM &&
+    layout[0] === LayoutMode.RESULTS &&
+    id === Displays.MATCH_PREVIEW;
+
+  // show the full results during the preview
+  const showFullResultsDuringPreview =
+    layout[2] === LayoutMode.FULL &&
+    layout[0] === LayoutMode.RESULTS &&
+    id === Displays.MATCH_PREVIEW;
+
+  // force hide the preview if we are showing the results
+  const forceHidePreview =
+    showStreamResultsDuringPreview || showFullResultsDuringPreview;
+
+  const resultsToUse = !matchResultsMatch ? match : matchResultsMatch;
+  const ranksToUse = !matchResultsRanks ? ranks : matchResultsRanks;
+
   return (
     <>
       {/* Displays.BLANK (show nothing) */}
@@ -120,7 +143,11 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
       {showPreviewFull && (
         <AbsolouteLocator top={0} left={0}>
           <FadeInOut
-            in={id === Displays.MATCH_PREVIEW || afterMatchBeforeScore}
+            in={
+              // if we are showing the preview full and we are not showing the results
+              (id === Displays.MATCH_PREVIEW && !forceHidePreview) ||
+              afterMatchBeforeScore
+            }
             duration={0.5}
           >
             <displays.matchPreview
@@ -135,7 +162,7 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
       {layout[0] === LayoutMode.STREAM && (
         <AbsolouteLocator bottom={0} left={0}>
           <SlideInBottom
-            in={id === Displays.MATCH_PREVIEW}
+            in={id === Displays.MATCH_PREVIEW && !forceHidePreview}
             duration={1.25}
             inDelay={0.75}
           >
@@ -185,27 +212,29 @@ export const AudDisplayDefault: FC<DisplayModeProps> = ({ id }) => {
       {/* Displays.MATCH_RESULTS */}
       {layout[2] === LayoutMode.FULL && (
         <AbsolouteLocator top={0} left={0}>
-          <FadeInOut in={id === Displays.MATCH_RESULTS}>
+          <FadeInOut
+            in={id === Displays.MATCH_RESULTS || showFullResultsDuringPreview}
+          >
             <displays.matchResults
               event={event}
-              match={match}
-              ranks={ranks}
+              match={resultsToUse}
+              ranks={ranksToUse}
               teams={teams}
             />
           </FadeInOut>
         </AbsolouteLocator>
       )}
-      {layout[2] === LayoutMode.STREAM && (
+      {layout[2] === LayoutMode.STREAM && matchResultsMatch && (
         <AbsolouteLocator top={0} left={0}>
           <SlideInLeft
-            in={id === Displays.MATCH_RESULTS}
+            in={id === Displays.MATCH_RESULTS || showStreamResultsDuringPreview}
             duration={1.25}
             inDelay={0.75}
           >
             <displays.matchResultsStream
               event={event}
-              match={match}
-              ranks={ranks}
+              match={resultsToUse}
+              ranks={ranksToUse}
               teams={teams}
             />
           </SlideInLeft>

front-end/src/main.tsx

@@ -13,6 +13,10 @@ import { getFromLocalStorage } from './stores/local-storage';
 import { AppContainer } from './App';
 import { useCurrentEvent } from './api/use-event-data';
 import { CssBaseline } from '@mui/material';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 
 const container = document.getElementById('root');
 if (!container) throw new Error('Error while trying to find document root.');

front-end/src/stores/recoil/event-state.ts

@@ -53,6 +53,16 @@ export const matchOccurringAtom = atom<Match<any> | null>({
   default: null
 });
 
+// this "freezes" the match occuring atom when the display is set to results so it doesn't update anymore
+export const matchResultsMatchAtom = atom<Match<any> | null>({
+  key: 'eventState.matchResultsMatchAtom',
+  default: null
+});
+export const matchResultsRanksAtom = atom<Ranking[] | null>({
+  key: 'eventState.matchResultsRanksAtom',
+  default: null
+});
+
 export const matchOccurringRanksAtom = atom<Ranking[] | null>({
   key: 'eventState.matchOccurringRanksAtom',
   default: null

lib/models/src/base/Audience.ts

@@ -26,5 +26,6 @@ export enum AudienceScreens {
 export enum LayoutMode {
   OFF = 'o',
   STREAM = 's',
-  FULL = 'f'
+  FULL = 'f',
+  RESULTS = 'r'
 }