diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx index a762b4f..92b7a67 100644 --- a/src/Components/Buttons/CommanderDamage.tsx +++ b/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; `; } }} diff --git a/src/Components/Counters/Counters.tsx b/src/Components/Counters/Counters.tsx index a565323..75089b4 100644 --- a/src/Components/Counters/Counters.tsx +++ b/src/Components/Counters/Counters.tsx @@ -52,27 +52,6 @@ const Counters = ({ {players.map((player) => { - if ( - player.settings.rotation === 90 || - player.settings.rotation === 270 - ) { - return ( - - opponent.index !== player.index - )} - onPlayerChange={onPlayerChange} - resetCurrentGame={resetCurrentGame} - /> - - ); - } return ( - {/* - {}} rotation={0} /> - */} ); }; diff --git a/src/Data/getInitialPlayers.ts b/src/Data/getInitialPlayers.ts index b2cf7bb..375282b 100644 --- a/src/Data/getInitialPlayers.ts +++ b/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; }