Updated Bundle to use NodeCG-Themer

RisingEmpires · Oct 8, 2023 · 395efa4 · 395efa4
1 parent d06e827
commit 395efa4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 77 deletions.
diff --git a/src/dashboard/CasterManager.tsx b/src/dashboard/CasterManager.tsx
@@ -43,16 +43,6 @@ export function CasterManager() {
 		set_caster2(temp)
 	}
 
-	//, show_caster2_social, show_observer, show_observer_social
-
-	//Currently not working, waiting for assistance
-	//@ts-ignore
-	//waitForReplicants([show_caster1_social]).then(() => {
-	//	console.log("Replicants avaliabe")
-	//}).catch((error) => {
-	//	console.log(error)
-	//})
-
 	return (
 		<> 
 			<form onSubmit={handleSubmit} className='p-4'>

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';
 
 export function Index() {
@@ -16,42 +16,54 @@ export function Index() {
 	const [observer_social, set_observer_social] = useReplicant<string>('observersocial', '');
 	const [show_observer_social, set_show_observer_social] = useReplicant<boolean>('showobserversocial', 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 (
 		<>
-			<div className='caster1 text-3xl'>
+			{themeDiv}
+			<div className='casterManager-caster1 text-3xl'>
 				<h1>{caster1}</h1>
 			</div>
 
-			<div className='caster2 text-3xl'>
+			<div className='casterManager-caster2 text-3xl'>
 				<h1>{caster2}</h1>
 			</div>
 
 
 
 			{show_caster1_social ?
-				<div className='caster1social flex flex-row'>
+				<div className='casterManager-caster1social flex flex-row'>
 					<svg className="xsvg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" /></svg>
 					<h1 className='text-2xl'>{caster1_social}</h1>
 				</div>
 				: <></>
 			}
 
 			{show_caster2_social ?
-				<div className='caster2social flex flex-row'>
+				<div className='casterManager-caster2social flex flex-row'>
 					<svg className="xsvg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" /></svg>
 					<h1 className='text-2xl'>{caster2_social}</h1>
 				</div>
 				: <></>
 			}
 			{show_observer ?
-				<div className='observer text-3xl'>
+				<div className='casterManager-observer text-3xl'>
 					<h1>Observer: {observer}</h1>
 				</div>
 				: <></>}
 
 			{show_observer_social && show_observer ?
 				<div>
-					<div className='observerSocial flex flex-row'>
+					<div className='casterManager-observerSocial flex flex-row'>
 						<svg className="xsvg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" /></svg>
 						<h1 className='text-2xl'>{observer_social}</h1>
 					</div>

diff --git a/src/graphics/index.html b/src/graphics/index.html
@@ -14,66 +14,6 @@
 			font-family: Monsterrat;
 			font-weight: 700;
 		}
-
-		.caster1 {
-			color: white;
-			position: absolute;
-			text-align: center;
-			transform: translate(-50%, -50%);
-			top: 944px;
-			left: 330px;
-		}
-
-		.caster1social {
-			color: white;
-			position: absolute;
-			text-align: center;
-			transform: translate(-50%, -50%);
-			top: 990px;
-			left: 330px;
-		}
-
-		.caster2 {
-			color: white;
-			position: absolute;
-			text-align: center;
-			transform: translate(50%, -50%);
-			top: 944px;
-			right: 330px;
-		}
-
-		.caster2social {
-			color: white;
-			position: absolute;
-			text-align: center;
-			transform: translate(50%, -50%);
-			top: 990px;
-			right: 330px;
-		}
-
-
-		.observer {
-			color: white;
-			position: absolute;
-			text-align: center;
-			transform: translate(-50%, -50%);
-			top: 965px;
-			left: 50%;
-		}
-
-		.observerSocial {
-			color: white;
-			position: absolute;
-			text-align: center;
-			transform: translate(-50%, -50%);
-			top: 1000px;
-			left: 50%;
-		}
-
-		.xsvg {
-			fill: white;
-			height: 35px;
-		}
 	</style>
 </head>