create usePlayers hook related context/provider

src/App.tsx

@@ -3,12 +3,12 @@ import styled, { createGlobalStyle } from 'styled-components';
 import Play from './Components/Views/Play';
 import StartMenu from './Components/Views/StartMenu/StartMenu';
 import { InitialSettings } from './Data/getInitialPlayers';
-import { Player } from './Types/Player';
 
 import { ThemeProvider } from '@mui/material';
+import { useWakeLock } from 'react-screen-wake-lock';
 import { theme } from './Data/theme';
 import { useAnalytics } from './Hooks/useAnalytics';
-import { useWakeLock } from 'react-screen-wake-lock';
+import { PlayersProvider } from './Providers/PlayersProvider';
 
 const GlobalStyles = createGlobalStyle`
   html,
@@ -53,9 +53,16 @@ const EmergencyResetButton = styled.button`
 
 const App = () => {
   const analytics = useAnalytics();
-  const savedPlayers = localStorage.getItem('players');
   const savedGameSettings = localStorage.getItem('initialGameSettings');
+  const saveShowPlay = localStorage.getItem('showPlay');
   const { isSupported, release, released, request, type } = useWakeLock();
+  const [initialGameSettings, setInitialGameSettings] =
+    useState<InitialSettings | null>(
+      savedGameSettings ? JSON.parse(savedGameSettings) : null
+    );
+  const [showPlay, setShowPlay] = useState<boolean>(
+    saveShowPlay ? saveShowPlay === 'true' : false
+  );
 
   const isActive = released === undefined ? false : !released;
 
@@ -67,32 +74,15 @@ const App = () => {
     type,
   };
 
-  const [initialGameSettings, setInitialGameSettings] =
-    useState<InitialSettings | null>(
-      savedGameSettings ? JSON.parse(savedGameSettings) : null
-    );
-
-  const [players, setPlayers] = useState<Player[]>(
-    savedPlayers ? JSON.parse(savedPlayers) : []
-  );
-
   useEffect(() => {
-    localStorage.setItem('players', JSON.stringify(players));
     localStorage.setItem(
       'initialGameSettings',
       JSON.stringify(initialGameSettings)
     );
-  }, [initialGameSettings, players]);
+  }, [initialGameSettings]);
-
-  const handlePlayerChange = (updatedPlayer: Player) => {
-    const updatedPlayers = players.map((player) =>
-      player.index === updatedPlayer.index ? updatedPlayer : player
-    );
-
-    setPlayers(updatedPlayers);
-  };
 
   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', {
@@ -101,39 +91,38 @@ const App = () => {
     }
     await removeLocalStorage();
 
-    setPlayers([]);
+    // setPlayers([]);
   };
 
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyles />
-
+      <PlayersProvider>
-      {players.length > 0 && initialGameSettings ? (
+        {showPlay && initialGameSettings ? (
-        <PlayWrapper>
+          <PlayWrapper>
-          <Play
+            <Play
-            players={players}
+              gridAreas={initialGameSettings?.gridAreas}
-            onPlayerChange={handlePlayerChange}
+              goToStart={goToStart}
-            gridAreas={initialGameSettings?.gridAreas}
+              wakeLock={wakeLock}
-            goToStart={goToStart}
+            />
-            wakeLock={wakeLock}
+            <EmergencyResetButton onClick={goToStart}>
-          />
+              <p>If you can see this, something is wrong.</p>
-          <EmergencyResetButton onClick={goToStart}>
+              <p>Press screen to go to start.</p>
-            <p>If you can see this, something is wrong.</p>
+              <br />
-            <p>Press screen to go to start.</p>
+              <p>If the issue persists, please inform me.</p>
-            <br />
+            </EmergencyResetButton>
-            <p>If the issue persists, please inform me.</p>
+          </PlayWrapper>
-          </EmergencyResetButton>
+        ) : (
-        </PlayWrapper>
+          <StartWrapper>
-      ) : (
+            <StartMenu
-        <StartWrapper>
+              initialGameSettings={initialGameSettings}
-          <StartMenu
+              setInitialGameSettings={setInitialGameSettings}
-            initialGameSettings={initialGameSettings}
+              wakeLock={wakeLock}
-            setInitialGameSettings={setInitialGameSettings}
+              setShowPlay={setShowPlay}
-            setPlayers={setPlayers}
+            />
-            wakeLock={wakeLock}
+          </StartWrapper>
-          />
+        )}
-        </StartWrapper>
+      </PlayersProvider>
-      )}
     </ThemeProvider>
   );
 };

