better life handling

2023-09-22 13:13:29 +02:00
parent d7d9d26540
commit 4157ef53c1
15 changed files with 197 additions and 268 deletions
--- 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<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);
-      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) => {
--- 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 (
    <CommanderDamageGrid
@@ -49,9 +47,8 @@ const CommanderDamageBar = ({
          <CommanderDamage
            player={player}
            opponent={opponent}
-            setLifeTotal={setLifeTotal}
-            onPlayerChange={onPlayerChange}
            key={opponent.index}
+            handleLifeChange={handleLifeChange}
          />
        );
      })}
--- 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 (
    <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>
          );
--- 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 =
--- 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<HTMLDivElement | null>(null);

-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setRecentDifference(0);
-    }, 3_000);
-
-    return () => clearTimeout(timer);
-  }, [recentDifference]);
-
  useEffect(() => {
    if (!showStartingPlayer) {
      const playingTimer = setTimeout(() => {
--- 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 (
-    <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>
--- 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<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
-            gridAreas={initialGameSettings?.gridAreas}
-            goToStart={goToStart}
-            wakeLock={wakeLock}
-          />
+          <Play gridAreas={initialGameSettings?.gridAreas} />
          <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>
      )}
--- 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 = ({
      </CloseButton>
      <Settings
        player={player}
-        onChange={onPlayerChange}
        opponents={opponents}
-        goToStart={goToStart}
-        wakeLock={wakeLock}
        setShowPlayerMenu={setShowPlayerMenu}
      />
    </PlayerMenuWrapper>
--- 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<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) {
-      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"
        >
          <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"
--- 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 (
    <MainWrapper>
-      <Counters
-        players={players}
-        onPlayerChange={updatePlayer}
-        gridAreas={gridAreas}
-        goToStart={goToStart}
-        wakeLock={wakeLock}
-      />
+      <Counters gridAreas={gridAreas} />
    </MainWrapper>
  );
 };
--- 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<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}
-              onChange={() => toggleWakeLock()}
+              checked={keepAwake}
+              onChange={() => setKeepAwake(!keepAwake)}
            />
          </ToggleContainer>
        </ToggleButtonsWrapper>
--- 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 =
--- 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<PlayersContextType | null>(null);
--- 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<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 };
-  }, [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 (
    <GlobalSettingsContext.Provider value={ctxValue}>
--- 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]);