Add Between Matches scores

EpicYoshiMaster · Jan 21, 2025 · 14158f8 · 14158f8
1 parent 49a91ab
commit 14158f8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/src/graphics/Intermission.tsx b/src/graphics/Intermission.tsx
@@ -3,8 +3,23 @@ import styled from 'styled-components'
 import { createRoot } from 'react-dom/client';
 import { Omnibar } from './components/Omnibar';
 import { Background } from './components/Background';
+import { useReplicant } from '@nodecg/react-hooks';
+import { MatchData } from 'schemas';
+import { TeamScoreBox } from './components/TeamScoreBox';
 
 export function Intermission() {
+	const [matchData, setMatchData] = useReplicant<MatchData>('match', { 
+		bundle: 'squidwest-layout-controls',
+		defaultValue: { 
+			matchInfo: "Round 1",
+			teamA: "Team A",
+			teamB: "Team B",
+			scoreA: 0,
+			scoreB: 0,
+			matchColor: { index: -1, name: "Unknown", teamA: "#ffffff", teamB: "#ffffff" },
+			swapColor: false
+		}
+	});
 
 	return (
 		<StyledIntermission>
@@ -15,7 +30,9 @@ export function Intermission() {
 					<LargeFeed />
 				</TopRow>
 				<MiddleRow>
+					<TeamScoreBox team={matchData?.teamA || ""} score={matchData?.scoreA || 0} left={true} />
 					<SmallFeed />
+					<TeamScoreBox team={matchData?.teamB || ""} score={matchData?.scoreB || 0} left={false} />
 				</MiddleRow>
 				<Omnibar />
 			</Content>
@@ -62,6 +79,7 @@ const LargeFeed = styled.div`
 	box-sizing: content-box;
 
 	border: 8px solid var(--feed-large-border);
+	border-radius: 0.5rem;
 	background-color: var(--feed-large-color);
 `;
 
@@ -71,6 +89,7 @@ const SmallFeed = styled.div`
 	box-sizing: content-box;
 
 	border: 8px solid var(--feed-small-border);
+	border-radius: 0.5rem;
 	background-color: var(--feed-small-color);
 `;
 

diff --git a/src/graphics/components/Omnibar.tsx b/src/graphics/components/Omnibar.tsx
@@ -117,6 +117,8 @@ const OmnibarWrapper = styled.div`
   	width: calc(100% - 40px);
   	background-color: var(--omnibar-color);
 	height: 122px;
+	border: 8px solid var(--omnibar-border);
+	border-radius: 0.5rem;
   	margin: 10px 20px;
 `;
 

diff --git a/src/graphics/components/TeamScoreBox.tsx b/src/graphics/components/TeamScoreBox.tsx
@@ -31,9 +31,10 @@ const TeamAndScore = styled.div<{ $left: boolean }>`
 	height: 5rem;
 	width: 100%;
 	font-size: 3rem;
-	color: #f04888;
-	border: 8px solid #f04888;
-	background-color: #eae6f3;
+	color: var(--teams-text);
+	border: 8px solid var(--teams-border);
+	background-color: var(--teams-inner);
+	border-radius: 0.5rem;
 	box-sizing: content-box;
 `;
 
@@ -52,6 +53,6 @@ const ScoreBox = styled.div`
 
 	font-size: 5rem;
 
-	color: #eae6f3;
-	background-color: #f04888;
+	color: var(--teams-score-text);
+	background-color: var(--teams-score-inner);
 `;
diff --git a/src/graphics/main.css b/src/graphics/main.css
@@ -24,10 +24,18 @@
 	--feed-small-color: #e68b8b;
 	--feed-small-border: #660033;
 
+	--omnibar-border: #3d0521;
 	--omnibar-color: #660033;
 	--omnibar-text: #ffffff;
 	--omnibar-divider: #ffffff;
 
+	--teams-color: #660033;
+	--teams-border: #3d0521;
+	--teams-text: #ffffff;
+	--teams-inner: #702d47;
+	--teams-score-text: #ffffff;
+	--teams-score-inner: #660033;
+
 	/* Commentary */ 
 
 	--commentary-text: #af0b01;