From 52e09ae5efb65e5c8978192b3a9df29723a4034e Mon Sep 17 00:00:00 2001
From: Vinzenz Schroeter <vinzenz.f.s@gmail.com>
Date: Sun, 14 Apr 2024 13:32:34 +0200
Subject: [PATCH] move theme code to own file

---
 tank-frontend/src/ClientScreen.tsx | 10 +++----
 tank-frontend/src/index.tsx        | 17 ++----------
 tank-frontend/src/theme.ts         | 44 ++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 21 deletions(-)
 create mode 100644 tank-frontend/src/theme.ts

diff --git a/tank-frontend/src/ClientScreen.tsx b/tank-frontend/src/ClientScreen.tsx
index 9e774a7..c4d826d 100644
--- a/tank-frontend/src/ClientScreen.tsx
+++ b/tank-frontend/src/ClientScreen.tsx
@@ -1,6 +1,7 @@
 import useWebSocket from 'react-use-websocket';
 import {useEffect, useRef} from 'react';
 import './ClientScreen.css';
+import {getTheme} from "./theme.ts";
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -12,9 +13,6 @@ function getIndexes(bitIndex: number) {
     };
 }
 
-// @ts-ignore
-const rootElement = document.querySelector(':root')!;
-
 function normalizeColor(context: CanvasRenderingContext2D, color: string) {
     context.fillStyle = color;
     context.fillRect(0, 0, 1, 1);
@@ -26,9 +24,9 @@ function drawPixelsToCanvas(pixels: Uint8Array, canvas: HTMLCanvasElement) {
     if (!drawContext)
         throw new Error('could not get draw context');
 
-    const rootStyle = getComputedStyle(rootElement);
-    const colorPrimary = normalizeColor(drawContext, rootStyle.getPropertyValue('--color-primary'));
-    const colorBackground = normalizeColor(drawContext, rootStyle.getPropertyValue('--color-background'));
+    const theme = getTheme();
+    const colorPrimary = normalizeColor(drawContext, theme.primary);
+    const colorBackground = normalizeColor(drawContext, theme.background);
 
     const imageData = drawContext.getImageData(0, 0, canvas.width, canvas.height, {colorSpace: 'srgb'});
     const data = imageData.data;
diff --git a/tank-frontend/src/index.tsx b/tank-frontend/src/index.tsx
index cde0723..db97b83 100644
--- a/tank-frontend/src/index.tsx
+++ b/tank-frontend/src/index.tsx
@@ -2,23 +2,10 @@ import React from 'react';
 import {createRoot} from 'react-dom/client';
 import './index.css';
 import App from "./App.tsx";
+import {setRandomTheme} from "./theme.ts";
 
-function getRandomColor() {
-    const letters = '0123456789ABCDEF';
-    let color = '#';
-    for (let i = 0; i < 3; i++) {
-        color += letters[Math.floor(Math.random() * letters.length)];
-    }
-    return color;
-}
 
-// @ts-ignore
-const rootStyle = document.querySelector(':root')?.style;
-if (rootStyle) {
-    rootStyle.setProperty('--color-primary', getRandomColor());
-    rootStyle.setProperty('--color-secondary', getRandomColor());
-    rootStyle.setProperty('--color-background', getRandomColor());
-}
+setRandomTheme();
 
 createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
diff --git a/tank-frontend/src/theme.ts b/tank-frontend/src/theme.ts
new file mode 100644
index 0000000..a9a418c
--- /dev/null
+++ b/tank-frontend/src/theme.ts
@@ -0,0 +1,44 @@
+function getRandomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        color += letters[Math.floor(Math.random() * letters.length)];
+    }
+    return color;
+}
+
+
+export type Theme = {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+}
+
+// @ts-ignore
+const rootStyle = document.querySelector(':root')?.style;
+
+export function setTheme(theme: Theme) {
+    if (!rootStyle)
+        return;
+    rootStyle.setProperty('--color-primary', theme.primary);
+    rootStyle.setProperty('--color-secondary', theme.secondary);
+    rootStyle.setProperty('--color-background', theme.background);
+}
+
+export function getTheme(): Theme {
+    if (!rootStyle)
+        return {};
+    return {
+        primary: rootStyle.getPropertyValue('--color-primary'),
+        secondary: rootStyle.getPropertyValue('--color-secondary'),
+        background: rootStyle.getPropertyValue('--color-background')
+    };
+}
+
+export function setRandomTheme() {
+    setTheme({
+        primary: getRandomColor(),
+        secondary: getRandomColor(),
+        background: getRandomColor()
+    })
+}