fix errors and warnings

src/Components/Buttons/CommanderDamage.tsx

@@ -6,7 +6,7 @@ import { OutlinedText } from '../Misc/OutlinedText';
 import { decrementTimeoutMs } from '../../Data/constants';
 
 const CommanderDamageContainer = styled.div<{
-  rotation: number;
+  $rotation: number;
 }>`
   display: flex;
   flex-direction: row;
@@ -15,8 +15,8 @@ const CommanderDamageContainer = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: column;
@@ -26,8 +26,8 @@ const CommanderDamageContainer = styled.div<{
 `;
 
 const CommanderDamageButton = styled.button<{
-  backgroundColor?: string;
-  rotation: number;
+  $backgroundColor?: string;
+  $rotation: number;
 }>`
   display: flex;
   flex-grow: 1;
@@ -36,7 +36,7 @@ const CommanderDamageButton = styled.button<{
   width: 50%;
   outline: none;
   cursor: pointer;
-  background-color: ${(props) => props.backgroundColor || 'antiquewhite'};
+  background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
   margin: 0;
   user-select: none;
   -webkit-touch-callout: none;
@@ -47,8 +47,8 @@ const CommanderDamageButton = styled.button<{
   padding: 0;
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         width: 6vmax;
@@ -59,7 +59,7 @@ const CommanderDamageButton = styled.button<{
 `;
 
 const CommanderDamageTextContainer = styled.div<{
-  rotation: number;
+  $rotation: number;
 }>`
   position: relative;
   top: 50%;
@@ -76,8 +76,8 @@ const CommanderDamageTextContainer = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         rotate: 270deg;
@@ -87,15 +87,15 @@ const CommanderDamageTextContainer = styled.div<{
 `;
 
 const PartnerDamageSeperator = styled.div<{
-  rotation: number;
+  $rotation: number;
 }>`
   width: 1px;
   background-color: rgba(0, 0, 0, 1);
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         width: auto;
@@ -200,11 +200,11 @@ export const CommanderDamage = ({
   return (
     <CommanderDamageContainer
       key={opponentIndex}
-      rotation={player.settings.rotation}
+      $rotation={player.settings.rotation}
     >
       <CommanderDamageButton
         key={opponentIndex}
-        rotation={player.settings.rotation}
+        $rotation={player.settings.rotation}
         onPointerDown={() =>
           handleDownInput({ opponentIndex, isPartner: false })
         }
@@ -213,9 +213,9 @@ export const CommanderDamage = ({
         onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
           e.preventDefault();
         }}
-        backgroundColor={opponent.color}
+        $backgroundColor={opponent.color}
       >
-        <CommanderDamageTextContainer rotation={player.settings.rotation}>
+        <CommanderDamageTextContainer $rotation={player.settings.rotation}>
           <OutlinedText
             fontSize={fontSize}
             fontWeight={fontWeight}
@@ -230,10 +230,10 @@ export const CommanderDamage = ({
 
       {opponent.settings.usePartner && (
         <>
-          <PartnerDamageSeperator rotation={player.settings.rotation} />
+          <PartnerDamageSeperator $rotation={player.settings.rotation} />
           <CommanderDamageButton
             key={opponentIndex}
-            rotation={player.settings.rotation}
+            $rotation={player.settings.rotation}
             onPointerDown={() =>
               handleDownInput({ opponentIndex, isPartner: true })
             }
@@ -246,9 +246,9 @@ export const CommanderDamage = ({
             ) => {
               e.preventDefault();
             }}
-            backgroundColor={opponent.color}
+            $backgroundColor={opponent.color}
           >
-            <CommanderDamageTextContainer rotation={player.settings.rotation}>
+            <CommanderDamageTextContainer $rotation={player.settings.rotation}>
               <OutlinedText
                 fontSize={fontSize}
                 fontWeight={fontWeight}

src/Components/Buttons/ExtraCounter.tsx

@@ -30,14 +30,14 @@ export const StyledExtraCounterButton = styled.button`
 `;
 
 const IconContainer = styled.div<{
-  rotation: number;
+  $rotation: number;
 }>`
   width: auto;
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         rotate: -90deg;
@@ -121,7 +121,7 @@ const ExtraCounter = ({
           e.preventDefault();
         }}
       >
