Updated Bundle to use NodeCG-Themer

RisingEmpires · Oct 8, 2023 · 023cc66 · 023cc66
1 parent 481d8f0
commit 023cc66
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 175 deletions.
diff --git a/src/graphics/Index.tsx b/src/graphics/Index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useReplicant } from 'use-nodecg';
 //@ts-ignore
 import ScoreboardOverlay from './ScoreboardOverlay.png'
@@ -15,21 +15,33 @@ export function Index() {
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
 	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
 
+	const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });
+
+	const [themeDiv, set_themeDiv] = useState(<></>)
+
+	useEffect(() => {
+		console.log(theme)
+		if (!theme) return;
+		console.log(theme)
+		set_themeDiv(<link rel='stylesheet' type='text/css' href={theme.value} />)
+	}, [theme])
+
 	return (
 		<>
-			{showScore ? <div><img className="scoreboardOverlay" src={ScoreboardOverlay} style={{
+			{themeDiv}
+			{showScore ? <div><img className="score-scoreboardOverlay" src={ScoreboardOverlay} style={{
 				position: 'absolute',
 				width: '100vw',
 				height: '100vh'
 			}} />
 
-			<div>
-				<ScoreDisplay score={leftScore} rotate={true} className={flipScore ? 'rightScore' : 'leftScore'}/>
-				<ScoreDisplay score={rightScore} rotate={true} className={flipScore ? 'leftScore' : 'rightScore'}/>
-			</div>
+				<div>
+					<ScoreDisplay score={leftScore} rotate={true} className={flipScore ? 'score-rightScore' : 'score-leftScore'} />
+					<ScoreDisplay score={rightScore} rotate={true} className={flipScore ? 'score-leftScore' : 'score-rightScore'} />
+				</div>
 
-			<h1 className='betweenText'>{betweenText}</h1> </div> : <> </>}
-			{showSpoilerOverlay ? <img src={SpoilerCover} className={'spoilerCover'}/> : <> </>}
+				<h1 className='score-betweenText'>{betweenText}</h1> </div> : <> </>}
+			{showSpoilerOverlay ? <img src={SpoilerCover} className={'score-spoilerCover'} /> : <> </>}
 		</>
 	);
 }
diff --git a/src/graphics/LobbyScore.html b/src/graphics/LobbyScore.html
@@ -16,105 +16,6 @@
 			-moz-osx-font-smoothing: grayscale;
 			text-rendering: optimizeLegibility;
 		}
-
-		.rotate {
-			animation: rotation 120s infinite linear;
-		}
-
-		@keyframes rotation {
-			from {
-				transform: rotate(0deg);
-			}
-
-			to {
-				transform: rotate(359deg);
-			}
-		}
-
-		.rightScore img {
-			animation-direction: reverse;
-		}
-
-		.leftScore {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			top: 13%;
-			left: 45%;
-		}
-
-		.rightScore {
-			position: absolute;
-			transform: translate(50%, -50%);
-			top: 13%;
-			right: 45%;
-		}
-
-		.scoreContainer img {
-			width: 90px;
-		}
-
-		.scoreContainer {
-			color: white;
-		}
-
-		.scoreContainer h1 {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			top: 23%;
-			text-shadow: 2px 2px 0px #000000;
-			left: 50%;
-		}
-
-		.betweenText {
-			color: white;
-			transform: translate(-50%, -50%);
-			position: absolute;
-			text-shadow: 2px 2px 0px #000000;
-			top: 12%;
-			left: 50%;
-		}
-
-		.spoilerCover {
-			position: absolute;
-			width: 100vw;
-			height: 100vh;
-		}
-
-		.leftSideIcon {
-			width: 80px;
-			height: 80px;
-			transform: translate(-50%, -50%);
-			position: absolute;
-			top: 5%;
-			left: 26.5%;
-		}
-
-		.rightSideIcon {
-			width: 80px;
-			height: 80px;
-			transform: translate(50%, -50%);
-			position: absolute;
-			top: 5%;
-			right: 26.5%;
-		}
-
-		.teamName {
-			text-transform: uppercase;
-			color: white;
-			top: 6.4%;
-		}
-
-		.leftName {
-			transform: translate(-50%, -50%);
-			position: absolute;
-			left: 35.9%;
-		}
-
-		.rightName {
-			transform: translate(50%, -50%);
-			position: absolute;
-			right: 35.9%;
-		}
 	</style>
 </head>
 

diff --git a/src/graphics/LobbyScore.tsx b/src/graphics/LobbyScore.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useReplicant } from 'use-nodecg';
 //@ts-ignore
 import ScoreboardOverlay from './ScoreboardOverlay.png'
@@ -15,11 +15,23 @@ export function LobbyScore() {
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
 	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
 
+	const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });
+
+	const [themeDiv, set_themeDiv] = useState(<></>)
+
+	useEffect(() => {
+		console.log(theme)
+		if (!theme) return;
+		console.log(theme)
+		set_themeDiv(<link rel='stylesheet' type='text/css' href={theme.value} />)
+	}, [theme])
+
 	return (
 		<>
+			{themeDiv}
 			<div>
-				<ScoreDisplay score={leftScore} rotate={true} className={'leftScore'}/>
-				<ScoreDisplay score={rightScore} rotate={true} className={'rightScore'}/>
+				<ScoreDisplay score={leftScore} rotate={true} className={'lobbyScore-leftScore'} />
+				<ScoreDisplay score={rightScore} rotate={true} className={'lobbyScore-rightScore'} />
 			</div>
 		</>
 	);

diff --git a/src/graphics/ScoreDisplay.tsx b/src/graphics/ScoreDisplay.tsx
@@ -10,9 +10,9 @@ type ScoreDisplayProps = {
 
 export const ScoreDisplay = ({ score, rotate, className }: ScoreDisplayProps) => {
     return (
-        <div className={`scoreContainer ${className}`}>
+        <div className={`score-scoreContainer ${className}`}>
             <h1>{score}</h1>
-            <img src={GoldenCircle} className={rotate ? 'goldCircle rotate' : 'goldCircle'}/>
+            <img src={GoldenCircle} className={rotate ? 'score-goldCircle score-rotate' : 'score-goldCircle'}/>
         </div>
     )
 }
diff --git a/src/graphics/index.html b/src/graphics/index.html
@@ -16,69 +16,6 @@
 			-moz-osx-font-smoothing: grayscale;
 			text-rendering: optimizeLegibility;
 		}
-
-		.rotate {
-			animation: rotation 120s infinite linear;
-		}
-
-		@keyframes rotation {
-			from {
-				transform: rotate(0deg);
-			}
-
-			to {
-				transform: rotate(359deg);
-			}
-		}
-
-		.rightScore img {
-			animation-direction: reverse;
-		}
-
-		.leftScore {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			top: 13%;
-			left: 45%;
-		}
-
-		.rightScore {
-			position: absolute;
-			transform: translate(50%, -50%);
-			top: 13%;
-			right: 45%;
-		}
-
-		.scoreContainer img {
-			width: 90px;
-		}
-
-		.scoreContainer {
-			color: white;
-		}
-
-		.scoreContainer h1 {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			top: 23%;
-			text-shadow: 2px 2px 0px #000000;
-			left: 50%;
-		}
-
-		.betweenText {
-			color: white;
-			transform: translate(-50%, -50%);
-			position: absolute;
-			text-shadow: 2px 2px 0px #000000;
-			top: 12%;
-			left: 50%;
-		}
-
-		.spoilerCover {
-			position: absolute;
-			width: 100vw;
-			height: 100vh;
-		}
 	</style>
 </head>