diff --git a/src/Components/Dialogs/InfoDialog.tsx b/src/Components/Dialogs/InfoDialog.tsx index eb15913..2ab38e6 100644 --- a/src/Components/Dialogs/InfoDialog.tsx +++ b/src/Components/Dialogs/InfoDialog.tsx @@ -3,6 +3,7 @@ import { CommanderTax, Energy, Experience, + Monarch, PartnerTax, Poison, } from '../../Icons/generated'; @@ -108,6 +109,9 @@ export const InfoDialog = ({
  • - Experience
  • +
  • + - Monarch +
  • Other functionality

    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} diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 5568228..b9247c3 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -238,6 +238,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { recentDifference={recentDifference} handleLifeChange={handleLifeChange} /> + { return ( -
    +
    +
    + + } + checkedIcon={ + + } + onChange={(e) => { + analytics.trackEvent('toggle_monarch', { + checked: e.target.checked, + }); + setSettings({ ...settings, useMonarch: e.target.checked }); + }} + aria-checked={settings.useMonarch} + aria-label="Monarch" + /> +