From bcaab4fdb03fce8d79d93a46fc81418a6bff67b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Wed, 27 Sep 2023 20:01:34 +0200 Subject: [PATCH] first pass of settings in local storage --- src/Components/Views/StartMenu/StartMenu.tsx | 32 ++++++++++++-------- src/Contexts/GlobalSettingsContext.tsx | 4 ++- src/Data/getInitialPlayers.ts | 8 +---- src/Providers/GlobalSettingsProvider.tsx | 31 +++++++++++++++++-- src/Types/Settings.ts | 14 +++++++++ 5 files changed, 65 insertions(+), 24 deletions(-) create mode 100644 src/Types/Settings.ts diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index e3f5806..1111222 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/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 || { @@ -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 = () => { Keep Awake setKeepAwake(!keepAwake)} + checked={settings.keepAwake} + onChange={() => { + setSettings({ ...settings, keepAwake: !settings.keepAwake }); + }} /> @@ -286,8 +287,13 @@ const Start = () => { Show Start Player setShowStartingPlayer(!showStartingPlayer)} + checked={settings.showStartingPlayer} + onChange={() => { + setSettings({ + ...settings, + showStartingPlayer: !settings.showStartingPlayer, + }); + }} /> diff --git a/src/Contexts/GlobalSettingsContext.tsx b/src/Contexts/GlobalSettingsContext.tsx index 1b44527..0bc105c 100644 --- a/src/Contexts/GlobalSettingsContext.tsx +++ b/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; }; diff --git a/src/Data/getInitialPlayers.ts b/src/Data/getInitialPlayers.ts index e457229..6fe2504 100644 --- a/src/Data/getInitialPlayers.ts +++ b/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 diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index cd9e1e6..300d3a5 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/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( savedShowPlay ? savedShowPlay === 'true' : false @@ -27,6 +28,12 @@ export const GlobalSettingsProvider = ({ savedGameSettings ? JSON.parse(savedGameSettings) : null ); + const [settings, setSettings] = useState( + 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, diff --git a/src/Types/Settings.ts b/src/Types/Settings.ts new file mode 100644 index 0000000..840daf6 --- /dev/null +++ b/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; +};