mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-20 17:57:59 +00:00
remove myapp folder
This commit is contained in:
Viktor Rådberg
365
src/Components/Views/StartMenu/LayoutOptions.tsx
Normal file
365
src/Components/Views/StartMenu/LayoutOptions.tsx
Normal file
@@ -0,0 +1,365 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
|
||||
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
|
||||
import OnePlayerLandscape from '../../../Icons/Layouts/OnePlayerLandscape';
|
||||
import OnePlayerPortrait from '../../../Icons/Layouts/OnePlayerPortrait';
|
||||
import TwoPlayersOppositeLandscape from '../../../Icons/Layouts/TwoPlayersOppositeLandscape';
|
||||
import TwoPlayersOppositePortrait from '../../../Icons/Layouts/TwoPlayersOppositePortrait';
|
||||
import TwoPlayersSameSide from '../../../Icons/Layouts/TwoPlayersSameSide';
|
||||
import FivePlayers from '../../../Icons/Layouts/FivePlayers';
|
||||
import FourPlayers from '../../../Icons/Layouts/FourPlayers';
|
||||
import FourPlayersSide from '../../../Icons/Layouts/FourPlayersSide';
|
||||
import ThreePlayers from '../../../Icons/Layouts/ThreePlayers';
|
||||
import ThreePlayersSide from '../../../Icons/Layouts/ThreePlayersSide';
|
||||
import FivePlayersSide from '../../../Icons/Layouts/FivePlayersSide';
|
||||
import SixPlayers from '../../../Icons/Layouts/SixPlayers';
|
||||
import SixPlayersSide from '../../../Icons/Layouts/SixPlayersSide';
|
||||
import { theme } from '../../../Data/theme';
|
||||
|
||||
const LayoutWrapper = styled.div`
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
type LayoutOptionsProps = {
|
||||
numberOfPlayers: number;
|
||||
gridAreas: GridTemplateAreas;
|
||||
onChange: (gridAreas: GridTemplateAreas) => void;
|
||||
};
|
||||
|
||||
const LayoutOptions: React.FC<LayoutOptionsProps> = ({
|
||||
numberOfPlayers,
|
||||
gridAreas,
|
||||
onChange,
|
||||
}) => {
|
||||
const renderLayoutOptions = () => {
|
||||
switch (numberOfPlayers) {
|
||||
case 1:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.OnePlayerLandscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<OnePlayerLandscape
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<OnePlayerLandscape
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.OnePlayerPortrait}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<OnePlayerPortrait
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<OnePlayerPortrait
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.TwoPlayersOppositeLandscape}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<TwoPlayersOppositeLandscape
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<TwoPlayersOppositeLandscape
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.TwoPlayersOppositePortrait}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<TwoPlayersOppositePortrait
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<TwoPlayersOppositePortrait
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.TwoPlayersSameSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<TwoPlayersSameSide
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<TwoPlayersSameSide
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.ThreePlayers}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<ThreePlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<ThreePlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.ThreePlayersSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<ThreePlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<ThreePlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
case 4:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.FourPlayers}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FourPlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FourPlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.FourPlayersSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FourPlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FourPlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
case 5:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.FivePlayers}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FivePlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FivePlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.FivePlayersSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<FivePlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<FivePlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
case 6:
|
||||
return (
|
||||
<>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.SixPlayers}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<SixPlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<SixPlayers
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={GridTemplateAreas.SixPlayersSide}
|
||||
control={
|
||||
<Radio
|
||||
icon={
|
||||
<SixPlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.secondary.main}
|
||||
/>
|
||||
}
|
||||
checkedIcon={
|
||||
<SixPlayersSide
|
||||
size="20vmax"
|
||||
color={theme.palette.primary.main}
|
||||
/>
|
||||
}
|
||||
TouchRippleProps={{ style: { display: 'none' } }}
|
||||
/>
|
||||
}
|
||||
label=""
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<LayoutWrapper>
|
||||
<RadioGroup
|
||||
row
|
||||
onChange={(e, value) => {
|
||||
onChange(value as GridTemplateAreas);
|
||||
}}
|
||||
value={gridAreas}
|
||||
>
|
||||
{renderLayoutOptions()}
|
||||
</RadioGroup>
|
||||
</LayoutWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default LayoutOptions;
|
||||
221
src/Components/Views/StartMenu/StartMenu.tsx
Normal file
221
src/Components/Views/StartMenu/StartMenu.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
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 {
|
||||
InitialSettings,
|
||||
createInitialPlayers,
|
||||
} from '../../../Data/getInitialPlayers';
|
||||
import { Player } from '../../../Types/Player';
|
||||
import LayoutOptions from './LayoutOptions';
|
||||
import { theme } from '../../../Data/theme';
|
||||
|
||||
const H2 = styled.h2`
|
||||
color: ${theme.palette.text.primary};
|
||||
`;
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const MainWrapper = styled.div`
|
||||
padding-top: 58px;
|
||||
padding-bottom: 58px;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
`;
|
||||
|
||||
const playerMarks = [
|
||||
{
|
||||
value: 1,
|
||||
label: '1',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '2',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '3',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '4',
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '5',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '6',
|
||||
},
|
||||
];
|
||||
|
||||
const healthMarks = [
|
||||
{
|
||||
value: 20,
|
||||
label: '20',
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
label: '30',
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
label: '40',
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
label: '50',
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
label: '60',
|
||||
},
|
||||
];
|
||||
|
||||
type StartProps = {
|
||||
setInitialGameSettings: (options: InitialSettings) => void;
|
||||
setPlayers: (updatedPlayer: Player[]) => void;
|
||||
initialGameSettings: InitialSettings | null;
|
||||
};
|
||||
|
||||
const Start = ({
|
||||
initialGameSettings,
|
||||
setPlayers,
|
||||
setInitialGameSettings,
|
||||
}: StartProps) => {
|
||||
const [playerOptions, setPlayerOptions] = useState<InitialSettings>(
|
||||
initialGameSettings || {
|
||||
numberOfPlayers: 4,
|
||||
startingLifeTotal: 40,
|
||||
useCommanderDamage: true,
|
||||
gridAreas: GridTemplateAreas.FourPlayers,
|
||||
}
|
||||
);
|
||||
const doStartGame = () => {
|
||||
if (!initialGameSettings) {
|
||||
return;
|
||||
}
|
||||
setInitialGameSettings(initialGameSettings);
|
||||
setPlayers(createInitialPlayers(initialGameSettings));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setInitialGameSettings(playerOptions);
|
||||
}, [playerOptions, setInitialGameSettings]);
|
||||
|
||||
const valuetext = (value: number) => {
|
||||
return `${value}°C`;
|
||||
};
|
||||
|
||||
const getDefaultLayout = (numberOfPlayers: number) => {
|
||||
switch (numberOfPlayers) {
|
||||
case 1:
|
||||
return GridTemplateAreas.OnePlayerLandscape;
|
||||
case 2:
|
||||
return GridTemplateAreas.TwoPlayersOppositeLandscape;
|
||||
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,
|
||||
});
|
||||
}, [playerOptions.numberOfPlayers]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<MainWrapper>
|
||||
<H2>Game Setup</H2>
|
||||
<FormControl focused={false} style={{ width: '80vw' }}>
|
||||
<FormLabel>Number of Players</FormLabel>
|
||||
<Slider
|
||||
title="Number of Players"
|
||||
max={6}
|
||||
min={1}
|
||||
aria-label="Custom marks"
|
||||
defaultValue={4}
|
||||
getAriaValueText={valuetext}
|
||||
step={null}
|
||||
marks={playerMarks}
|
||||
onChange={(e, value) => {
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
numberOfPlayers: value as number,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<FormLabel>Starting Health</FormLabel>
|
||||
<Slider
|
||||
title="Starting Health"
|
||||
max={60}
|
||||
min={20}
|
||||
aria-label="Custom marks"
|
||||
defaultValue={40}
|
||||
getAriaValueText={valuetext}
|
||||
step={10}
|
||||
marks={healthMarks}
|
||||
onChange={(e, value) =>
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
startingLifeTotal: value as number,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<FormLabel>Commander</FormLabel>
|
||||
<Switch
|
||||
checked={playerOptions.useCommanderDamage}
|
||||
defaultChecked
|
||||
onChange={(e, value) =>
|
||||
setPlayerOptions({
|
||||
...playerOptions,
|
||||
useCommanderDamage: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<FormLabel>Layout</FormLabel>
|
||||
|
||||
<LayoutOptions
|
||||
numberOfPlayers={playerOptions.numberOfPlayers}
|
||||
gridAreas={playerOptions.gridAreas}
|
||||
onChange={(gridAreas) =>
|
||||
setPlayerOptions({ ...playerOptions, gridAreas })
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
style={{ marginTop: '24px' }}
|
||||
size="large"
|
||||
variant="contained"
|
||||
onClick={doStartGame}
|
||||
>
|
||||
Start Game
|
||||
</Button>
|
||||
</FormControl>
|
||||
</MainWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Start;
|
||||
Reference in New Issue
Block a user