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

remove mui from layouts

Browse Source
This commit is contained in:
Vikeo
2024-04-27 00:05:28 +02:00
parent 63aace2b07
commit 28dec3fc22
1 changed files with 192 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,4 @@
import { FormControlLabel, Radio, RadioGroup } from '@mui/material'; import { twc } from 'react-twc';
import React from 'react';
import { theme } from '../../../Data/theme';
import { import {
FivePlayers, FivePlayers,
FivePlayersSide, FivePlayersSide,
@@ -15,12 +13,18 @@ import {
TwoPlayersOppositePortrait, TwoPlayersOppositePortrait,
TwoPlayersSameSide, TwoPlayersSameSide,
} from '../../../Icons/generated/Layouts'; } from '../../../Icons/generated/Layouts';
import { twc } from 'react-twc';
import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape'; import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
import { Orientation } from '../../../Types/Settings'; import { Orientation } from '../../../Types/Settings';
const LayoutWrapper = twc.div`flex flex-row justify-center items-center self-center w-full`; const LayoutsRadioGroup = twc.div`flex flex-row justify-center items-center gap-4 self-center w-full`;
const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-primary-main hover:bg-opacity-5 rounded-2xl cursor-pointer`;
const Input = twc.input`peer sr-only`;
const IconWrapper = twc(
'div'
)`peer-checked:fill-primary-main fill-primary-dark max-h-[200px] h-[40vmin] w-[21vmin]`;
type LayoutOptionsProps = { type LayoutOptionsProps = {
numberOfPlayers: number; numberOfPlayers: number;
@@ -28,381 +32,212 @@ type LayoutOptionsProps = {
onChange: (orientation: Orientation) => void; onChange: (orientation: Orientation) => void;
}; };
export const LayoutOptions: React.FC<LayoutOptionsProps> = ({ export const LayoutOptions = ({
numberOfPlayers, numberOfPlayers,
selectedOrientation, selectedOrientation,
onChange, onChange,
}) => { }: LayoutOptionsProps) => {
const iconWidth = '21vmin';
const iconHeight = '40vmin';
const iconMaxWidth = '124px';
const iconMaxHeight = '196px';
const renderLayoutOptions = () => {
switch (numberOfPlayers) { switch (numberOfPlayers) {
case 1: case 1:
return ( return (
<> <LayoutsRadioGroup>
<FormControlLabel <Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
<Input
type="radio"
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
checked={selectedOrientation === Orientation.Landscape}
value={Orientation.Landscape} value={Orientation.Landscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
icon={
<OnePlayerLandscape
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <OnePlayerLandscape className="w-full h-full" />
<OnePlayerLandscape </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
/> <Input
} type="radio"
TouchRippleProps={{ style: { display: 'none' } }} id={`${numberOfPlayers}p-${Orientation.Portrait}`}
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }} checked={selectedOrientation === Orientation.Portrait}
/>
}
label=""
/>
<FormControlLabel
value={Orientation.Portrait} value={Orientation.Portrait}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
icon={
<OnePlayerPortrait
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <OnePlayerPortrait className="w-full h-full" />
<OnePlayerPortrait </IconWrapper>
height={iconHeight} </Label>
width={iconWidth} </LayoutsRadioGroup>
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
/>
}
label=""
/>
</>
); );
case 2: case 2:
return ( return (
<> <LayoutsRadioGroup>
<FormControlLabel <Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
<Input
type="radio"
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
checked={selectedOrientation === Orientation.Landscape}
value={Orientation.Landscape} value={Orientation.Landscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<TwoPlayersSameSide
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <TwoPlayersSameSide className="w-full h-full" />
<TwoPlayersSameSide </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
/> <Input
} type="radio"
TouchRippleProps={{ style: { display: 'none' } }} id={`${numberOfPlayers}p-${Orientation.Portrait}`}
/> checked={selectedOrientation === Orientation.Portrait}
}
label=""
/>
<FormControlLabel
value={Orientation.Portrait} value={Orientation.Portrait}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<TwoPlayersOppositePortrait
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <TwoPlayersOppositePortrait className="w-full h-full" />
<TwoPlayersOppositePortrait </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label
/> htmlFor={`${numberOfPlayers}p-${Orientation.OppositeLandscape}`}
} >
TouchRippleProps={{ style: { display: 'none' } }} <Input
/> type="radio"
} id={`${numberOfPlayers}p-${Orientation.OppositeLandscape}`}
label="" checked={selectedOrientation === Orientation.OppositeLandscape}
/>
<FormControlLabel
value={Orientation.OppositeLandscape} value={Orientation.OppositeLandscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<TwoPlayersOppositeLandscape
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <TwoPlayersOppositeLandscape className="w-full h-full" />
<TwoPlayersOppositeLandscape </IconWrapper>
height={iconHeight} </Label>
width={iconWidth} </LayoutsRadioGroup>
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
</>
); );
case 3: case 3:
return ( return (
<> <LayoutsRadioGroup>
<FormControlLabel <Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
<Input
type="radio"
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
checked={selectedOrientation === Orientation.Landscape}
value={Orientation.Landscape} value={Orientation.Landscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<ThreePlayers
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <ThreePlayers className="w-full h-full" />
<ThreePlayers </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
/> <Input
} type="radio"
TouchRippleProps={{ style: { display: 'none' } }} id={`${numberOfPlayers}p-${Orientation.Portrait}`}
/> checked={selectedOrientation === Orientation.Portrait}
}
label=""
/>
<FormControlLabel
value={Orientation.Portrait} value={Orientation.Portrait}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<ThreePlayersSide
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <ThreePlayersSide className="w-full h-full" />
<ThreePlayersSide </IconWrapper>
height={iconHeight} </Label>
width={iconWidth} </LayoutsRadioGroup>
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
</>
); );
case 4: case 4:
return ( return (
<> <LayoutsRadioGroup>
<FormControlLabel <Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
<Input
type="radio"
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
checked={selectedOrientation === Orientation.Landscape}
value={Orientation.Landscape} value={Orientation.Landscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<FourPlayers
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <FourPlayers className="w-full h-full" />
<FourPlayers </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
/> <Input
} type="radio"
TouchRippleProps={{ style: { display: 'none' } }} id={`${numberOfPlayers}p-${Orientation.Portrait}`}
/> checked={selectedOrientation === Orientation.Portrait}
}
label=""
/>
<FormControlLabel
value={Orientation.Portrait} value={Orientation.Portrait}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<FourPlayersSide
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <FourPlayersSide className="w-full h-full" />
<FourPlayersSide </IconWrapper>
height={iconHeight} </Label>
width={iconWidth} </LayoutsRadioGroup>
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
</>
); );
case 5: case 5:
return ( return (
<> <LayoutsRadioGroup>
<FormControlLabel <Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
<Input
type="radio"
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
checked={selectedOrientation === Orientation.Landscape}
value={Orientation.Landscape} value={Orientation.Landscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<FivePlayers
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <FivePlayers className="w-full h-full" />
<FivePlayers </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
/> <Input
} type="radio"
TouchRippleProps={{ style: { display: 'none' } }} id={`${numberOfPlayers}p-${Orientation.Portrait}`}
/> checked={selectedOrientation === Orientation.Portrait}
}
label=""
/>
<FormControlLabel
value={Orientation.Portrait} value={Orientation.Portrait}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<FivePlayersSide
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <FivePlayersSide className="w-full h-full" />
<FivePlayersSide </IconWrapper>
height={iconHeight} </Label>
width={iconWidth} </LayoutsRadioGroup>
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
</>
); );
case 6: case 6:
return ( return (
<> <LayoutsRadioGroup>
<FormControlLabel <Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
<Input
type="radio"
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
checked={selectedOrientation === Orientation.Landscape}
value={Orientation.Landscape} value={Orientation.Landscape}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<SixPlayers
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <SixPlayers className="w-full h-full" />
<SixPlayers </IconWrapper>
height={iconHeight} </Label>
width={iconWidth}
fill={theme.palette.primary.main} <Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
/> <Input
} type="radio"
TouchRippleProps={{ style: { display: 'none' } }} id={`${numberOfPlayers}p-${Orientation.Portrait}`}
/> checked={selectedOrientation === Orientation.Portrait}
}
label=""
/>
<FormControlLabel
value={Orientation.Portrait} value={Orientation.Portrait}
control={ onChange={(e) => onChange(e.target.value as Orientation)}
<Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={
<SixPlayersSide
height={iconHeight}
width={iconWidth}
fill={theme.palette.secondary.main}
/> />
} <IconWrapper>
checkedIcon={ <SixPlayersSide className="w-full h-full" />
<SixPlayersSide </IconWrapper>
height={iconHeight} </Label>
width={iconWidth} </LayoutsRadioGroup>
fill={theme.palette.primary.main}
/>
}
TouchRippleProps={{ style: { display: 'none' } }}
/>
}
label=""
/>
</>
); );
default: default:
return null; return null;
} }
}; };
return (
<LayoutWrapper>
<RadioGroup
row
onChange={(_e, value) => {
onChange(value as Orientation);
}}
value={selectedOrientation}
style={{ justifyContent: 'center' }}
>
{renderLayoutOptions()}
</RadioGroup>
</LayoutWrapper>
);
};