-        <IconContainer rotation={rotation}>
+        <IconContainer $rotation={rotation}>
           {Icon}
           <TextContainer>
             <OutlinedText

src/Components/Buttons/LifeCounterButton.tsx

@@ -26,17 +26,17 @@ export const StyledLifeCounterButton = styled.button`
 `;
 
 const TextContainer = styled.div<{
-  align?: string;
-  rotation: number;
+  $align?: string;
+  $rotation: number;
 }>`
   position: relative;
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
-      if (props.align === 'right') {
+      if (props.$align === 'right') {
         return css`
           rotate: -90deg;
           bottom: 25%;
@@ -49,7 +49,7 @@ const TextContainer = styled.div<{
       `;
     }
 
-    if (props.align === 'right') {
+    if (props.$align === 'right') {
       return css`
         left: 25%;
       `;
@@ -123,8 +123,8 @@ const LifeCounterButton = ({
       style={{ fontSize }}
     >
       <TextContainer
-        rotation={rotation}
-        align={operation === 'add' ? 'right' : 'left'}
+        $rotation={rotation}
+        $align={operation === 'add' ? 'right' : 'left'}
       >
         {operation === 'add' ? '\u002B' : '\u2212'}
       </TextContainer>

src/Components/Buttons/LoseButton.tsx

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { Skull } from '../../Icons/generated';
 import { Rotation } from '../../Types/Player';
 
-export const LoseButton = styled.button<{ rotation: Rotation }>`
+export const LoseButton = styled.button<{ $rotation: Rotation }>`
   position: absolute;
   flex-grow: 1;
   border: none;
@@ -21,19 +21,19 @@ export const LoseButton = styled.button<{ rotation: Rotation }>`
   z-index: 1;
 
   ${(props) => {
-    if (props.rotation === Rotation.SideFlipped) {
+    if (props.$rotation === Rotation.SideFlipped) {
       return css`
         right: auto;
         top: 15%;
         left: 27%;
-        rotate: ${props.rotation}deg;
+        rotate: ${props.$rotation}deg;
       `;
-    } else if (props.rotation === Rotation.Side) {
+    } else if (props.$rotation === Rotation.Side) {
       return css`
         right: auto;
         top: 15%;
         left: 27%;
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
       `;
     }
   }}
@@ -46,7 +46,7 @@ type LoseButtonProps = {
 
 export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
   return (
-    <LoseButton rotation={rotation} onClick={onClick}>
+    <LoseButton $rotation={rotation} onClick={onClick}>
       <Skull size="5vmin" color="black" opacity={0.5} />
     </LoseButton>
   );

src/Components/Buttons/SettingsButton.tsx

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { Rotation } from '../../Types/Player';
 import { Cog } from '../../Icons/generated';
 
-export const StyledSettingsButton = styled.button<{ rotation: number }>`
+export const StyledSettingsButton = styled.button<{ $rotation: Rotation }>`
   position: absolute;
   flex-grow: 1;
   border: none;
@@ -21,8 +21,8 @@ export const StyledSettingsButton = styled.button<{ rotation: number }>`
   z-index: 1;
   ${(props) => {
     if (
-      props.rotation === Rotation.Side ||
-      props.rotation === Rotation.SideFlipped
+      props.$rotation === Rotation.Side ||
+      props.$rotation === Rotation.SideFlipped
     ) {
       return css`
         right: auto;
@@ -35,12 +35,12 @@ export const StyledSettingsButton = styled.button<{ rotation: number }>`
 
 type SettingsButtonProps = {
   onClick: () => void;
-  rotation: number;
+  rotation: Rotation;
 };
 
 const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
   return (
-    <StyledSettingsButton onClick={onClick} rotation={rotation}>
+    <StyledSettingsButton onClick={onClick} $rotation={rotation}>
       <Cog size="5vmin" color="black" opacity="0.3" />
     </StyledSettingsButton>
   );

src/Components/Counters/CommanderDamageBar.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { CommanderDamage } from '../Buttons/CommanderDamage';
 
-const CommanderDamageGrid = styled.div<{ rotation: number }>`
+const CommanderDamageGrid = styled.div<{ $rotation: number }>`
   display: flex;
   flex-direction: row;
   flex-grow: 1;
@@ -11,8 +11,8 @@ const CommanderDamageGrid = styled.div<{ rotation: number }>`
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: column;
@@ -37,7 +37,10 @@ const CommanderDamageBar = ({
   setLifeTotal,
 }: CommanderDamageBarProps) => {
   return (
-    <CommanderDamageGrid rotation={player.settings.rotation} key={player.key}>
+    <CommanderDamageGrid
+      $rotation={player.settings.rotation}
+      key={player.index}
+    >
       {opponents.map((opponent) => {
         if (!opponent.settings.useCommanderDamage) {
           return null;
@@ -48,7 +51,7 @@ const CommanderDamageBar = ({
             opponent={opponent}
             setLifeTotal={setLifeTotal}
             onPlayerChange={onPlayerChange}
-            key={opponent.key}
+            key={opponent.index}
           />
         );
       })}

src/Components/Counters/Counters.tsx

@@ -9,23 +9,23 @@ export const CountersWrapper = styled.div`
   background-color: black;
 `;
 
-export const CountersGrid = styled.div<{ gridTemplateAreas: string }>`
+export const CountersGrid = styled.div<{ $gridTemplateAreas: string }>`
   display: grid;
   gap: 4px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
-  grid-template-areas: ${({ gridTemplateAreas }) => gridTemplateAreas};
+  grid-template-areas: ${({ $gridTemplateAreas }) => $gridTemplateAreas};
 `;
 
 export const GridItemContainer = styled.div<{
-  gridArea: string;
+  $gridArea: string;
 }>`
   display: flex;
   justify-content: center;
   align-items: center;
-  grid-area: ${(props) => props.gridArea};
+  grid-area: ${(props) => props.$gridArea};
 `;
 
 export const SettingsButtonContainer = styled.div`
@@ -53,12 +53,12 @@ const Counters = ({
 }: CountersProps) => {
   return (
     <CountersWrapper>
-      <CountersGrid gridTemplateAreas={gridAreas}>
+      <CountersGrid $gridTemplateAreas={gridAreas}>
         {players.map((player) => {
           return (
             <GridItemContainer
               key={player.index}
-              gridArea={`player${player.index}`}
+              $gridArea={`player${player.index}`}
             >
               <LifeCounter
                 backgroundColor={player.color}

src/Components/Counters/ExtraCountersBar.tsx

@@ -11,15 +11,15 @@ import {
   Poison,
 } from '../../Icons/generated';
 
-const Container = styled.div<{ rotation: number }>`
+const Container = styled.div<{ $rotation: Rotation }>`
   width: 100%;
   height: 20vmin;
   display: flex;
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         height: 100%;
@@ -29,7 +29,7 @@ const Container = styled.div<{ rotation: number }>`
   }}
 `;
 
-const ExtraCountersGrid = styled.div<{ rotation: number }>`
+const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
   display: flex;
   position: absolute;
   width: 100%;
@@ -40,8 +40,8 @@ const ExtraCountersGrid = styled.div<{ rotation: number }>`
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: column-reverse;
@@ -119,8 +119,8 @@ const ExtraCountersBar = ({
   }
 
   return (
-    <Container rotation={player.settings.rotation}>
-      <ExtraCountersGrid rotation={player.settings.rotation}>
+    <Container $rotation={player.settings.rotation}>
+      <ExtraCountersGrid $rotation={player.settings.rotation}>
         {useCommanderDamage && (
           <ExtraCounter
             rotation={player.settings.rotation}

src/Components/LifeCounter/Health.tsx

@@ -5,7 +5,7 @@ import LifeCounterButton from '../Buttons/LifeCounterButton';
 import { OutlinedText } from '../Misc/OutlinedText';
 
 const LifeCountainer = styled.div<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   position: relative;
   display: flex;
@@ -18,8 +18,8 @@ const LifeCountainer = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: column-reverse;
@@ -29,7 +29,7 @@ const LifeCountainer = styled.div<{
 `;
 
 const LifeCounterTextContainer = styled.div<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   position: absolute;
   width: 60%;
@@ -46,8 +46,8 @@ const LifeCounterTextContainer = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         width: 100%;
@@ -192,7 +192,7 @@ const Health = ({
   };
 
   return (
-    <LifeCountainer rotation={player.settings.rotation}>
+    <LifeCountainer $rotation={player.settings.rotation}>
       <LifeCounterButton
         lifeTotal={player.lifeTotal}
         setLifeTotal={handleLifeChange}
@@ -202,7 +202,7 @@ const Health = ({
       />
       <TextWrapper>
         <LifeCounterTextContainer
-          rotation={player.settings.rotation}
+          $rotation={player.settings.rotation}
           ref={textContainerRef}
         >
           <OutlinedText

src/Components/LifeCounter/LifeCounter.tsx

@@ -11,7 +11,7 @@ import Health from './Health';
 import { WakeLock } from '../../Types/WakeLock';
 
 const LifeCounterContentWrapper = styled.div<{
-  backgroundColor: string;
+  $backgroundColor: string;
 }>`
   position: relative;
   display: flex;
@@ -20,7 +20,7 @@ const LifeCounterContentWrapper = styled.div<{
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: ${(props) => props.backgroundColor || 'antiquewhite'};
+  background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
   @media (orientation: landscape) {
     max-width: 100vmax;
     max-height: 100vmin;
@@ -30,7 +30,7 @@ const LifeCounterContentWrapper = styled.div<{
 `;
 
 const LifeCounterWrapper = styled.div<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   position: relative;
   display: flex;
@@ -43,25 +43,25 @@ const LifeCounterWrapper = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: row;
-        rotate: ${props.rotation - 90}deg;
+        rotate: ${props.$rotation - 90}deg;
       `;
     }
 
     return css`
       flex-direction: column;
-      rotate: ${props.rotation}deg;
+      rotate: ${props.$rotation}deg;
     `;
   }}
 `;
 
 const PlayerNoticeWrapper = styled.div<{
-  rotation: Rotation;
-  backgroundColor: string;
+  $rotation: Rotation;
+  $backgroundColor: string;
 }>`
   z-index: 1;
   display: flex;
@@ -70,7 +70,7 @@ const PlayerNoticeWrapper = styled.div<{
   height: 100%;
   justify-content: center;
   align-items: center;
-  background: ${(props) => props.backgroundColor};
+  background: ${(props) => props.$backgroundColor};
   pointer-events: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
@@ -81,25 +81,25 @@ const PlayerNoticeWrapper = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
-        rotate: ${props.rotation - 90}deg;
+        rotate: ${props.$rotation - 90}deg;
       `;
     }
   }}
 `;
 
-const DynamicText = styled.div<{ rotation: Rotation }>`
+const DynamicText = styled.div<{ $rotation: Rotation }>`
   font-size: 8vmin;
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
       `;
     }
   }}
@@ -223,14 +223,14 @@ const LifeCounter = ({
     player.settings.rotation === Rotation.Side;
 
   return (
-    <LifeCounterContentWrapper backgroundColor={backgroundColor}>
-      <LifeCounterWrapper rotation={player.settings.rotation}>
+    <LifeCounterContentWrapper $backgroundColor={backgroundColor}>
+      <LifeCounterWrapper $rotation={player.settings.rotation}>
         {player.isStartingPlayer && !showStartingPlayer && (
           <PlayerNoticeWrapper
-            rotation={player.settings.rotation}
-            backgroundColor={theme.palette.primary.main}
+            $rotation={player.settings.rotation}
+            $backgroundColor={theme.palette.primary.main}
           >
-            <DynamicText rotation={player.settings.rotation}>
+            <DynamicText $rotation={player.settings.rotation}>
               You start!
             </DynamicText>
           </PlayerNoticeWrapper>
@@ -238,8 +238,8 @@ const LifeCounter = ({
 
         {player.hasLost && (
           <PlayerNoticeWrapper
-            rotation={player.settings.rotation}
-            backgroundColor={'#00000070'}
+            $rotation={player.settings.rotation}
+            $backgroundColor={'#00000070'}
           />
         )}
         <CommanderDamageBar
@@ -247,6 +247,7 @@ const LifeCounter = ({
           player={player}
           onPlayerChange={onPlayerChange}
           setLifeTotal={handleLifeChange}
+          key={player.index}
         />
         <SettingsButton
           onClick={() => {

src/Components/Misc/OutlinedText.tsx

@@ -17,7 +17,7 @@ const CenteredText = styled.div<{
   fillColor?: string;
   fontSize?: string;
   fontWeight?: string;
-  rotation?: Rotation;
+  $rotation?: Rotation;
 }>`
   position: absolute;
   font-weight: ${(props) => props.fontWeight || ''};
@@ -37,8 +37,8 @@ const CenteredText = styled.div<{
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         rotate: 270deg;
@@ -81,7 +81,7 @@ export const OutlinedText: React.FC<OutlinedTextProps> = ({
         strokeWidth={strokeWidth}
         strokeColor={strokeColor}
         fillColor={fillColor}
-        rotation={rotation}
+        $rotation={rotation}
       >
         {children}
         <CenteredTextOutline aria-hidden>{children}</CenteredTextOutline>

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -7,7 +7,7 @@ import { Button } from '@mui/material';
 import { WakeLock } from '../../Types/WakeLock';
 
 const PlayerMenuWrapper = styled.div<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   display: flex;
   flex-direction: column;
@@ -20,19 +20,19 @@ const PlayerMenuWrapper = styled.div<{
   z-index: 2;
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return;
     }
     return css`
-      rotate: ${props.rotation}deg;
+      rotate: ${props.$rotation}deg;
     `;
   }};
 `;
 
 const CloseButton = styled.div<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   position: absolute;
   top: 15%;
@@ -44,16 +44,16 @@ const CloseButton = styled.div<{
   background-color: transparent;
 
   ${(props) => {
-    if (props.rotation === Rotation.Side) {
+    if (props.$rotation === Rotation.Side) {
       return css`
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
         top: 5%;
         right: auto;
         left: 5%;
       `;
-    } else if (props.rotation === Rotation.SideFlipped) {
+    } else if (props.$rotation === Rotation.SideFlipped) {
       return css`
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
         top: auto;
         left: auto;
         bottom: 5%;
@@ -85,8 +85,8 @@ const PlayerMenu = ({
   };
 
   return (
-    <PlayerMenuWrapper rotation={player.settings.rotation}>
-      <CloseButton rotation={player.settings.rotation}>
+    <PlayerMenuWrapper $rotation={player.settings.rotation}>
+      <CloseButton $rotation={player.settings.rotation}>
         <Button
           style={{
             padding: '0 8px',

src/Components/PlayerMenu/Settings.tsx

@@ -14,7 +14,7 @@ type SettingsProps = {
 };
 
 const SettingsContainer = styled.div<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   display: flex;
   position: relative;
@@ -25,8 +25,8 @@ const SettingsContainer = styled.div<{
   width: 80%;
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: column-reverse;
@@ -37,7 +37,7 @@ const SettingsContainer = styled.div<{
   }}
 `;
 
-const TogglesSection = styled.div<{ rotation: Rotation }>`
+const TogglesSection = styled.div<{ $rotation: Rotation }>`
   display: flex;
   position: absolute;
   flex-direction: row;
@@ -46,8 +46,8 @@ const TogglesSection = styled.div<{ rotation: Rotation }>`
 
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
         flex-direction: column-reverse;
@@ -56,31 +56,31 @@ const TogglesSection = styled.div<{ rotation: Rotation }>`
   }}
 `;
 
-const ButtonsSections = styled.div<{ rotation: Rotation }>`
+const ButtonsSections = styled.div<{ $rotation: Rotation }>`
   position: absolute;
   display: flex;
   gap: 1rem;
   bottom: 16px;
 
   ${(props) => {
-    if (props.rotation === Rotation.Side) {
+    if (props.$rotation === Rotation.Side) {
       return css`
         bottom: auto;
         right: -6rem;
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
       `;
-    } else if (props.rotation === Rotation.SideFlipped) {
+    } else if (props.$rotation === Rotation.SideFlipped) {
       return css`
         bottom: auto;
         left: -6rem;
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
       `;
     }
   }}
 `;
 
 const ColorPicker = styled.input<{
-  rotation: Rotation;
+  $rotation: Rotation;
 }>`
   position: absolute;
   top: 5%;
@@ -96,15 +96,15 @@ const ColorPicker = styled.input<{
   color: #ffffff;
 
   ${(props) => {
-    if (props.rotation === Rotation.Side) {
+    if (props.$rotation === Rotation.Side) {
       return css`
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
         bottom: 5%;
         top: auto;
       `;
-    } else if (props.rotation === Rotation.SideFlipped) {
+    } else if (props.$rotation === Rotation.SideFlipped) {
       return css`
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
         top: 5%;
         left: auto;
         right: 5%;
@@ -113,14 +113,14 @@ const ColorPicker = styled.input<{
   }}
 `;
 
-const CheckboxContainer = styled.div<{ rotation: Rotation }>`
+const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
   ${(props) => {
     if (
-      props.rotation === Rotation.SideFlipped ||
-      props.rotation === Rotation.Side
+      props.$rotation === Rotation.SideFlipped ||
+      props.$rotation === Rotation.Side
     ) {
       return css`
-        rotate: ${props.rotation - 180}deg;
+        rotate: ${props.$rotation - 180}deg;
       `;
     }
   }}
@@ -177,16 +177,16 @@ const Settings = ({
   const buttonFontSize = isSide ? '2vmax' : '4vmin';
 
   return (
-    <SettingsContainer rotation={player.settings.rotation}>
+    <SettingsContainer $rotation={player.settings.rotation}>
       <ColorPicker
-        rotation={player.settings.rotation}
+        $rotation={player.settings.rotation}
         type="color"
         value={player.color}
         onChange={handleColorChange}
       />
-      <TogglesSection rotation={player.settings.rotation}>
+      <TogglesSection $rotation={player.settings.rotation}>
         {player.settings.useCommanderDamage && (
-          <CheckboxContainer rotation={player.settings.rotation}>
+          <CheckboxContainer $rotation={player.settings.rotation}>
             <Checkbox
               name="usePartner"
               checked={player.settings.usePartner}
@@ -211,7 +211,7 @@ const Settings = ({
           </CheckboxContainer>
         )}
 
-        <CheckboxContainer rotation={player.settings.rotation}>
+        <CheckboxContainer $rotation={player.settings.rotation}>
           <Checkbox
             name="usePoison"
             checked={player.settings.usePoison}
@@ -235,7 +235,7 @@ const Settings = ({
           />
         </CheckboxContainer>
 
-        <CheckboxContainer rotation={player.settings.rotation}>
+        <CheckboxContainer $rotation={player.settings.rotation}>
           <Checkbox
             name="useEnergy"
             checked={player.settings.useEnergy}
@@ -259,7 +259,7 @@ const Settings = ({
           />
         </CheckboxContainer>
 
-        <CheckboxContainer rotation={player.settings.rotation}>
+        <CheckboxContainer $rotation={player.settings.rotation}>
           <Checkbox
             name="useExperience"
             checked={player.settings.useExperience}
@@ -283,7 +283,7 @@ const Settings = ({
           />
         </CheckboxContainer>
       </TogglesSection>
-      <ButtonsSections rotation={player.settings.rotation}>
+      <ButtonsSections $rotation={player.settings.rotation}>
         <Button
           variant="contained"
           style={{

src/Components/Views/StartMenu/StartMenu.tsx

@@ -125,7 +125,6 @@ const Start = ({
   const { enableFullscreen } = useFullscreen();
 
   const toggleWakeLock = () => {
-    console.log(wakeLock.active, wakeLockActive);
     if (wakeLock.active && wakeLockActive) {
       wakeLock.release();
       setWakeLockActive(false);
@@ -149,7 +148,6 @@ const Start = ({
     analytics.trackEvent('game_started', { ...initialGameSettings });
 
     if (!wakeLock.active && wakeLockActive) {
-      console.log('yo');
       wakeLock.request();
     }
 

src/Types/Player.ts

@@ -1,6 +1,5 @@
 export type Player = {
   lifeTotal: number;
-  key?: number; // Deprecated, use index instead
   index: number;
   color: string;
   settings: PlayerSettings;