move theme code to own file

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 theme = getTheme();
-    const colorPrimary = normalizeColor(drawContext, rootStyle.getPropertyValue('--color-primary'));
+    const colorPrimary = normalizeColor(drawContext, theme.primary);
-    const colorBackground = normalizeColor(drawContext, rootStyle.getPropertyValue('--color-background'));
+    const colorBackground = normalizeColor(drawContext, theme.background);
 
     const imageData = drawContext.getImageData(0, 0, canvas.width, canvas.height, {colorSpace: 'srgb'});
     const data = imageData.data;

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
+setRandomTheme();
-const rootStyle = document.querySelector(':root')?.style;
-if (rootStyle) {
-    rootStyle.setProperty('--color-primary', getRandomColor());
-    rootStyle.setProperty('--color-secondary', getRandomColor());
-    rootStyle.setProperty('--color-background', getRandomColor());
-}
 
 createRoot(document.getElementById('root')!).render(
     <React.StrictMode>

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()
+    })
+}