add settings menu

2025-11-14 06:58:00 +00:00 · 2023-09-28 14:20:19 +02:00
parent 06a33c3de8
commit bb660592b2
9 changed files with 221 additions and 60 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/src/Components/Misc/InfoModal.tsx
+++ b/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
-        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',
-        }}
-      >
+      <ModalWrapper>
        <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>
  );
 };
--- a/src/Components/Misc/Separator.tsx
+++ b/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" />
+    </>
+  );
+};
--- a/src/Components/Misc/SettingsModal.tsx
+++ b/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>
+  );
+};
--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/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" />
-          <ToggleContainer>
-            <FormLabel>Keep Awake</FormLabel>
-            <Switch
-              checked={settings.keepAwake}
-              onChange={() => {
-                setSettings({ ...settings, keepAwake: !settings.keepAwake });
-              }}
-            />
-          </ToggleContainer>
-        </ToggleButtonsWrapper>
-
-        <ToggleButtonsWrapper>
-          <ToggleContainer>
-            <FormLabel>Show Start Player</FormLabel>
-            <Switch
-              checked={settings.showStartingPlayer}
-              onChange={() => {
-                setSettings({
-                  ...settings,
-                  showStartingPlayer: !settings.showStartingPlayer,
-                });
-              }}
-            />
-          </ToggleContainer>
+          <Button
+            variant="contained"
+            style={{ height: '2rem' }}
+            onClick={() => {
+              setOpenSettingsModal(true);
+            }}
+          >
+            <Cog /> &nbsp; Other settings
+          </Button>
        </ToggleButtonsWrapper>

        <FormLabel>Layout</FormLabel>
@@ -308,13 +301,16 @@ const Start = () => {
        />
      </FormControl>

-      <Paragraph
-        style={{ textAlign: 'center', maxWidth: '75%', fontSize: '0.7rem' }}
-      >
-        If you're on iOS, this page works better if you{' '}
-        <strong>hide the toolbar</strong> or{' '}
-        <strong>add the app to your home screen</strong>.
-      </Paragraph>
+      {!isPWA && (
+        <Paragraph
+          style={{ textAlign: 'center', maxWidth: '75%', fontSize: '0.7rem' }}
+        >
+          If you're on iOS, this page works better if you{' '}
+          <strong>hide the toolbar</strong> or{' '}
+          <strong>add the app to your home screen</strong>.
+        </Paragraph>
+      )}
+
      <StartButtonFooter>
        <Button
          size="large"
--- a/src/Contexts/GlobalSettingsContext.tsx
+++ b/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 =
--- a/src/Data/theme.ts
+++ b/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',
+        },
+      },
+    },
  },
 });
--- a/src/Providers/GlobalSettingsProvider.tsx
+++ b/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,
--- a/src/Providers/PlayersProvider.tsx
+++ b/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');