show starting player on first load

src/App.tsx

@@ -79,6 +79,7 @@ const App = () => {
 
   const newGame = () => {
     localStorage.removeItem('players');
+    localStorage.removeItem('playing');
     localStorage.removeItem('initialGameSettings');
 
     window.location.reload();

src/Components/LifeCounter/LifeCounter.tsx

@@ -78,6 +78,37 @@ const LifeCountainer = styled.div<{
   }}
 `;
 
+const StartingPlayer = styled.div<{
+  rotation: Rotation;
+}>`
+  z-index: 1;
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  font-size: 8vmin;
+  background: turquoise;
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  ${(props) => {
+    if (
+      props.rotation === Rotation.SideFlipped ||
+      props.rotation === Rotation.Side
+    ) {
+      return css`
+        flex-direction: column-reverse;
+      `;
+    }
+  }}
+`;
+
 const LifeCounterTextContainer = styled.p<{
   rotation: Rotation;
 }>`
@@ -155,16 +186,30 @@ const LifeCounter = ({
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
   const [recentDifference, setRecentDifference] = useState(0);
+  const [showStartingPlayer, setShowStartingPlayer] = useState(
+    localStorage.getItem('playing') === 'true'
+  );
   const [key, setKey] = useState(Date.now());
 
   useEffect(() => {
     const timer = setTimeout(() => {
       setRecentDifference(0);
-    }, 3000);
+    }, 3_000);
 
     return () => clearTimeout(timer);
   }, [recentDifference]);
 
+  useEffect(() => {
+    if (!showStartingPlayer) {
+      const playingTimer = setTimeout(() => {
+        localStorage.setItem('playing', 'true');
+        setShowStartingPlayer(localStorage.getItem('playing') === 'true');
+      }, 3_000);
+
+      return () => clearTimeout(playingTimer);
+    }
+  }, [showStartingPlayer]);
+
   const size = 30;
   const fontSize = `${size}vmin`;
   const strokeWidth = `${size / 20}vmin`;
@@ -172,6 +217,12 @@ const LifeCounter = ({
   return (
     <LifeCounterContentWrapper backgroundColor={backgroundColor}>
       <LifeCounterWrapper rotation={player.settings.rotation}>
+        {player.isStartingPlayer && !showStartingPlayer && (
+          <StartingPlayer rotation={player.settings.rotation}>
+            You start!
+          </StartingPlayer>
+        )}
+
         <CommanderDamageBar
           opponents={opponents}
           player={player}

src/Components/PlayerMenu/Settings.tsx

@@ -152,6 +152,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
 
   const handleNewGame = () => {
     localStorage.removeItem('players');
+    localStorage.removeItem('playing');
     localStorage.removeItem('initialGameSettings');
 
     window.location.reload();

src/Data/getInitialPlayers.ts

@@ -200,8 +200,10 @@ export const createInitialPlayers = ({
 }: InitialSettings): Player[] => {
   const players: Player[] = [];
   const availableColors = [...presetColors]; // Create a copy of the colors array
+  const firstPlayerIndex = Math.floor(Math.random() * numberOfPlayers);
 
   for (let i = 0; i <= numberOfPlayers - 1; i++) {
+    const isStartingPlayer = i === firstPlayerIndex;
     const colorIndex = Math.floor(Math.random() * availableColors.length);
     const color = availableColors[colorIndex];
 
@@ -231,7 +233,7 @@ export const createInitialPlayers = ({
         usePoison: false,
         rotation,
       },
-
+      isStartingPlayer: isStartingPlayer,
       extraCounters: [],
       commanderDamage,
     };

src/Types/Player.ts

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