Skip to content

Add option to remove team numbers from multiqueue #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NixFey merged 2 commits into from
Apr 1, 2025
Merged

Add option to remove team numbers from multiqueue #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cef8a1
Add option to remove team numbers from multiqueue
NixFey Apr 1, 2025
9267f6b
linting
NixFey Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Overlay/LowerThird.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions src/components/MultiDisplay/EventRow/MessageRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } : {}}
Expand All @@ -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}
Expand All @@ -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"
Expand Down
10 changes: 5 additions & 5 deletions src/components/MultiDisplay/EventRow/PlayoffRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const PlayoffRow = ({
token,
}: {
event: Event;
showLine: 0 | 1;
showLine: 0 | 1 | null;
season: string;
token: string;
}) => {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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)}
Expand All @@ -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)}
Expand All @@ -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)}
Expand Down
52 changes: 29 additions & 23 deletions src/components/MultiDisplay/EventRow/QualRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const QualRow = ({
token,
}: {
event: Event;
showLine: 0 | 1;
showLine: 0 | 1 | null;
season: string;
token: string;
}) => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
)}

Expand All @@ -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>
);
}
Expand All @@ -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>
)}

Expand Down
2 changes: 1 addition & 1 deletion src/components/MultiDisplay/EventRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand Down
5 changes: 5 additions & 0 deletions src/components/MultiDisplay/EventRow/sharedStyles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
18 changes: 10 additions & 8 deletions src/components/MultiDisplay/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>
Expand Down