better life handling

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;
+  handleLifeChange: (updatedLifeTotal: number) => void;
-  setLifeTotal: (lifeTotal: number) => void;
 };
 
 type InputProps = {
@@ -120,9 +120,9 @@ type InputProps = {
 export const CommanderDamage = ({
   player,
   opponent,
-  onPlayerChange,
+  handleLifeChange,
-  setLifeTotal,
 }: CommanderDamageButtonComponentProps) => {
+  const { updatePlayer } = usePlayers();
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const [timeoutFinished, setTimeoutFinished] = useState(false);
   const [hasPressedDown, setHasPressedDown] = useState(false);
@@ -149,8 +149,8 @@ export const CommanderDamage = ({
         ...player,
         commanderDamage: updatedCommanderDamage,
       };
-      onPlayerChange(updatedPlayer);
+      updatePlayer(updatedPlayer);
-      setLifeTotal(player.lifeTotal - increment);
+      handleLifeChange(player.lifeTotal - increment);
       return;
     }
     if (currentCommanderDamage.damageTotal === 0 && increment === -1) {
@@ -164,8 +164,8 @@ export const CommanderDamage = ({
       ...player,
       commanderDamage: updatedCommanderDamage,
     };
-    onPlayerChange(updatedPlayer);
+    updatePlayer(updatedPlayer);
-    setLifeTotal(player.lifeTotal - increment);
+    handleLifeChange(player.lifeTotal - increment);
   };
 
   const handleDownInput = ({ opponentIndex, isPartner }: InputProps) => {

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;
+  handleLifeChange: (updatedLifeTotal: number) => void;
-  setLifeTotal: (lifeTotal: number) => void;
 };
 
 const CommanderDamageBar = ({
   opponents,
   player,
-  onPlayerChange,
+  handleLifeChange,
-  setLifeTotal,
 }: CommanderDamageBarProps) => {
   return (
     <CommanderDamageGrid
@@ -49,9 +47,8 @@ const CommanderDamageBar = ({
           <CommanderDamage
             player={player}
             opponent={opponent}
-            setLifeTotal={setLifeTotal}
-            onPlayerChange={onPlayerChange}
             key={opponent.index}
+            handleLifeChange={handleLifeChange}
           />
         );
       })}

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 = ({
+const Counters = ({ gridAreas }: CountersProps) => {
-  players,
+  const { players } = usePlayers();
-  onPlayerChange,
-  gridAreas,
-  goToStart,
-  wakeLock,
-}: CountersProps) => {
   return (
     <CountersWrapper>
       <CountersGrid $gridTemplateAreas={gridAreas}>
@@ -53,14 +43,10 @@ const Counters = ({
               $gridArea={`player${player.index}`}
             >
               <LifeCounter
-                backgroundColor={player.color}
                 player={player}
                 opponents={players.filter(
                   (opponent) => opponent.index !== player.index
                 )}
-                onPlayerChange={onPlayerChange}
-                goToStart={goToStart}
-                wakeLock={wakeLock}
               />
             </GridItemContainer>
           );

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 = ({
+const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
-  player,
+  const { updatePlayer } = usePlayers();
-  onPlayerChange,
+
-}: ExtraCountersBarProps) => {
   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 =

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<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setRecentDifference(0);
-    }, 3_000);
-
-    return () => clearTimeout(timer);
-  }, [recentDifference]);
-
   useEffect(() => {
     if (!showStartingPlayer) {
       const playingTimer = setTimeout(() => {

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 = ({
+const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
-  backgroundColor,
+  const { updatePlayer, updateLifeTotal } = usePlayers();
-  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 [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 (
-    <LifeCounterContentWrapper $backgroundColor={backgroundColor}>
+    <LifeCounterContentWrapper $backgroundColor={player.color}>
       <LifeCounterWrapper $rotation={player.settings.rotation}>
         {player.isStartingPlayer && player.showStartingPlayer && (
           <PlayerNoticeWrapper
@@ -245,9 +229,8 @@ const LifeCounter = ({
         <CommanderDamageBar
           opponents={opponents}
           player={player}
-          onPlayerChange={onPlayerChange}
-          setLifeTotal={handleLifeChange}
           key={player.index}
+          handleLifeChange={handleLifeChange}
         />
         <SettingsButton
           onClick={() => {
@@ -263,22 +246,19 @@ const LifeCounter = ({
         )}
         <Health
           player={player}
-          onPlayerChange={onPlayerChange}
-          differenceKey={differenceKey}
-          setDifferenceKey={setDifferenceKey}
           rotation={player.settings.rotation}
+          differenceKey={differenceKey}
+          recentDifference={recentDifference}
+          handleLifeChange={handleLifeChange}
         />
-        <ExtraCountersBar player={player} onPlayerChange={onPlayerChange} />
+        <ExtraCountersBar player={player} />
       </LifeCounterWrapper>
 
       {showPlayerMenu && (
         <PlayerMenu
           player={player}
           opponents={opponents}
-          onPlayerChange={onPlayerChange}
           setShowPlayerMenu={setShowPlayerMenu}
-          goToStart={goToStart}
-          wakeLock={wakeLock}
         />
       )}
     </LifeCounterContentWrapper>

src/Components/LifeTrinket.tsx

@@ -1,10 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
-import { useWakeLock } from 'react-screen-wake-lock';
 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<InitialSettings | null>(
       savedGameSettings ? JSON.parse(savedGameSettings) : null
     );
-  const [showPlay, setShowPlay] = useState<boolean>(
-    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 ? (
         <PlayWrapper>
-          <Play
+          <Play gridAreas={initialGameSettings?.gridAreas} />
-            gridAreas={initialGameSettings?.gridAreas}
-            goToStart={goToStart}
-            wakeLock={wakeLock}
-          />
           <EmergencyResetButton onClick={goToStart}>
             <p>If you can see this, something is wrong.</p>
             <p>Press screen to go to start.</p>
@@ -104,8 +64,6 @@ export const LifeTrinket = () => {
           <StartMenu
             initialGameSettings={initialGameSettings}
             setInitialGameSettings={setInitialGameSettings}
-            wakeLock={wakeLock}
-            setShowPlay={setShowPlay}
           />
         </StartWrapper>
       )}

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 = ({
       </CloseButton>
       <Settings
         player={player}
-        onChange={onPlayerChange}
         opponents={opponents}
-        goToStart={goToStart}
-        wakeLock={wakeLock}
         setShowPlayerMenu={setShowPlayerMenu}
       />
     </PlayerMenuWrapper>

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 { usePlayers } from '../../Hooks/usePlayers';
-import { theme } from '../../Data/theme';
-import { InitialSettings } from '../../Data/getInitialPlayers';
-import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 
 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 = ({
+const Settings = ({ player, opponents, setShowPlayerMenu }: SettingsProps) => {
-  player,
+  const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
-  onChange,
+  const { updatePlayer } = usePlayers();
-  goToStart,
-  wakeLock,
-  opponents,
-  setShowPlayerMenu,
-}: SettingsProps) => {
-  const { disableFullscreen, enableFullscreen, isFullscreen } =
-    useGlobalSettings();
   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<HTMLInputElement>) => {
     const updatedPlayer = { ...player, color: event.target.value };
-    onChange(updatedPlayer);
+    updatePlayer(updatedPlayer);
   };
 
   const handleSettingsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     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) {
+    if (fullscreen.isFullscreen) {
-      disableFullscreen();
+      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"
         >
           <Exit size="4vmax" style={{ rotate: '180deg' }} />
@@ -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"

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 Play = ({ gridAreas }: PlayProps) => {
-  const { players, updatePlayer } = usePlayers();
   return (
     <MainWrapper>
-      <Counters
+      <Counters gridAreas={gridAreas} />
-        players={players}
-        onPlayerChange={updatePlayer}
-        gridAreas={gridAreas}
-        goToStart={goToStart}
-        wakeLock={wakeLock}
-      />
     </MainWrapper>
   );
 };

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 = ({
+const Start = ({ initialGameSettings, setInitialGameSettings }: StartProps) => {
-  initialGameSettings,
-  setInitialGameSettings,
-  wakeLock,
-  setShowPlay,
-}: 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<InitialSettings>(
     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 = ({
           <ToggleContainer>
             <FormLabel>Keep Awake</FormLabel>
             <Switch
-              checked={wakeLockActive}
+              checked={keepAwake}
-              onChange={() => toggleWakeLock()}
+              onChange={() => setKeepAwake(!keepAwake)}
             />
           </ToggleContainer>
         </ToggleButtonsWrapper>

src/Contexts/GlobalSettingsContext.tsx

@@ -1,9 +1,22 @@
 import { createContext } from 'react';
 
 export type GlobalSettingsContextType = {
-  isFullscreen: boolean;
+  fullscreen: {
-  enableFullscreen: () => void;
+    isFullscreen: boolean;
-  disableFullscreen: () => void;
+    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 =

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<PlayersContextType | null>(null);

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<boolean>(
+    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 };
+    const goToStart = async () => {
-  }, [isFullscreen]);
+      // 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 (
     <GlobalSettingsContext.Provider value={ctxValue}>

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]);