diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx index fee0991..337dce1 100644 --- a/src/Components/Buttons/CommanderDamage.tsx +++ b/src/Components/Buttons/CommanderDamage.tsx @@ -4,6 +4,7 @@ import { Player, Rotation } from '../../Types/Player'; import { useRef, useState } from 'react'; import { OutlinedText } from '../Misc/OutlinedText'; import { decrementTimeoutMs } from '../../Data/constants'; +import { usePlayers } from '../../Hooks/usePlayers'; const CommanderDamageContainer = styled.div<{ $rotation: number; @@ -108,8 +109,7 @@ const PartnerDamageSeperator = styled.div<{ type CommanderDamageButtonComponentProps = { player: Player; opponent: Player; - onPlayerChange: (updatedPlayer: Player) => void; - setLifeTotal: (lifeTotal: number) => void; + handleLifeChange: (updatedLifeTotal: number) => void; }; type InputProps = { @@ -120,9 +120,9 @@ type InputProps = { export const CommanderDamage = ({ player, opponent, - onPlayerChange, - setLifeTotal, + handleLifeChange, }: CommanderDamageButtonComponentProps) => { + const { updatePlayer } = usePlayers(); const timeoutRef = useRef(undefined); const [timeoutFinished, setTimeoutFinished] = useState(false); const [hasPressedDown, setHasPressedDown] = useState(false); @@ -149,8 +149,8 @@ export const CommanderDamage = ({ ...player, commanderDamage: updatedCommanderDamage, }; - onPlayerChange(updatedPlayer); - setLifeTotal(player.lifeTotal - increment); + updatePlayer(updatedPlayer); + handleLifeChange(player.lifeTotal - increment); return; } if (currentCommanderDamage.damageTotal === 0 && increment === -1) { @@ -164,8 +164,8 @@ export const CommanderDamage = ({ ...player, commanderDamage: updatedCommanderDamage, }; - onPlayerChange(updatedPlayer); - setLifeTotal(player.lifeTotal - increment); + updatePlayer(updatedPlayer); + handleLifeChange(player.lifeTotal - increment); }; const handleDownInput = ({ opponentIndex, isPartner }: InputProps) => { diff --git a/src/Components/Counters/CommanderDamageBar.tsx b/src/Components/Counters/CommanderDamageBar.tsx index 246b6e1..73655d5 100644 --- a/src/Components/Counters/CommanderDamageBar.tsx +++ b/src/Components/Counters/CommanderDamageBar.tsx @@ -26,15 +26,13 @@ const CommanderDamageGrid = styled.div<{ $rotation: number }>` type CommanderDamageBarProps = { opponents: Player[]; player: Player; - onPlayerChange: (updatedPlayer: Player) => void; - setLifeTotal: (lifeTotal: number) => void; + handleLifeChange: (updatedLifeTotal: number) => void; }; const CommanderDamageBar = ({ opponents, player, - onPlayerChange, - setLifeTotal, + handleLifeChange, }: CommanderDamageBarProps) => { return ( ); })} diff --git a/src/Components/Counters/Counters.tsx b/src/Components/Counters/Counters.tsx index fd31baa..7de4ae7 100644 --- a/src/Components/Counters/Counters.tsx +++ b/src/Components/Counters/Counters.tsx @@ -1,7 +1,6 @@ -import { Player } from '../../Types/Player'; -import { WakeLock } from '../../Types/WakeLock'; -import LifeCounter from '../LifeCounter/LifeCounter'; import styled from 'styled-components'; +import { usePlayers } from '../../Hooks/usePlayers'; +import LifeCounter from '../LifeCounter/LifeCounter'; export const CountersWrapper = styled.div` width: 100%; @@ -29,20 +28,11 @@ export const GridItemContainer = styled.div<{ `; type CountersProps = { - players: Player[]; - onPlayerChange: (updatedPlayer: Player) => void; gridAreas: string; - goToStart: () => void; - wakeLock: WakeLock; }; -const Counters = ({ - players, - onPlayerChange, - gridAreas, - goToStart, - wakeLock, -}: CountersProps) => { +const Counters = ({ gridAreas }: CountersProps) => { + const { players } = usePlayers(); return ( @@ -53,14 +43,10 @@ const Counters = ({ $gridArea={`player${player.index}`} > opponent.index !== player.index )} - onPlayerChange={onPlayerChange} - goToStart={goToStart} - wakeLock={wakeLock} /> ); diff --git a/src/Components/Counters/ExtraCountersBar.tsx b/src/Components/Counters/ExtraCountersBar.tsx index 725543e..a73713f 100644 --- a/src/Components/Counters/ExtraCountersBar.tsx +++ b/src/Components/Counters/ExtraCountersBar.tsx @@ -10,6 +10,7 @@ import { PartnerTax, Poison, } from '../../Icons/generated'; +import { usePlayers } from '../../Hooks/usePlayers'; const Container = styled.div<{ $rotation: Rotation }>` width: 100%; @@ -56,13 +57,11 @@ const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>` type ExtraCountersBarProps = { player: Player; - onPlayerChange: (updatedPlayer: Player) => void; }; -const ExtraCountersBar = ({ - player, - onPlayerChange, -}: ExtraCountersBarProps) => { +const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => { + const { updatePlayer } = usePlayers(); + const handleCounterChange = ( updatedCounterTotal: number, type: CounterType @@ -82,7 +81,7 @@ const ExtraCountersBar = ({ }; const updatedExtraCounters = [...player.extraCounters, newCounter]; const updatedPlayer = { ...player, extraCounters: updatedExtraCounters }; - onPlayerChange(updatedPlayer); + updatePlayer(updatedPlayer); return; } @@ -94,7 +93,7 @@ const ExtraCountersBar = ({ }); const updatedPlayer = { ...player, extraCounters: updatedExtraCounters }; - onPlayerChange(updatedPlayer); + updatePlayer(updatedPlayer); }; const iconSize = diff --git a/src/Components/LifeCounter/Health.tsx b/src/Components/LifeCounter/Health.tsx index 7962a44..c87724f 100644 --- a/src/Components/LifeCounter/Health.tsx +++ b/src/Components/LifeCounter/Health.tsx @@ -96,46 +96,25 @@ export const RecentDifference = styled.span` type HealthProps = { player: Player; - onPlayerChange: (updatedPlayer: Player) => void; - differenceKey: number; - setDifferenceKey: (key: number) => void; rotation: Rotation; + handleLifeChange: (updatedLifeTotal: number) => void; + differenceKey: number; + recentDifference: number; }; const Health = ({ player, - onPlayerChange, - differenceKey, - setDifferenceKey, rotation, + handleLifeChange, + differenceKey, + recentDifference, }: HealthProps) => { - const handleLifeChange = (updatedLifeTotal: number) => { - const difference = updatedLifeTotal - player.lifeTotal; - const updatedPlayer = { - ...player, - lifeTotal: updatedLifeTotal, - hasLost: false, - }; - setRecentDifference(recentDifference + difference); - onPlayerChange(updatedPlayer); - setDifferenceKey(Date.now()); - }; - - const [recentDifference, setRecentDifference] = useState(0); const [showStartingPlayer, setShowStartingPlayer] = useState( localStorage.getItem('playing') === 'true' ); const [fontSize, setFontSize] = useState(16); const textContainerRef = useRef(null); - useEffect(() => { - const timer = setTimeout(() => { - setRecentDifference(0); - }, 3_000); - - return () => clearTimeout(timer); - }, [recentDifference]); - useEffect(() => { if (!showStartingPlayer) { const playingTimer = setTimeout(() => { diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 6630ef9..59b9ed4 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -8,7 +8,7 @@ import CommanderDamageBar from '../Counters/CommanderDamageBar'; import ExtraCountersBar from '../Counters/ExtraCountersBar'; import PlayerMenu from '../PlayerMenu/PlayerMenu'; import Health from './Health'; -import { WakeLock } from '../../Types/WakeLock'; +import { usePlayers } from '../../Hooks/usePlayers'; const LifeCounterContentWrapper = styled.div<{ $backgroundColor: string; @@ -160,42 +160,15 @@ const playerCanLose = (player: Player) => { }; type LifeCounterProps = { - backgroundColor: string; player: Player; opponents: Player[]; - onPlayerChange: (updatedPlayer: Player) => void; - goToStart: () => void; - wakeLock: WakeLock; }; -const LifeCounter = ({ - backgroundColor, - player, - opponents, - onPlayerChange, - goToStart, - wakeLock, -}: LifeCounterProps) => { - const handleLifeChange = (updatedLifeTotal: number) => { - const difference = updatedLifeTotal - player.lifeTotal; - const updatedPlayer = { - ...player, - lifeTotal: updatedLifeTotal, - hasLost: false, - }; - setRecentDifference(recentDifference + difference); - onPlayerChange(updatedPlayer); - setDifferenceKey(Date.now()); - }; - - const toggleGameLost = () => { - const updatedPlayer = { ...player, hasLost: !player.hasLost }; - onPlayerChange(updatedPlayer); - }; +const LifeCounter = ({ player, opponents }: LifeCounterProps) => { + const { updatePlayer, updateLifeTotal } = usePlayers(); const [showPlayerMenu, setShowPlayerMenu] = useState(false); const [recentDifference, setRecentDifference] = useState(0); - const [differenceKey, setDifferenceKey] = useState(Date.now()); useEffect(() => { @@ -211,7 +184,7 @@ const LifeCounter = ({ const playingTimer = setTimeout(() => { localStorage.setItem('playing', 'true'); player.showStartingPlayer = false; - onPlayerChange(player); + updatePlayer(player); }, 3_000); return () => clearTimeout(playingTimer); @@ -222,8 +195,19 @@ const LifeCounter = ({ player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side; + const handleLifeChange = (updatedLifeTotal: number) => { + const difference = updateLifeTotal(player, updatedLifeTotal); + setRecentDifference(recentDifference + difference); + setDifferenceKey(Date.now()); + }; + + const toggleGameLost = () => { + const updatedPlayer = { ...player, hasLost: !player.hasLost }; + updatePlayer(updatedPlayer); + }; + return ( - + {player.isStartingPlayer && player.showStartingPlayer && ( { @@ -263,22 +246,19 @@ const LifeCounter = ({ )} - + {showPlayerMenu && ( )} diff --git a/src/Components/LifeTrinket.tsx b/src/Components/LifeTrinket.tsx index 6cf3595..8f899e7 100644 --- a/src/Components/LifeTrinket.tsx +++ b/src/Components/LifeTrinket.tsx @@ -1,10 +1,9 @@ -import { useState, useEffect } from 'react'; -import { useWakeLock } from 'react-screen-wake-lock'; +import { useEffect, useState } from 'react'; import styled from 'styled-components'; import { InitialSettings } from '../Data/getInitialPlayers'; -import { useAnalytics } from '../Hooks/useAnalytics'; import Play from './Views/Play'; import StartMenu from './Views/StartMenu/StartMenu'; +import { useGlobalSettings } from '../Hooks/useGlobalSettings'; const StartWrapper = styled.div` max-width: fit-content; @@ -32,28 +31,14 @@ const EmergencyResetButton = styled.button` `; export const LifeTrinket = () => { - const analytics = useAnalytics(); const savedGameSettings = localStorage.getItem('initialGameSettings'); - const savedShowPlay = localStorage.getItem('showPlay'); - const { isSupported, release, released, request, type } = useWakeLock(); + const { showPlay, goToStart } = useGlobalSettings(); + const [initialGameSettings, setInitialGameSettings] = useState( savedGameSettings ? JSON.parse(savedGameSettings) : null ); - const [showPlay, setShowPlay] = useState( - savedShowPlay ? savedShowPlay === 'true' : false - ); - - const isActive = released === undefined ? false : !released; - - const wakeLock = { - isSupported, - release, - active: isActive, - request, - type, - }; useEffect(() => { localStorage.setItem( @@ -62,36 +47,11 @@ export const LifeTrinket = () => { ); }, [initialGameSettings]); - const removeLocalStorage = async () => { - localStorage.removeItem('initialGameSettings'); - localStorage.removeItem('players'); - localStorage.removeItem('playing'); - localStorage.removeItem('showPlay'); - setShowPlay(localStorage.getItem('showPlay') === 'true' ?? false); - }; - - const goToStart = async () => { - // this function is broken for the moment, need to set players object - const currentPlayers = localStorage.getItem('players'); - if (currentPlayers) { - analytics.trackEvent('go_to_start', { - playersBeforeReset: currentPlayers, - }); - } - await removeLocalStorage(); - - // setPlayers([]); - }; - return ( <> {showPlay && initialGameSettings ? ( - +

If you can see this, something is wrong.

Press screen to go to start.

@@ -104,8 +64,6 @@ export const LifeTrinket = () => { )} diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index a4021bd..9406b37 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -1,10 +1,7 @@ -import { Player } from '../../Types/Player'; -import Settings from './Settings'; -import styled from 'styled-components'; -import { css } from 'styled-components'; -import { Rotation } from '../../Types/Player'; import { Button } from '@mui/material'; -import { WakeLock } from '../../Types/WakeLock'; +import styled, { css } from 'styled-components'; +import { Player, Rotation } from '../../Types/Player'; +import Settings from './Settings'; const PlayerMenuWrapper = styled.div<{ $rotation: Rotation; @@ -66,19 +63,13 @@ const CloseButton = styled.div<{ type PlayerMenuProps = { player: Player; opponents: Player[]; - onPlayerChange: (updatedPlayer: Player) => void; setShowPlayerMenu: (showPlayerMenu: boolean) => void; - goToStart: () => void; - wakeLock: WakeLock; }; const PlayerMenu = ({ player, opponents, - onPlayerChange, setShowPlayerMenu, - goToStart, - wakeLock, }: PlayerMenuProps) => { const handleOnClick = () => { setShowPlayerMenu(false); @@ -100,10 +91,7 @@ const PlayerMenu = ({ diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index b855213..9f2665b 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -1,5 +1,8 @@ import { Button, Checkbox } from '@mui/material'; import styled, { css } from 'styled-components'; +import { InitialSettings } from '../../Data/getInitialPlayers'; +import { theme } from '../../Data/theme'; +import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { Energy, Exit, @@ -10,10 +13,7 @@ import { Poison, } from '../../Icons/generated'; import { Player, Rotation } from '../../Types/Player'; -import { WakeLock } from '../../Types/WakeLock'; -import { theme } from '../../Data/theme'; -import { InitialSettings } from '../../Data/getInitialPlayers'; -import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; +import { usePlayers } from '../../Hooks/usePlayers'; const SettingsContainer = styled.div<{ $rotation: Rotation; @@ -131,45 +131,26 @@ const CheckboxContainer = styled.div<{ $rotation: Rotation }>` type SettingsProps = { player: Player; opponents: Player[]; - onChange: (updatedPlayer: Player) => void; - goToStart: () => void; - wakeLock: WakeLock; setShowPlayerMenu: (showPlayerMenu: boolean) => void; }; -const Settings = ({ - player, - onChange, - goToStart, - wakeLock, - opponents, - setShowPlayerMenu, -}: SettingsProps) => { - const { disableFullscreen, enableFullscreen, isFullscreen } = - useGlobalSettings(); +const Settings = ({ player, opponents, setShowPlayerMenu }: SettingsProps) => { + const { fullscreen, wakeLock, goToStart } = useGlobalSettings(); + const { updatePlayer } = usePlayers(); const isSide = player.settings.rotation === Rotation.Side || player.settings.rotation === Rotation.SideFlipped; - const handleWakeLock = () => { - if (!wakeLock.active) { - wakeLock.request(); - return; - } - - wakeLock.release(); - }; - const handleColorChange = (event: React.ChangeEvent) => { const updatedPlayer = { ...player, color: event.target.value }; - onChange(updatedPlayer); + updatePlayer(updatedPlayer); }; const handleSettingsChange = (event: React.ChangeEvent) => { const { name, checked } = event.target; const updatedSettings = { ...player.settings, [name]: checked }; const updatedPlayer = { ...player, settings: updatedSettings }; - onChange(updatedPlayer); + updatePlayer(updatedPlayer); }; const handleResetGame = () => { @@ -209,21 +190,17 @@ const Settings = ({ player.showStartingPlayer = true; } - onChange(player); + updatePlayer(player); }); localStorage.setItem('playing', 'false'); setShowPlayerMenu(false); }; - const handleNewGame = () => { - goToStart(); - }; - const toggleFullscreen = () => { - if (isFullscreen) { - disableFullscreen(); + if (fullscreen.isFullscreen) { + fullscreen.disableFullscreen(); } else { - enableFullscreen(); + fullscreen.enableFullscreen(); } }; @@ -357,7 +334,7 @@ const Settings = ({ cursor: 'pointer', userSelect: 'none', }} - onClick={handleNewGame} + onClick={goToStart} aria-label="Back to start" > @@ -385,7 +362,7 @@ const Settings = ({ fontSize: buttonFontSize, padding: '0 4px 0 4px', }} - onClick={handleWakeLock} + onClick={wakeLock.toggleWakeLock} role="checkbox" aria-checked={wakeLock.active} aria-label="Keep awake" diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index 0c3335a..e1777af 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -1,6 +1,4 @@ import styled from 'styled-components'; -import { usePlayers } from '../../Hooks/usePlayers'; -import { WakeLock } from '../../Types/WakeLock'; import Counters from '../Counters/Counters'; const MainWrapper = styled.div` @@ -13,21 +11,12 @@ const MainWrapper = styled.div` type PlayProps = { gridAreas: string; - goToStart: () => void; - wakeLock: WakeLock; }; -const Play = ({ gridAreas, goToStart, wakeLock }: PlayProps) => { - const { players, updatePlayer } = usePlayers(); +const Play = ({ gridAreas }: PlayProps) => { return ( - + ); }; diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 935be2c..c8be7c9 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -10,7 +10,6 @@ import { import { theme } from '../../../Data/theme'; import { useAnalytics } from '../../../Hooks/useAnalytics'; import { Info } from '../../../Icons/generated'; -import { WakeLock } from '../../../Types/WakeLock'; import { InfoModal } from '../../Misc/InfoModal'; import { SupportMe } from '../../Misc/SupportMe'; import { H2, Paragraph } from '../../Misc/TextComponents'; @@ -101,19 +100,16 @@ const healthMarks = [ type StartProps = { setInitialGameSettings: (options: InitialSettings) => void; initialGameSettings: InitialSettings | null; - wakeLock: WakeLock; - setShowPlay: (showPlay: boolean) => void; }; -const Start = ({ - initialGameSettings, - setInitialGameSettings, - wakeLock, - setShowPlay, -}: StartProps) => { +const Start = ({ initialGameSettings, setInitialGameSettings }: StartProps) => { const { setPlayers } = usePlayers(); const analytics = useAnalytics(); + const { fullscreen, wakeLock, setShowPlay } = useGlobalSettings(); + const [openModal, setOpenModal] = useState(false); + const [keepAwake, setKeepAwake] = useState(true); + const [playerOptions, setPlayerOptions] = useState( initialGameSettings || { numberOfPlayers: 4, @@ -122,25 +118,6 @@ const Start = ({ gridAreas: GridTemplateAreas.FourPlayers, } ); - const [wakeLockActive, setWakeLockActive] = useState(true); - - const { enableFullscreen } = useGlobalSettings(); - - const toggleWakeLock = () => { - if (wakeLock.active && wakeLockActive) { - wakeLock.release(); - setWakeLockActive(false); - return; - } - - if (!wakeLock.active && !wakeLockActive) { - wakeLock.request(); - setWakeLockActive(true); - return; - } - - setWakeLockActive(wakeLock.active); - }; const doStartGame = () => { if (!initialGameSettings) { @@ -149,16 +126,18 @@ const Start = ({ analytics.trackEvent('game_started', { ...initialGameSettings }); - if (!wakeLock.active && wakeLockActive) { - wakeLock.request(); - } - try { - enableFullscreen(); + fullscreen.enableFullscreen(); } catch (error) { console.error(error); } + console.log('go to start', wakeLock.active); + + if (keepAwake) { + wakeLock.request(); + } + setInitialGameSettings(initialGameSettings); setPlayers(createInitialPlayers(initialGameSettings)); setShowPlay(true); @@ -294,8 +273,8 @@ const Start = ({ Keep Awake toggleWakeLock()} + checked={keepAwake} + onChange={() => setKeepAwake(!keepAwake)} /> diff --git a/src/Contexts/GlobalSettingsContext.tsx b/src/Contexts/GlobalSettingsContext.tsx index 56b1d42..8034668 100644 --- a/src/Contexts/GlobalSettingsContext.tsx +++ b/src/Contexts/GlobalSettingsContext.tsx @@ -1,9 +1,22 @@ import { createContext } from 'react'; export type GlobalSettingsContextType = { - isFullscreen: boolean; - enableFullscreen: () => void; - disableFullscreen: () => void; + fullscreen: { + isFullscreen: boolean; + enableFullscreen: () => void; + disableFullscreen: () => void; + }; + wakeLock: { + isSupported: boolean; + release: () => void; + active: boolean; + request: () => void; + type: 'screen' | undefined; + toggleWakeLock: () => void; + }; + goToStart: () => void; + showPlay: boolean; + setShowPlay: (showPlay: boolean) => void; }; export const GlobalSettingsContext = diff --git a/src/Contexts/PlayersContext.tsx b/src/Contexts/PlayersContext.tsx index 3e6523b..31e2712 100644 --- a/src/Contexts/PlayersContext.tsx +++ b/src/Contexts/PlayersContext.tsx @@ -5,6 +5,7 @@ export type PlayersContextType = { players: Player[] | []; setPlayers: (players: Player[]) => void; updatePlayer: (updatedPlayer: Player) => void; + updateLifeTotal: (player: Player, updatedLifeTotal: number) => number; }; export const PlayersContext = createContext(null); diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index 5a04ad9..0fe3a17 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/src/Providers/GlobalSettingsProvider.tsx @@ -3,12 +3,21 @@ import { GlobalSettingsContext, GlobalSettingsContextType, } from '../Contexts/GlobalSettingsContext'; +import { useWakeLock } from 'react-screen-wake-lock'; +import { useAnalytics } from '../Hooks/useAnalytics'; export const GlobalSettingsProvider = ({ children, }: { children: ReactNode; }) => { + const analytics = useAnalytics(); + + const savedShowPlay = localStorage.getItem('showPlay'); + const [showPlay, setShowPlay] = useState( + savedShowPlay ? savedShowPlay === 'true' : false + ); + const [isFullscreen, setIsFullscreen] = useState(false); const enableFullscreen = () => { @@ -39,9 +48,67 @@ export const GlobalSettingsProvider = ({ }; }, []); + const { isSupported, release, released, request, type } = useWakeLock(); + + const active = released === undefined ? false : !released; + + const removeLocalStorage = async () => { + localStorage.removeItem('initialGameSettings'); + localStorage.removeItem('players'); + localStorage.removeItem('playing'); + localStorage.removeItem('showPlay'); + setShowPlay(localStorage.getItem('showPlay') === 'true' ?? false); + }; + const ctxValue = useMemo((): GlobalSettingsContextType => { - return { isFullscreen, enableFullscreen, disableFullscreen }; - }, [isFullscreen]); + const goToStart = async () => { + // this function is broken for the moment, need to set players object + const currentPlayers = localStorage.getItem('players'); + + if (currentPlayers) { + analytics.trackEvent('go_to_start', { + playersBeforeReset: currentPlayers, + }); + } + + await removeLocalStorage(); + + // setPlayers([]); + }; + + const toggleWakeLock = async () => { + if (active) { + release(); + return; + } + + request(); + }; + + return { + fullscreen: { isFullscreen, enableFullscreen, disableFullscreen }, + wakeLock: { + isSupported, + release, + active, + request, + type, + toggleWakeLock, + }, + goToStart, + showPlay, + setShowPlay, + }; + }, [ + active, + analytics, + isFullscreen, + isSupported, + release, + request, + showPlay, + type, + ]); return ( diff --git a/src/Providers/PlayersProvider.tsx b/src/Providers/PlayersProvider.tsx index 60c8c68..82ef014 100644 --- a/src/Providers/PlayersProvider.tsx +++ b/src/Providers/PlayersProvider.tsx @@ -14,19 +14,35 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => { localStorage.setItem('players', JSON.stringify(players)); }, [players]); - const updatePlayer = (updatedPlayer: Player) => { - const updatedPlayers = players.map((player) => - player.index === updatedPlayer.index ? updatedPlayer : player - ); - - setPlayers(updatedPlayers); - }; - const ctxValue = useMemo((): PlayersContextType => { + const updatePlayer = (updatedPlayer: Player) => { + const updatedPlayers = players.map((player) => + player.index === updatedPlayer.index ? updatedPlayer : player + ); + + setPlayers(updatedPlayers); + }; + + const updateLifeTotal = ( + player: Player, + updatedLifeTotal: number + ): number => { + const difference = updatedLifeTotal - player.lifeTotal; + const updatedPlayer = { + ...player, + lifeTotal: updatedLifeTotal, + hasLost: false, + }; + updatePlayer(updatedPlayer); + + return difference; + }; + return { players, setPlayers, updatePlayer, + updateLifeTotal, }; }, [players]);