bugfixes

front-end/src/layouts/chroma-layout.tsx

@@ -1,18 +1,21 @@
 import { FC, ReactNode } from 'react';
 import { Box } from '@mui/material';
+import { useRecoilValue } from 'recoil';
+import { displayChromaKeyAtom } from 'src/stores/recoil';
 
 interface Props {
   children?: ReactNode;
 }
 
 export const ChromaLayout: FC<Props> = ({ children }) => {
+  const chromaKey = useRecoilValue(displayChromaKeyAtom);
   return (
     <Box>
       {/* because mui is dumb */}
       <style>
         {`
           body {
-            background: #00000000
+            background: ${chromaKey}
           }
         `}
       </style>
@@ -21,7 +24,7 @@ export const ChromaLayout: FC<Props> = ({ children }) => {
         sx={{
           height: '100vh',
           width: '100vw',
-          overflow: 'hidden',
+          overflow: 'hidden'
         }}
       >
         {children}

front-end/src/stores/recoil-effects.ts

@@ -5,7 +5,11 @@ export const localStorageEffect: (key: string) => AtomEffect<any> =
   ({ setSelf, onSet }) => {
     const savedValue = localStorage.getItem(key);
     if (savedValue != null) {
-      setSelf(JSON.parse(savedValue));
+      let val = undefined;
+      try {
+        val = JSON.parse(savedValue);
+      } catch (_) {}
+      setSelf(val);
     }
 
     onSet((newValue, _, isReset) => {
@@ -14,3 +18,49 @@ export const localStorageEffect: (key: string) => AtomEffect<any> =
         : localStorage.setItem(key, JSON.stringify(newValue));
     });
   };
+
+
+/**
+ * An atom effect that is basically a local storage store, but also checks the query parameters
+ * for a override default value.
+ * 
+ * In a perfect world, the query parameter part would be its own effect, but unfortunatly, when 
+ * calling setSelf from the non-primary effect, it doesn't trigger the onSet event of the primary
+ * effect, so we have to combine them.  It's dumb.
+ * 
+ * @param key the query parameter/local storage key
+ * @returns an atom effect
+ */
+export const localStorageQueryParamDefaultEffect: (
+  key: string
+) => AtomEffect<any> =
+  (key: string) =>
+  ({ setSelf, onSet }) => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const qpVal = urlParams.get(key);
+    const savedValue = localStorage.getItem(key);
+
+    // The val to set
+    let val = undefined;
+
+    if (savedValue != null) {
+      try {
+        val = JSON.parse(savedValue);
+      } catch (_) {}
+    }
+
+    // If the query param is set (and different)
+    if (qpVal && qpVal !== val) {
+      val = qpVal;
+      localStorage.setItem(key, JSON.stringify(val));
+    }
+
+    // Set the value
+    setSelf(val);
+
+    onSet((newValue, _, isReset) => {
+      isReset
+        ? localStorage.removeItem(key)
+        : localStorage.setItem(key, JSON.stringify(newValue));
+    });
+  };

front-end/src/stores/recoil/ui-settings.ts

@@ -1,6 +1,9 @@
 import { User, Team } from '@toa-lib/models';
 import { atom } from 'recoil';
-import { localStorageEffect } from '../recoil-effects';
+import {
+  localStorageEffect,
+  localStorageQueryParamDefaultEffect
+} from '../recoil-effects';
 
 /**
  * @section UI SETTINGS STATE
@@ -74,8 +77,9 @@ export const displayIdAtom = atom({
   key: 'displayIDAtom',
   default: 0
 });
+
 export const displayChromaKeyAtom = atom({
   key: 'chromaKeyAtom',
   default: '#ff00ff',
-  effects: [localStorageEffect('chromaKey')]
+  effects: [localStorageQueryParamDefaultEffect('chromaKey')]
 });