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 ? (
+
-
- ) : (
-
- )}
+ )}
+
{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"
+ />
+