add layout options

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,7 +186,9 @@ const Start = ({
             })
           }
         />
+
         <FormLabel>Layout</FormLabel>
+        <LayoutWrapper>
           <RadioGroup
             row
             onChange={(e, value) =>
@@ -175,33 +201,87 @@ const Start = ({
             {playerOptions.numberOfPlayers === 1 && (
               <>
                 <FormControlLabel
-                value={GridTemplateAreas.OnePlayerHorizontal}
+                  style={{ margin: '0', padding: '0', width: '10%' }}
-                control={<Radio />}
+                  value={GridTemplateAreas.OnePlayerLandscape}
-                label="Horizontal"
+                  control={
+                    <Radio
+                      icon={<OnePlayerLandscape size="248px" color="black" />}
+                      checkedIcon={
+                        <OnePlayerLandscape size="248px" color="blue" />
+                      }
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
-                value={GridTemplateAreas.OnePlayerVertical}
+                  value={GridTemplateAreas.OnePlayerPortrait}
-                control={<Radio />}
+                  control={
-                label="Vertical"
+                    <Radio
+                      icon={<OnePlayerPortrait size="248px" color="black" />}
+                      checkedIcon={
+                        <OnePlayerPortrait size="248px" color="blue" />
+                      }
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
               </>
             )}
             {playerOptions.numberOfPlayers === 2 && (
               <>
                 <FormControlLabel
-                value={GridTemplateAreas.TwoPlayersOppositeHorizontal}
+                  value={GridTemplateAreas.TwoPlayersOppositeLandscape}
-                control={<Radio />}
+                  control={
-                label="Opposite Horizontal"
+                    <Radio
+                      icon={
+                        <TwoPlayersOppositeLandscape
+                          size="248px"
+                          color="black"
+                        />
+                      }
+                      checkedIcon={
+                        <TwoPlayersOppositeLandscape
+                          size="248px"
+                          color="blue"
+                        />
+                      }
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
-                value={GridTemplateAreas.TwoPlayersOppositeVertical}
+                  value={GridTemplateAreas.TwoPlayersOppositePortrait}
-                control={<Radio />}
+                  control={
-                label="Opposite Vertical"
+                    <Radio
+                      icon={
+                        <TwoPlayersOppositePortrait
+                          size="248px"
+                          color="black"
+                        />
+                      }
+                      checkedIcon={
+                        <TwoPlayersOppositePortrait size="248px" color="blue" />
+                      }
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
                   value={GridTemplateAreas.TwoPlayersSameSide}
-                control={<Radio />}
+                  control={
-                label="Same Side"
+                    <Radio
+                      icon={<TwoPlayersSameSide size="248px" color="black" />}
+                      checkedIcon={
+                        <TwoPlayersSameSide size="248px" color="blue" />
+                      }
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
               </>
             )}
@@ -209,13 +289,27 @@ const Start = ({
               <>
                 <FormControlLabel
                   value={GridTemplateAreas.ThreePlayers}
-                control={<Radio />}
+                  control={
-                label="Three Players"
+                    <Radio
+                      icon={<ThreePlayers size="248px" color="black" />}
+                      checkedIcon={<ThreePlayers size="248px" color="blue" />}
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
                   value={GridTemplateAreas.ThreePlayersSide}
-                control={<Radio />}
+                  control={
-                label="Three Players Side"
+                    <Radio
+                      icon={<ThreePlayersSide size="248px" color="black" />}
+                      checkedIcon={
+                        <ThreePlayersSide size="248px" color="blue" />
+                      }
+                      TouchRippleProps={{ style: { display: 'none' } }}
+                    />
+                  }
+                  label=""
                 />
               </>
             )}
@@ -223,13 +317,25 @@ const Start = ({
               <>
                 <FormControlLabel
                   value={GridTemplateAreas.FourPlayers}
-                control={<Radio />}
+                  control={
-                label="Four Players"
+                    <Radio
+                      icon={<FourPlayers size="248px" color="black" />}
+                      checkedIcon={<FourPlayers size="248px" color="blue" />}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
                   value={GridTemplateAreas.FourPlayersSide}
-                control={<Radio />}
+                  control={
-                label="Four Players Side"
+                    <Radio
+                      icon={<FourPlayersSide size="248px" color="black" />}
+                      checkedIcon={
+                        <FourPlayersSide size="248px" color="blue" />
+                      }
+                    />
+                  }
+                  label=""
                 />
               </>
             )}
@@ -237,13 +343,25 @@ const Start = ({
               <>
                 <FormControlLabel
                   value={GridTemplateAreas.FivePlayers}
-                control={<Radio />}
+                  control={
-                label="Five Players"
+                    <Radio
+                      icon={<FivePlayers size="248px" color="black" />}
+                      checkedIcon={<FivePlayers size="248px" color="blue" />}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
                   value={GridTemplateAreas.FivePlayersSide}
-                control={<Radio />}
+                  control={
-                label="Five Players Side"
+                    <Radio
+                      icon={<FivePlayersSide size="248px" color="black" />}
+                      checkedIcon={
+                        <FivePlayersSide size="248px" color="blue" />
+                      }
+                    />
+                  }
+                  label=""
                 />
               </>
             )}
@@ -251,17 +369,28 @@ const Start = ({
               <>
                 <FormControlLabel
                   value={GridTemplateAreas.SixPlayers}
-                control={<Radio />}
+                  control={
-                label="Six Players"
+                    <Radio
+                      icon={<SixPlayers size="248px" color="black" />}
+                      checkedIcon={<FivePlayers size="248px" color="blue" />}
+                    />
+                  }
+                  label=""
                 />
                 <FormControlLabel
                   value={GridTemplateAreas.SixPlayersSide}
-                control={<Radio />}
+                  control={
-                label="Six Players Side"
+                    <Radio
+                      icon={<SixPlayersSide size="248px" color="black" />}
+                      checkedIcon={<SixPlayersSide size="248px" color="blue" />}
+                    />
+                  }
+                  label=""
                 />
               </>
             )}
           </RadioGroup>
+        </LayoutWrapper>
         <hr />
         <hr />
         <hr />