first pass of settings in local storage

src/Components/Views/StartMenu/StartMenu.tsx

@@ -3,10 +3,7 @@ import Slider from '@mui/material/Slider';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
-import {
-  InitialGameSettings,
-  createInitialPlayers,
-} from '../../../Data/getInitialPlayers';
+import { createInitialPlayers } from '../../../Data/getInitialPlayers';
 import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
 import { Info } from '../../../Icons/generated';
@@ -17,6 +14,7 @@ import LayoutOptions from './LayoutOptions';
 import { Spacer } from '../../Misc/Spacer';
 import { usePlayers } from '../../../Hooks/usePlayers';
 import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
+import { InitialGameSettings } from '../../../Types/Settings';
 
 const MainWrapper = styled.div`
   width: 100dvw;
@@ -106,12 +104,11 @@ const Start = () => {
     setShowPlay,
     initialGameSettings,
     setInitialGameSettings,
-    showStartingPlayer,
-    setShowStartingPlayer,
+    settings,
+    setSettings,
   } = useGlobalSettings();
 
   const [openModal, setOpenModal] = useState(false);
-  const [keepAwake, setKeepAwake] = useState(true);
 
   const [playerOptions, setPlayerOptions] = useState<InitialGameSettings>(
     initialGameSettings || {
@@ -130,12 +127,14 @@ const Start = () => {
     analytics.trackEvent('game_started', { ...initialGameSettings });
 
     try {
-      fullscreen.enableFullscreen();
+      if (settings.goFullscreenOnStart) {
+        fullscreen.enableFullscreen();
+      }
     } catch (error) {
       console.error(error);
     }
 
-    if (keepAwake) {
+    if (settings.keepAwake) {
       wakeLock.request();
     }
 
@@ -276,8 +275,10 @@ const Start = () => {
           <ToggleContainer>
             <FormLabel>Keep Awake</FormLabel>
             <Switch
-              checked={keepAwake}
-              onChange={() => setKeepAwake(!keepAwake)}
+              checked={settings.keepAwake}
+              onChange={() => {
+                setSettings({ ...settings, keepAwake: !settings.keepAwake });
+              }}
             />
           </ToggleContainer>
         </ToggleButtonsWrapper>
@@ -286,8 +287,13 @@ const Start = () => {
           <ToggleContainer>
             <FormLabel>Show Start Player</FormLabel>
             <Switch
-              checked={showStartingPlayer}
-              onChange={() => setShowStartingPlayer(!showStartingPlayer)}
+              checked={settings.showStartingPlayer}
+              onChange={() => {
+                setSettings({
+                  ...settings,
+                  showStartingPlayer: !settings.showStartingPlayer,
+                });
+              }}
             />
           </ToggleContainer>
         </ToggleButtonsWrapper>

src/Contexts/GlobalSettingsContext.tsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { InitialGameSettings } from '../Data/getInitialPlayers';
+import { InitialGameSettings, Settings } from '../Types/Settings';
 
 export type GlobalSettingsContextType = {
   fullscreen: {
@@ -20,6 +20,8 @@ export type GlobalSettingsContextType = {
   setShowPlay: (showPlay: boolean) => void;
   initialGameSettings: InitialGameSettings | null;
   setInitialGameSettings: (initialGameSettings: InitialGameSettings) => void;
+  settings: Settings;
+  setSettings: (settings: Settings) => void;
   showStartingPlayer: boolean;
   setShowStartingPlayer: (showStartingPlayer: boolean) => void;
 };

src/Data/getInitialPlayers.ts

@@ -1,13 +1,7 @@
 import { Player, Rotation } from '../Types/Player';
+import { InitialGameSettings } from '../Types/Settings';
 import { GridTemplateAreas } from './GridTemplateAreas';
 
-export type InitialGameSettings = {
-  startingLifeTotal: number;
-  useCommanderDamage: boolean;
-  numberOfPlayers: number;
-  gridAreas: GridTemplateAreas;
-};
-
 const presetColors = [
   '#F06292', // Light Pink
   '#4DB6AC', // Teal

src/Providers/GlobalSettingsProvider.tsx

@@ -5,7 +5,7 @@ import {
 } from '../Contexts/GlobalSettingsContext';
 import { useWakeLock } from 'react-screen-wake-lock';
 import { useAnalytics } from '../Hooks/useAnalytics';
-import { InitialGameSettings } from '../Data/getInitialPlayers';
+import { InitialGameSettings, Settings } from '../Types/Settings';
 
 export const GlobalSettingsProvider = ({
   children,
@@ -16,6 +16,7 @@ export const GlobalSettingsProvider = ({
 
   const savedShowPlay = localStorage.getItem('showPlay');
   const savedGameSettings = localStorage.getItem('initialGameSettings');
+  const savedSettings = localStorage.getItem('settings');
 
   const [showPlay, setShowPlay] = useState<boolean>(
     savedShowPlay ? savedShowPlay === 'true' : false
@@ -27,6 +28,12 @@ export const GlobalSettingsProvider = ({
       savedGameSettings ? JSON.parse(savedGameSettings) : null
     );
 
+  const [settings, setSettings] = useState<Settings>(
+    savedSettings
+      ? JSON.parse(savedSettings)
+      : { goFullscreenOnStart: true, keepAwake: true, showStartingPlayer: true }
+  );
+
   useEffect(() => {
     localStorage.setItem(
       'initialGameSettings',
@@ -34,12 +41,18 @@ export const GlobalSettingsProvider = ({
     );
   }, [initialGameSettings]);
 
+  useEffect(() => {
+    localStorage.setItem('settings', JSON.stringify(settings));
+  }, [settings]);
+
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const enableFullscreen = () => {
     if (document?.documentElement.requestFullscreen) {
       document.documentElement.requestFullscreen().then(() => {
         setIsFullscreen(true);
+        // TODO Remove this when full settings menu is implemented
+        setSettings({ ...settings, goFullscreenOnStart: true });
       });
     }
   };
@@ -48,13 +61,16 @@ export const GlobalSettingsProvider = ({
     if (document.exitFullscreen) {
       document.exitFullscreen().then(() => {
         setIsFullscreen(false);
+        // TODO Remove this when full settings menu is implemented
+        setSettings({ ...settings, goFullscreenOnStart: false });
       });
     }
   };
 
   useEffect(() => {
+    // This is called when fullscreen is entered or exited, by any means
     const fullscreenChangeHandler = () => {
-      setIsFullscreen(!!document.fullscreenElement);
+      setIsFullscreen(Boolean(document.fullscreenElement));
     };
 
     document.addEventListener('fullscreenchange', fullscreenChangeHandler);
@@ -66,7 +82,11 @@ export const GlobalSettingsProvider = ({
 
   const { isSupported, release, released, request, type } = useWakeLock();
 
-  const active = released === undefined ? false : !released;
+  const active = settings.keepAwake;
+
+  if (active && released === undefined) {
+    request();
+  }
 
   const removeLocalStorage = async () => {
     localStorage.removeItem('initialGameSettings');
@@ -91,10 +111,12 @@ export const GlobalSettingsProvider = ({
 
     const toggleWakeLock = async () => {
       if (active) {
+        setSettings({ ...settings, keepAwake: false });
         release();
         return;
       }
 
+      setSettings({ ...settings, keepAwake: true });
       request();
     };
 
@@ -113,6 +135,8 @@ export const GlobalSettingsProvider = ({
       setShowPlay,
       initialGameSettings,
       setInitialGameSettings,
+      settings,
+      setSettings,
       showStartingPlayer,
       setShowStartingPlayer,
     };
@@ -124,6 +148,7 @@ export const GlobalSettingsProvider = ({
     isSupported,
     release,
     request,
+    settings,
     showPlay,
     showStartingPlayer,
     type,

src/Types/Settings.ts

@@ -0,0 +1,14 @@
+import { GridTemplateAreas } from '../Data/GridTemplateAreas';
+
+export type Settings = {
+  keepAwake: boolean;
+  showStartingPlayer: boolean;
+  goFullscreenOnStart: boolean;
+};
+
+export type InitialGameSettings = {
+  startingLifeTotal: number;
+  useCommanderDamage: boolean;
+  numberOfPlayers: number;
+  gridAreas: GridTemplateAreas;
+};