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

finish

Browse Source
This commit is contained in:
Viktor Rådberg
2023-12-27 19:53:11 +01:00
parent 808c55109d
commit 6e222995b6
5 changed files with 41 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,22 @@
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
import { theme } from '../../../Data/theme'; import { theme } from '../../../Data/theme';
import { import {
OnePlayerPortrait, FivePlayers,
TwoPlayersOppositeLandscape,
TwoPlayersOppositePortrait,
ThreePlayers,
ThreePlayersSide,
FourPlayers, FourPlayers,
FourPlayersSide, FourPlayersSide,
FivePlayers, OnePlayerPortrait,
SixPlayers, SixPlayers,
ThreePlayers,
ThreePlayersSide,
TwoPlayersOppositeLandscape,
TwoPlayersOppositePortrait,
TwoPlayersSameSide, TwoPlayersSameSide,
} from '../../../Icons/generated/Layouts'; } from '../../../Icons/generated/Layouts';
import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape'; import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
import { Orientation } from '../../../Types/Settings';
const LayoutWrapper = styled.div` const LayoutWrapper = styled.div`
flex-direction: row; flex-direction: row;
@@ -25,13 +26,13 @@ const LayoutWrapper = styled.div`
type LayoutOptionsProps = { type LayoutOptionsProps = {
numberOfPlayers: number; numberOfPlayers: number;
gridAreas: GridTemplateAreas; selectedOrientation: Orientation;
onChange: (gridAreas: GridTemplateAreas) => void; onChange: (orientation: Orientation) => void;
}; };
const LayoutOptions: React.FC<LayoutOptionsProps> = ({ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
numberOfPlayers, numberOfPlayers,
gridAreas, selectedOrientation,
onChange, onChange,
}) => { }) => {
const iconHeight = '30vmin'; const iconHeight = '30vmin';
@@ -43,7 +44,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return ( return (
<> <>
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.OnePlayerLandscape} value={Orientation.Landscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -66,7 +67,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label="" label=""
/> />
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.OnePlayerPortrait} value={Orientation.Portrait}
control={ control={
<Radio <Radio
icon={ icon={
@@ -94,7 +95,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return ( return (
<> <>
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.TwoPlayersSameSide} value={Orientation.Landscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -117,7 +118,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label="" label=""
/> />
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.TwoPlayersOppositePortrait} value={Orientation.Portrait}
control={ control={
<Radio <Radio
icon={ icon={
@@ -140,7 +141,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label="" label=""
/> />
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.TwoPlayersOppositeLandscape} value={Orientation.OppositeLandscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -168,7 +169,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return ( return (
<> <>
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.ThreePlayers} value={Orientation.Landscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -191,7 +192,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label="" label=""
/> />
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.ThreePlayersSide} value={Orientation.Portrait}
control={ control={
<Radio <Radio
icon={ icon={
@@ -220,7 +221,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return ( return (
<> <>
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.FourPlayers} value={Orientation.Landscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -243,7 +244,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label="" label=""
/> />
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.FourPlayersSide} value={Orientation.Portrait}
control={ control={
<Radio <Radio
icon={ icon={
@@ -272,7 +273,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return ( return (
<> <>
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.FivePlayers} value={Orientation.Landscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -324,7 +325,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return ( return (
<> <>
<FormControlLabel <FormControlLabel
value={GridTemplateAreas.SixPlayers} value={Orientation.Landscape}
control={ control={
<Radio <Radio
icon={ icon={
@@ -382,9 +383,9 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<RadioGroup <RadioGroup
row row
onChange={(_e, value) => { onChange={(_e, value) => {
onChange(value as GridTemplateAreas); onChange(value as Orientation);
}} }}
value={gridAreas} value={selectedOrientation}
style={{ justifyContent: 'center' }} style={{ justifyContent: 'center' }}
> >
{renderLayoutOptions()} {renderLayoutOptions()}
@@ -392,5 +393,3 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
</LayoutWrapper> </LayoutWrapper>
); );
}; };
export default LayoutOptions;

397
src/Components/Views/StartMenu/LayoutOptions2.tsx
View File

@@ -1,397 +0,0 @@
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;

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

@@ -14,7 +14,7 @@ import { SettingsModal } from '../../Misc/SettingsModal';
import { Spacer } from '../../Misc/Spacer'; import { Spacer } from '../../Misc/Spacer';
import { SupportMe } from '../../Misc/SupportMe'; import { SupportMe } from '../../Misc/SupportMe';
import { H1, Paragraph } from '../../Misc/TextComponents'; import { H1, Paragraph } from '../../Misc/TextComponents';
import LayoutOptions2 from './LayoutOptions2'; import { LayoutOptions } from './LayoutOptions';
const MainWrapper = styled.div` const MainWrapper = styled.div`
width: 100dvw; width: 100dvw;
@@ -285,7 +285,7 @@ const Start = () => {
}) })
} }
/> */} /> */}
<LayoutOptions2 <LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers} numberOfPlayers={playerOptions.numberOfPlayers}
selectedOrientation={playerOptions.orientation} selectedOrientation={playerOptions.orientation}
onChange={(orientation) => { onChange={(orientation) => {

15
src/Data/GridTemplateAreas.ts
View File

@@ -1,15 +0,0 @@
export enum GridTemplateAreas {
OnePlayerLandscape = '"player0 player0"',
OnePlayerPortrait = '"player0" "player0"',
TwoPlayersOppositeLandscape = '"player0" "player1"',
TwoPlayersOppositePortrait = '"player0 player1" "player0 player1"',
TwoPlayersSameSide = '"player0 player1"',
ThreePlayers = '"player0 player0" "player1 player2"',
ThreePlayersSide = '"player0 player0 player0 player2" "player1 player1 player1 player2"',
FourPlayers = '"player0 player0 player1 player1" "player2 player2 player3 player3"',
FourPlayersSide = '"player0 player0 player0 player1 player1 player1 player2 player2 player2 player3" "player0 player0 player3 player3 player3 player1 player1 player2 player3 player3"',
FivePlayers = '"player0 player0 player0 player1 player1 player1" "player2 player2 player3 player3 player4 player4"',
FivePlayersSide = '"player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2" "player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2"',
SixPlayers = '"player0 player1 player2" "player3 player4 player5"',
SixPlayersSide = '"player0 player1 player1 player1 player1 player2 player2 player2 player2 player3" "player0 player4 player4 player4 player4 player5 player5 player5 player5 player3"',
}

15
src/Providers/GlobalSettingsProvider.tsx
View File

@@ -5,7 +5,7 @@ import {
GlobalSettingsContextType, GlobalSettingsContextType,
} from '../Contexts/GlobalSettingsContext'; } from '../Contexts/GlobalSettingsContext';
import { useAnalytics } from '../Hooks/useAnalytics'; import { useAnalytics } from '../Hooks/useAnalytics';
import { InitialGameSettings, Settings } from '../Types/Settings'; import { InitialGameSettings, Orientation, Settings } from '../Types/Settings';
export const GlobalSettingsProvider = ({ export const GlobalSettingsProvider = ({
children, children,
@@ -22,11 +22,22 @@ export const GlobalSettingsProvider = ({
savedShowPlay ? savedShowPlay === 'true' : false savedShowPlay ? savedShowPlay === 'true' : false
); );
const [initialGameSettings, setInitialGameSettings] = const [initialGameSettings, setInitialSettings] =
useState<InitialGameSettings | null>( useState<InitialGameSettings | null>(
savedGameSettings ? JSON.parse(savedGameSettings) : null savedGameSettings ? JSON.parse(savedGameSettings) : null
); );
const setInitialGameSettings = (initialGameSettings: InitialGameSettings) => {
const defaultSettings: InitialGameSettings = {
numberOfPlayers: 4,
startingLifeTotal: 40,
useCommanderDamage: true,
orientation: Orientation.Landscape,
gameFormat: 'commander',
};
setInitialSettings({ ...defaultSettings, ...initialGameSettings });
};
const [settings, setSettings] = useState<Settings>( const [settings, setSettings] = useState<Settings>(
savedSettings savedSettings
? JSON.parse(savedSettings) ? JSON.parse(savedSettings)