src/Components/Views/Play.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import Counters from '../Counters/Counters';
+import { usePlayers } from '../../Hooks/usePlayers';
-import { Player } from '../../Types/Player';
 import { WakeLock } from '../../Types/WakeLock';
+import Counters from '../Counters/Counters';
 
 const MainWrapper = styled.div`
   width: 100vmax;
@@ -12,25 +12,18 @@ const MainWrapper = styled.div`
 `;
 
 type PlayProps = {
-  players: Player[];
-  onPlayerChange: (updatedPlayer: Player) => void;
   gridAreas: string;
   goToStart: () => void;
   wakeLock: WakeLock;
 };
 
-const Play = ({
+const Play = ({ gridAreas, goToStart, wakeLock }: PlayProps) => {
-  players,
+  const { players, updatePlayer } = usePlayers();
-  onPlayerChange,
-  gridAreas,
-  goToStart,
-  wakeLock,
-}: PlayProps) => {
   return (
     <MainWrapper>
       <Counters
         players={players}
-        onPlayerChange={onPlayerChange}
+        onPlayerChange={updatePlayer}
         gridAreas={gridAreas}
         goToStart={goToStart}
         wakeLock={wakeLock}

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 { Player } from '../../../Types/Player';
 import { WakeLock } from '../../../Types/WakeLock';
 import { InfoModal } from '../../Misc/InfoModal';
 import { SupportMe } from '../../Misc/SupportMe';
@@ -18,6 +17,7 @@ import { H2, Paragraph } from '../../Misc/TextComponents';
 import LayoutOptions from './LayoutOptions';
 import { useFullscreen } from '../../../Hooks/useFullscreen';
 import { Spacer } from '../../Misc/Spacer';
+import { usePlayers } from '../../../Hooks/usePlayers';
 
 const MainWrapper = styled.div`
   width: 100dvw;
@@ -99,17 +99,18 @@ const healthMarks = [
 
 type StartProps = {
   setInitialGameSettings: (options: InitialSettings) => void;
-  setPlayers: (updatedPlayer: Player[]) => void;
   initialGameSettings: InitialSettings | null;
   wakeLock: WakeLock;
+  setShowPlay: (showPlay: boolean) => void;
 };
 
 const Start = ({
   initialGameSettings,
-  setPlayers,
   setInitialGameSettings,
   wakeLock,
+  setShowPlay,
 }: StartProps) => {
+  const { setPlayers } = usePlayers();
   const analytics = useAnalytics();
   const [openModal, setOpenModal] = useState(false);
   const [playerOptions, setPlayerOptions] = useState<InitialSettings>(
@@ -159,7 +160,10 @@ const Start = ({
 
     setInitialGameSettings(initialGameSettings);
     setPlayers(createInitialPlayers(initialGameSettings));
+    setShowPlay(true);
     localStorage.setItem('playing', 'false');
+    //Todo maybe showPlay is redundant?
+    localStorage.setItem('showPlay', 'true');
   };
 
   useEffect(() => {

src/Contexts/PlayersContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { Player } from '../Types/Player';
+
+export type PlayersContextType = {
+  players: Player[] | [];
+  setPlayers: (players: Player[]) => void;
+  updatePlayer: (updatedPlayer: Player) => void;
+};
+
+export const PlayersContext = createContext<PlayersContextType | null>(null);

src/Hooks/usePlayers.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { PlayersContext } from '../Contexts/PlayersContext';
+
+export const usePlayers = () => {
+  const context = useContext(PlayersContext);
+
+  if (!context) {
+    throw new Error('usePlayers hook had an issue with the context');
+  }
+
+  return { ...context };
+};

src/Providers/PlayersProvider.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, useEffect } from 'react';
+import { Player } from '../Types/Player';
+import { useMemo, useState } from 'react';
+import { PlayersContextType, PlayersContext } from '../Contexts/PlayersContext';
+
+export const PlayersProvider = ({ children }: { children: ReactNode }) => {
+  const savedPlayers = localStorage.getItem('players');
+
+  const [players, setPlayers] = useState<Player[]>(
+    savedPlayers ? JSON.parse(savedPlayers) : []
+  );
+
+  useEffect(() => {
+    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 => {
+    return {
+      players,
+      setPlayers,
+      updatePlayer,
+    };
+  }, [players]);
+
+  return (
+    <PlayersContext.Provider value={ctxValue}>
+      {children}
+    </PlayersContext.Provider>
+  );
+};