more styling

src/Components/Counters/ExtraCountersBar.tsx

@@ -74,12 +74,14 @@ const ExtraCountersBar = ({
     onPlayerChange(updatedPlayer);
   };
 
+  const iconSize = '8vmin';
+
   return (
     <ExtraCountersGrid rotation={player.settings.rotation}>
       {player.settings.useCommanderDamage && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<CommanderTaxIcon size="8vmin" />}
+          Icon={<CommanderTaxIcon size={iconSize} />}
           type={CounterType.CommanderTax}
           counterTotal={
             player.extraCounters?.find(
@@ -94,7 +96,7 @@ const ExtraCountersBar = ({
       ) && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<PartnerTaxIcon size="8vmin" />}
+          Icon={<PartnerTaxIcon size={iconSize} />}
           type={CounterType.PartnerTax}
           counterTotal={
             player.extraCounters?.find(
@@ -107,7 +109,7 @@ const ExtraCountersBar = ({
       {player.settings.usePoison && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<PoisonIcon size="8vmin" />}
+          Icon={<PoisonIcon size={iconSize} />}
           type={CounterType.Poison}
           counterTotal={
             player.extraCounters?.find((counter) => counter.type === 'poison')
@@ -119,7 +121,7 @@ const ExtraCountersBar = ({
       {player.settings.useEnergy && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<EnergyIcon size="8vmin" />}
+          Icon={<EnergyIcon size={iconSize} />}
           type={CounterType.Energy}
           counterTotal={
             player.extraCounters?.find((counter) => counter.type === 'energy')
@@ -131,7 +133,7 @@ const ExtraCountersBar = ({
       {player.settings.useExperience && (
         <ExtraCounter
           rotation={player.settings.rotation}
-          Icon={<ExperienceIcon size="8vmin" />}
+          Icon={<ExperienceIcon size={iconSize} />}
           type={CounterType.Experience}
           counterTotal={
             player.extraCounters?.find(

src/Components/LifeCounter/LifeCounter.tsx

@@ -8,7 +8,7 @@ import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import PlayerMenu from '../PlayerMenu/PlayerMenu';
 import { OutlinedText } from '../Text/OutlinedText';
 
-export const LifeCounterWrapper = styled.div<{
+const LifeCounterContentWrapper = styled.div<{
   backgroundColor: string;
 }>`
   position: relative;
@@ -25,7 +25,7 @@ export const LifeCounterWrapper = styled.div<{
   }
 `;
 
-export const LifeCounterContentContainer = styled.div<{
+const LifeCounterWrapper = styled.div<{
   rotation: Rotation;
 }>`
   position: relative;
@@ -55,7 +55,7 @@ export const LifeCounterContentContainer = styled.div<{
   }}
 `;
 
-export const LifeCountainer = styled.div<{
+const LifeCountainer = styled.div<{
   rotation: Rotation;
 }>`
   display: flex;
@@ -78,15 +78,15 @@ export const LifeCountainer = styled.div<{
   }}
 `;
 
-export const LifeCounterTextContainer = styled.p<{
+const LifeCounterTextContainer = styled.p<{
   rotation: Rotation;
 }>`
-  position: absolute;
-  top: 50%;
+  /* top: 50%;
   left: 50%;
   translate: -50% -50%;
   margin: 0;
-  padding: 0;
+  padding: 0; */
+
   pointer-events: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
@@ -168,9 +168,13 @@ const LifeCounter = ({
     return () => clearTimeout(timer);
   }, [recentDifference]);
 
+  const size = 20;
+  const fontSize = `${size}vmax`;
+  const strokeWidth = `${size / 20}vmax`;
+
   return (
-    <LifeCounterWrapper backgroundColor={backgroundColor}>
-      <LifeCounterContentContainer rotation={player.settings.rotation}>
+    <LifeCounterContentWrapper backgroundColor={backgroundColor}>
+      <LifeCounterWrapper rotation={player.settings.rotation}>
         <CommanderDamageBar
           opponents={opponents}
           player={player}
@@ -192,7 +196,7 @@ const LifeCounter = ({
             increment={-1}
           />
           <LifeCounterTextContainer rotation={player.settings.rotation}>
-            <OutlinedText fontSize="30vmin" strokeWidth="1.5vmin">
+            <OutlinedText fontSize={fontSize} strokeWidth={strokeWidth}>
               {player.lifeTotal}
             </OutlinedText>
             {recentDifference !== 0 && (
@@ -211,7 +215,7 @@ const LifeCounter = ({
           />
         </LifeCountainer>
         <ExtraCountersBar player={player} onPlayerChange={onPlayerChange} />
-      </LifeCounterContentContainer>
+      </LifeCounterWrapper>
       {showPlayerMenu && (
         <PlayerMenu
           player={player}
@@ -221,7 +225,7 @@ const LifeCounter = ({
           resetCurrentGame={resetCurrentGame}
         />
       )}
-    </LifeCounterWrapper>
+    </LifeCounterContentWrapper>
   );
 };
 

src/Components/Text/OutlinedText.tsx

@@ -1,14 +1,5 @@
 import styled from 'styled-components';
-// import { theme } from '../../Data/theme';
-
-const theme = {
-  palette: {
-    common: {
-      white: '#ffffff',
-      black: '#000000',
-    },
-  },
-};
+import { theme } from '../../Data/theme';
 
 const CenteredText = styled.div<{
   strokeWidth?: string;

src/Data/GridTemplateAreas.ts

@@ -5,7 +5,7 @@ export enum GridTemplateAreas {
   TwoPlayersOppositePortrait = '"player0 player1" "player0 player1"',
   TwoPlayersSameSide = '"player0 player1"',
   ThreePlayers = '"player0 player0" "player1 player2"',
-  ThreePlayersSide = '"player0 player0 player0  player2" "player1 player1 player1 player2"',
+  ThreePlayersSide = '"player0 player0 player2" "player1 player1 player2"',
   FourPlayers = '"player0 player1" "player2 player3"',
   FourPlayersSide = '"player0 player1 player1 player1 player3" "player0 player2 player2 player2 player3"',
   FivePlayers = '"player0 player0 player0 player1 player1 player1" "player2 player2 player3 player3 player4 player4"',