show starting player

src/Components/LifeCounter/LifeCounter.tsx

@@ -9,6 +9,7 @@ import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import PlayerMenu from '../PlayerMenu/PlayerMenu';
 import Health from './Health';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 
 const LifeCounterContentWrapper = styled.div<{
   $backgroundColor: string;
@@ -166,6 +167,7 @@ type LifeCounterProps = {
 
 const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   const { updatePlayer, updateLifeTotal } = usePlayers();
+  const { showStartingPlayer } = useGlobalSettings();
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
   const [recentDifference, setRecentDifference] = useState(0);
@@ -209,7 +211,9 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   return (
     <LifeCounterContentWrapper $backgroundColor={player.color}>
       <LifeCounterWrapper $rotation={player.settings.rotation}>
-        {player.isStartingPlayer && player.showStartingPlayer && (
+        {showStartingPlayer &&
+          player.isStartingPlayer &&
+          player.showStartingPlayer && (
             <PlayerNoticeWrapper
               $rotation={player.settings.rotation}
               $backgroundColor={theme.palette.primary.main}

src/Components/Views/StartMenu/StartMenu.tsx

@@ -106,6 +106,8 @@ const Start = () => {
     setShowPlay,
     initialGameSettings,
     setInitialGameSettings,
+    showStartingPlayer,
+    setShowStartingPlayer,
   } = useGlobalSettings();
 
   const [openModal, setOpenModal] = useState(false);
@@ -222,6 +224,7 @@ const Start = () => {
             });
           }}
         />
+        <Spacer height="0.7rem" />
         <FormLabel>Starting Health</FormLabel>
         <Slider
           title="Starting Health"
@@ -239,6 +242,7 @@ const Start = () => {
             })
           }
         />
+        <Spacer height="1rem" />
 
         <ToggleButtonsWrapper>
           <ToggleContainer>
@@ -268,7 +272,7 @@ const Start = () => {
               }}
             />
           </ToggleContainer>
-          <Spacer width="2rem" />
+          <Spacer width="1rem" />
           <ToggleContainer>
             <FormLabel>Keep Awake</FormLabel>
             <Switch
@@ -278,6 +282,16 @@ const Start = () => {
           </ToggleContainer>
         </ToggleButtonsWrapper>
 
+        <ToggleButtonsWrapper>
+          <ToggleContainer>
+            <FormLabel>Show Start Player</FormLabel>
+            <Switch
+              checked={showStartingPlayer}
+              onChange={() => setShowStartingPlayer(!showStartingPlayer)}
+            />
+          </ToggleContainer>
+        </ToggleButtonsWrapper>
+
         <FormLabel>Layout</FormLabel>
         <LayoutOptions
           numberOfPlayers={playerOptions.numberOfPlayers}
@@ -288,7 +302,9 @@ const Start = () => {
         />
       </FormControl>
 
-      <Paragraph style={{ textAlign: 'center', maxWidth: '75%' }}>
+      <Paragraph
+        style={{ textAlign: 'center', maxWidth: '75%', fontSize: '0.7rem' }}
+      >
         If you're on iOS, this page works better if you{' '}
         <strong>hide the toolbar</strong> or{' '}
         <strong>add the app to your home screen</strong>.

src/Contexts/GlobalSettingsContext.tsx

@@ -20,6 +20,8 @@ export type GlobalSettingsContextType = {
   setShowPlay: (showPlay: boolean) => void;
   initialGameSettings: InitialSettings | null;
   setInitialGameSettings: (initialGameSettings: InitialSettings) => void;
+  showStartingPlayer: boolean;
+  setShowStartingPlayer: (showStartingPlayer: boolean) => void;
 };
 
 export const GlobalSettingsContext =

src/Data/theme.ts

@@ -24,13 +24,17 @@ export const theme = createTheme({
     },
   },
   components: {
-    MuiSlider: {
+    MuiFormLabel: {
       styleOverrides: {
         root: {
-          marginBottom: '2.5em',
+          fontSize: '1rem',
         },
+      },
+    },
+    MuiSlider: {
+      styleOverrides: {
         markLabel: {
-          fontSize: '1.2em',
+          fontSize: '1rem',
           color: '#F5F5F5',
         },
         valueLabel: {
@@ -39,20 +43,20 @@ export const theme = createTheme({
           background: '#5E714C',
         },
         track: {
-          height: '1em',
+          height: '0.7rem',
         },
         rail: {
-          height: '1em',
+          height: '0.7rem',
         },
         mark: {
-          width: '0.5em',
+          width: '0.5rem',
-          height: '0.5em',
+          height: '0.5rem',
           borderRadius: '50%',
           display: 'none',
         },
         thumb: {
-          width: '1.7em',
+          width: '1.3rem',
-          height: '1.7em',
+          height: '1.3rem',
         },
       },
     },

src/Providers/GlobalSettingsProvider.tsx

@@ -20,6 +20,7 @@ export const GlobalSettingsProvider = ({
   const [showPlay, setShowPlay] = useState<boolean>(
     savedShowPlay ? savedShowPlay === 'true' : false
   );
+  const [showStartingPlayer, setShowStartingPlayer] = useState(true);
 
   const [initialGameSettings, setInitialGameSettings] =
     useState<InitialSettings | null>(
@@ -112,6 +113,8 @@ export const GlobalSettingsProvider = ({
       setShowPlay,
       initialGameSettings,
       setInitialGameSettings,
+      showStartingPlayer,
+      setShowStartingPlayer,
     };
   }, [
     active,
@@ -122,6 +125,7 @@ export const GlobalSettingsProvider = ({
     release,
     request,
     showPlay,
+    showStartingPlayer,
     type,
   ]);