Add option to remove team numbers from multiqueue (#67)

* Add option to remove team numbers from multiqueue

* linting

Author: NixFey

src/Overlay/LowerThird.tsx

@@ -92,9 +92,9 @@ function LowerThird({
       !!displayedInfo
       && cgConfig.showLowerThird
       && (
-        (!!displayedInfo.title && !!displayedInfo.title.match(/\S/)) 
+        (!!displayedInfo.title && !!displayedInfo.title.match(/\S/))
         || (!!displayedInfo.subtitle && !!displayedInfo.subtitle.match(/\S/))
-      )
+      ),
     );
   }, [
     cgConfig?.showLowerThird,

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

@@ -4,7 +4,7 @@ import { Event } from '@shared/DbTypes';
 import { Textfit } from '@gmurph91/react-textfit';
 import styles from './styles.module.scss';
 
-const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 }) => (
+const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 | null }) => (
   <div
     className={styles.messageContainer}
     style={event.message ? { left: 0 } : {}}
@@ -19,7 +19,7 @@ const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 }) => (
       {/* Logo/Event Name Short Fader */}
       <div className={styles.faderContainer}>
         {/* Logo */}
-        <div style={{ opacity: !event.branding?.logo ? 0 : showLine }}>
+        <div style={{ opacity: showLine !== null && !event.branding?.logo ? 0 : showLine }}>
           <img
             src={event.branding?.logo}
             alt={event.name}
@@ -30,7 +30,7 @@ const MessageRow = ({ event, showLine }: { event: Event; showLine: 0 | 1 }) => (
         <span
           className={`${styles.textCenter} ${styles.bold}`}
           // eslint-disable-next-line no-nested-ternary
-          style={{ opacity: !event.branding?.logo ? 1 : showLine ? 0 : 1 }}
+          style={{ opacity: (showLine === null || !event.branding?.logo) ? 1 : showLine ? 0 : 1 }}
         >
           <Textfit
             mode="single"

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

@@ -29,7 +29,7 @@ const PlayoffRow = ({
   token,
 }: {
   event: Event;
-  showLine: 0 | 1;
+  showLine: 0 | 1 | null;
   season: string;
   token: string;
 }) => {
@@ -114,7 +114,7 @@ const PlayoffRow = ({
     // Make a new array of max queuing matches to display
     const maxQ = typeof e.options?.maxQueueingToShow === 'number'
       ? e.options?.maxQueueingToShow
-      : 3;
+      : 1;
 
     const toFill = new Array(maxQ).fill(null);
     toFill.forEach((_, i) => {
@@ -237,7 +237,7 @@ const PlayoffRow = ({
                   {getDisplayText(nextMatch)}
                 </span>
                 <span className={styles.nextMatchScroll}>
-                  {nextMatch?.match && (
+                  {nextMatch?.match && showLine !== null && (
                     <AllianceFader
                       red={getGenericText(nextMatch?.match?.participants?.red)}
                       blue={getGenericText(nextMatch?.match?.participants?.blue)}
@@ -258,7 +258,7 @@ const PlayoffRow = ({
                   <span className={styles.bold} style={{ fontSize: !x?.match ? '7vw' : undefined }}>
                     {getDisplayText(x)}
                   </span>
-                  {x?.match && (
+                  {x?.match && showLine !== null && (
                     <AllianceFader
                       red={getGenericText(x?.match?.participants?.red)}
                       blue={getGenericText(x?.match?.participants?.blue)}
@@ -277,7 +277,7 @@ const PlayoffRow = ({
                       {getDisplayText(queueingMatches[0])}
                     </span>
                     <span>
-                      {queueingMatches[0]?.match && (
+                      {queueingMatches[0]?.match && showLine !== null && (
                         <AllianceFader
                           red={getGenericText(queueingMatches[0]?.match?.participants?.red)}
                           blue={getGenericText(queueingMatches[0]?.match?.participants?.blue)}

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

@@ -24,7 +24,7 @@ const QualRow = ({
   token,
 }: {
   event: Event;
-  showLine: 0 | 1;
+  showLine: 0 | 1 | null;
   season: string;
   token: string;
 }) => {
@@ -90,7 +90,7 @@ const QualRow = ({
       // Make a new array of max queuing matches to display
       const maxQ = typeof e.options?.maxQueueingToShow === 'number'
         ? e.options?.maxQueueingToShow
-        : 3;
+        : 1;
       const toFill = new Array(maxQ).fill(null);
       toFill.forEach((_, i) => {
         toFill[i] = i + 2;
@@ -250,13 +250,15 @@ const QualRow = ({
                 <span className={styles.matchNumber}>
                   {(nextMatch as QualMatch)?.number}
                 </span>
-                <span className={styles.nextMatchScroll}>
-                  <AllianceFader
-                    red={getRedStr(nextMatch as QualMatch)}
-                    blue={getBlueStr(nextMatch as QualMatch)}
-                    showLine={showLine}
-                  />
-                </span>
+                {showLine !== null ? (
+                  <span className={styles.nextMatchScroll}>
+                    <AllianceFader
+                      red={getRedStr(nextMatch as QualMatch)}
+                      blue={getBlueStr(nextMatch as QualMatch)}
+                      showLine={showLine}
+                    />
+                  </span>
+                ) : <></>}
               </Fragment>
             )}
 
@@ -277,13 +279,15 @@ const QualRow = ({
                   return (
                     <div className={styles.flexRow}>
                       <span className={styles.queueingMatchNumber}>{match.number} -</span>
-                      <div style={{ marginLeft: '16vw', position: 'relative', top: '4vh' }}>
-                        <AllianceFader
-                          red={getRedStr(match)}
-                          blue={getBlueStr(match)}
-                          showLine={showLine}
-                        />
-                      </div>
+                      {showLine !== null && (
+                        <div style={{ marginLeft: '16vw', position: 'relative', top: '4vh' }}>
+                          <AllianceFader
+                            red={getRedStr(match)}
+                            blue={getBlueStr(match)}
+                            showLine={showLine}
+                          />
+                        </div>
+                      )}
                     </div>
                   );
                 }
@@ -305,13 +309,15 @@ const QualRow = ({
                       <span className={styles.matchNumber}>
                         {(queueingMatches[0] as QualMatch)?.number}
                       </span>
-                      <span>
-                        <AllianceFader
-                          red={getRedStr(queueingMatches[0] as QualMatch)}
-                          blue={getBlueStr(queueingMatches[0] as QualMatch)}
-                          showLine={showLine}
-                        />
-                      </span>
+                      {showLine !== null && (
+                        <span>
+                          <AllianceFader
+                            red={getRedStr(queueingMatches[0] as QualMatch)}
+                            blue={getBlueStr(queueingMatches[0] as QualMatch)}
+                            showLine={showLine}
+                          />
+                        </span>
+                      )}
                     </Fragment>
                 )}
 

src/components/MultiDisplay/EventRow/index.tsx

@@ -19,7 +19,7 @@ const EventRow = ({
 }: {
   token: string;
   season: string;
-  showLine: 0 | 1;
+  showLine: 0 | 1 | null;
 }) => {
   // Ref to the event in the database
   const dbEventRef = useRef<DatabaseReference>();

src/components/MultiDisplay/EventRow/sharedStyles.module.scss

@@ -18,6 +18,11 @@ $cell-vertical-negative: -3vh;
     line-height: 0.8;
 }
 
+.noTeamNumbers .matchNumber {
+  top: 0;
+  font-size: calc($matchnumber-size * 0.9);
+}
+
 .flexRow {
     display: flex;
     flex-direction: row;

src/components/MultiDisplay/index.tsx

@@ -2,11 +2,13 @@ import { h, Fragment } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import EventRow from './EventRow';
 import styles from './styles.module.scss';
+import sharedStyles from './EventRow/sharedStyles.module.scss';
 
 const MultiQueueing = () => {
   const searchParams = new URLSearchParams(window.location.search);
   const events = searchParams.getAll('e');
   const season = searchParams.get('s') ?? new Date().getFullYear().toString();
+  const showTeamNumbers = searchParams.get('teamNumbers') !== 'false';
 
   const calcClock = (): string => {
     const now = new Date();
@@ -18,29 +20,29 @@ const MultiQueueing = () => {
     return str;
   };
 
-  const [showLine, setShowLine] = useState<0 | 1>(0);
+  const [showLine, setShowLine] = useState<0 | 1 | null>(showTeamNumbers ? 0 : null);
   const [clock, setClock] = useState<string>(calcClock());
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setShowLine((sl: 0 | 1) => (sl === 0 ? 1 : 0));
-    }, 5000);
+    const interval = showTeamNumbers ? setInterval(() => {
+      setShowLine((sl: 0 | 1 | null) => (sl === 0 ? 1 : 0));
+    }, 5000) : null;
 
     const clockInterval = setInterval(() => setClock(calcClock()), 10000);
     calcClock();
 
     return () => {
-      clearInterval(interval);
+      if (interval) clearInterval(interval);
       clearInterval(clockInterval);
     };
-  }, []);
+  }, [showTeamNumbers]);
 
   return (
-    <div className={styles.container}>
+    <div className={[styles.container, showLine === null ? sharedStyles.noTeamNumbers : null].filter((c) => c).join(' ')}>
       <table>
         <thead>
           <tr style={{ textAlign: 'center', fontSize: '7vh' }}>
-            <th style={{ width: '18vw' }}>{clock}</th>
+            <th style={{ width: '18vw', borderRight: '6px solid white' }}>{clock}</th>
             <th style={{ width: '18vw' }}>On Field</th>
             <th style={{ width: '32vw' }}>Up Next</th>
             <th style={{ width: '38vw' }}>Queueing</th>