Add alliance text

front-end/src/api/use-alliance-data.ts

@@ -14,6 +14,15 @@ export const useAllianceMembers = (
     { revalidateOnFocus: false }
   );
 
+export const useAllianceMember = (
+  eventKey: string,
+  tournamentKey: string | null | undefined,
+  teamKey: number
+): AllianceMember | undefined => {
+  const { data: members } = useAllianceMembers(eventKey, tournamentKey);
+  return members?.find((m) => m.teamKey === teamKey);
+};
+
 export const postAllianceMembers = (
   eventKey: string,
   members: AllianceMember[]

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

@@ -8,6 +8,7 @@ import {
 import { FC, useMemo } from 'react';
 import { CountryFlag } from './country-flag';
 import { CardStatus } from './card-status';
+import { useAllianceMember } from 'src/api/use-alliance-data';
 
 const Container = styled.div((props: { alliance: Alliance }) => ({
   backgroundColor: props.alliance === 'red' ? '#ce2000' : '#5c88ff',
@@ -29,6 +30,18 @@ const TeamContainer = styled.div`
   line-height: 0.5;
 `;
 
+const AllianceText = styled.div((props: { invert?: boolean }) => ({
+  width: '100%',
+  color: '#ffffff',
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: !props.invert ? 'row-reverse' : 'row',
+  fontWeight: 'bold',
+  fontSize: '1.75vh',
+  gap: '0.5em',
+  padding: '0 0.5em',
+  lineHeight: '0.5'
+}));
 const TeamText = styled.div`
   width: 4vw;
 `;
@@ -82,6 +95,12 @@ export const AlliancePlay: FC<Props> = ({
   const allianceParticipants = participants.filter((p) =>
     alliance === 'red' ? p.station < BLUE_STATION : p.station >= BLUE_STATION
   );
+  const [firstTeam] = allianceParticipants;
+  const firstTeamAlliance = useAllianceMember(
+    firstTeam.eventKey,
+    firstTeam.tournamentKey,
+    firstTeam.teamKey
+  );
   const teamsRecord = useMemo(
     () => (teams ? Object.fromEntries(teams.map((t) => [t.teamKey, t])) : {}),
     [teams]
@@ -116,6 +135,11 @@ export const AlliancePlay: FC<Props> = ({
           />
         );
       })}
+      {firstTeamAlliance && (
+        <AllianceText invert={invert}>
+          {firstTeamAlliance.allianceNameLong}
+        </AllianceText>
+      )}
     </Container>
   );
 };

front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-preview.tsx

@@ -10,6 +10,8 @@ import {
   Team
 } from '@toa-lib/models';
 import { CountryFlag } from './country-flag';
+import { Typography } from '@mui/material';
+import { useAllianceMember } from 'src/api/use-alliance-data';
 
 const Container = styled.div`
   width: 100%;
@@ -51,6 +53,15 @@ const RankText = styled.div`
   margin-left: auto;
 `;
 
+const AllianceText = styled.div((props: { small?: boolean }) => ({
+  position: 'relative',
+  width: 0,
+  top: '40%',
+  left: props.small ? '-6vw' : '-7vw',
+  textAlign: 'center',
+  color: 'white'
+}));
+
 interface AllianceTeamProps {
   team: Team;
   rank?: Ranking;
@@ -71,19 +82,35 @@ interface Props {
   alliance: Alliance;
   participants: MatchParticipant[];
   ranks: Ranking[];
+  small?: boolean;
 }
 
 export const AlliancePreview: FC<Props> = ({
   alliance,
   participants,
-  ranks
+  ranks,
+  small
 }) => {
   const allianceParticipants = participants.filter((p) =>
     alliance === 'red' ? p.station < BLUE_STATION : p.station >= BLUE_STATION
   );
+  const [firstTeam] = allianceParticipants;
+  const firstTeamAlliance = useAllianceMember(
+    firstTeam.eventKey,
+    firstTeam.tournamentKey,
+    firstTeam.teamKey
+  );
   return (
     <Container>
       <Banner src={alliance === 'red' ? RED_BANNER : BLUE_BANNER} />
+      {firstTeamAlliance && (
+        <AllianceText small={small}>
+          <Typography variant={'h5'} sx={{ fontWeight: 'bold' }}>
+            {/* \u00A0 is a non-breaking space. since the width is 0, we need non breaking spaces otherwise every space will put things onto new lines */}
+            {firstTeamAlliance.allianceNameLong.replaceAll(' ', '\u00A0')}
+          </Typography>
+        </AllianceText>
+      )}
       <AllianceContainer size={allianceParticipants.length}>
         {allianceParticipants.map((p) => {
           const rank = ranks.find((r) => r.teamKey === p.teamKey);

front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-result.tsx

@@ -17,12 +17,13 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
 import { ResultsBreakdown } from '../../../displays';
 import { Breakdown as Breakdown2024 } from '../../fgc_2024';
-import { Grid } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import BreakdownRow from './breakdown-row';
 import { Block } from '@mui/icons-material';
 import { CardStatus } from '@toa-lib/models/build/seasons/FeedingTheFuture';
 import { CardStatus as CardStatusComponent } from './card-status';
 import { useTournamentsForEvent } from 'src/api/use-tournament-data';
+import { useAllianceMember } from 'src/api/use-alliance-data';
 
 const Container = styled.div`
   display: flex;
@@ -129,6 +130,14 @@ const CardContainer = styled.div`
   margin-left: auto;
 `;
 
+const AllianceText = styled.div(() => ({
+  position: 'relative',
+  height: 0,
+  top: '-3vh',
+  paddingLeft: 2,
+  color: 'white'
+}));
+
 const AllianceTeam: FC<AllianceTeamProps> = ({
   alliance,
   team,
@@ -183,6 +192,12 @@ export const AllianceResult: FC<Props> = ({
   const allianceParticipants = participants.filter((p) =>
     alliance === 'red' ? p.station < BLUE_STATION : p.station >= BLUE_STATION
   );
+  const [firstTeam] = allianceParticipants;
+  const firstTeamAlliance = useAllianceMember(
+    firstTeam.eventKey,
+    firstTeam.tournamentKey,
+    firstTeam.teamKey
+  );
   const teamsRecord = useMemo(
     () => (teams ? Object.fromEntries(teams.map((t) => [t.teamKey, t])) : {}),
     [teams]
@@ -223,6 +238,13 @@ export const AllianceResult: FC<Props> = ({
   return (
     <Container>
       <TopBanner src={alliance === 'red' ? RED_BANNER : BLUE_BANNER} />
+      <AllianceText>
+        {firstTeamAlliance && (
+          <Typography variant='h4' sx={{ fontWeight: 'bold' }}>
+            &nbsp;{firstTeamAlliance.allianceNameLong}
+          </Typography>
+        )}
+      </AllianceText>
       <AllianceContainer alliance={alliance} size={allianceParticipants.length}>
         {allianceParticipants.map((p) => {
           // TODO: this seems horribly inefficient
@@ -267,8 +289,8 @@ export const AllianceResult: FC<Props> = ({
           {showZeroScore
             ? 0
             : alliance === 'red'
-              ? match.redScore
-              : match.blueScore}
+            ? match.redScore
+            : match.blueScore}
         </ScoreText>
       </ScoreContainer>
     </Container>

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

@@ -43,11 +43,13 @@ export const MatchPreviewStream: FC<DisplayProps> = ({ match, ranks }) => {
           alliance='red'
           participants={match.participants ?? []}
           ranks={ranks}
+          small
         />
         <AlliancePreview
           alliance='blue'
           participants={match.participants ?? []}
           ranks={ranks}
+          small
         />
       </Stack>
     </Container>