add settings menu

src/Components/Misc/InfoModal.tsx

@@ -1,5 +1,21 @@
 import { Modal } from '@mui/material';
 import { theme } from '../../Data/theme';
+import styled from 'styled-components';
+
+export const ModalWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80vw;
+  height: 85vh;
+  background-color: ${theme.palette.background.default};
+  padding: 1rem;
+  overflow: scroll;
+  border-radius: 1rem;
+  color: ${theme.palette.text.primary};
+  border: none;
+`;
 
 type InfoModalProps = {
   isOpen: boolean;
@@ -9,22 +25,7 @@ type InfoModalProps = {
 export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
   return (
     <Modal open={isOpen} onClose={closeModal}>
-      <div
+      <ModalWrapper>
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          width: '80vw',
-          height: '80vh',
-          backgroundColor: theme.palette.background.default,
-          padding: '1rem',
-          overflow: 'scroll',
-          borderRadius: '1rem',
-          color: theme.palette.text.primary,
-          border: 'none',
-        }}
-      >
         <div>
           <h2 style={{ textAlign: 'center' }}>📋 Usage Guide</h2>
           <p>
@@ -89,7 +90,7 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
           </a>
           for more info about this web app.
         </div>
-      </div>
+      </ModalWrapper>
     </Modal>
   );
 };

src/Components/Misc/Separator.tsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { Spacer } from './Spacer';
+
+const SeparatorContainer = styled.div<{ width?: string; height?: string }>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background-color: #00000025;
+  border-radius: 50px;
+`;
+
+export const Separator = ({
+  width = '100%',
+  height = '100%',
+}: {
+  width?: string;
+  height?: string;
+}) => {
+  return (
+    <>
+      <Spacer height="0.5rem" />
+      <SeparatorContainer width={width} height={height} />
+      <Spacer height="0.5rem" />
+    </>
+  );
+};

src/Components/Misc/SettingsModal.tsx

@@ -0,0 +1,128 @@
+import { Button, FormLabel, Modal, Switch } from '@mui/material';
+import { ModalWrapper } from './InfoModal';
+import styled from 'styled-components';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { theme } from '../../Data/theme';
+import { Separator } from './Separator';
+import { Paragraph } from './TextComponents';
+
+const SettingContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const ToggleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+
+const Description = styled.p`
+  margin-top: -0.25rem;
+  margin-right: 3.5rem;
+  font-size: 0.8rem;
+  text-align: left;
+  color: ${theme.palette.text.secondary};
+`;
+
+type SettingsModalProps = {
+  isOpen: boolean;
+  closeModal: () => void;
+};
+
+export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
+  const { settings, setSettings, isPWA } = useGlobalSettings();
+
+  return (
+    <Modal open={isOpen} onClose={closeModal}>
+      <ModalWrapper>
+        <Container>
+          <h2 style={{ textAlign: 'center' }}>⚙️ Settings ⚙️</h2>
+          <SettingContainer>
+            <ToggleContainer>
+              <FormLabel>Show Start Player</FormLabel>
+              <Switch
+                checked={settings.showStartingPlayer}
+                onChange={() => {
+                  setSettings({
+                    ...settings,
+                    showStartingPlayer: !settings.showStartingPlayer,
+                  });
+                }}
+              />
+            </ToggleContainer>
+            <Description>
+              On start or reset of game, will pick a random player who will
+              start first if this is enabled.
+            </Description>
+          </SettingContainer>
+          <SettingContainer>
+            <ToggleContainer>
+              <FormLabel>Keep Awake</FormLabel>
+              <Switch
+                checked={settings.keepAwake}
+                onChange={() => {
+                  setSettings({ ...settings, keepAwake: !settings.keepAwake });
+                }}
+              />
+            </ToggleContainer>
+            <Description>
+              Will prevent device from going to sleep while this app is open if
+              this is enabled.
+            </Description>
+          </SettingContainer>
+          <SettingContainer>
+            <ToggleContainer>
+              <FormLabel>Go fullscreen on start (Android only)</FormLabel>
+              <Switch
+                checked={settings.goFullscreenOnStart}
+                onChange={() => {
+                  setSettings({
+                    ...settings,
+                    goFullscreenOnStart: !settings.goFullscreenOnStart,
+                  });
+                }}
+              />
+            </ToggleContainer>
+            <Description>
+              Will enter fullscreen mode when starting a game if this is
+              enabled.
+            </Description>
+          </SettingContainer>
+          {!isPWA && (
+            <>
+              <Separator height="2px" />
+              <SettingContainer>
+                <ToggleContainer>
+                  <Paragraph>
+                    <b>Tip:</b> You can{' '}
+                    <b>add this webapp to your home page on iOS</b> or{' '}
+                    <b>install it on Android</b> to have it act just like a
+                    normal app!
+                  </Paragraph>
+                </ToggleContainer>
+                <Description>
+                  If you do, this app will work offline and the toolbar will be
+                  automatically hidden.
+                </Description>
+              </SettingContainer>
+            </>
+          )}
+          <Separator height="2px" />
+          <Button variant="contained" onClick={closeModal}>
+            Save and Close
+          </Button>
+        </Container>
+      </ModalWrapper>
+    </Modal>
+  );
+};

