Merge pull request #20 from Vikeo/develop

Add reset game button

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}
           />
         </PlayWrapper>

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}
               />
             </GridItemContainer>

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 (
     <LifeCounterContentWrapper $backgroundColor={backgroundColor}>
       <LifeCounterWrapper $rotation={player.settings.rotation}>
-        {player.isStartingPlayer && !showStartingPlayer && (
+        {player.isStartingPlayer && player.showStartingPlayer && (
           <PlayerNoticeWrapper
             $rotation={player.settings.rotation}
             $backgroundColor={theme.palette.primary.main}
@@ -277,7 +277,7 @@ const LifeCounter = ({
           opponents={opponents}
           onPlayerChange={onPlayerChange}
           setShowPlayerMenu={setShowPlayerMenu}
-          resetCurrentGame={resetCurrentGame}
+          goToStart={goToStart}
           wakeLock={wakeLock}
         />
       )}

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}
       />
     </PlayerMenuWrapper>
   );

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 (
     <SettingsContainer $rotation={player.settings.rotation}>
@@ -348,6 +391,22 @@ const Settings = ({
         >
           Keep Awake
         </Button>
+
+        <Button
+          variant="contained"
+          style={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            fontSize: buttonFontSize,
+            padding: '0 4px 0 4px',
+          }}
+          onClick={handleResetGame}
+          role="checkbox"
+          aria-checked={wakeLock.active}
+          aria-label="Reset Game"
+        >
+          Reset Game
+        </Button>
       </ButtonsSections>
     </SettingsContainer>
   );

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}
       />
     </MainWrapper>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -159,6 +159,7 @@ const Start = ({
 
     setInitialGameSettings(initialGameSettings);
     setPlayers(createInitialPlayers(initialGameSettings));
+    localStorage.setItem('playing', 'false');
   };
 
   useEffect(() => {

src/Data/getInitialPlayers.ts

@@ -233,7 +233,8 @@ export const createInitialPlayers = ({
         usePoison: false,
         rotation,
       },
-      isStartingPlayer: isStartingPlayer,
+      isStartingPlayer,
+      showStartingPlayer: isStartingPlayer,
       extraCounters: [],
       commanderDamage,
       hasLost: false,

src/Types/Player.ts

@@ -6,6 +6,7 @@ export type Player = {
   commanderDamage: CommanderDamage[];
   extraCounters: ExtraCounter[];
   isStartingPlayer: boolean;
+  showStartingPlayer: boolean;
   hasLost: boolean;
 };