wip done

src/Components/LifeCounter/Health.tsx

@@ -151,6 +151,7 @@ const Health = ({
     const textContainer = textContainerRef.current;
     const resizeObserver = new ResizeObserver(() => {
       const calcFontSize = calculateFontSize(textContainer);
+      console.log(calcFontSize);
       setFontSize(calcFontSize);
     });
 
@@ -180,9 +181,9 @@ const Health = ({
 
     const minRatio = Math.min(widthRatio, heightRatio);
 
-    const heightIsLarger = heightRatio > widthRatio;
+    const heightIs40PercentSmaller = heightRatio > widthRatio * 0.6;
 
-    const scaleFactor = heightIsLarger ? 0.8 : 1;
+    const scaleFactor = heightIs40PercentSmaller ? 0.8 : 1;
 
     return minRatio * scaleFactor * 1;
   };

src/Components/LifeCounter/LifeCounter.tsx

@@ -6,7 +6,7 @@ import { LoseGameButton } from '../Buttons/LoseButton';
 import SettingsButton from '../Buttons/SettingsButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
-import PlayerMenu from '../PlayerMenu/PlayerMenu';
+import PlayerMenu from '../Player/PlayerMenu';
 import Health from './Health';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';

src/Components/LifeTrinket.tsx

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
-import Play from './Views/Play';
-import StartMenu from './Views/StartMenu/StartMenu';
 import { useGlobalSettings } from '../Hooks/useGlobalSettings';
-import Play2 from '../Components2/Views/Play2';
+import StartMenu from './Views/StartMenu/StartMenu';
+import { Play } from './Views/Play';
 
 const StartWrapper = styled.div`
   max-width: fit-content;
@@ -36,8 +35,7 @@ export const LifeTrinket = () => {
     <>
       {showPlay && initialGameSettings ? (
         <PlayWrapper>
-          {/* <Play gridAreas={initialGameSettings?.gridAreas} /> */}
-          <Play2 />
+          <Play />
           <EmergencyResetButton onClick={goToStart}>
             <p>If you can see this, something is wrong.</p>
             <p>Press screen to go to start.</p>

src/Components/Player/Player.tsx

@@ -0,0 +1,47 @@
+import LifeCounter from '../LifeCounter/LifeCounter';
+import { Player as PlayerType } from '../../Types/Player';
+
+const getGridArea = (player: PlayerType) => {
+  switch (player.index) {
+    case 0:
+      return 'grid-in-player0';
+    case 1:
+      return 'grid-in-player1';
+    case 2:
+      return 'grid-in-player2';
+    case 3:
+      return 'grid-in-player3';
+    case 4:
+      return 'grid-in-player4';
+    case 5:
+      return 'grid-in-player5';
+    default:
+      throw new Error('Invalid player index');
+  }
+};
+
+export const Player = (players: PlayerType[], gridClasses: string) => {
+  return (
+    <div className="w-full h-full bg-black">
+      <div className={`grid w-full h-full gap-1 box-border ${gridClasses} `}>
+        {players.map((player) => {
+          const gridArea = getGridArea(player);
+
+          return (
+            <div
+              key={player.index}
+              className={`flex justify-center items-center align-middle ${gridArea}`}
+            >
+              <LifeCounter
+                player={player}
+                opponents={players.filter(
+                  (opponent) => opponent.index !== player.index
+                )}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

src/Components/Views/Play.tsx

@@ -1,5 +1,8 @@
 import styled from 'styled-components';
-import Counters from '../Counters/Counters';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../Hooks/usePlayers';
+import { Orientation } from '../../Types/Settings';
+import { Player } from '../Player/Player';
 
 const MainWrapper = styled.div`
   width: 100vmax;
@@ -9,16 +12,62 @@ const MainWrapper = styled.div`
   overflow: hidden;
 `;
 
-type PlayProps = {
-  gridAreas: string;
-};
+export const Play = () => {
+  const { players } = usePlayers();
+  const { initialGameSettings } = useGlobalSettings();
 
-const Play = ({ gridAreas }: PlayProps) => {
-  return (
-    <MainWrapper>
-      <Counters gridAreas={gridAreas} />
-    </MainWrapper>
-  );
-};
+  let Layout: JSX.Element;
+  switch (players.length) {
+    case 1:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-onePlayerPortrait');
+      }
+      Layout = Player(players, 'grid-areas-onePlayerLandscape');
+      break;
+    case 2:
+      switch (initialGameSettings?.orientation) {
+        case Orientation.Portrait:
+          Layout = Player(players, 'grid-areas-twoPlayersOppositePortrait');
+          break;
+        default:
+        case Orientation.Landscape:
+          Layout = Player(players, 'grid-areas-twoPlayersSameSideLandscape');
+          break;
+        case Orientation.OppositeLandscape:
+          Layout = Player(players, 'grid-areas-twoPlayersOppositeLandscape');
+          break;
+      }
+      break;
+    case 3:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-threePlayersSide');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-threePlayers');
+      break;
+    default:
+    case 4:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-fourPlayerPortrait');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-fourPlayer');
+      break;
+    case 5:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-fivePlayersSide');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-fivePlayers');
+      break;
+    case 6:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-sixPlayersSide');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-sixPlayers');
+      break;
+  }
 
