diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 51815b5..8823233 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/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: turquoise; + background: ${theme.palette.primary.main}; 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 = ({ {player.isStartingPlayer && !showStartingPlayer && ( - You start! + + You start! + )} - ` 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) => { - - - + +