fix random interval

src/Components/LifeCounter/LifeCounter.tsx

@@ -88,7 +88,6 @@ const playerCanLose = (player: Player) => {
 };
 
 type LifeCounterProps = {
-  stopRandom: boolean;
   player: Player;
   opponents: Player[];
   isStartingPlayer?: boolean;
@@ -96,16 +95,11 @@ type LifeCounterProps = {
 
 const RECENT_DIFFERENCE_TTL = 3_000;
 
-const LifeCounter = ({
+const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
-  stopRandom,
-  player,
-  opponents,
-  isStartingPlayer,
-}: LifeCounterProps) => {
   const { updatePlayer, updateLifeTotal } = usePlayers();
-  const { settings } = useGlobalSettings();
+  const { settings, playing, setPlaying, stopPlayerRandomization } =
+    useGlobalSettings();
   const playingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const [playing, setPlaying] = useState(false);
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
   const [recentDifference, setRecentDifference] = useState(0);
@@ -122,12 +116,10 @@ const LifeCounter = ({
     trackMouse: true,
     onSwipedDown: (e) => {
       e.event.stopPropagation();
-      console.log(`User DOWN Swiped on player ${player.index}`);
       setShowPlayerMenu(true);
     },
     onSwipedUp: (e) => {
       e.event.stopPropagation();
-      console.log(`User UP Swiped on player ${player.index}`);
       setShowPlayerMenu(false);
     },
 
@@ -135,7 +127,6 @@ const LifeCounter = ({
     onSwiping: (e) => e.event.stopPropagation(),
     rotationAngle,
   });
-  console.log('stopRandom', stopRandom);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -160,13 +151,26 @@ const LifeCounter = ({
   }, [recentDifference, document.body.clientHeight, document.body.clientWidth]);
 
   useEffect(() => {
-    playingTimerRef.current = setTimeout(() => {
+    if (
-      localStorage.setItem('playing', 'true');
+      player.isStartingPlayer &&
-      setPlaying(true);
+      ((!playing &&
-    }, 10_000);
+        settings.useRandomStartingPlayerInterval &&
+        stopPlayerRandomization) ||
+        (!settings.useRandomStartingPlayerInterval && !playing))
+    ) {
+      playingTimerRef.current = setTimeout(() => {
+        setPlaying(true);
+      }, 10_000);
+    }
 
     return () => clearTimeout(playingTimerRef.current);
-  }, []);
+  }, [
+    player.isStartingPlayer,
+    playing,
+    setPlaying,
+    settings.useRandomStartingPlayerInterval,
+    stopPlayerRandomization,
+  ]);
 
   player.settings.rotation === Rotation.SideFlipped ||
     player.settings.rotation === Rotation.Side;
@@ -201,19 +205,19 @@ const LifeCounter = ({
         style={{ rotate: `${calcRotation}deg` }}
         {...handlers}
       >
-        {!playing && settings.showStartingPlayer && isStartingPlayer && (
+        {!playing && settings.showStartingPlayer && player.isStartingPlayer && (
           <div
             className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
             style={{
               rotate: `${calcRotation}deg`,
               backgroundImage:
-                stopRandom || !settings.useRandomStartingPlayerInterval
+                stopPlayerRandomization ||
+                !settings.useRandomStartingPlayerInterval
                   ? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
                   : 'none',
             }}
             onClick={() => {
               clearTimeout(playingTimerRef.current);
-              localStorage.setItem('playing', 'true');
               setPlaying(true);
             }}
           >
@@ -224,7 +228,8 @@ const LifeCounter = ({
             >
               <div className="flex flex-col justify-center items-center">
                 <Paragraph>👑</Paragraph>
-                {(stopRandom || !settings.useRandomStartingPlayerInterval) && (
+                {(stopPlayerRandomization ||
+                  !settings.useRandomStartingPlayerInterval) && (
                   <>
                     <Paragraph>You start!</Paragraph>
                     <Paragraph className="text-xl">(Press to hide)</Paragraph>
@@ -238,12 +243,14 @@ const LifeCounter = ({
         {player.hasLost && (
           <PlayerLostWrapper $rotation={player.settings.rotation} />
         )}
-        {settings.useRandomStartingPlayerInterval && !stopRandom && (
+        {settings.useRandomStartingPlayerInterval &&
-          <div
+          !stopPlayerRandomization &&
-            className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
+          !playing && (
-            style={{ backgroundColor: player.color }}
+            <div
-          />
+              className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
-        )}
+              style={{ backgroundColor: player.color }}
+            />
+          )}
         <CommanderDamageBar
           opponents={opponents}
           player={player}

src/Components/Players/PlayerMenu.tsx

@@ -104,7 +104,14 @@ const PlayerMenu = ({
     containerRef: settingsContainerRef,
   });
 
-  const { fullscreen, wakeLock, goToStart, settings } = useGlobalSettings();
+  const {
+    fullscreen,
+    wakeLock,
+    goToStart,
+    settings,
+    setPlaying,
+    setStopPlayerRandomization,
+  } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -122,6 +129,13 @@ const PlayerMenu = ({
   const handleResetGame = () => {
     resetCurrentGame();
     setShowPlayerMenu(false);
+    setPlaying(false);
+    setStopPlayerRandomization(false);
+  };
+
+  const handleGoToStart = () => {
+    goToStart();
+    setStopPlayerRandomization(false);
   };
 
   const toggleFullscreen = () => {
@@ -291,7 +305,7 @@ const PlayerMenu = ({
                 cursor: 'pointer',
                 userSelect: 'none',
               }}
-              onClick={goToStart}
+              onClick={handleGoToStart}
               aria-label="Back to start"
             >
               <Exit size={iconSize} style={{ rotate: '180deg' }} />

src/Components/Players/Players.tsx

@@ -1,8 +1,9 @@
-import LifeCounter from '../LifeCounter/LifeCounter';
-import { Player as PlayerType } from '../../Types/Player';
-import { twc } from 'react-twc';
 import { useEffect, useRef, useState } from 'react';
+import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../Hooks/usePlayers';
+import { Player as PlayerType } from '../../Types/Player';
+import LifeCounter from '../LifeCounter/LifeCounter';
 
 const getGridArea = (player: PlayerType) => {
   switch (player.index) {
@@ -27,23 +28,63 @@ const PlayersWrapper = twc.div`w-full h-full bg-black`;
 
 export const Players = (players: PlayerType[], gridClasses: string) => {
   const randomIntervalRef = useRef<NodeJS.Timeout | null>(null);
-  const [randomPlayerIndex, setRandomPlayerIndex] = useState<number>(
+
-    Math.floor(Math.random() * players.length)
+  const prevRandomIndexRef = useRef<number>(-1);
-  );
+
-  const [stopRandom, setStopRandom] = useState<boolean>(false);
+  const {
-  const { settings } = useGlobalSettings();
+    settings,
+    stopPlayerRandomization,
+    setStopPlayerRandomization,
+    playing,
+  } = useGlobalSettings();
+
+  const { setPlayers } = usePlayers();
 
   useEffect(() => {
-    if (settings.useRandomStartingPlayerInterval) {
+    if (
+      settings.useRandomStartingPlayerInterval &&
+      !stopPlayerRandomization &&
+      !playing
+    ) {
       randomIntervalRef.current = setInterval(() => {
         let randomIndex: number;
 
         do {
           randomIndex = Math.floor(Math.random() * players.length);
-        } while (randomIndex === randomPlayerIndex);
+        } while (randomIndex === prevRandomIndexRef.current);
 
-        setRandomPlayerIndex(randomIndex);
+        prevRandomIndexRef.current = randomIndex;
-      }, 100);
+        setPlayers(
+          players.map((p) =>
+            p.index === prevRandomIndexRef.current
+              ? {
+                  ...p,
+                  isStartingPlayer: true,
+                }
+              : {
+                  ...p,
+                  isStartingPlayer: false,
+                }
+          )
+        );
+      }, 200);
+    }
+
+    if (!settings.useRandomStartingPlayerInterval) {
+      const randomPlayerIndex = Math.floor(Math.random() * players.length);
+      setPlayers(
+        players.map((p) =>
+          p.index === randomPlayerIndex
+            ? {
+                ...p,
+                isStartingPlayer: true,
+              }
+            : {
+                ...p,
+                isStartingPlayer: false,
+              }
+        )
+      );
     }
     return () => {
       if (randomIntervalRef.current) {
@@ -52,27 +93,30 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
     };
   }, [
     players.length,
-    randomPlayerIndex,
+    playing,
+    setPlayers,
     settings.useRandomStartingPlayerInterval,
+    stopPlayerRandomization,
   ]);
 
   return (
     <PlayersWrapper>
-      {settings.useRandomStartingPlayerInterval && (
+      {settings.useRandomStartingPlayerInterval &&
-        <div
+        !stopPlayerRandomization &&
-          data-stopRandom={stopRandom}
+        !playing && (
-          className="absolute flex justify-center items-center bg-black bg-opacity-50 size-full z-50 cursor-pointer text-5xl data-[stopRandom=true]:hidden"
+          <div
-          onClick={() => {
+            className="absolute flex justify-center items-center bg-black bg-opacity-50 size-full z-50 cursor-pointer text-5xl"
-            if (randomIntervalRef.current) {
+            onClick={() => {
-              clearInterval(randomIntervalRef.current);
+              if (randomIntervalRef.current) {
-              randomIntervalRef.current = null;
+                clearInterval(randomIntervalRef.current);
-              setStopRandom(true);
+                randomIntervalRef.current = null;
-            }
+              }
-          }}
+              setStopPlayerRandomization(true);
-        >
+            }}
-          CHOOSE A PLAYER
+          >
-        </div>
+            CHOOSE A PLAYER
-      )}
+          </div>
+        )}
       <div className={`grid w-full h-full gap-1 box-border ${gridClasses} `}>
         {players.map((player) => {
           const gridArea = getGridArea(player);
@@ -83,12 +127,10 @@ export const Players = (players: PlayerType[], gridClasses: string) => {
               className={`flex justify-center items-center align-middle ${gridArea}`}
             >
               <LifeCounter
-                stopRandom={stopRandom}
                 player={player}
                 opponents={players.filter(
                   (opponent) => opponent.index !== player.index
                 )}
-                isStartingPlayer={randomPlayerIndex === player.index}
               />
             </div>
           );

src/Contexts/GlobalSettingsContext.tsx

@@ -22,6 +22,10 @@ export type GlobalSettingsContextType = {
   setInitialGameSettings: (initialGameSettings: InitialGameSettings) => void;
   settings: Settings;
   setSettings: (settings: Settings) => void;
+  playing: boolean;
+  setPlaying: (playing: boolean) => void;
+  stopPlayerRandomization: boolean;
+  setStopPlayerRandomization: (stopRandom: boolean) => void;
   isPWA: boolean;
 };
 

src/Contexts/PlayersContext.tsx

@@ -7,6 +7,8 @@ export type PlayersContextType = {
   updatePlayer: (updatedPlayer: Player) => void;
   updateLifeTotal: (player: Player, updatedLifeTotal: number) => number;
   resetCurrentGame: () => void;
+  startingPlayerIndex: number;
+  setStartingPlayerIndex: (index: number) => void;
 };
 
 export const PlayersContext = createContext<PlayersContextType | null>(null);

src/Providers/GlobalSettingsProvider.tsx

@@ -21,11 +21,23 @@ export const GlobalSettingsProvider = ({
   const savedShowPlay = localStorage.getItem('showPlay');
   const savedGameSettings = localStorage.getItem('initialGameSettings');
   const savedSettings = localStorage.getItem('settings');
+  const savedPlaying = localStorage.getItem('playing');
+
+  const [playing, setPlaying] = useState<boolean>(
+    savedPlaying ? savedPlaying === 'true' : false
+  );
+  const setPlayingAndLocalStorage = (playing: boolean) => {
+    setPlaying(playing);
+    localStorage.setItem('playing', String(playing));
+  };
 
   const [showPlay, setShowPlay] = useState<boolean>(
     savedShowPlay ? savedShowPlay === 'true' : false
   );
 
+  const [stopPlayerRandomization, setStopPlayerRandomization] =
+    useState<boolean>(false);
+
   const [initialGameSettings, setInitialGameSettings] =
     useState<InitialGameSettings | null>(
       savedGameSettings ? JSON.parse(savedGameSettings) : null
@@ -48,6 +60,8 @@ export const GlobalSettingsProvider = ({
     localStorage.removeItem('players');
     localStorage.removeItem('playing');
     localStorage.removeItem('showPlay');
+
+    setPlaying(false);
     setShowPlay(false);
   };
 
@@ -154,10 +168,14 @@ export const GlobalSettingsProvider = ({
       goToStart,
       showPlay,
       setShowPlay,
+      playing,
+      setPlaying: setPlayingAndLocalStorage,
       initialGameSettings,
       setInitialGameSettings,
       settings,
       setSettings,
+      stopPlayerRandomization,
+      setStopPlayerRandomization,
       isPWA: window?.matchMedia('(display-mode: standalone)').matches,
     };
   }, [
@@ -166,10 +184,12 @@ export const GlobalSettingsProvider = ({
     initialGameSettings,
     isFullscreen,
     isSupported,
+    playing,
     release,
     request,
     settings,
     showPlay,
+    stopPlayerRandomization,
     type,
   ]);
 

src/Providers/PlayersProvider.tsx

@@ -7,6 +7,17 @@ import { InitialGameSettings } from '../Types/Settings';
 export const PlayersProvider = ({ children }: { children: ReactNode }) => {
   const savedPlayers = localStorage.getItem('players');
 
+  const savedStartingPlayerIndex = localStorage.getItem('startingPlayerIndex');
+
+  const [startingPlayerIndex, setStartingPlayerIndex] = useState<number>(
+    savedStartingPlayerIndex ? parseInt(savedStartingPlayerIndex) : -1
+  );
+
+  const setStartingPlayerIndexAndLocalStorage = (index: number) => {
+    setStartingPlayerIndex(index);
+    localStorage.setItem('startingPlayerIndex', String(index));
+  };
+
   const [players, setPlayers] = useState<Player[]>(
     savedPlayers ? JSON.parse(savedPlayers) : []
   );
@@ -50,6 +61,8 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
         return;
       }
 
+      const newStartingPlayerIndex = Math.floor(Math.random() * players.length);
+
       players.forEach((player: Player) => {
         player.commanderDamage.map((damage) => {
           damage.damageTotal = 0;
@@ -61,9 +74,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
         });
 
         player.lifeTotal = initialGameSettings.startingLifeTotal;
-
         player.hasLost = false;
 
+        player.isStartingPlayer = newStartingPlayerIndex === player.index;
+
         updatePlayer(player);
       });
       localStorage.setItem('playing', 'false');
@@ -75,8 +89,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
       updatePlayer,
       updateLifeTotal,
       resetCurrentGame,
+      startingPlayerIndex,
+      setStartingPlayerIndex: setStartingPlayerIndexAndLocalStorage,
     };
-  }, [players]);
+  }, [players, startingPlayerIndex]);
 
   return (
     <PlayersContext.Provider value={ctxValue}>

src/Types/Player.ts

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