external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-20 01:38:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

add layout options

Browse Source
This commit is contained in:
Vikeo
2023-07-09 16:31:55 +02:00
parent 6bbc84e4f1
commit 300677f919
1 changed files with 231 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
my-app/src/Components/Views/StartMenu.tsx
View File

@@ -15,16 +15,40 @@ import {
RadioGroup, RadioGroup,
Switch, Switch,
} from '@mui/material'; } from '@mui/material';
import OnePlayerLandscape from '../../Icons/Layouts/OnePlayerLandscape';
import OnePlayerPortrait from '../../Icons/Layouts/OnePlayerPortrait';
import TwoPlayersOppositeLandscape from '../../Icons/Layouts/TwoPlayersOppositeLandscape';
import TwoPlayersOppositePortrait from '../../Icons/Layouts/TwoPlayersOppositePortrait';
import TwoPlayersSameSide from '../../Icons/Layouts/TwoPlayersSameSide';
import FivePlayers from '../../Icons/Layouts/FivePlayers';
import FourPlayers from '../../Icons/Layouts/FourPlayers';
import FourPlayersSide from '../../Icons/Layouts/FourPlayersSide';
import ThreePlayers from '../../Icons/Layouts/ThreePlayers';
import ThreePlayersSide from '../../Icons/Layouts/ThreePlayersSide';
import FivePlayersSide from '../../Icons/Layouts/FivePlayersSide';
import SixPlayers from '../../Icons/Layouts/SixPlayers';
import SixPlayersSide from '../../Icons/Layouts/SixPlayersSide';
const MainWrapper = styled.div` const MainWrapper = styled.div`
width: 100vmax;
height: 100vmin;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; rotate: -90deg;
width: 100%;
height: 100%;
padding: 5rem;
min-width: max-content;
`;
const LayoutWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 1rem;
min-width: max-content;
`; `;
const playerMarks = [ const playerMarks = [
@@ -162,106 +186,211 @@ const Start = ({
}) })
} }
/> />
<FormLabel>Layout</FormLabel> <FormLabel>Layout</FormLabel>
<RadioGroup <LayoutWrapper>
row <RadioGroup
onChange={(e, value) => row
setPlayerOptions({ onChange={(e, value) =>
...playerOptions, setPlayerOptions({
gridAreas: value as GridTemplateAreas, ...playerOptions,
}) gridAreas: value as GridTemplateAreas,
} })
> }
{playerOptions.numberOfPlayers === 1 && ( >
<> {playerOptions.numberOfPlayers === 1 && (
<FormControlLabel <>
value={GridTemplateAreas.OnePlayerHorizontal} <FormControlLabel
control={<Radio />} style={{ margin: '0', padding: '0', width: '10%' }}
label="Horizontal" value={GridTemplateAreas.OnePlayerLandscape}
/> control={
<FormControlLabel <Radio
value={GridTemplateAreas.OnePlayerVertical} icon={<OnePlayerLandscape size="248px" color="black" />}
control={<Radio />} checkedIcon={
label="Vertical" <OnePlayerLandscape size="248px" color="blue" />
/> }
</> TouchRippleProps={{ style: { display: 'none' } }}
)} />
{playerOptions.numberOfPlayers === 2 && ( }
<> label=""
<FormControlLabel />
value={GridTemplateAreas.TwoPlayersOppositeHorizontal} <FormControlLabel
control={<Radio />} value={GridTemplateAreas.OnePlayerPortrait}
label="Opposite Horizontal" control={
/> <Radio
<FormControlLabel icon={<OnePlayerPortrait size="248px" color="black" />}
value={GridTemplateAreas.TwoPlayersOppositeVertical} checkedIcon={
control={<Radio />} <OnePlayerPortrait size="248px" color="blue" />
label="Opposite Vertical" }
/> TouchRippleProps={{ style: { display: 'none' } }}
<FormControlLabel />
value={GridTemplateAreas.TwoPlayersSameSide} }
control={<Radio />} label=""
label="Same Side" />
/> </>
</> )}
)} {playerOptions.numberOfPlayers === 2 && (
{playerOptions.numberOfPlayers === 3 && ( <>
<> <FormControlLabel
<FormControlLabel value={GridTemplateAreas.TwoPlayersOppositeLandscape}
value={GridTemplateAreas.ThreePlayers} control={
control={<Radio />} <Radio
label="Three Players" icon={
/> <TwoPlayersOppositeLandscape
<FormControlLabel size="248px"
value={GridTemplateAreas.ThreePlayersSide} color="black"
control={<Radio />} />
label="Three Players Side" }
/> checkedIcon={
</> <TwoPlayersOppositeLandscape
)} size="248px"
{playerOptions.numberOfPlayers === 4 && ( color="blue"
<> />
<FormControlLabel }
value={GridTemplateAreas.FourPlayers} TouchRippleProps={{ style: { display: 'none' } }}
control={<Radio />} />
label="Four Players" }
/> label=""
<FormControlLabel />
value={GridTemplateAreas.FourPlayersSide} <FormControlLabel
control={<Radio />} value={GridTemplateAreas.TwoPlayersOppositePortrait}
label="Four Players Side" control={
/> <Radio
</> icon={
)} <TwoPlayersOppositePortrait
{playerOptions.numberOfPlayers === 5 && ( size="248px"
<> color="black"
<FormControlLabel />
value={GridTemplateAreas.FivePlayers} }
control={<Radio />} checkedIcon={
label="Five Players" <TwoPlayersOppositePortrait size="248px" color="blue" />
/> }
<FormControlLabel TouchRippleProps={{ style: { display: 'none' } }}
value={GridTemplateAreas.FivePlayersSide} />
control={<Radio />} }
label="Five Players Side" label=""
/> />
</> <FormControlLabel
)} value={GridTemplateAreas.TwoPlayersSameSide}
{playerOptions.numberOfPlayers === 6 && ( control={
<> <Radio
<FormControlLabel icon={<TwoPlayersSameSide size="248px" color="black" />}
value={GridTemplateAreas.SixPlayers} checkedIcon={
control={<Radio />} <TwoPlayersSameSide size="248px" color="blue" />
label="Six Players" }
/> TouchRippleProps={{ style: { display: 'none' } }}
<FormControlLabel />
value={GridTemplateAreas.SixPlayersSide} }
control={<Radio />} label=""
label="Six Players Side" />
/> </>
</> )}
)} {playerOptions.numberOfPlayers === 3 && (
</RadioGroup> <>
<FormControlLabel
value={GridTemplateAreas.ThreePlayers}
control={
<Radio
icon={<ThreePlayers size="248px" color="black" />}
checkedIcon={<ThreePlayers size="248px" color="blue" />}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
<FormControlLabel
value={GridTemplateAreas.ThreePlayersSide}
control={
<Radio
icon={<ThreePlayersSide size="248px" color="black" />}
checkedIcon={
<ThreePlayersSide size="248px" color="blue" />
}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
</>
)}
{playerOptions.numberOfPlayers === 4 && (
<>
<FormControlLabel
value={GridTemplateAreas.FourPlayers}
control={
<Radio
icon={<FourPlayers size="248px" color="black" />}
checkedIcon={<FourPlayers size="248px" color="blue" />}
/>
}
label=""
/>
<FormControlLabel
value={GridTemplateAreas.FourPlayersSide}
control={
<Radio
icon={<FourPlayersSide size="248px" color="black" />}
checkedIcon={
<FourPlayersSide size="248px" color="blue" />
}
/>
}
label=""
/>
</>
)}
{playerOptions.numberOfPlayers === 5 && (
<>
<FormControlLabel
value={GridTemplateAreas.FivePlayers}
control={
<Radio
icon={<FivePlayers size="248px" color="black" />}
checkedIcon={<FivePlayers size="248px" color="blue" />}
/>
}
label=""
/>
<FormControlLabel
value={GridTemplateAreas.FivePlayersSide}
control={
<Radio
icon={<FivePlayersSide size="248px" color="black" />}
checkedIcon={
<FivePlayersSide size="248px" color="blue" />
}
/>
}
label=""
/>
</>
)}
{playerOptions.numberOfPlayers === 6 && (
<>
<FormControlLabel
value={GridTemplateAreas.SixPlayers}
control={
<Radio
icon={<SixPlayers size="248px" color="black" />}
checkedIcon={<FivePlayers size="248px" color="blue" />}
/>
}
label=""
/>
<FormControlLabel
value={GridTemplateAreas.SixPlayersSide}
control={
<Radio
icon={<SixPlayersSide size="248px" color="black" />}
checkedIcon={<SixPlayersSide size="248px" color="blue" />}
/>
}
label=""
/>
</>
)}
</RadioGroup>
</LayoutWrapper>
<hr /> <hr />
<hr /> <hr />
<hr /> <hr />