Muti queue updates

.env.example

@@ -1,8 +1,8 @@
 # You can update this to suit your local development environment. Match info should be hosted by a different server
 # since the dev server isn't keen to do it itself
-PREACT_APP_RTDB_URL=https://your-rtdb-instance.firebaseio.com/
-PREACT_APP_FIRE_KEY=your-key
-PREACT_APP_FIRE_PROJ=your-project
-PREACT_APP_FIRE_APPID=your-app-id
-PREACT_APP_FIRE_MEASUREID=your-analytics-id
-PREACT_APP_SIGNALR_SERVER=https://fim-admin.evandoes.dev # or remove
+APP_RTDB_URL=https://your-rtdb-instance.firebaseio.com/
+APP_FIRE_KEY=your-key
+APP_FIRE_PROJ=your-project
+APP_FIRE_APPID=your-app-id
+APP_FIRE_MEASUREID=your-analytics-id
+APP_SIGNALR_SERVER=https://fim-admin.evandoes.dev # or remove

.eslintrc.js

@@ -3,25 +3,16 @@ module.exports = {
   env: {
     es6: true,
   },
-  extends: [
-    'airbnb',
-    'airbnb-typescript',
-  ],
+  extends: ['airbnb', 'airbnb-typescript'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: ['tsconfig.eslint.json'],
     sourceType: 'module',
   },
-  ignorePatterns: [
-    '/functions/lib/**/*',
-    '/build/**/*',
-    '**/node_modules',
-  ],
-  plugins: [
-    '@typescript-eslint',
-    'import',
-  ],
+  ignorePatterns: ['/functions/lib/**/*', '/build/**/*', '**/node_modules'],
+  plugins: ['@typescript-eslint', 'import'],
   rules: {
+    'linebreak-style': 'off',
     'no-console': 'off',
     'import/extensions': [
       'error',

package.json

@@ -7,9 +7,11 @@
     "build": "vite build",
     "serve": "sirv build --port 8080 --cors --single",
     "dev": "vite",
-    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}' './functions/src/**/*.{js,ts}'"
+    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}' './functions/src/**/*.{js,ts}'",
+    "lint-win": "eslint src/ functions/"
   },
   "dependencies": {
+    "@gmurph91/react-textfit": "^1.1.4",
     "@microsoft/signalr": "^7.0.7",
     "@preact/preset-vite": "^2.5.0",
     "@react-spring/web": "^9.7.3",
@@ -31,6 +33,7 @@
     "@types/color": "^3.0.3",
     "@types/js-cookie": "^3.0.3",
     "@types/react": "^18.2.14",
+    "@types/react-textfit": "^1.1.4",
     "@types/styled-components": "^5.1.26",
     "babel-plugin-module-resolver": "^5.0.0",
     "dotenv-webpack": "^7.1.0",

shared/DbTypes.ts

@@ -1,49 +1,65 @@
 import { BracketMatchNumber } from './DoubleEliminationBracketMapping';
 
-export type EventState = 'Pending' | 'AwaitingQualSchedule' | 'QualsInProgress'
-| 'AwaitingAlliances' | 'PlayoffsInProgress' | 'EventOver';
+export type EventState =
+  | 'Pending'
+  | 'AwaitingQualSchedule'
+  | 'QualsInProgress'
+  | 'AwaitingAlliances'
+  | 'PlayoffsInProgress'
+  | 'EventOver';
 
 export type AppMode = 'automatic' | 'assisted';
 
 export type Event = {
   // TODO: temporary
-  dataSource?: string,
-  start: string,
-  end: string,
-  name: string,
-  eventCode: string,
-  currentMatchNumber: number | null,
-  playoffMatchNumber: BracketMatchNumber | null
+  dataSource?: string;
+  start: string;
+  end: string;
+  name: string;
+  nameShort?: string;
+  eventCode: string;
+  currentMatchNumber: number | null;
+  playoffMatchNumber: BracketMatchNumber | null;
   streamEmbedLink?: string;
-  numQualMatches: number | null,
-  mode: AppMode,
-  state: EventState,
+  numQualMatches: number | null;
+  mode: AppMode;
+  state: EventState;
   /**
    * The timestamp of the most recent data we have from the FRC API, in ms since
    * the Unix epoch. This number will only ever stay the same or get bigger
    */
-  lastModifiedMs: number | null,
+  lastModifiedMs: number | null;
+  message?: string;
   options: {
-    showRankings: boolean,
-    showEventName: boolean,
-    maxQueueingToShow?: number,
-  },
-  sponsorLogoUrl?: string,
+    showRankings: boolean;
+    showEventName: boolean;
+    maxQueueingToShow?: number;
+  };
+  branding?: {
+    logo: string;
+    bgColor: string;
+    textColor: string;
+  };
 };
 
