move initialGameSettings to global settings

src/Components/LifeTrinket.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { InitialSettings } from '../Data/getInitialPlayers';
 import Play from './Views/Play';
 import StartMenu from './Views/StartMenu/StartMenu';
 import { useGlobalSettings } from '../Hooks/useGlobalSettings';
@@ -31,21 +29,7 @@ const EmergencyResetButton = styled.button`
 `;
 
 export const LifeTrinket = () => {
-  const savedGameSettings = localStorage.getItem('initialGameSettings');
+  const { showPlay, goToStart, initialGameSettings } = useGlobalSettings();
-
-  const { showPlay, goToStart } = useGlobalSettings();
-
-  const [initialGameSettings, setInitialGameSettings] =
-    useState<InitialSettings | null>(
-      savedGameSettings ? JSON.parse(savedGameSettings) : null
-    );
-
-  useEffect(() => {
-    localStorage.setItem(
-      'initialGameSettings',
-      JSON.stringify(initialGameSettings)
-    );
-  }, [initialGameSettings]);
 
   return (
     <>
@@ -61,10 +45,7 @@ export const LifeTrinket = () => {
         </PlayWrapper>
       ) : (
         <StartWrapper>
-          <StartMenu
+          <StartMenu />
-            initialGameSettings={initialGameSettings}
-            setInitialGameSettings={setInitialGameSettings}
-          />
         </StartWrapper>
       )}
     </>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -97,15 +97,16 @@ const healthMarks = [
   },
 ];
 
-type StartProps = {
+const Start = () => {
-  setInitialGameSettings: (options: InitialSettings) => void;
-  initialGameSettings: InitialSettings | null;
-};
-
-const Start = ({ initialGameSettings, setInitialGameSettings }: StartProps) => {
   const { setPlayers } = usePlayers();
   const analytics = useAnalytics();
-  const { fullscreen, wakeLock, setShowPlay } = useGlobalSettings();
+  const {
+    fullscreen,
+    wakeLock,
+    setShowPlay,
+    initialGameSettings,
+    setInitialGameSettings,
+  } = useGlobalSettings();
 
   const [openModal, setOpenModal] = useState(false);
   const [keepAwake, setKeepAwake] = useState(true);
@@ -132,8 +133,6 @@ const Start = ({ initialGameSettings, setInitialGameSettings }: StartProps) => {
       console.error(error);
     }
 
-    console.log('go to start', wakeLock.active);
-
     if (keepAwake) {
       wakeLock.request();
     }

src/Contexts/GlobalSettingsContext.tsx

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import { InitialSettings } from '../Data/getInitialPlayers';
 
 export type GlobalSettingsContextType = {
   fullscreen: {
@@ -17,6 +18,8 @@ export type GlobalSettingsContextType = {
   goToStart: () => void;
   showPlay: boolean;
   setShowPlay: (showPlay: boolean) => void;
+  initialGameSettings: InitialSettings | null;
+  setInitialGameSettings: (initialGameSettings: InitialSettings) => void;
 };
 
 export const GlobalSettingsContext =

src/Providers/GlobalSettingsProvider.tsx

@@ -5,6 +5,7 @@ import {
 } from '../Contexts/GlobalSettingsContext';
 import { useWakeLock } from 'react-screen-wake-lock';
 import { useAnalytics } from '../Hooks/useAnalytics';
+import { InitialSettings } from '../Data/getInitialPlayers';
 
 export const GlobalSettingsProvider = ({
   children,
@@ -14,10 +15,24 @@ export const GlobalSettingsProvider = ({
   const analytics = useAnalytics();
 
   const savedShowPlay = localStorage.getItem('showPlay');
+  const savedGameSettings = localStorage.getItem('initialGameSettings');
+
   const [showPlay, setShowPlay] = useState<boolean>(
     savedShowPlay ? savedShowPlay === 'true' : false
   );
 
+  const [initialGameSettings, setInitialGameSettings] =
+    useState<InitialSettings | null>(
+      savedGameSettings ? JSON.parse(savedGameSettings) : null
+    );
+
+  useEffect(() => {
+    localStorage.setItem(
+      'initialGameSettings',
+      JSON.stringify(initialGameSettings)
+    );
+  }, [initialGameSettings]);
+
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   const enableFullscreen = () => {
@@ -62,7 +77,6 @@ export const GlobalSettingsProvider = ({
 
   const ctxValue = useMemo((): GlobalSettingsContextType => {
     const goToStart = async () => {
-      // this function is broken for the moment, need to set players object
       const currentPlayers = localStorage.getItem('players');
 
       if (currentPlayers) {
@@ -72,8 +86,6 @@ export const GlobalSettingsProvider = ({
       }
 
       await removeLocalStorage();
-
-      // setPlayers([]);
     };
 
     const toggleWakeLock = async () => {
@@ -98,10 +110,13 @@ export const GlobalSettingsProvider = ({
       goToStart,
       showPlay,
       setShowPlay,
+      initialGameSettings,
+      setInitialGameSettings,
     };
   }, [
     active,
     analytics,
+    initialGameSettings,
     isFullscreen,
     isSupported,
     release,