default fgc preview display

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

@@ -0,0 +1,95 @@
+import styled from '@emotion/styled';
+import { FC } from 'react';
+import RED_BANNER from '../assets/red-side-banner.png';
+import BLUE_BANNER from '../assets/blue-side-banner.png';
+import {
+  Alliance,
+  BLUE_STATION,
+  MatchParticipant,
+  Ranking,
+  Team
+} from '@toa-lib/models';
+import { CountryFlag } from './country-flag';
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+
+const Banner = styled.img`
+  width: auto;
+  height: 100%;
+`;
+
+const AllianceContainer = styled.div((props: { size: number }) => ({
+  width: '100%',
+  height: '100%',
+  'background-color': '#ffffff',
+  display: 'grid',
+  'grid-template-rows': `repeat(${props.size}, 1fr)`
+}));
+
+const TeamContainer = styled.div`
+  border-bottom: 3px solid #cacaca;
+  font-weight: bold;
+  font-size: 3vh;
+  gap: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  display: flex;
+  align-items: center;
+`;
+
+const CountryText = styled.div`
+  width: 5vw;
+`;
+
+const RankText = styled.div`
+  margin-left: auto;
+`;
+
+interface AllianceTeamProps {
+  team: Team;
+  rank?: Ranking;
+}
+
+const AllianceTeam: FC<AllianceTeamProps> = ({ team, rank }) => {
+  return (
+    <TeamContainer>
+      <CountryFlag cc={team.countryCode} />
+      <CountryText>[{team.country}]</CountryText>
+      <div>{team.teamNameLong}</div>
+      {rank && <RankText>#{rank.rank}</RankText>}
+    </TeamContainer>
+  );
+};
+
+interface Props {
+  alliance: Alliance;
+  participants: MatchParticipant[];
+  ranks: Ranking[];
+}
+
+export const AlliancePreview: FC<Props> = ({
+  alliance,
+  participants,
+  ranks
+}) => {
+  const allianceParticipants = participants.filter((p) =>
+    alliance === 'red' ? p.station < BLUE_STATION : p.station >= BLUE_STATION
+  );
+  return (
+    <Container>
+      <Banner src={alliance === 'red' ? RED_BANNER : BLUE_BANNER} />
+      <AllianceContainer size={allianceParticipants.length}>
+        {allianceParticipants.map((p) => {
+          const rank = ranks.find((r) => r.teamKey === p.teamKey);
+          if (!p.team) return null;
+          return <AllianceTeam key={p.station} team={p.team} rank={rank} />;
+        })}
+      </AllianceContainer>
+    </Container>
+  );
+};

front-end/src/apps/audience-display/displays/seasons/fgc_default/components/country-flag.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { FC } from 'react';
+
+interface Props {
+  cc: string;
+}
+
+const Flag = styled.div`
+  background-color: #000000;
+`;
+
+export const CountryFlag: FC<Props> = ({ cc }) => {
+  return <Flag className={`flag-icon flag-icon-${cc}`} />;
+};

front-end/src/apps/audience-display/displays/seasons/fgc_default/components/info-bar.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+import { FC } from 'react';
+
+const Container = styled.div`
+  background-color: #ffffff;
+  width: 16vw;
+  height: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 2vw;
+`;
+
+const LeftText = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #cacaca;
+`;
+
+const RightText = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+interface Props {
+  left: string | number;
+  right: string | number;
+}
+
+export const InfoBar: FC<Props> = ({ left, right }) => {
+  return (
+    <Container>
+      <LeftText>{left.toString().toUpperCase()}</LeftText>
+      <RightText>{right.toString()}</RightText>
+    </Container>
+  );
+};

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

@@ -1,6 +1,69 @@
 import { FC } from 'react';
 import { DisplayProps } from '../../displays';
+import styled from '@emotion/styled';
+import FGC_BG from './assets/global-bg.png';
+import FGC_LOGO from './assets/fg-logo-lg.png';
+import { InfoBar } from './components/info-bar';
+import { AlliancePreview } from './components/alliance-preview';
 
-export const MatchPreview: FC<DisplayProps> = () => {
-  return <div>FGC Match Preview</div>;
+const Container = styled.div`
+  background-image: url(${FGC_BG});
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: 20vh 7vh 30vh 30vh;
+  grid-template-areas:
+    'logo'
+    'info'
+    'red'
+    'blue';
+  row-gap: 2vh;
+  padding: 3vh 20vw;
+`;
+
+const LogoContainer = styled.div`
+  grid-area: logo;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+`;
+
+const Logo = styled.img`
+  max-height: 100%;
+  width: auto;
+`;
+
+const InfoContainer = styled.div`
+  grid-area: info;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+export const MatchPreview: FC<DisplayProps> = ({ match, ranks }) => {
+  const matchParts = match.name.split(' ');
+  const matchNumber = matchParts[matchParts.length - 1];
+  return (
+    <Container>
+      <LogoContainer>
+        <Logo src={FGC_LOGO} />
+      </LogoContainer>
+      <InfoContainer>
+        <InfoBar left='match' right={matchNumber} />
+        <InfoBar left='field' right={match.fieldNumber} />
+      </InfoContainer>
+      <AlliancePreview
+        alliance='red'
+        participants={match.participants ?? []}
+        ranks={ranks}
+      />
+      <AlliancePreview
+        alliance='blue'
+        participants={match.participants ?? []}
+        ranks={ranks}
+      />
+    </Container>
+  );
 };