diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index ce4f037..75e0d9d 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/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,16 +211,18 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { return ( - {player.isStartingPlayer && player.showStartingPlayer && ( - - - You start! - - - )} + {showStartingPlayer && + player.isStartingPlayer && + player.showStartingPlayer && ( + + + You start! + + + )} {player.hasLost && ( { setShowPlay, initialGameSettings, setInitialGameSettings, + showStartingPlayer, + setShowStartingPlayer, } = useGlobalSettings(); const [openModal, setOpenModal] = useState(false); @@ -222,6 +224,7 @@ const Start = () => { }); }} /> + Starting Health { }) } /> + @@ -268,7 +272,7 @@ const Start = () => { }} /> - + Keep Awake { + + + Show Start Player + setShowStartingPlayer(!showStartingPlayer)} + /> + + + Layout { /> - + If you're on iOS, this page works better if you{' '} hide the toolbar or{' '} add the app to your home screen. diff --git a/src/Contexts/GlobalSettingsContext.tsx b/src/Contexts/GlobalSettingsContext.tsx index 992511f..e6e59a8 100644 --- a/src/Contexts/GlobalSettingsContext.tsx +++ b/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 = diff --git a/src/Data/theme.ts b/src/Data/theme.ts index 35adf7e..abaafbd 100644 --- a/src/Data/theme.ts +++ b/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', - height: '0.5em', + width: '0.5rem', + height: '0.5rem', borderRadius: '50%', display: 'none', }, thumb: { - width: '1.7em', - height: '1.7em', + width: '1.3rem', + height: '1.3rem', }, }, }, diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index 73b86b9..aea2ddb 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/src/Providers/GlobalSettingsProvider.tsx @@ -20,6 +20,7 @@ export const GlobalSettingsProvider = ({ const [showPlay, setShowPlay] = useState( savedShowPlay ? savedShowPlay === 'true' : false ); + const [showStartingPlayer, setShowStartingPlayer] = useState(true); const [initialGameSettings, setInitialGameSettings] = useState( @@ -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, ]);