diff --git a/src/Components/LifeCounter/Health.tsx b/src/Components/LifeCounter/Health.tsx index 427dd93..4807a2d 100644 --- a/src/Components/LifeCounter/Health.tsx +++ b/src/Components/LifeCounter/Health.tsx @@ -1,8 +1,10 @@ import { useEffect, useRef, useState } from 'react'; import { twc } from 'react-twc'; +import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { Player, Rotation } from '../../Types/Player'; import { RotationDivProps } from '../Buttons/CommanderDamage'; import LifeCounterButton from '../Buttons/LifeCounterButton'; +import { MonarchCrown } from '../Misc/MonarchCrown'; import { OutlinedText } from '../Misc/OutlinedText'; const LifeContainer = twc.div((props) => [ @@ -33,7 +35,7 @@ const RecentDifference = twc.div` absolute min-w-[20vmin] drop-shadow-none text-center bg-interface-recentDifference-background tabular-nums rounded-full p-[6px 12px] text-[8vmin] text-interface-recentDifference-text animate-fadeOut top-1/4 left-[50%] -translate-x-1/2 - data-[isSide=true]:top-1/3 data-[isSide=true]:translate-x-1/4 data-[isSide=true]:translate-y-1/2 data-[isSide=true]:rotate-[270deg] data-[isSide=true]:left-auto + data-[is-side=true]:top-1/3 data-[is-side=true]:translate-x-1/4 data-[is-side=true]:translate-y-1/2 data-[is-side=true]:rotate-[270deg] data-[is-side=true]:left-auto `; type HealthProps = { @@ -53,6 +55,8 @@ const Health = ({ const [fontSize, setFontSize] = useState(16); const textContainerRef = useRef(null); + const { settings } = useGlobalSettings(); + useEffect(() => { if (!textContainerRef.current) { return; @@ -104,6 +108,8 @@ const Health = ({ return ( + {settings.useMonarch && } + - {player.name && isSide ? ( -
-
+
+ {player.name && isSide ? ( +
{player.name}
-
- ) : ( -
+ ) : (
{player.name}
-
- )} + )} +
{recentDifference !== 0 && ( - + {recentDifference > 0 ? '+' : ''} {recentDifference}