mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-19 09:18:02 +00:00
wip done
This commit is contained in:
Viktor Rådberg
397
src/Components/Views/StartMenu/LayoutOptions2.tsx
Normal file
397
src/Components/Views/StartMenu/LayoutOptions2.tsx
Normal file
@@ -0,0 +1,397 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { theme } from '../../../Data/theme';
|
||||
import {
|
||||
FivePlayers,
|
||||
FourPlayers,
|
||||
FourPlayersSide,
|
||||
OnePlayerPortrait,
|
||||
SixPlayers,
|
||||
ThreePlayers,
|
||||
ThreePlayersSide,
|
||||
TwoPlayersOppositeLandscape,
|
||||
TwoPlayersOppositePortrait,
|
||||
TwoPlayersSameSide,
|
||||
} from '../../../Icons/generated/Layouts';
|
||||
|
||||
import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
|
||||
import { Orientation } from '../../../Types/Settings';
|
||||
|
||||
const LayoutWrapper = styled.div`
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
`;
|
||||
|
||||
type LayoutOptionsProps = {
|
||||
numberOfPlayers: number;
|
||||
selectedOrientation: Orientation;
|
||||
onChange: (orientation: Orientation) => void;
|
||||
};
|
||||
|
||||
const LayoutOptions2: React.FC<LayoutOptionsProps> = ({
|
||||
numberOfPlayers,
|
||||
selectedOrientation,
|
||||
onChange,
|
||||
}) => {
|
||||
const iconHeight = '30vmin';
|
||||
const iconWidth = '20vmin';
|
||||
|
||||
const renderLayoutOptions = () => {
|
||||
switch (numberOfPlayers) {
|
||||
case 1:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={Orientation.Landscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<OnePlayerLandscape
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<OnePlayerLandscape
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={Orientation.Portrait}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<OnePlayerPortrait
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<OnePlayerPortrait
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={Orientation.Landscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<TwoPlayersSameSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<TwoPlayersSameSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={Orientation.Portrait}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<TwoPlayersOppositePortrait
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<TwoPlayersOppositePortrait
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={Orientation.OppositeLandscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<TwoPlayersOppositeLandscape
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<TwoPlayersOppositeLandscape
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={Orientation.Landscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<ThreePlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<ThreePlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={Orientation.Portrait}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<ThreePlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<ThreePlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
case 4:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={Orientation.Landscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FourPlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FourPlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={Orientation.Portrait}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FourPlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FourPlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
case 5:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={Orientation.Landscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FivePlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FivePlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
{/* <FormControlLabel
|
||||
value={GridTemplateAreas.FivePlayersSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FivePlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FivePlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
|
||||
case 6:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={Orientation.Landscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<SixPlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<SixPlayers
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
{/* <FormControlLabel
|
||||
value={GridTemplateAreas.SixPlayersSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<SixPlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<SixPlayersSide
|
||||
height={iconHeight}
|
||||
width={iconWidth}
|
||||
fill={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<LayoutWrapper>
|
||||
<RadioGroup
|
||||
row
|
||||
onChange={(_e, value) => {
|
||||
onChange(value as Orientation);
|
||||
}}
|
||||
value={selectedOrientation}
|
||||
style={{ justifyContent: 'center' }}
|
||||
>
|
||||
{renderLayoutOptions()}
|
||||
</RadioGroup>
|
||||
</LayoutWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default LayoutOptions2;
|
||||
@@ -2,20 +2,19 @@ import { Button, FormControl, FormLabel, Switch } from '@mui/material';
|
||||
import Slider from '@mui/material/Slider';
|
||||
import { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
|
||||
import { createInitialPlayers } from '../../../Data/getInitialPlayers';
|
||||
import { theme } from '../../../Data/theme';
|
||||
import { useAnalytics } from '../../../Hooks/useAnalytics';
|
||||
import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
|
||||
import { usePlayers } from '../../../Hooks/usePlayers';
|
||||
import { Cog, Info } from '../../../Icons/generated';
|
||||
import { InitialGameSettings, Orientation } from '../../../Types/Settings';
|
||||
import { InfoModal } from '../../Misc/InfoModal';
|
||||
import { SettingsModal } from '../../Misc/SettingsModal';
|
||||
import { Spacer } from '../../Misc/Spacer';
|
||||
import { SupportMe } from '../../Misc/SupportMe';
|
||||
import { H1, Paragraph } from '../../Misc/TextComponents';
|
||||
import LayoutOptions from './LayoutOptions';
|
||||
import { Spacer } from '../../Misc/Spacer';
|
||||
import { usePlayers } from '../../../Hooks/usePlayers';
|
||||
import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
|
||||
import { InitialGameSettings } from '../../../Types/Settings';
|
||||
import { SettingsModal } from '../../Misc/SettingsModal';
|
||||
import LayoutOptions2 from './LayoutOptions2';
|
||||
|
||||
const MainWrapper = styled.div`
|
||||
width: 100dvw;
|
||||
@@ -118,8 +117,7 @@ const Start = () => {
|
||||
numberOfPlayers: 4,
|
||||
startingLifeTotal: 40,
|
||||
useCommanderDamage: true,
|
||||
gridAreas: GridTemplateAreas.FourPlayers,
|
||||
orientation: 'portrait',
|
||||
orientation: Orientation.Portrait,
|
||||
gameFormat: 'commander',
|
||||
}
|
||||
);
|
||||
@@ -158,32 +156,9 @@ const Start = () => {
|
||||
return `${value}`;
|
||||
};
|
||||
|
||||
const getDefaultLayout = (numberOfPlayers: number) => {
|
||||
switch (numberOfPlayers) {
|
||||
case 1:
|
||||
return GridTemplateAreas.OnePlayerLandscape;
|
||||
case 2:
|
||||
return GridTemplateAreas.TwoPlayersSameSide;
|
||||
case 3:
|
||||
return GridTemplateAreas.ThreePlayers;
|
||||
case 4:
|
||||
return GridTemplateAreas.FourPlayers;
|
||||
case 5:
|
||||
return GridTemplateAreas.FivePlayers;
|
||||
case 6:
|
||||
return GridTemplateAreas.SixPlayers;
|
||||
default:
|
||||
return GridTemplateAreas.FourPlayers;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const defaultLayout = getDefaultLayout(playerOptions.numberOfPlayers);
|
||||
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
gridAreas: defaultLayout,
|
||||
orientation: 'landscape',
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [playerOptions.numberOfPlayers]);
|
||||
@@ -231,7 +206,7 @@ const Start = () => {
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
numberOfPlayers: value as number,
|
||||
orientation: 'landscape',
|
||||
orientation: Orientation.Landscape,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
@@ -250,7 +225,7 @@ const Start = () => {
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
startingLifeTotal: value as number,
|
||||
orientation: 'landscape',
|
||||
orientation: Orientation.Landscape,
|
||||
})
|
||||
}
|
||||
/>
|
||||
@@ -272,7 +247,7 @@ const Start = () => {
|
||||
useCommanderDamage: value,
|
||||
numberOfPlayers: 4,
|
||||
startingLifeTotal: 40,
|
||||
orientation: 'landscape',
|
||||
orientation: Orientation.Landscape,
|
||||
});
|
||||
return;
|
||||
}
|
||||
@@ -281,7 +256,7 @@ const Start = () => {
|
||||
useCommanderDamage: value,
|
||||
numberOfPlayers: 2,
|
||||
startingLifeTotal: 20,
|
||||
orientation: 'landscape',
|
||||
orientation: Orientation.Landscape,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
@@ -298,7 +273,7 @@ const Start = () => {
|
||||
</ToggleButtonsWrapper>
|
||||
|
||||
<FormLabel>Layout</FormLabel>
|
||||
<LayoutOptions
|
||||
{/* <LayoutOptions
|
||||
numberOfPlayers={playerOptions.numberOfPlayers}
|
||||
gridAreas={playerOptions.gridAreas}
|
||||
onChange={(gridAreas) =>
|
||||
@@ -306,9 +281,20 @@ const Start = () => {
|
||||
...playerOptions,
|
||||
gridAreas,
|
||||
//TODO fix the layout selection
|
||||
orientation: 'portrait',
|
||||
orientation: Orientation.Portrait,
|
||||
})
|
||||
}
|
||||
/> */}
|
||||
<LayoutOptions2
|
||||
numberOfPlayers={playerOptions.numberOfPlayers}
|
||||
selectedOrientation={playerOptions.orientation}
|
||||
onChange={(orientation) => {
|
||||
console.log('orientation', { orientation });
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
orientation,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user