ryan/LifeTrinket
1
0
Fork 0
forked from external-repos/LifeTrinket
Code Pull Requests Activity

update start menu styling

Browse Source
This commit is contained in:
Viktor Rådberg
2023-08-04 11:48:23 +02:00
parent 7e5b389919
commit 0af87ceb5e
3 changed files with 112 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/Components/Views/StartMenu/LayoutOptions.tsx
View File

@@ -18,6 +18,7 @@ import { theme } from '../../../Data/theme';
const LayoutWrapper = styled.div` const LayoutWrapper = styled.div`
flex-direction: row; flex-direction: row;
display: flex; display: flex;
justify-content: space-evenly;
`; `;
type LayoutOptionsProps = { type LayoutOptionsProps = {
@@ -31,6 +32,8 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
gridAreas, gridAreas,
onChange, onChange,
}) => { }) => {
const iconSize = '33vmin';
const renderLayoutOptions = () => { const renderLayoutOptions = () => {
switch (numberOfPlayers) { switch (numberOfPlayers) {
case 1: case 1:
@@ -42,13 +45,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<OnePlayerLandscape <OnePlayerLandscape
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<OnePlayerLandscape <OnePlayerLandscape
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -63,13 +66,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<OnePlayerPortrait <OnePlayerPortrait
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<OnePlayerPortrait <OnePlayerPortrait
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -89,13 +92,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<TwoPlayersOppositeLandscape <TwoPlayersOppositeLandscape
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<TwoPlayersOppositeLandscape <TwoPlayersOppositeLandscape
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -110,13 +113,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<TwoPlayersOppositePortrait <TwoPlayersOppositePortrait
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<TwoPlayersOppositePortrait <TwoPlayersOppositePortrait
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -131,13 +134,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<TwoPlayersSameSide <TwoPlayersSameSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<TwoPlayersSameSide <TwoPlayersSameSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -157,13 +160,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<ThreePlayers <ThreePlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<ThreePlayers <ThreePlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -178,13 +181,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<ThreePlayersSide <ThreePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<ThreePlayersSide <ThreePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -205,13 +208,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FourPlayers <FourPlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FourPlayers <FourPlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -226,13 +229,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FourPlayersSide <FourPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FourPlayersSide <FourPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -253,13 +256,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FivePlayers <FivePlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FivePlayers <FivePlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -274,13 +277,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<FivePlayersSide <FivePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<FivePlayersSide <FivePlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -301,13 +304,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<SixPlayers <SixPlayers
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<SixPlayers <SixPlayers
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -322,13 +325,13 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<Radio <Radio
icon={ icon={
<SixPlayersSide <SixPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.secondary.main} color={theme.palette.secondary.main}
/> />
} }
checkedIcon={ checkedIcon={
<SixPlayersSide <SixPlayersSide
size="20vmax" size={iconSize}
color={theme.palette.primary.main} color={theme.palette.primary.main}
/> />
} }
@@ -353,6 +356,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
onChange(value as GridTemplateAreas); onChange(value as GridTemplateAreas);
}} }}
value={gridAreas} value={gridAreas}
style={{ justifyContent: 'center' }}
> >
{renderLayoutOptions()} {renderLayoutOptions()}
</RadioGroup> </RadioGroup>

140
src/Components/Views/StartMenu/StartMenu.tsx
View File

