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 styled from 'styled-components';
import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
import { theme } from '../../../Data/theme';
import {
OnePlayerPortrait,
TwoPlayersOppositeLandscape,
TwoPlayersOppositePortrait,
ThreePlayers,
ThreePlayersSide,
FivePlayers,
FourPlayers,
FourPlayersSide,
FivePlayers,
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;
@@ -25,13 +26,13 @@ const LayoutWrapper = styled.div`
type LayoutOptionsProps = {
numberOfPlayers: number;
gridAreas: GridTemplateAreas;
onChange: (gridAreas: GridTemplateAreas) => void;
selectedOrientation: Orientation;
onChange: (orientation: Orientation) => void;
};
const LayoutOptions: React.FC<LayoutOptionsProps> = ({
export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
numberOfPlayers,
gridAreas,
selectedOrientation,
onChange,
}) => {
const iconHeight = '30vmin';
@@ -43,7 +44,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return (
<>
<FormControlLabel
value={GridTemplateAreas.OnePlayerLandscape}
value={Orientation.Landscape}
control={
<Radio
icon={
@@ -66,7 +67,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label=""
/>
<FormControlLabel
value={GridTemplateAreas.OnePlayerPortrait}
value={Orientation.Portrait}
control={
<Radio
icon={
@@ -94,7 +95,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return (
<>
<FormControlLabel
value={GridTemplateAreas.TwoPlayersSameSide}
value={Orientation.Landscape}
control={
<Radio
icon={
@@ -117,7 +118,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label=""
/>
<FormControlLabel
value={GridTemplateAreas.TwoPlayersOppositePortrait}
value={Orientation.Portrait}
control={
<Radio
icon={
@@ -140,7 +141,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label=""
/>
<FormControlLabel
value={GridTemplateAreas.TwoPlayersOppositeLandscape}
value={Orientation.OppositeLandscape}
control={
<Radio
icon={
@@ -168,7 +169,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return (
<>
<FormControlLabel
value={GridTemplateAreas.ThreePlayers}
value={Orientation.Landscape}
control={
<Radio
icon={
@@ -191,7 +192,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label=""
/>
<FormControlLabel
value={GridTemplateAreas.ThreePlayersSide}
value={Orientation.Portrait}
control={
<Radio
icon={
@@ -220,7 +221,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return (
<>
<FormControlLabel
value={GridTemplateAreas.FourPlayers}
value={Orientation.Landscape}
control={
<Radio
icon={
@@ -243,7 +244,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
label=""
/>
<FormControlLabel
value={GridTemplateAreas.FourPlayersSide}
value={Orientation.Portrait}
control={
<Radio
icon={
@@ -272,7 +273,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return (
<>
<FormControlLabel
value={GridTemplateAreas.FivePlayers}
value={Orientation.Landscape}
control={
<Radio
icon={
@@ -324,7 +325,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
return (
<>
<FormControlLabel
value={GridTemplateAreas.SixPlayers}
value={Orientation.Landscape}
control={
<Radio
icon={
@@ -382,9 +383,9 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
<RadioGroup
row
onChange={(_e, value) => {
onChange(value as GridTemplateAreas);
onChange(value as Orientation);
}}
value={gridAreas}
value={selectedOrientation}
style={{ justifyContent: 'center' }}
>
{renderLayoutOptions()}
@@ -392,5 +393,3 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
</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 { SupportMe } from '../../Misc/SupportMe';
import { H1, Paragraph } from '../../Misc/TextComponents';
import LayoutOptions2 from './LayoutOptions2';
import { LayoutOptions } from './LayoutOptions';
const MainWrapper = styled.div`
width: 100dvw;
@@ -285,7 +285,7 @@ const Start = () => {
})
}
/> */}
<LayoutOptions2
<LayoutOptions
numberOfPlayers={playerOptions.numberOfPlayers}
selectedOrientation={playerOptions.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,
} from '../Contexts/GlobalSettingsContext';
import { useAnalytics } from '../Hooks/useAnalytics';
import { InitialGameSettings, Settings } from '../Types/Settings';
import { InitialGameSettings, Orientation, Settings } from '../Types/Settings';
export const GlobalSettingsProvider = ({
children,
@@ -22,11 +22,22 @@ export const GlobalSettingsProvider = ({
savedShowPlay ? savedShowPlay === 'true' : false
);
const [initialGameSettings, setInitialGameSettings] =
const [initialGameSettings, setInitialSettings] =
useState<InitialGameSettings | 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>(
savedSettings
? JSON.parse(savedSettings)