From 395efa4fd6ab63859b2c5738ae3a85573b73db4c Mon Sep 17 00:00:00 2001
From: Coow <eirik_skarding@hotmail.no>
Date: Sun, 8 Oct 2023 15:46:32 +0200
Subject: [PATCH] Updated Bundle to use NodeCG-Themer

---
 src/dashboard/CasterManager.tsx | 10 ------
 src/graphics/Index.tsx          | 26 ++++++++++----
 src/graphics/index.html         | 60 ---------------------------------
 3 files changed, 19 insertions(+), 77 deletions(-)

diff --git a/src/dashboard/CasterManager.tsx b/src/dashboard/CasterManager.tsx
index 10f23a0..bb2a047 100644
--- 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
index d08c987..79dcabd 100644
--- 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,20 +16,32 @@ 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>
@@ -37,21 +49,21 @@ export function Index() {
 			}
 
 			{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
index b304d2a..d7c7fee 100644
--- 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>