Merge branch 'master' into public-release

Author: TheApplePieGod

client/package-lock.json

@@ -141,6 +141,7 @@
         "path": "^0.12.7",
         "process": "^0.11.10",
         "react": "^18.2.0",
+        "react-color": "^2.19.3",
         "react-custom-scrollbars-2": "^4.5.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
@@ -154,6 +155,7 @@
         "@tauri-apps/cli": "1.6.3",
         "@types/pako": "^2.0.0",
         "@types/react": "^18.2.5",
+        "@types/react-color": "^3.0.12",
         "@types/react-dom": "^18.2.3",
         "@types/react-window": "^1.8.8",
         "concurrently": "^8.2.2",

client/package.json

@@ -2,9 +2,10 @@ import React from 'react'
 import ReactDom from 'react-dom/client'
 import { MainPage } from './pages/main-page'
 import { BrowserRouter } from 'react-router-dom'
+import { AppContextProvider } from './app-context'
 
 import '../style.css'
 
 const elem = document.getElementById('root')
 const root = ReactDom.createRoot(elem!)
-root.render(<BrowserRouter><MainPage /></BrowserRouter>)
+root.render(<BrowserRouter><AppContextProvider><MainPage /></AppContextProvider></BrowserRouter>)

client/src/app.tsx

@@ -1,7 +1,19 @@
-import React, { useEffect } from 'react'
-import { useAppContext } from './app-context'
+import React, { useEffect, useState, MouseEvent, PropsWithChildren, useRef } from 'react'
+import { IconContext } from 'react-icons'
+import { IoCloseCircle, IoCloseCircleOutline } from 'react-icons/io5'
+import { ChromePicker } from 'react-color'
+import { AppContextProvider, useAppContext } from './app-context'
 import { GameRenderer } from './playback/GameRenderer'
 import { NumInput } from './components/forms'
+import {
+    Colors,
+    currentColors,
+    updateGlobalColor,
+    getGlobalColor,
+    resetGlobalColors,
+    DEFAULT_GLOBAL_COLORS
+} from './colors'
+import { BrightButton, Button } from './components/button'
 
 export type ClientConfig = typeof DEFAULT_CONFIG
 
@@ -21,7 +33,20 @@ const DEFAULT_CONFIG = {
     streamRunnerGames: true,
     profileGames: false,
     validateMaps: false,
-    resolutionScale: 100
+    resolutionScale: 100,
+    colors: {
+        [Colors.TEAM_ONE]: '#cdcdcc',
+        [Colors.TEAM_TWO]: '#fee493',
+
+        [Colors.PAINT_TEAMONE_ONE]: '#666666',
+        [Colors.PAINT_TEAMONE_TWO]: '#565656',
+        [Colors.PAINT_TEAMTWO_ONE]: '#b28b52',
+        [Colors.PAINT_TEAMTWO_TWO]: '#997746',
+        [Colors.WALLS_COLOR]: '#547f31',
+        [Colors.TILE_COLOR]: '#4c301e',
+        [Colors.GAMEAREA_BACKGROUND]: '#2e2323',
+        [Colors.SIDEBAR_BACKGROUND]: '#3f3131'
+    } as Record<Colors, string>
 }
 
 const configDescription: Record<keyof ClientConfig, string> = {
@@ -36,7 +61,8 @@ const configDescription: Record<keyof ClientConfig, string> = {
     streamRunnerGames: 'Stream each round from the runner live as the game is being played',
     profileGames: 'Enable saving profiling data when running games',
     validateMaps: 'Validate maps before running a game',
-    resolutionScale: 'Resolution scale for the game area. Decrease to help performance.'
+    resolutionScale: 'Resolution scale for the game area. Decrease to help performance.',
+    colors: ''
 }
 
 export function getDefaultConfig(): ClientConfig {
@@ -47,6 +73,15 @@ export function getDefaultConfig(): ClientConfig {
             ;(config[key as keyof ClientConfig] as any) = JSON.parse(value)
         }
     }
+
+    for (const key in config.colors) {
+        const value = localStorage.getItem('config-colors' + key)
+        if (value) {
+            config.colors[key as Colors] = JSON.parse(value)
+            updateGlobalColor(key as Colors, JSON.parse(value))
+        }
+    }
+
     return config
 }
 
@@ -62,22 +97,149 @@ export const ConfigPage: React.FC<Props> = (props) => {
                 if (typeof v === 'boolean') return <ConfigBooleanElement configKey={key} key={key} />
                 if (typeof v === 'number') return <ConfigNumberElement configKey={key} key={key} />
             })}
+
+            <ColorConfig />
         </div>
     )
 }
 
