From bb660592b2d08dbbe25aeb0ae2da9225aae97a2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Thu, 28 Sep 2023 14:20:19 +0200 Subject: [PATCH] add settings menu --- bun.lockb | Bin 428108 -> 428108 bytes src/Components/Misc/InfoModal.tsx | 35 ++--- src/Components/Misc/Separator.tsx | 25 ++++ src/Components/Misc/SettingsModal.tsx | 128 +++++++++++++++++++ src/Components/Views/StartMenu/StartMenu.tsx | 78 ++++++----- src/Contexts/GlobalSettingsContext.tsx | 1 + src/Data/theme.ts | 10 +- src/Providers/GlobalSettingsProvider.tsx | 2 + src/Providers/PlayersProvider.tsx | 2 +- 9 files changed, 221 insertions(+), 60 deletions(-) create mode 100644 src/Components/Misc/Separator.tsx create mode 100644 src/Components/Misc/SettingsModal.tsx diff --git a/bun.lockb b/bun.lockb index 2cd48c1d323f6e700d3dce71a79785fc0b220bf8..28a77e844cd0700d19529eec30b104f682f599cf 100755 GIT binary patch delta 144 zcmX>zLF&u|sSSxv%JEL@j0_A68#MT{L9_t_LsBUd1H+v&ds)`9urV|M#hY84+FP6$ zx3@Skz1d_5lD!cP(Iue5pAFQ+K#UmE^ow7ax~E_G%B0aA^Nk6JnSq#Pd(1c14-)}$ CdMFYA delta 144 zcmX>zLF&u|sSSxv%JQkqj0_A68#3PHfoKB;hQ3Km3=9+EezB}&VPj|jiZ{17wYNAi zZf|j7db7zABzr>|qDvsYje#E0ach%r_<=W(H!G?J?h2KTHGw D_5&?Z diff --git a/src/Components/Misc/InfoModal.tsx b/src/Components/Misc/InfoModal.tsx index 34ecdab..09761f2 100644 --- 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 ( -
+

📋 Usage Guide

@@ -89,7 +90,7 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => { for more info about this web app.

-
+ ); }; diff --git a/src/Components/Misc/Separator.tsx b/src/Components/Misc/Separator.tsx new file mode 100644 index 0000000..c476e4e --- /dev/null +++ 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 ( + <> + + + + + ); +}; diff --git a/src/Components/Misc/SettingsModal.tsx b/src/Components/Misc/SettingsModal.tsx new file mode 100644 index 0000000..4df8852 --- /dev/null +++ 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 ( + + + +

⚙️ Settings ⚙️

+ + + Show Start Player + { + setSettings({ + ...settings, + showStartingPlayer: !settings.showStartingPlayer, + }); + }} + /> + + + On start or reset of game, will pick a random player who will + start first if this is enabled. + + + + + Keep Awake + { + setSettings({ ...settings, keepAwake: !settings.keepAwake }); + }} + /> + + + Will prevent device from going to sleep while this app is open if + this is enabled. + + + + + Go fullscreen on start (Android only) + { + setSettings({ + ...settings, + goFullscreenOnStart: !settings.goFullscreenOnStart, + }); + }} + /> + + + Will enter fullscreen mode when starting a game if this is + enabled. + + + {!isPWA && ( + <> + + + + + Tip: You can{' '} + add this webapp to your home page on iOS or{' '} + install it on Android to have it act just like a + normal app! + + + + If you do, this app will work offline and the toolbar will be + automatically hidden. + + + + )} + + + + + + ); +}; diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 1111222..86fab7c 100644 --- 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 || { @@ -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); }} /> { - setOpenModal(false); + setOpenInfoModal(false); }} - isOpen={openModal} + isOpen={openInfoModal} + /> + + { + setOpenSettingsModal(false); + }} + isOpen={openSettingsModal} />

Life Trinket

- Number of Players { }} /> - - - Keep Awake - { - setSettings({ ...settings, keepAwake: !settings.keepAwake }); - }} - /> - - - - - - Show Start Player - { - setSettings({ - ...settings, - showStartingPlayer: !settings.showStartingPlayer, - }); - }} - /> - + Layout @@ -308,13 +301,16 @@ const Start = () => { /> - - If you're on iOS, this page works better if you{' '} - hide the toolbar or{' '} - add the app to your home screen. - + {!isPWA && ( + + If you're on iOS, this page works better if you{' '} + hide the toolbar or{' '} + add the app to your home screen. + + )} +