extract rgba resolving to provider

tank-frontend/src/App.tsx

@@ -1,3 +1,5 @@
+import {useState} from 'react';
+
 import ClientScreen from './ClientScreen';
 import Controls from './Controls.tsx';
 import JoinForm from './JoinForm.tsx';
@@ -7,38 +9,39 @@ import Row from './components/Row.tsx';
 import Scoreboard from './Scoreboard.tsx';
 import Button from './components/Button.tsx';
 import MapChooser from './MapChooser.tsx';
+import {getRandomTheme, RgbaThemeProvider, ThemeContext, useStoredTheme} from './theme.tsx';
 import './App.css';
-import {ThemeContext, getRandomTheme, useStoredTheme} from './theme.ts';
-import {useState} from 'react';
 
 export default function App() {
     const [theme, setTheme] = useStoredTheme();
     const [name, setName] = useState<string | null>(null);
 
     return <ThemeContext.Provider value={theme}>
-        <Column className="flex-grow">
+        <RgbaThemeProvider>
+            <Column className="flex-grow">
 
-            <ClientScreen player={name}/>
+                <ClientScreen player={name}/>
 
-            <Row>
-                <h1 className="flex-grow">CCCB-Tanks!</h1>
-                <MapChooser />
-                <Button text="☼ change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
-                <Button
-                    onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
-                    text="⌂ source"/>
-                {name !== '' &&
-                    <Button onClick={() => setName(_ => '')} text="∩ logout"/>}
-            </Row>
+                <Row>
+                    <h1 className="flex-grow">CCCB-Tanks!</h1>
+                    <MapChooser/>
+                    <Button text="☼ change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
+                    <Button
+                        onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
+                        text="⌂ source"/>
+                    {name !== '' &&
+                        <Button onClick={() => setName(_ => '')} text="∩ logout"/>}
+                </Row>
 
-            {name || <JoinForm onDone={name => setName(_ => name)}/>}
+                {name || <JoinForm onDone={name => setName(_ => name)}/>}
 
-            <Row className="GadgetRows">
-                {name && <Controls player={name}/>}
-                {name && <PlayerInfo player={name}/>}
-                <Scoreboard/>
-            </Row>
+                <Row className="GadgetRows">
+                    {name && <Controls player={name}/>}
+                    {name && <PlayerInfo player={name}/>}
+                    <Scoreboard/>
+                </Row>
 
-        </Column>
+            </Column>
+        </RgbaThemeProvider>
     </ThemeContext.Provider>;
 }

tank-frontend/src/components/PixelGridCanvas.tsx

@@ -1,6 +1,6 @@
-import {hslToString, ThemeContext} from '../theme.ts';
-import {useContext, useEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import './PixelGridCanvas.css';
+import {useRgbaThemeContext} from '../theme.tsx';
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -20,12 +20,6 @@ function getPixelDataIndexes(bitIndex: number) {
     };
 }
 
