fix rotations

src/Components/LifeCounter/LifeCounter.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import styled, { css, keyframes } from 'styled-components';
+import { theme } from '../../Data/theme';
 import { Player, Rotation } from '../../Types/Player';
 import LifeCounterButton from '../Buttons/LifeCounterButton';
 import SettingsButton from '../Buttons/SettingsButton';
@@ -7,7 +8,6 @@ import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import { OutlinedText } from '../Misc/OutlinedText';
 import PlayerMenu from '../PlayerMenu/PlayerMenu';
-
 const LifeCounterContentWrapper = styled.div<{
   backgroundColor: string;
 }>`
@@ -88,8 +88,7 @@ const StartingPlayer = styled.div<{
   height: 100%;
   justify-content: center;
   align-items: center;
-  font-size: 8vmin;
+  background: ${theme.palette.primary.main};
-  background: turquoise;
   pointer-events: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
@@ -97,13 +96,28 @@ const StartingPlayer = styled.div<{
   -moz-user-select: -moz-none;
   -webkit-user-select: none;
   -ms-user-select: none;
+
   ${(props) => {
     if (
       props.rotation === Rotation.SideFlipped ||
       props.rotation === Rotation.Side
     ) {
       return css`
-        flex-direction: column-reverse;
+        rotate: ${props.rotation - 90}deg;
+      `;
+    }
+  }}
+`;
+
+const StartingPlayerText = styled.div<{ rotation: Rotation }>`
+  font-size: 8vmin;
+  ${(props) => {
+    if (
+      props.rotation === Rotation.SideFlipped ||
+      props.rotation === Rotation.Side
+    ) {
+      return css`
+        rotate: ${props.rotation - 180}deg;
       `;
     }
   }}
@@ -236,10 +250,11 @@ const LifeCounter = ({
       <LifeCounterWrapper rotation={player.settings.rotation}>
         {player.isStartingPlayer && !showStartingPlayer && (
           <StartingPlayer rotation={player.settings.rotation}>
-            You start!
+            <StartingPlayerText rotation={player.settings.rotation}>
+              You start!
+            </StartingPlayerText>
           </StartingPlayer>
         )}
-
         <CommanderDamageBar
           opponents={opponents}
           player={player}

src/Components/PlayerMenu/Settings.tsx

@@ -71,7 +71,7 @@ const ButtonsSections = styled.div<{ rotation: Rotation }>`
       props.rotation === Rotation.Side
     ) {
       return css`
-        rotate: ${props.rotation}deg;
+        rotate: ${props.rotation - 180}deg;
         flex-direction: column-reverse;
       `;
     }
@@ -293,13 +293,9 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
       </TogglesSection>
 
       <ButtonsSections rotation={player.settings.rotation}>
-        <Button rotation={player.settings.rotation} onClick={handleNewGame}>
+        <Button onClick={handleNewGame}>Back to Start</Button>
-          Back to Start
+        <Button onClick={toggleFullscreen}>Fullscreen</Button>
-        </Button>
+        <Button onClick={handleWakeLock}>
-        <Button rotation={player.settings.rotation} onClick={toggleFullscreen}>
-          Fullscreen
-        </Button>
-        <Button rotation={player.settings.rotation} onClick={handleWakeLock}>
           {released === false ? 'Release' : 'Request'} nosleep
         </Button>
       </ButtonsSections>