diff --git a/my-app/src/Components/Views/StartMenu.tsx b/my-app/src/Components/Views/StartMenu.tsx
index 0547b07..aecc120 100644
--- a/my-app/src/Components/Views/StartMenu.tsx
+++ b/my-app/src/Components/Views/StartMenu.tsx
@@ -15,16 +15,40 @@ import {
RadioGroup,
Switch,
} 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';
const MainWrapper = styled.div`
- width: 100vmax;
- height: 100vmin;
overflow: hidden;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
- margin: auto;
+ rotate: -90deg;
+ width: 100%;
+ height: 100%;
+ padding: 5rem;
+ min-width: max-content;
+`;
+
+const LayoutWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin: 1rem;
+ min-width: max-content;
`;
const playerMarks = [
@@ -162,106 +186,211 @@ const Start = ({
})
}
/>
+
Layout
-
- setPlayerOptions({
- ...playerOptions,
- gridAreas: value as GridTemplateAreas,
- })
- }
- >
- {playerOptions.numberOfPlayers === 1 && (
- <>
- }
- label="Horizontal"
- />
- }
- label="Vertical"
- />
- >
- )}
- {playerOptions.numberOfPlayers === 2 && (
- <>
- }
- label="Opposite Horizontal"
- />
- }
- label="Opposite Vertical"
- />
- }
- label="Same Side"
- />
- >
- )}
- {playerOptions.numberOfPlayers === 3 && (
- <>
- }
- label="Three Players"
- />
- }
- label="Three Players Side"
- />
- >
- )}
- {playerOptions.numberOfPlayers === 4 && (
- <>
- }
- label="Four Players"
- />
- }
- label="Four Players Side"
- />
- >
- )}
- {playerOptions.numberOfPlayers === 5 && (
- <>
- }
- label="Five Players"
- />
- }
- label="Five Players Side"
- />
- >
- )}
- {playerOptions.numberOfPlayers === 6 && (
- <>
- }
- label="Six Players"
- />
- }
- label="Six Players Side"
- />
- >
- )}
-
+
+
+ setPlayerOptions({
+ ...playerOptions,
+ gridAreas: value as GridTemplateAreas,
+ })
+ }
+ >
+ {playerOptions.numberOfPlayers === 1 && (
+ <>
+ }
+ checkedIcon={
+
+ }
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+ }
+ checkedIcon={
+
+ }
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+ >
+ )}
+ {playerOptions.numberOfPlayers === 2 && (
+ <>
+
+ }
+ checkedIcon={
+
+ }
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+
+ }
+ checkedIcon={
+
+ }
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+ }
+ checkedIcon={
+
+ }
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+ >
+ )}
+ {playerOptions.numberOfPlayers === 3 && (
+ <>
+ }
+ checkedIcon={}
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+ }
+ checkedIcon={
+
+ }
+ TouchRippleProps={{ style: { display: 'none' } }}
+ />
+ }
+ label=""
+ />
+ >
+ )}
+ {playerOptions.numberOfPlayers === 4 && (
+ <>
+ }
+ checkedIcon={}
+ />
+ }
+ label=""
+ />
+ }
+ checkedIcon={
+
+ }
+ />
+ }
+ label=""
+ />
+ >
+ )}
+ {playerOptions.numberOfPlayers === 5 && (
+ <>
+ }
+ checkedIcon={}
+ />
+ }
+ label=""
+ />
+ }
+ checkedIcon={
+
+ }
+ />
+ }
+ label=""
+ />
+ >
+ )}
+ {playerOptions.numberOfPlayers === 6 && (
+ <>
+ }
+ checkedIcon={}
+ />
+ }
+ label=""
+ />
+ }
+ checkedIcon={}
+ />
+ }
+ label=""
+ />
+ >
+ )}
+
+