diff --git a/src/App.tsx b/src/App.tsx index 0222f6f..adc14ae 100644 --- a/src/App.tsx +++ b/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( + savedGameSettings ? JSON.parse(savedGameSettings) : null + ); + const [showPlay, setShowPlay] = useState( + saveShowPlay ? saveShowPlay === 'true' : false + ); const isActive = released === undefined ? false : !released; @@ -67,32 +74,15 @@ const App = () => { type, }; - const [initialGameSettings, setInitialGameSettings] = - useState( - savedGameSettings ? JSON.parse(savedGameSettings) : null - ); - - const [players, setPlayers] = useState( - savedPlayers ? JSON.parse(savedPlayers) : [] - ); - useEffect(() => { - localStorage.setItem('players', JSON.stringify(players)); localStorage.setItem( 'initialGameSettings', JSON.stringify(initialGameSettings) ); - }, [initialGameSettings, players]); - - const handlePlayerChange = (updatedPlayer: Player) => { - const updatedPlayers = players.map((player) => - player.index === updatedPlayer.index ? updatedPlayer : player - ); - - setPlayers(updatedPlayers); - }; + }, [initialGameSettings]); 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 ( - - {players.length > 0 && initialGameSettings ? ( - - - -

If you can see this, something is wrong.

-

Press screen to go to start.

-
-

If the issue persists, please inform me.

- - - ) : ( - - - - )} + + {showPlay && initialGameSettings ? ( + + + +

If you can see this, something is wrong.

+

Press screen to go to start.

+
+

If the issue persists, please inform me.

+ + + ) : ( + + + + )} + ); }; diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index 7830872..0c3335a 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; -import Counters from '../Counters/Counters'; -import { Player } from '../../Types/Player'; +import { usePlayers } from '../../Hooks/usePlayers'; 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 = ({ - players, - onPlayerChange, - gridAreas, - goToStart, - wakeLock, -}: PlayProps) => { +const Play = ({ gridAreas, goToStart, wakeLock }: PlayProps) => { + const { players, updatePlayer } = usePlayers(); return ( 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( @@ -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(() => { diff --git a/src/Contexts/PlayersContext.tsx b/src/Contexts/PlayersContext.tsx new file mode 100644 index 0000000..3e6523b --- /dev/null +++ b/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(null); diff --git a/src/Hooks/usePlayers.tsx b/src/Hooks/usePlayers.tsx new file mode 100644 index 0000000..075bf0c --- /dev/null +++ b/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 }; +}; diff --git a/src/Providers/PlayersProvider.tsx b/src/Providers/PlayersProvider.tsx new file mode 100644 index 0000000..60c8c68 --- /dev/null +++ b/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( + 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 ( + + {children} + + ); +};