+const ColorConfig = () => {
+    const context = useAppContext()
+
+    /* TODO: [future] do this dynamically rather than hardcoding sections */
+
+    return (
+        <>
+            <div className="m-0 mt-4">
+                Customize Colors:
+                <div className="text-sm pb-1 pt-1">Interface</div>
+                <SingleColorPicker displayName={'Background'} colorName={Colors.GAMEAREA_BACKGROUND} />
+                <SingleColorPicker displayName={'Sidebar'} colorName={Colors.SIDEBAR_BACKGROUND} />
+                <div className="text-sm pb-1">General</div>
+                <SingleColorPicker displayName={'Walls'} colorName={Colors.WALLS_COLOR} />
+                <SingleColorPicker displayName={'Tiles'} colorName={Colors.TILE_COLOR} />
+                <div className="text-sm pb-1">Silver</div>
+                <SingleColorPicker displayName={'Text'} colorName={Colors.TEAM_ONE} />
+                <SingleColorPicker displayName={'Primary Paint'} colorName={Colors.PAINT_TEAMONE_ONE} />
+                <SingleColorPicker displayName={'Secondary Paint'} colorName={Colors.PAINT_TEAMONE_TWO} />
+                <div className="text-sm pb-1">Gold</div>
+                <SingleColorPicker displayName={'Text'} colorName={Colors.TEAM_TWO} />
+                <SingleColorPicker displayName={'Primary Paint'} colorName={Colors.PAINT_TEAMTWO_ONE} />
+                <SingleColorPicker displayName={'Secondary Paint'} colorName={Colors.PAINT_TEAMTWO_TWO} />
+            </div>
+            <div className="flex flex-row mt-8">
+                <BrightButton
+                    className=""
+                    onClick={() => {
+                        resetGlobalColors()
+
+                        context.setState((prevState) => ({
+                            ...prevState,
+                            config: { ...prevState.config, colors: { ...DEFAULT_GLOBAL_COLORS } }
+                        }))
+                    }}
+                >
+                    Reset Colors
+                </BrightButton>
+            </div>
+        </>
+    )
+}
+
+const SingleColorPicker = (props: { displayName: string; colorName: Colors }) => {
+    const context = useAppContext()
+    const value = context.state.config.colors[props.colorName]
+    const ref = useRef<HTMLDivElement>(null)
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const [hoveredClose, setHoveredClose] = useState(false)
+
+    const [displayColorPicker, setDisplayColorPicker] = useState(false)
+
+    const handleClick = () => {
+        setDisplayColorPicker(!displayColorPicker)
+    }
+
+    const handleClose = () => {
+        setDisplayColorPicker(false)
+    }
+
+    const handleClickOutside = (event: any) => {
+        if (
+            ref.current &&
+            buttonRef.current &&
+            !ref.current.contains(event.target) &&
+            !buttonRef.current.contains(event.target)
+        ) {
+            handleClose()
+        }
+    }
+
+    const onChange = (newColor: any) => {
+        updateGlobalColor(props.colorName, newColor.hex)
+        context.setState((prevState) => ({
+            ...prevState,
+            config: { ...prevState.config, colors: { ...prevState.config.colors, [props.colorName]: newColor.hex } }
+        }))
+        // hopefully after the setState is done
+        setTimeout(() => GameRenderer.render(), 10)
+    }
+
+    const resetColor = () => {
+        onChange({ hex: DEFAULT_GLOBAL_COLORS[props.colorName as Colors] })
+    }
+
+    useEffect(() => {
+        window.addEventListener('mousedown', handleClickOutside)
+
+        return () => window.removeEventListener('mousedown', handleClickOutside)
+    }, [])
+
+    return (
+        <>
+            <div className={'ml-2 mb-2 text-xs flex flex-start justify-start items-center'}>
+                {/*Background:*/}
+                {props.displayName}:
+                <button
+                    ref={buttonRef}
+                    className={'text-xs ml-2 px-4 py-3 mr-2 flex flex-row hover:bg-cyanDark rounded-md text-white'}
+                    style={{ backgroundColor: value, border: '2px solid white' }}
+                    onClick={handleClick}
+                ></button>
+                <div
+                    className="rounded-full overflow-clip"
+                    onClick={() => resetColor()}
+                    onMouseEnter={() => setHoveredClose(true)}
+                    onMouseLeave={() => setHoveredClose(false)}
+                >
+                    <IconContext.Provider
+                        value={{
+                            color: 'white',
+                            className: 'w-5 h-5'
+                        }}
+                    >
+                        {hoveredClose ? <IoCloseCircle /> : <IoCloseCircleOutline />}
+                    </IconContext.Provider>
+                </div>
+            </div>
+            <div ref={ref} className={'width: w-min'}>
+                {displayColorPicker && <ChromePicker color={value} onChange={onChange} />}
+            </div>
+        </>
+    )
+}
+
 const ConfigBooleanElement: React.FC<{ configKey: keyof ClientConfig }> = ({ configKey }) => {
     const context = useAppContext()
     const value = context.state.config[configKey] as boolean
     return (
         <div className={'flex flex-row items-center mb-2'}>
             <input
                 type={'checkbox'}
-                checked={value}
+                checked={value as any}
                 onChange={(e) => {
                     context.setState((prevState) => ({
                         ...prevState,
-                        config: { ...context.state.config, [configKey]: e.target.checked }
+                        config: { ...prevState.config, [configKey]: e.target.checked }
                     }))
                     localStorage.setItem('config' + configKey, JSON.stringify(e.target.checked))
                     // hopefully after the setState is done