diff --git a/front-end/src/api/use-alliance-data.ts b/front-end/src/api/use-alliance-data.ts index 2c36769..6eabe8e 100644 --- a/front-end/src/api/use-alliance-data.ts +++ b/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[] diff --git a/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-play.tsx b/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-play.tsx index 818edd3..19bd292 100644 --- a/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-play.tsx +++ b/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 = ({ 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 = ({ /> ); })} + {firstTeamAlliance && ( + + {firstTeamAlliance.allianceNameLong} + + )} ); }; diff --git a/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-preview.tsx b/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-preview.tsx index 900f47c..12454db 100644 --- a/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-preview.tsx +++ b/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 = ({ 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 ( + {firstTeamAlliance && ( + + + {/* \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')} + + + )} {allianceParticipants.map((p) => { const rank = ranks.find((r) => r.teamKey === p.teamKey); diff --git a/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-result.tsx b/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-result.tsx index c8d27e5..d58ab84 100644 --- a/front-end/src/apps/audience-display/displays/seasons/fgc_default/components/alliance-result.tsx +++ b/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 = ({ alliance, team, @@ -183,6 +192,12 @@ export const AllianceResult: FC = ({ 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 = ({ return ( + + {firstTeamAlliance && ( + +  {firstTeamAlliance.allianceNameLong} + + )} + {allianceParticipants.map((p) => { // TODO: this seems horribly inefficient @@ -267,8 +289,8 @@ export const AllianceResult: FC = ({ {showZeroScore ? 0 : alliance === 'red' - ? match.redScore - : match.blueScore} + ? match.redScore + : match.blueScore} diff --git a/front-end/src/apps/audience-display/displays/seasons/fgc_default/match-preview-stream.tsx b/front-end/src/apps/audience-display/displays/seasons/fgc_default/match-preview-stream.tsx index b9159df..c6e15b3 100644 --- a/front-end/src/apps/audience-display/displays/seasons/fgc_default/match-preview-stream.tsx +++ b/front-end/src/apps/audience-display/displays/seasons/fgc_default/match-preview-stream.tsx @@ -43,11 +43,13 @@ export const MatchPreviewStream: FC = ({ match, ranks }) => { alliance='red' participants={match.participants ?? []} ranks={ranks} + small />