diff --git a/src/App.tsx b/src/App.tsx index 45d0657..dd560ea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -76,10 +76,11 @@ const App = () => { const updatedPlayers = players.map((player) => player.index === updatedPlayer.index ? updatedPlayer : player ); + setPlayers(updatedPlayers); }; - const resetCurrentGame = async () => { + const goToStart = async () => { const currentPlayers = localStorage.getItem('players'); if (currentPlayers) { analytics.trackEvent('go_to_start', { @@ -101,7 +102,7 @@ const App = () => { players={players} onPlayerChange={handlePlayerChange} gridAreas={initialGameSettings?.gridAreas} - resetCurrentGame={resetCurrentGame} + goToStart={goToStart} wakeLock={wakeLock} /> diff --git a/src/Components/Counters/Counters.tsx b/src/Components/Counters/Counters.tsx index b637384..853163f 100644 --- a/src/Components/Counters/Counters.tsx +++ b/src/Components/Counters/Counters.tsx @@ -40,7 +40,7 @@ type CountersProps = { players: Player[]; onPlayerChange: (updatedPlayer: Player) => void; gridAreas: string; - resetCurrentGame: () => void; + goToStart: () => void; wakeLock: WakeLock; }; @@ -48,7 +48,7 @@ const Counters = ({ players, onPlayerChange, gridAreas, - resetCurrentGame, + goToStart, wakeLock, }: CountersProps) => { return ( @@ -67,7 +67,7 @@ const Counters = ({ (opponent) => opponent.index !== player.index )} onPlayerChange={onPlayerChange} - resetCurrentGame={resetCurrentGame} + goToStart={goToStart} wakeLock={wakeLock} /> diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index de439ae..6630ef9 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -164,7 +164,7 @@ type LifeCounterProps = { player: Player; opponents: Player[]; onPlayerChange: (updatedPlayer: Player) => void; - resetCurrentGame: () => void; + goToStart: () => void; wakeLock: WakeLock; }; @@ -173,7 +173,7 @@ const LifeCounter = ({ player, opponents, onPlayerChange, - resetCurrentGame, + goToStart, wakeLock, }: LifeCounterProps) => { const handleLifeChange = (updatedLifeTotal: number) => { @@ -195,9 +195,7 @@ const LifeCounter = ({ const [showPlayerMenu, setShowPlayerMenu] = useState(false); const [recentDifference, setRecentDifference] = useState(0); - const [showStartingPlayer, setShowStartingPlayer] = useState( - localStorage.getItem('playing') === 'true' - ); + const [differenceKey, setDifferenceKey] = useState(Date.now()); useEffect(() => { @@ -209,15 +207,17 @@ const LifeCounter = ({ }, [recentDifference]); useEffect(() => { - if (!showStartingPlayer) { + if (player.showStartingPlayer) { const playingTimer = setTimeout(() => { localStorage.setItem('playing', 'true'); - setShowStartingPlayer(localStorage.getItem('playing') === 'true'); + player.showStartingPlayer = false; + onPlayerChange(player); }, 3_000); return () => clearTimeout(playingTimer); } - }, [showStartingPlayer]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [player.showStartingPlayer]); player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side; @@ -225,7 +225,7 @@ const LifeCounter = ({ return ( - {player.isStartingPlayer && !showStartingPlayer && ( + {player.isStartingPlayer && player.showStartingPlayer && ( )} diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index cf795b0..a4021bd 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -68,7 +68,7 @@ type PlayerMenuProps = { opponents: Player[]; onPlayerChange: (updatedPlayer: Player) => void; setShowPlayerMenu: (showPlayerMenu: boolean) => void; - resetCurrentGame: () => void; + goToStart: () => void; wakeLock: WakeLock; }; @@ -77,7 +77,7 @@ const PlayerMenu = ({ opponents, onPlayerChange, setShowPlayerMenu, - resetCurrentGame, + goToStart, wakeLock, }: PlayerMenuProps) => { const handleOnClick = () => { @@ -102,8 +102,9 @@ const PlayerMenu = ({ player={player} onChange={onPlayerChange} opponents={opponents} - resetCurrentGame={resetCurrentGame} + goToStart={goToStart} wakeLock={wakeLock} + setShowPlayerMenu={setShowPlayerMenu} /> ); diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index bc575c9..ea0e988 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -13,14 +13,7 @@ import { Player, Rotation } from '../../Types/Player'; import { WakeLock } from '../../Types/WakeLock'; import { useFullscreen } from '../../Hooks/useFullscreen'; import { theme } from '../../Data/theme'; - -type SettingsProps = { - player: Player; - opponents: Player[]; - onChange: (updatedPlayer: Player) => void; - resetCurrentGame: () => void; - wakeLock: WakeLock; -}; +import { InitialSettings } from '../../Data/getInitialPlayers'; const SettingsContainer = styled.div<{ $rotation: Rotation; @@ -135,11 +128,22 @@ 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, - resetCurrentGame, + goToStart, wakeLock, + opponents, + setShowPlayerMenu, }: SettingsProps) => { const { disableFullscreen, enableFullscreen, isFullscreen } = useFullscreen(); const isSide = @@ -168,22 +172,61 @@ const Settings = ({ }; const handleResetGame = () => { - resetCurrentGame(); + const savedGameSettings = localStorage.getItem('initialGameSettings'); + + const initialGameSettings: InitialSettings = savedGameSettings + ? JSON.parse(savedGameSettings) + : null; + + if (!initialGameSettings) { + goToStart(); + } + + const startingPlayerIndex = Math.floor( + Math.random() * initialGameSettings.numberOfPlayers + ); + + [player, ...opponents].forEach((player: Player) => { + player.commanderDamage.map((damage) => { + damage.damageTotal = 0; + damage.partnerDamageTotal = 0; + }); + + player.extraCounters.map((counter) => { + counter.value = 0; + }); + + player.lifeTotal = initialGameSettings.startingLifeTotal; + + player.hasLost = false; + + const isStartingPlayer = player.index === startingPlayerIndex; + + player.isStartingPlayer = isStartingPlayer; + + if (player.isStartingPlayer) { + player.showStartingPlayer = true; + } + + onChange(player); + }); + localStorage.setItem('playing', 'false'); + setShowPlayerMenu(false); }; const handleNewGame = () => { - handleResetGame(); + goToStart(); }; const toggleFullscreen = () => { - if (!isFullscreen) { - enableFullscreen(); - } else { + if (isFullscreen) { disableFullscreen(); + } else { + enableFullscreen(); } }; - const buttonFontSize = isSide ? '2vmax' : '4vmin'; + const buttonFontSize = isSide ? '1.5vmax' : '3vmin'; return ( @@ -348,6 +391,22 @@ const Settings = ({ > Keep Awake + + ); diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index ac0e9d2..bc8b185 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -13,7 +13,7 @@ type PlayProps = { players: Player[]; onPlayerChange: (updatedPlayer: Player) => void; gridAreas: string; - resetCurrentGame: () => void; + goToStart: () => void; wakeLock: WakeLock; }; @@ -21,7 +21,7 @@ const Play = ({ players, onPlayerChange, gridAreas, - resetCurrentGame, + goToStart, wakeLock, }: PlayProps) => { return ( @@ -30,7 +30,7 @@ const Play = ({ players={players} onPlayerChange={onPlayerChange} gridAreas={gridAreas} - resetCurrentGame={resetCurrentGame} + goToStart={goToStart} wakeLock={wakeLock} /> diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index 2228905..511c3cc 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -159,6 +159,7 @@ const Start = ({ setInitialGameSettings(initialGameSettings); setPlayers(createInitialPlayers(initialGameSettings)); + localStorage.setItem('playing', 'false'); }; useEffect(() => { diff --git a/src/Data/getInitialPlayers.ts b/src/Data/getInitialPlayers.ts index 53a8683..4e5a3e4 100644 --- a/src/Data/getInitialPlayers.ts +++ b/src/Data/getInitialPlayers.ts @@ -233,7 +233,8 @@ export const createInitialPlayers = ({ usePoison: false, rotation, }, - isStartingPlayer: isStartingPlayer, + isStartingPlayer, + showStartingPlayer: isStartingPlayer, extraCounters: [], commanderDamage, hasLost: false, diff --git a/src/Types/Player.ts b/src/Types/Player.ts index 3f5f575..76b9eac 100644 --- a/src/Types/Player.ts +++ b/src/Types/Player.ts @@ -6,6 +6,7 @@ export type Player = { commanderDamage: CommanderDamage[]; extraCounters: ExtraCounter[]; isStartingPlayer: boolean; + showStartingPlayer: boolean; hasLost: boolean; };