fix side counters

src/Components/Buttons/CommanderDamage.tsx

@@ -56,11 +56,11 @@ const CommanderDamageButton = styled.button<{
   }}
 `;
 
-const CommanderDamageTextContainer = styled.p<{
+const CommanderDamageTextContainer = styled.div<{
   rotation: number;
 }>`
   position: relative;
-  top: 25%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-variant-numeric: tabular-nums;
@@ -78,11 +78,7 @@ const CommanderDamageTextContainer = styled.p<{
       props.rotation === Rotation.Side
     ) {
       return css`
-        rotate: 180deg;
-        text-orientation: sideways;
-        writing-mode: vertical-lr;
-        height: 1rem;
-        width: auto;
+        rotate: 270deg;
       `;
     }
   }}

src/Components/Counters/Counters.tsx

@@ -52,27 +52,6 @@ const Counters = ({
     <CountersWrapper>
       <CountersGrid gridTemplateAreas={gridAreas}>
         {players.map((player) => {
-          if (
-            player.settings.rotation === 90 ||
-            player.settings.rotation === 270
-          ) {
-            return (
-              <GridItemContainer
-                key={player.index}
-                gridArea={`player${player.index}`}
-              >
-                <LifeCounter
-                  backgroundColor={player.color}
-                  player={player}
-                  opponents={players.filter(
-                    (opponent) => opponent.index !== player.index
-                  )}
-                  onPlayerChange={onPlayerChange}
-                  resetCurrentGame={resetCurrentGame}
-                />
-              </GridItemContainer>
-            );
-          }
           return (
             <GridItemContainer
               key={player.index}
@@ -91,9 +70,6 @@ const Counters = ({
           );
         })}
       </CountersGrid>
-      {/* <S.SettingsButtonContainer>
-        <SettingsButton onClick={() => {}} rotation={0} />
-      </S.SettingsButtonContainer> */}
     </CountersWrapper>
   );
 };

src/Data/getInitialPlayers.ts

@@ -20,11 +20,11 @@ const presetColors = [
 ];
 
 const getRotation = (index: number, gridAreas: GridTemplateAreas): Rotation => {
-  if (gridAreas === GridTemplateAreas.OnePlayerLandscape && index === 1) {
+  if (gridAreas === GridTemplateAreas.OnePlayerLandscape && index === 0) {
     return Rotation.Normal;
   }
 
-  if (gridAreas === GridTemplateAreas.OnePlayerPortrait && index === 1) {
+  if (gridAreas === GridTemplateAreas.OnePlayerPortrait && index === 0) {
     return Rotation.Side;
   }