@@ -15,13 +15,9 @@ const H2 = styled.h2`
color: ${theme.palette.text.primary}; color: ${theme.palette.text.primary};
`; `;
export const Wrapper = styled.div` const MainWrapper = styled.div`
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
`;
const MainWrapper = styled.div`
padding-top: 58px;
padding-bottom: 58px; padding-bottom: 58px;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
@@ -146,76 +142,74 @@ const Start = ({
}, [playerOptions.numberOfPlayers]); }, [playerOptions.numberOfPlayers]);
return ( return (
<Wrapper> <MainWrapper>
<MainWrapper> <H2>Game Setup</H2>
<H2>Game Setup</H2> <FormControl focused={false} style={{ width: '80vw' }}>
<FormControl focused={false} style={{ width: '80vw' }}> <FormLabel>Number of Players</FormLabel>
<FormLabel>Number of Players</FormLabel> <Slider
<Slider title="Number of Players"
title="Number of Players" max={6}
max={6} min={1}
min={1} aria-label="Custom marks"
aria-label="Custom marks" defaultValue={4}
defaultValue={4} getAriaValueText={valuetext}
getAriaValueText={valuetext} step={null}
step={null} marks={playerMarks}
marks={playerMarks} onChange={(e, value) => {
onChange={(e, value) => { setPlayerOptions({
setPlayerOptions({ ...playerOptions,
...playerOptions, numberOfPlayers: value as number,
numberOfPlayers: value as number, });
}); }}
}} />
/> <FormLabel>Starting Health</FormLabel>
<FormLabel>Starting Health</FormLabel> <Slider
<Slider title="Starting Health"
title="Starting Health" max={60}
max={60} min={20}
min={20} aria-label="Custom marks"
aria-label="Custom marks" defaultValue={40}
defaultValue={40} getAriaValueText={valuetext}
getAriaValueText={valuetext} step={10}
step={10} marks={healthMarks}
marks={healthMarks} onChange={(e, value) =>
onChange={(e, value) => setPlayerOptions({
setPlayerOptions({ ...playerOptions,
...playerOptions, startingLifeTotal: value as number,
startingLifeTotal: value as number, })
}) }
} />
/> <FormLabel>Commander</FormLabel>
<FormLabel>Commander</FormLabel> <Switch
<Switch checked={playerOptions.useCommanderDamage}
checked={playerOptions.useCommanderDamage} defaultChecked
defaultChecked onChange={(e, value) =>
onChange={(e, value) => setPlayerOptions({
setPlayerOptions({ ...playerOptions,
...playerOptions, useCommanderDamage: value,
useCommanderDamage: value, })
}) }
} />
/>
<FormLabel>Layout</FormLabel> <FormLabel>Layout</FormLabel>
<LayoutOptions <LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers} numberOfPlayers={playerOptions.numberOfPlayers}
gridAreas={playerOptions.gridAreas} gridAreas={playerOptions.gridAreas}
onChange={(gridAreas) => onChange={(gridAreas) =>
setPlayerOptions({ ...playerOptions, gridAreas }) setPlayerOptions({ ...playerOptions, gridAreas })
} }
/> />
<Button <Button
style={{ marginTop: '24px' }} style={{ marginTop: '24px' }}
size="large" size="large"
variant="contained" variant="contained"
onClick={doStartGame} onClick={doStartGame}
> >
Start Game Start Game
</Button> </Button>
</FormControl> </FormControl>
</MainWrapper> </MainWrapper>
</Wrapper>
); );
}; };

19
src/Data/theme.ts
View File

@@ -27,10 +27,10 @@ export const theme = createTheme({
MuiSlider: { MuiSlider: {
styleOverrides: { styleOverrides: {
root: { root: {
marginBottom: '4em', marginBottom: '2.5em',
}, },
markLabel: { markLabel: {
fontSize: '1.5em', fontSize: '1.2em',
color: '#F5F5F5', color: '#F5F5F5',
}, },
valueLabel: { valueLabel: {
@@ -45,11 +45,10 @@ export const theme = createTheme({
height: '1em', height: '1em',
}, },
mark: { mark: {
markerStart: 'none',
markerEnd: 'none',
width: '0.5em', width: '0.5em',
height: '0.5em', height: '0.5em',
borderRadius: '50%', borderRadius: '50%',
display: 'none',
}, },
thumb: { thumb: {
width: '1.7em', width: '1.7em',
@@ -57,5 +56,17 @@ export const theme = createTheme({
}, },
}, },
}, },
MuiFormControlLabel: {
styleOverrides: {
root: {
margin: '0',
},
},
},
MuiFormGroup: {
styleOverrides: {
root: {},
},
},
}, },
}); });