reset game button

src/App.tsx

@@ -76,6 +76,7 @@ const App = () => {
     const updatedPlayers = players.map((player) =>
       player.index === updatedPlayer.index ? updatedPlayer : player
     );
+
     setPlayers(updatedPlayers);
   };
 

src/Components/LifeCounter/LifeCounter.tsx

@@ -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}

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -104,6 +104,7 @@ const PlayerMenu = ({
         opponents={opponents}
         resetCurrentGame={resetCurrentGame}
         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';
-
+import { InitialSettings } from '../../Data/getInitialPlayers';
-type SettingsProps = {
-  player: Player;
-  opponents: Player[];
-  onChange: (updatedPlayer: Player) => void;
-  resetCurrentGame: () => void;
-  wakeLock: WakeLock;
-};
 
 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;
+  resetCurrentGame: () => void;
+  wakeLock: WakeLock;
+  setShowPlayerMenu: (showPlayerMenu: boolean) => void;
+};
+
 const Settings = ({
   player,
   onChange,
   resetCurrentGame,
   wakeLock,
+  opponents,
+  setShowPlayerMenu,
 }: SettingsProps) => {
   const { disableFullscreen, enableFullscreen, isFullscreen } = useFullscreen();
   const isSide =
@@ -168,11 +172,50 @@ const Settings = ({
   };
 
   const handleResetGame = () => {
+    const savedGameSettings = localStorage.getItem('initialGameSettings');
+
+    const initialGameSettings: InitialSettings = savedGameSettings
+      ? JSON.parse(savedGameSettings)
+      : null;
+
+    if (!initialGameSettings) {
       resetCurrentGame();
+    }
+
+    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();
+    resetCurrentGame();
   };
 
   const toggleFullscreen = () => {
@@ -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/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;
 };