src/Components/Views/StartMenu/StartMenu.tsx

@@ -6,7 +6,7 @@ import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
 import { createInitialPlayers } from '../../../Data/getInitialPlayers';
 import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
-import { Info } from '../../../Icons/generated';
+import { Cog, Info } from '../../../Icons/generated';
 import { InfoModal } from '../../Misc/InfoModal';
 import { SupportMe } from '../../Misc/SupportMe';
 import { H2, Paragraph } from '../../Misc/TextComponents';
@@ -15,6 +15,7 @@ import { Spacer } from '../../Misc/Spacer';
 import { usePlayers } from '../../../Hooks/usePlayers';
 import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
 import { InitialGameSettings } from '../../../Types/Settings';
+import { SettingsModal } from '../../Misc/SettingsModal';
 
 const MainWrapper = styled.div`
   width: 100dvw;
@@ -36,7 +37,8 @@ const StartButtonFooter = styled.div`
 const ToggleButtonsWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const ToggleContainer = styled.div`
@@ -105,10 +107,11 @@ const Start = () => {
     initialGameSettings,
     setInitialGameSettings,
     settings,
-    setSettings,
+    isPWA,
   } = useGlobalSettings();
 
-  const [openModal, setOpenModal] = useState(false);
+  const [openInfoModal, setOpenInfoModal] = useState(false);
+  const [openSettingsModal, setOpenSettingsModal] = useState(false);
 
   const [playerOptions, setPlayerOptions] = useState<InitialGameSettings>(
     initialGameSettings || {
@@ -134,7 +137,7 @@ const Start = () => {
       console.error(error);
     }
 
-    if (settings.keepAwake) {
+    if (settings.keepAwake && !wakeLock.active) {
       wakeLock.request();
     }
 
@@ -190,21 +193,27 @@ const Start = () => {
         size="2rem"
         style={{ position: 'absolute', top: '1rem', left: '1rem' }}
         onClick={() => {
-          setOpenModal(!openModal);
+          setOpenInfoModal(!openInfoModal);
         }}
       />
 
       <InfoModal
         closeModal={() => {
-          setOpenModal(false);
+          setOpenInfoModal(false);
         }}
-        isOpen={openModal}
+        isOpen={openInfoModal}
+      />
+
+      <SettingsModal
+        closeModal={() => {
+          setOpenSettingsModal(false);
+        }}
+        isOpen={openSettingsModal}
       />
 
       <SupportMe />
 
       <H2>Life Trinket</H2>
-
       <FormControl focused={false} style={{ width: '80vw' }}>
         <FormLabel>Number of Players</FormLabel>
         <Slider
@@ -271,31 +280,15 @@ const Start = () => {
               }}
             />
           </ToggleContainer>
-          <Spacer width="1rem" />
+          <Button
-          <ToggleContainer>
+            variant="contained"
-            <FormLabel>Keep Awake</FormLabel>
+            style={{ height: '2rem' }}
-            <Switch
+            onClick={() => {
-              checked={settings.keepAwake}
+              setOpenSettingsModal(true);
-              onChange={() => {
-                setSettings({ ...settings, keepAwake: !settings.keepAwake });
             }}
-            />
+          >
-          </ToggleContainer>
+            <Cog /> &nbsp; Other settings
-        </ToggleButtonsWrapper>
+          </Button>
-
-        <ToggleButtonsWrapper>
-          <ToggleContainer>
-            <FormLabel>Show Start Player</FormLabel>
-            <Switch
-              checked={settings.showStartingPlayer}
-              onChange={() => {
-                setSettings({
-                  ...settings,
-                  showStartingPlayer: !settings.showStartingPlayer,
-                });
-              }}
-            />
-          </ToggleContainer>
         </ToggleButtonsWrapper>
 
         <FormLabel>Layout</FormLabel>
@@ -308,6 +301,7 @@ const Start = () => {
         />
       </FormControl>
 
+      {!isPWA && (
         <Paragraph
           style={{ textAlign: 'center', maxWidth: '75%', fontSize: '0.7rem' }}
         >
@@ -315,6 +309,8 @@ const Start = () => {
           <strong>hide the toolbar</strong> or{' '}
           <strong>add the app to your home screen</strong>.
         </Paragraph>
+      )}
+
       <StartButtonFooter>
         <Button
           size="large"

src/Contexts/GlobalSettingsContext.tsx

@@ -22,6 +22,7 @@ export type GlobalSettingsContextType = {
   setInitialGameSettings: (initialGameSettings: InitialGameSettings) => void;
   settings: Settings;
   setSettings: (settings: Settings) => void;
+  isPWA: boolean;
 };
 
 export const GlobalSettingsContext =

src/Data/theme.ts

@@ -13,7 +13,7 @@ export const theme = createTheme({
     },
     text: {
       primary: '#F5F5F5',
-      secondary: '#FFFFF0',
+      secondary: '#b3b39b',
     },
     action: {
       disabled: '#5E714C',
@@ -28,6 +28,7 @@ export const theme = createTheme({
       styleOverrides: {
         root: {
           fontSize: '1rem',
+          color: '#F5F5F5',
         },
       },
     },
@@ -96,5 +97,12 @@ export const theme = createTheme({
         },
       },
     },
+    MuiSwitch: {
+      styleOverrides: {
+        colorPrimary: {
+          color: '#5E714C',
+        },
+      },
+    },
   },
 });

src/Providers/GlobalSettingsProvider.tsx

@@ -89,6 +89,7 @@ export const GlobalSettingsProvider = ({
     };
 
     const toggleWakeLock = async () => {
+      console.log('on press', active);
       if (active) {
         setSettings({ ...settings, keepAwake: false });
         release();
@@ -136,6 +137,7 @@ export const GlobalSettingsProvider = ({
       setInitialGameSettings,
       settings,
       setSettings,
+      isPWA: window?.matchMedia('(display-mode: standalone)').matches,
     };
   }, [
     active,

src/Providers/PlayersProvider.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useEffect } from 'react';
 import { Player } from '../Types/Player';
 import { useMemo, useState } from 'react';
 import { PlayersContextType, PlayersContext } from '../Contexts/PlayersContext';
-import { InitialGameSettings } from '../Data/getInitialPlayers';
+import { InitialGameSettings } from '../Types/Settings';
 
 export const PlayersProvider = ({ children }: { children: ReactNode }) => {
   const savedPlayers = localStorage.getItem('players');