-export type DriverStation = 'Red1' | 'Red2' | 'Red3' | 'Blue1' | 'Blue2'
-| 'Blue3';
+export type DriverStation =
+  | 'Red1'
+  | 'Red2'
+  | 'Red3'
+  | 'Blue1'
+  | 'Blue2'
+  | 'Blue3';
 
 export type PlayoffMatch = {
-  winner: 'red' | 'blue' | null,
-  participants: Record<DriverStation, number>,
-  redAlliance: number | null,
-  blueAlliance: number | null
+  winner: 'red' | 'blue' | null;
+  participants: Record<DriverStation, number>;
+  redAlliance: number | null;
+  blueAlliance: number | null;
 };
 
 export type QualMatch = {
-  number: number,
-  participants: Record<DriverStation, number>,
+  number: number;
+  participants: Record<DriverStation, number>;
 };
 
 export type Break = {

src/components/MultiDisplay/EventRow/AllianceFader/index.tsx

@@ -0,0 +1,33 @@
+import { h } from 'preact';
+import styles from './styles.module.scss';
+
+const AllianceFader = ({
+  red,
+  blue,
+  showLine,
+}: {
+  red: string;
+  blue: string;
+  showLine: 0 | 1;
+}) => (
+  <div className={styles.faderBase}>
+    <div
+      className={styles.red}
+      style={{
+        opacity: showLine ? 0 : 1,
+      }}
+    >
+      R: {red}
+    </div>
+    <div
+      className={styles.blue}
+      style={{
+        opacity: showLine,
+      }}
+    >
+      B: {blue}
+    </div>
+  </div>
+);
+
+export default AllianceFader;

src/components/MultiDisplay/EventRow/AllianceFader/styles.module.scss

@@ -0,0 +1,29 @@
+
+$teamlist-size: 5.5vh;
+
+.faderBase {
+
+    display: flex;
+    flex-direction: column;
+    // Center items
+    justify-content: center;
+    align-items: center;
+
+    &> div {
+        position: absolute;
+        transition: all ease .5s;
+        text-align: center;
+        width: 30vw;
+        font-weight: bold;
+        border-radius: 1em;
+        font-size: $teamlist-size;
+    }
+}
+
+.red {
+    background: rgba(255, 0, 0, .5);
+}
+
+.blue {
+    background: rgba(84, 84, 255, .5);
+}

src/components/MultiDisplay/EventRow/MessageRow/index.tsx

@@ -0,0 +1,56 @@
+import { h } from 'preact';
+import { Event } from '@shared/DbTypes';
+// @ts-ignore
+import { Textfit } from '@gmurph91/react-textfit';
+import styles from './styles.module.scss';
+
+const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 }) => (
+  <div
+    className={styles.messageContainer}
+    style={event.message ? { left: 0 } : {}}
+  >
+    <div
+      className={styles.messageMover}
+      style={{
+        color: event.branding?.textColor,
+        backgroundColor: event.branding?.bgColor,
+      }}
+    >
+      {/* Logo/Event Name Short Fader */}
+      <div className={styles.faderContainer}>
+        {/* Logo */}
+        <div style={{ opacity: !event.branding?.logo ? 0 : showLine }}>
+          <img
+            src={event.branding?.logo}
+            alt={event.name}
+            className={styles.sponsorLogo}
+          />
+        </div>
+        {/* Text */}
+        <span
+          className={`${styles.textCenter} ${styles.bold}`}
+          // eslint-disable-next-line no-nested-ternary
+          style={{ opacity: !event.branding?.logo ? 1 : showLine ? 0 : 1 }}
+        >
+          <Textfit
+            mode="single"
+            forceSingleModeWidth={false}
+            max="300"
+            style={{ height: '22vh', width: '25vw' }}
+          >
+            {event.nameShort || event.name}
+          </Textfit>
+        </span>
+      </div>
+
+      {/* Message */}
+      <span className={styles.messageText}>
+        <Textfit mode="single" forceSingleModeWidth max="300">
+          {event.message || event.name}
+        </Textfit>
+      </span>
+    </div>
+  </div>
+);
+
+export default MessageRow;