pass theme as context

tank-frontend/src/App.tsx

@@ -8,35 +8,37 @@ import Scoreboard from './Scoreboard.tsx';
 import Button from './components/Button.tsx';
 import MapChooser from './MapChooser.tsx';
 import './App.css';
-import {getRandomTheme, useStoredTheme} from './theme.ts';
+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 <Column className="flex-grow">
+    return <ThemeContext.Provider value={theme}>
+        <Column className="flex-grow">
 
-        <ClientScreen theme={theme} player={name}/>
+            <ClientScreen player={name}/>
 
-        <Row>
-            <h1 className="flex-grow">CCCB-Tanks!</h1>
-            <MapChooser theme={theme}/>
-            <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>
+    </ThemeContext.Provider>;
 }

tank-frontend/src/ClientScreen.tsx

@@ -1,12 +1,10 @@
 import {useEffect, useState} from 'react';
-import {Theme} from './theme.ts';
 import {makeApiUrl, useMyWebSocket} from './serverCalls.tsx';
 import {ReadyState} from 'react-use-websocket';
 import PixelGridCanvas from './components/PixelGridCanvas.tsx';
 
 
-export default function ClientScreen({theme, player}: {
-    theme: Theme,
+export default function ClientScreen({player}: {
     player: string | null
 }) {
     const [shouldSendMessage, setShouldSendMessage] = useState(false);
@@ -40,5 +38,5 @@ export default function ClientScreen({theme, player}: {
         return <></>;
 
     const pixels = new Uint8ClampedArray(lastMessage.data);
-    return <PixelGridCanvas pixels={pixels} theme={theme}/>;
+    return <PixelGridCanvas pixels={pixels}/>;
 }

tank-frontend/src/MapChooser.tsx

@@ -4,7 +4,6 @@ import {makeApiUrl, MapInfo} from './serverCalls';
 import Dialog from './components/Dialog.tsx';
 import PixelGridCanvas from './components/PixelGridCanvas.tsx';
 import Column from './components/Column.tsx';
-import {Theme} from './theme.ts';
 import Button from './components/Button.tsx';
 import Row from './components/Row.tsx';
 import './MapChooser.css';
@@ -18,9 +17,8 @@ function base64ToArrayBuffer(base64: string) {
     return bytes;
 }
 
-function MapPreview({mapName, theme, highlight, onClick}: {
+function MapPreview({mapName, highlight, onClick}: {
     readonly mapName: string,
-    readonly theme: Theme,
     readonly highlight: boolean,
     readonly onClick: () => void
 }) {
@@ -47,15 +45,14 @@ function MapPreview({mapName, theme, highlight, onClick}: {
         className={'MapChooser-Preview' + (highlight ? ' MapChooser-Preview-Highlight' : '')}
         onClick={onClick}
     >
-        <PixelGridCanvas pixels={base64ToArrayBuffer(preview)} theme={theme}/>
+        <PixelGridCanvas pixels={base64ToArrayBuffer(preview)}/>
         <p>{name}</p>
     </Column>;
 }
 
 
-function MapChooserDialog({mapNames, theme, onClose, onConfirm}: {
+function MapChooserDialog({mapNames, onClose, onConfirm}: {
     readonly mapNames: string[];
-    readonly theme: Theme;
     readonly onConfirm: (mapName: string) => void;
     readonly onClose: () => void;
 }) {
@@ -66,22 +63,19 @@ function MapChooserDialog({mapNames, theme, onClose, onConfirm}: {
             {mapNames.map(name => <MapPreview
                 key={name}
                 mapName={name}
-                theme={theme}
                 highlight={chosenMap == name}
                 onClick={() => setChosenMap(name)}
             />)}
         </Row>
         <Row>
-            <div className='flex-grow'/>
+            <div className="flex-grow"/>
             <Button text="« cancel" onClick={onClose}/>
             <Button text="√ confirm" disabled={!chosenMap} onClick={() => chosenMap && onConfirm(chosenMap)}/>
         </Row>
     </Dialog>;
 }
 
-export default function MapChooser({theme}: {
-    readonly theme: Theme;
-}) {
+export default function MapChooser({}: {}) {
     const query = useQuery({
         queryKey: ['get-maps'],
         queryFn: async () => {
@@ -114,7 +108,6 @@ export default function MapChooser({theme}: {
         {query.isSuccess && open &&
             <MapChooserDialog
                 mapNames={query.data!}
-                theme={theme}
                 onClose={() => setOpen(false)}
                 onConfirm={name => {
                     setOpen(false);

tank-frontend/src/components/PixelGridCanvas.tsx

@@ -1,5 +1,5 @@
-import {hslToString, Theme} from '../theme.ts';
-import {useEffect, useRef} from 'react';
+import {hslToString, ThemeContext} from '../theme.ts';
+import {useContext, useEffect, useRef} from 'react';
 import './PixelGridCanvas.css';
 
 const pixelsPerRow = 352;
@@ -104,10 +104,10 @@ function drawPixelsToCanvas(
     context.putImageData(imageData, 0, 0);
 }
 
-export default function PixelGridCanvas({pixels, theme}: {
+export default function PixelGridCanvas({pixels}: {
     readonly pixels: Uint8ClampedArray;
-    readonly theme: Theme;
 }) {
+    const theme = useContext(ThemeContext);
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
     useEffect(() => {

tank-frontend/src/theme.ts

@@ -1,4 +1,5 @@
-import {useStoredObjectState} from "./useStoredState.ts";
+import {useStoredObjectState} from './useStoredState.ts';
+import {createContext} from 'react';
 
 export type Theme = {
     primary: HSL;
@@ -88,3 +89,5 @@ export function useStoredTheme() {
         save: applyTheme
     });
 }
+
+export const ThemeContext = createContext<Theme>(getRandomTheme());