-export default Play;
+  return <MainWrapper>{Layout}</MainWrapper>;
+};

src/Components/Views/StartMenu/LayoutOptions2.tsx

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

src/Components/Views/StartMenu/StartMenu.tsx

@@ -2,20 +2,19 @@ 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 { createInitialPlayers } from '../../../Data/getInitialPlayers';
 import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
+import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../../Hooks/usePlayers';
 import { Cog, Info } from '../../../Icons/generated';
+import { InitialGameSettings, Orientation } from '../../../Types/Settings';
 import { InfoModal } from '../../Misc/InfoModal';
+import { SettingsModal } from '../../Misc/SettingsModal';
+import { Spacer } from '../../Misc/Spacer';
 import { SupportMe } from '../../Misc/SupportMe';
 import { H1, Paragraph } from '../../Misc/TextComponents';
-import LayoutOptions from './LayoutOptions';
-import { Spacer } from '../../Misc/Spacer';
-import { usePlayers } from '../../../Hooks/usePlayers';
-import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
-import { InitialGameSettings } from '../../../Types/Settings';
-import { SettingsModal } from '../../Misc/SettingsModal';
+import LayoutOptions2 from './LayoutOptions2';
 
 const MainWrapper = styled.div`
   width: 100dvw;
@@ -118,8 +117,7 @@ const Start = () => {
       numberOfPlayers: 4,
       startingLifeTotal: 40,
       useCommanderDamage: true,
-      gridAreas: GridTemplateAreas.FourPlayers,
-      orientation: 'portrait',
+      orientation: Orientation.Portrait,
       gameFormat: 'commander',
     }
   );
@@ -158,32 +156,9 @@ const Start = () => {
     return `${value}`;
   };
 
-  const getDefaultLayout = (numberOfPlayers: number) => {
-    switch (numberOfPlayers) {
-      case 1:
-        return GridTemplateAreas.OnePlayerLandscape;
-      case 2:
-        return GridTemplateAreas.TwoPlayersSameSide;
-      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,
-      orientation: 'landscape',
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playerOptions.numberOfPlayers]);
@@ -231,7 +206,7 @@ const Start = () => {
             setPlayerOptions({
               ...playerOptions,
               numberOfPlayers: value as number,
-              orientation: 'landscape',
+              orientation: Orientation.Landscape,
             });
           }}
         />
@@ -250,7 +225,7 @@ const Start = () => {
             setPlayerOptions({
               ...playerOptions,
               startingLifeTotal: value as number,
-              orientation: 'landscape',
+              orientation: Orientation.Landscape,
             })
           }
         />
@@ -272,7 +247,7 @@ const Start = () => {
                     useCommanderDamage: value,
                     numberOfPlayers: 4,
                     startingLifeTotal: 40,
-                    orientation: 'landscape',
+                    orientation: Orientation.Landscape,
                   });
                   return;
                 }
@@ -281,7 +256,7 @@ const Start = () => {
                   useCommanderDamage: value,
                   numberOfPlayers: 2,
                   startingLifeTotal: 20,
-                  orientation: 'landscape',
+                  orientation: Orientation.Landscape,
                 });
               }}
             />
@@ -298,7 +273,7 @@ const Start = () => {
         </ToggleButtonsWrapper>
 
         <FormLabel>Layout</FormLabel>
-        <LayoutOptions
+        {/* <LayoutOptions
           numberOfPlayers={playerOptions.numberOfPlayers}
           gridAreas={playerOptions.gridAreas}
           onChange={(gridAreas) =>
@@ -306,9 +281,20 @@ const Start = () => {
               ...playerOptions,
               gridAreas,
               //TODO fix the layout selection
-              orientation: 'portrait',
+              orientation: Orientation.Portrait,
             })
           }
+        /> */}
+        <LayoutOptions2
+          numberOfPlayers={playerOptions.numberOfPlayers}
+          selectedOrientation={playerOptions.orientation}
+          onChange={(orientation) => {
+            console.log('orientation', { orientation });
+            setPlayerOptions({
+              ...playerOptions,
+              orientation,
+            });
+          }}
         />
       </FormControl>