-function normalizeColor(context: CanvasRenderingContext2D, color: string) {
-    context.fillStyle = color;
-    context.fillRect(0, 0, 1, 1);
-    return context.getImageData(0, 0, 1, 1).data;
-}
-
 function parseAdditionalDataNibble(nibble: number) {
     const isPlayerMask = 1;
     const entityTypeMask = 12;
@@ -107,7 +101,7 @@ function drawPixelsToCanvas(
 export default function PixelGridCanvas({pixels}: {
     readonly pixels: Uint8ClampedArray;
 }) {
-    const theme = useContext(ThemeContext);
+    const theme = useRgbaThemeContext();
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
     useEffect(() => {
@@ -137,12 +131,12 @@ export default function PixelGridCanvas({pixels}: {
                 pixels,
                 additional: additionalData,
                 colors: {
-                    background: normalizeColor(drawContext, hslToString(theme.background)),
-                    foreground: normalizeColor(drawContext, hslToString(theme.primary)),
-                    player: normalizeColor(drawContext, hslToString(theme.secondary)),
-                    tanks: normalizeColor(drawContext, hslToString(theme.tertiary)),
-                    powerUps: normalizeColor(drawContext, hslToString(theme.tertiary)),
-                    bullets: normalizeColor(drawContext, hslToString(theme.tertiary))
+                    background: theme.background,
+                    foreground: theme.primary,
+                    player: theme.secondary,
+                    tanks: theme.tertiary,
+                    powerUps: theme.tertiary,
+                    bullets: theme.tertiary
                 }
             });
         };

tank-frontend/src/components/TextInput.tsx

@@ -1,7 +1,7 @@
 import {ChangeEventHandler} from "react";
 import './TextInput.css';
 
-export default function TextInput(props: {
+export default function TextInput( {onChange, className, value, placeholder, onEnter }: {
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
     className?: string;
     value: string;
@@ -9,13 +9,14 @@ export default function TextInput(props: {
     onEnter?: () => void;
 }) {
     return <input
-        {...props}
         type="text"
-        className={'TextInput ' + (props.className?? '')}
-
+        className={'TextInput ' + (className?? '')}
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
         onKeyUp={event => {
-            if (props.onEnter && event.key === 'Enter')
-                props.onEnter();
+            if (onEnter && event.key === 'Enter')
+                onEnter();
         }}
     />;
 }

tank-frontend/src/theme.tsx

@@ -0,0 +1,153 @@
+import {useStoredObjectState} from './useStoredState.ts';
+import {createContext, ReactNode, useContext, useEffect, useRef, useState} from 'react';
+
+export type HSL = {
+    h: number;
+    s: number;
+    l: number;
+}
+
+export type Theme = {
+    primary: HSL;
+    secondary: HSL;
+    background: HSL;
+    tertiary: HSL;
+}
+
+// @ts-ignore
+const rootStyle = document.querySelector(':root')?.style;
+
+function getRandom(min: number, max: number) {
+    return min + Math.random() * (max - min);
+}
+
+function getRandomHsl(params: {
+    minHue?: number,
+    maxHue?: number,
+    minSaturation?: number,
+    maxSaturation?: number,
+    minLightness?: number,
+    maxLightness?: number,
+}): HSL {
+    const values = {
+        minHue: 0,
+        maxHue: 360,
+        minSaturation: 0,
+        maxSaturation: 100,
+        minLightness: 0,
+        maxLightness: 100,
+        ...params
+    };
+    const h = getRandom(values.minHue, values.maxHue);
+    const s = getRandom(values.minSaturation, values.maxSaturation);
+    const l = getRandom(values.minLightness, values.maxLightness);
+    return {h, s, l};
+}
+
+export function hslToString({h, s, l}: HSL) {
+    return `hsl(${h},${s}%,${l}%)`;
+}
+
+function angle(a: number) {
+    return ((a % 360.0) + 360) % 360;
+}
+
+export function getRandomTheme(): Theme {
+    const goldenAngle = 180 * (3 - Math.sqrt(5));
+
+    const background = getRandomHsl({maxSaturation: 50, minLightness: 10, maxLightness: 30});
+
+    const otherColorParams = {
+        minSaturation: background.s,
+        maxSaturation: 90,
+        minLightness: background.l + 20,
+        maxLightness: 90
+    };
+
+    const primary = getRandomHsl(otherColorParams);
+    primary.h = angle(-1 * goldenAngle + primary.h);
+
+    const secondary = getRandomHsl(otherColorParams);
+    primary.h = angle(+1 * goldenAngle + primary.h);
+
+    const tertiary = getRandomHsl(otherColorParams);
+    primary.h = angle(+3 * goldenAngle + primary.h);
+
+    return {background, primary, secondary, tertiary};
+}
+
+function applyTheme(theme: Theme) {
+    console.log('apply theme', theme);
+    rootStyle.setProperty('--color-primary', hslToString(theme.primary));
+    rootStyle.setProperty('--color-secondary', hslToString(theme.secondary));
+    rootStyle.setProperty('--color-background', hslToString(theme.background));
+}
+
+export function useStoredTheme() {
+    return useStoredObjectState<Theme>('theme', getRandomTheme, {
+        load: applyTheme,
+        save: applyTheme
+    });
+}
+
+export const ThemeContext = createContext<Theme>(getRandomTheme());
+
+type Rgba = Uint8ClampedArray;
+
+export type RgbaTheme = {
+    primary: Rgba;
+    secondary: Rgba;
+    background: Rgba;
+    tertiary: Rgba;
+}
+
+const dummyRgbaTheme: RgbaTheme = {
+    primary: new Uint8ClampedArray([0, 0, 0, 0]),
+    secondary: new Uint8ClampedArray([0, 0, 0, 0]),
+    background: new Uint8ClampedArray([0, 0, 0, 0]),
+    tertiary: new Uint8ClampedArray([0, 0, 0, 0])
+};
+
+const RgbaThemeContext = createContext<RgbaTheme>(dummyRgbaTheme);
+
+function normalizeColor(context: CanvasRenderingContext2D, color: HSL) {
+    context.fillStyle = hslToString(color);
+    context.fillRect(0, 0, 1, 1);
+    return context.getImageData(0, 0, 1, 1).data;
+}
+
+export function useRgbaThemeContext() {
+    return useContext(RgbaThemeContext);
+}
+
+export function RgbaThemeProvider({children}: { children: ReactNode }) {
+    const hslTheme = useContext(ThemeContext);
+    const [rgbaTheme, setRgbaTheme] = useState<RgbaTheme | null>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (canvas === null)
+            throw new Error('canvas null');
+
+        const drawContext = canvas.getContext('2d', {
+            alpha: true,
+            colorSpace: 'srgb',
+            willReadFrequently: true
+        });
+        if (!drawContext)
+            throw new Error('could not get draw context');
+
+        setRgbaTheme({
+            background: normalizeColor(drawContext, hslTheme.background),
+            primary: normalizeColor(drawContext, hslTheme.primary),
+            secondary: normalizeColor(drawContext, hslTheme.secondary),
+            tertiary: normalizeColor(drawContext, hslTheme.tertiary),
+        });
+    }, [hslTheme, canvasRef.current]);
+
+    return <RgbaThemeContext.Provider value={rgbaTheme || dummyRgbaTheme}>
+        <canvas hidden={true} ref={canvasRef}/>
+        {children}
+    </RgbaThemeContext.Provider>;
+}