Merge pull request #161 from the-orange-alliance/soren-day0-updates

Day 0 Updates

back-end/realtime/src/Server.ts

@@ -84,6 +84,13 @@ io.on("connection", (socket) => {
     socketToIdentify?.emit("identify-client", data);
   });
 
+  socket.on("refresh-client", async (data: any) => {
+    // Find socket
+    const socketToIdentify = io.sockets.sockets.get(data.lastSocketId);
+    // Emit message
+    socketToIdentify?.emit("refresh-client", data);
+  });
+
   socket.on("identify-all-clients", async (data) => {
     try {
       // Get all devices from api

front-end/src/api/use-socket.ts

@@ -13,6 +13,7 @@ import {
 import { useSnackbar } from 'src/hooks/use-snackbar';
 import { connectSocketClient } from './use-socket-data';
 import { v4 as uuidv4 } from 'uuid';
+import { useRef } from 'react';
 
 let socket: Socket | null = null;
 
@@ -31,6 +32,7 @@ export const useSocket = (): [
 ] => {
   const [connected, setConnected] = useRecoilState(socketConnectedAtom);
   const { showSnackbar } = useSnackbar();
+  const idMsgRef = useRef<any>({});
 
   const setupSocket = (token: string) => {
     if (socket) return;
@@ -59,7 +61,7 @@ export const useSocket = (): [
         localStorage.setItem('persistantClientId', persistantClientId);
       }
 
-      const idMsg: any = {
+      idMsgRef.current = {
         currentUrl: window.location.href,
         fieldNumbers: fields.map((d: any) => d.field).join(','),
         followerMode: followerModeEnabled ? 1 : 0,
@@ -68,7 +70,7 @@ export const useSocket = (): [
       };
 
       if (persistantClientId) {
-        idMsg.persistantClientId = persistantClientId;
+        idMsgRef.current.persistantClientId = persistantClientId;
       }
 
       socket.on('settings', (data) => {
@@ -88,6 +90,7 @@ export const useSocket = (): [
 
       socket.on('identify-response', (data) => {
         connectSocketClient(data);
+        idMsgRef.current = data;
         localStorage.setItem('persistantClientId', data.persistantClientId);
       });
 
@@ -100,17 +103,33 @@ export const useSocket = (): [
         );
       });
 
-      socket.emit('identify', idMsg);
+      socket.on('refresh-client', () => {
+        window.location.reload();
+      });
+
+      socket.io.on('reconnect', (a) => {
+        console.log(`Reconnected after ${a} attempts`);
+        idMsgRef.current = {
+          currentUrl: window.location.href,
+          fieldNumbers: fields.map((d: any) => d.field).join(','),
+          followerMode: followerModeEnabled ? 1 : 0,
+          followerApiHost: leaderApiHost,
+          audienceDisplayChroma: (chromaKey ?? '').replaceAll('"', '')
+        };
+        socket?.emit('identify', idMsgRef.current);
+      });
+
+      socket.emit('identify', idMsgRef.current);
     }
     // set(currentTournamentFieldsAtom, [])
   });
 
   const initEvents = () => {
     if (socket) {
-      socket.emit('rooms', ['match', 'fcs', 'frc-fms']);
       socket.on('connect', () => {
         setConnected(true);
         console.log('CONNECTED');
+        socket?.emit('rooms', ['match', 'fcs', 'frc-fms']);
       });
       socket.on('disconnect', (reason) => {
         console.log('DISCONNECT', reason);
@@ -177,6 +196,10 @@ export async function requestClientIdentification(data: any): Promise<void> {
   socket?.emit('identify-client', data);
 }
 
+export async function requestClientRefresh(data: any): Promise<void> {
+  socket?.emit('refresh-client', data);
+}
+
 export async function requestAllClientsIdentification(data: {
   clients: any[];
 }): Promise<void> {

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

@@ -24,9 +24,11 @@ import {
 import {
   requestAllClientsIdentification,
   requestClientIdentification,
+  requestClientRefresh,
   sendUpdateSocketClient
 } from 'src/api/use-socket';
 import {
+  Cached,
   ChevronLeft,
   Delete,
   Refresh,
@@ -88,6 +90,10 @@ export const AudienceDisplayManager: FC = () => {
     requestClientIdentification(data);
   };
 
+  const requestClientToRefresh = (data: any) => {
+    requestClientRefresh(data);
+  };
+
   const deleteDevice = (id: string) => {
     deleteSocketClient(id);
     const cpy = [...clients];
@@ -145,6 +151,7 @@ export const AudienceDisplayManager: FC = () => {
               <TableCell>Field Numbers</TableCell>
               <TableCell>Follower Mode Enabled</TableCell>
               <TableCell>Identify</TableCell>
+              <TableCell>Force Reload</TableCell>
               <TableCell>Delete</TableCell>
             </TableRow>
           </TableHead>
@@ -174,6 +181,16 @@ export const AudienceDisplayManager: FC = () => {
                     <RemoveRedEye />
                   </IconButton>
                 </TableCell>
+                <TableCell>
+                  <IconButton
+                    onClick={(e) => {
+                      requestClientRefresh(client);
+                      e.stopPropagation();
+                    }}
+                  >
+                    <Cached />
+                  </IconButton>
+                </TableCell>
                 <TableCell>
                   <IconButton
                     onClick={(e) => {

front-end/src/apps/audience-display/displays/seasons/fgc_default/components/breakdown-row.tsx

@@ -17,6 +17,11 @@ const RowContainer = styled(Grid)((props: { color: string }) => ({
   color: props.color
 }));
 
+const RowItem = styled(Grid)(() => ({
+  display: 'flex',
+  alignItems: 'center'
+}));
+
 const BreakdownRow = ({ breakdown: b, match, alliance }: BreakdownRowProps) => {
   return (
     <RowContainer
@@ -25,20 +30,33 @@ const BreakdownRow = ({ breakdown: b, match, alliance }: BreakdownRowProps) => {
       sx={{ height: '100%' }}
       color={b.color}
     >
-      <Grid item xs={1.5} sx={{ textAlign: 'center' }} alignContent={'center'}>
+      <RowItem
+        item
+        xs={1.5}
+        sx={{
+          textAlign: 'center',
+          justifyContent: 'center'
+        }}
+      >
         {b.icon}
-      </Grid>
-      <Grid
+      </RowItem>
+      <RowItem
         item
         xs={7.5}
-        sx={{ borderRight: '.2em solid #00000060', textTransform: 'uppercase' }}
-        alignContent={'center'}
+        sx={{
+          borderRight: '.2em solid #00000060',
+          textTransform: 'uppercase'
+        }}
       >
         {b.title}
-      </Grid>
-      <Grid item xs={3} alignContent={'center'} sx={{ textAlign: 'center' }}>
+      </RowItem>
+      <RowItem
+        item
+        xs={3}
+        sx={{ textAlign: 'center', justifyContent: 'center' }}
+      >
         {b.resultCalc(match, alliance)}
-      </Grid>
+      </RowItem>
     </RowContainer>
   );
 };

front-end/src/apps/audience-display/displays/seasons/fgc_default/components/card-status.tsx

@@ -1,7 +1,9 @@
 import { FC, useMemo } from 'react';
 import YELLOW_CARD from '../assets/penalty-yellow-card.png';
 import RED_CARD from '../assets/penalty-red-card.png';
+import WHITE_CARD from '../assets/penalty-white-card.png';
 import styled from '@emotion/styled';
+import { FeedingTheFuture } from '@toa-lib/models';
 
 const Image = styled.img`
   max-height: 100%;
@@ -11,12 +13,12 @@ const Image = styled.img`
 export const CardStatus: FC<{ cardStatus: number }> = ({ cardStatus }) => {
   const img = useMemo(() => {
     switch (cardStatus) {
-      case 0:
-        return '';
-      case 1:
+      case FeedingTheFuture.CardStatus.YELLOW_CARD:
         return YELLOW_CARD;
-      case 2:
+      case FeedingTheFuture.CardStatus.RED_CARD:
         return RED_CARD;
+      case FeedingTheFuture.CardStatus.WHITE_CARD:
+        return WHITE_CARD;
       default:
         return '';
     }

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

@@ -79,7 +79,7 @@ const ScoreContainer = styled.div((props: { alliance: Alliance }) => ({
   lineHeight: '5vh'
 }));
 
-export const MatchPlay: FC<DisplayProps> = ({ match }) => {
+export const MatchPlay: FC<DisplayProps> = ({ match, teams }) => {
   return (
     <BGImage>
       <Container spacing={5}>
@@ -93,13 +93,15 @@ export const MatchPlay: FC<DisplayProps> = ({ match }) => {
           <AlliancePlay
             alliance='red'
             participants={match.participants ?? []}
+            teams={teams}
             fullHeight
           />
           <ScoreContainer alliance='red'>{match.redScore}</ScoreContainer>
           <ScoreContainer alliance='blue'>{match.blueScore}</ScoreContainer>
           <AlliancePlay
             alliance='blue'
             participants={match.participants ?? []}
+            teams={teams}
             invert
             fullHeight
           />

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

@@ -13,13 +13,27 @@ const ScaledDiv = styled.div`
   margin-left: 1em;
 `;
 
-export const MatchResultsStream: FC<DisplayProps> = ({ match, ranks }) => {
+export const MatchResultsStream: FC<DisplayProps> = ({
+  match,
+  ranks,
+  teams
+}) => {
   return (
     <ScaledDiv>
       <Stack sx={{ width: '30vw' }} spacing={5}>
         <MatchTitle match={match} noMargin />
-        <AllianceResult alliance='red' match={match} ranks={ranks} />
-        <AllianceResult alliance='blue' match={match} ranks={ranks} />
+        <AllianceResult
+          alliance='red'
+          match={match}
+          ranks={ranks}
+          teams={teams}
+        />
+        <AllianceResult
+          alliance='blue'
+          match={match}
+          ranks={ranks}
+          teams={teams}
+        />
       </Stack>
     </ScaledDiv>
   );

front-end/src/components/inputs/number-input.tsx

@@ -50,6 +50,7 @@ export const NumberInput: FC<Props> = ({
         value={value}
         type='number'
         disabled={disabled || textFieldDisabled}
+        sx={{ minWidth: '75px' }}
       />
       <Button variant='contained' onClick={increment} disabled={disabled}>
         +

front-end/src/layouts/chroma-layout.tsx

@@ -1,21 +1,45 @@
 import { FC, ReactNode } from 'react';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useRecoilValue } from 'recoil';
-import { displayChromaKeyAtom } from 'src/stores/recoil';
+import { displayChromaKeyAtom, socketConnectedAtom } from 'src/stores/recoil';
 
 interface Props {
   children?: ReactNode;
 }
 
 export const ChromaLayout: FC<Props> = ({ children }) => {
   const chromaKey = useRecoilValue(displayChromaKeyAtom);
+  const connected = useRecoilValue(socketConnectedAtom);
   return (
     <Box>
+      {!connected && (
+        <Typography
+          variant='h5'
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            textAlign: 'center',
+            color: 'black',
+            fontWeight: 'bold',
+            '-webkit-text-stroke': '.5px white'
+          }}
+        >
+          Socket Not Connected!
+        </Typography>
+      )}
       {/* because mui is dumb */}
       <style>
         {`
           body {
-            background: ${chromaKey}
+            background: ${
+              chromaKey
+                ? chromaKey.startsWith('#')
+                  ? chromaKey
+                  : `#${chromaKey}`
+                : '#00000000'
+            };
           }
         `}
       </style>