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

fix start menu style

Browse Source
This commit is contained in:
Viktor Rådberg
2024-01-14 13:41:51 +01:00
parent 10039175a1
commit 07775f85d2
2 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,7 +18,7 @@ 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-between self-center`; const LayoutWrapper = twc.div`flex flex-row justify-center items-center self-center w-full`;
type LayoutOptionsProps = { type LayoutOptionsProps = {
numberOfPlayers: number; numberOfPlayers: number;
@@ -31,14 +31,16 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
selectedOrientation, selectedOrientation,
onChange, onChange,
}) => { }) => {
const iconHeight = '30vmin'; const iconWidth = '21vmin';
const iconWidth = '20vmin'; const iconHeight = '40vmin';
const iconMaxWidth = '124px';
const iconMaxHeight = '196px';
const renderLayoutOptions = () => { const renderLayoutOptions = () => {
switch (numberOfPlayers) { switch (numberOfPlayers) {
case 1: case 1:
return ( return (
<> <div>
<FormControlLabel <FormControlLabel
value={Orientation.Landscape} value={Orientation.Landscape}
control={ control={
@@ -58,6 +60,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
/> />
} }
TouchRippleProps={{ style: { display: 'none' } }} TouchRippleProps={{ style: { display: 'none' } }}
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
/> />
} }
label="" label=""
@@ -81,11 +84,12 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
/> />
} }
TouchRippleProps={{ style: { display: 'none' } }} TouchRippleProps={{ style: { display: 'none' } }}
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
/> />
} }
label="" label=""
/> />
</> </div>
); );
case 2: case 2:
return ( return (
@@ -94,6 +98,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Landscape} value={Orientation.Landscape}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<TwoPlayersSameSide <TwoPlayersSameSide
height={iconHeight} height={iconHeight}
@@ -117,6 +122,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Portrait} value={Orientation.Portrait}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<TwoPlayersOppositePortrait <TwoPlayersOppositePortrait
height={iconHeight} height={iconHeight}
@@ -140,6 +146,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.OppositeLandscape} value={Orientation.OppositeLandscape}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<TwoPlayersOppositeLandscape <TwoPlayersOppositeLandscape
height={iconHeight} height={iconHeight}
@@ -168,6 +175,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Landscape} value={Orientation.Landscape}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<ThreePlayers <ThreePlayers
height={iconHeight} height={iconHeight}
@@ -191,6 +199,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Portrait} value={Orientation.Portrait}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<ThreePlayersSide <ThreePlayersSide
height={iconHeight} height={iconHeight}
@@ -220,6 +229,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Landscape} value={Orientation.Landscape}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<FourPlayers <FourPlayers
height={iconHeight} height={iconHeight}
@@ -243,6 +253,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Portrait} value={Orientation.Portrait}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<FourPlayersSide <FourPlayersSide
height={iconHeight} height={iconHeight}
@@ -272,6 +283,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Landscape} value={Orientation.Landscape}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<FivePlayers <FivePlayers
height={iconHeight} height={iconHeight}
@@ -324,6 +336,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
value={Orientation.Landscape} value={Orientation.Landscape}
control={ control={
<Radio <Radio
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
icon={ icon={
<SixPlayers <SixPlayers
height={iconHeight} height={iconHeight}

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

@@ -22,6 +22,8 @@ const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center
const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`; const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`;
const SliderWrapper = twc.div`mx-8`;
const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`; const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;
const ToggleContainer = twc.div`flex flex-col items-center`; const ToggleContainer = twc.div`flex flex-col items-center`;
@@ -175,43 +177,48 @@ const Start = () => {
</h1> </h1>
<div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4"> <div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4">
<FormControl focused={false}> <FormControl focused={false} style={{ width: '100%' }}>
<FormLabel>Number of Players</FormLabel> <FormLabel>Number of Players</FormLabel>
<Slider <SliderWrapper>
title="Number of Players" <Slider
max={6} title="Number of Players"
min={1} max={6}
aria-label="Custom marks" min={1}
value={playerOptions?.numberOfPlayers ?? 4} aria-label="Custom marks"
getAriaValueText={valuetext} value={playerOptions?.numberOfPlayers ?? 4}
step={null} getAriaValueText={valuetext}
marks={playerMarks} step={null}
onChange={(_e, value) => { marks={playerMarks}
setPlayerOptions({ onChange={(_e, value) => {
...playerOptions, setPlayerOptions({
numberOfPlayers: value as number, ...playerOptions,
orientation: Orientation.Landscape, numberOfPlayers: value as number,
}); orientation: Orientation.Landscape,
}} });
/> }}
/>
</SliderWrapper>
<FormLabel className="mt-[0.7rem]">Starting Health</FormLabel> <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
<Slider <SliderWrapper>
title="Starting Health" <Slider
max={60} title="Starting Health"
min={20} max={60}
aria-label="Custom marks" min={20}
value={playerOptions?.startingLifeTotal ?? 40} aria-label="Custom marks"
getAriaValueText={valuetext} value={playerOptions?.startingLifeTotal ?? 40}
step={10} getAriaValueText={valuetext}
marks={healthMarks} step={10}
onChange={(_e, value) => marks={healthMarks}
setPlayerOptions({ onChange={(_e, value) =>
...playerOptions, setPlayerOptions({
startingLifeTotal: value as number, ...playerOptions,
orientation: Orientation.Landscape, startingLifeTotal: value as number,
}) orientation: Orientation.Landscape,
} })
/> }
/>
</SliderWrapper>
<ToggleButtonsWrapper className="mt-4"> <ToggleButtonsWrapper className="mt-4">
<ToggleContainer> <ToggleContainer>