wip

src/Components/Counters/ExtraCountersBar.tsx

@@ -5,7 +5,7 @@ import {
   Energy,
   Experience,
   PartnerTax,
-  Poison,
+  Poison
 } from '../../Icons/generated';
 import { CounterType, Player, Rotation } from '../../Types/Player';
 import { RotationDivProps } from '../Buttons/CommanderDamage';

src/Components/LifeCounter/LifeCounter.tsx

@@ -16,6 +16,7 @@ import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import PlayerMenu from '../Players/PlayerMenu';
 import { StartingPlayerCard } from '../PreStartGame/StartingPlayerCard';
 import Health from './Health';
+import { MonarchCrown } from '../Misc/MonarchCrown';
 
 const SettingsButtonTwc = twc.button<RotationButtonProps>((props) => [
   'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none  webkit-user-select-none opacity-50',
@@ -238,6 +239,8 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
           recentDifference={recentDifference}
           handleLifeChange={handleLifeChange}
         />
+        <MonarchCrown player={player} />
+
         <ExtraCountersBar player={player} />
         <PlayerMenu
           isShown={showPlayerMenu}

src/Components/Misc/IconCheckbox.tsx

@@ -14,7 +14,7 @@ export const IconCheckbox = ({
   className?: string;
 }) => {
   return (
-    <div className={className}>
+    <div className={className} >
       <label>
         <input
           name={name}

src/Components/Misc/MonarchCrown.tsx

@@ -0,0 +1,39 @@
+import { usePlayers } from '../../Hooks/usePlayers';
+import { Monarch } from '../../Icons/generated';
+import { Player, Rotation } from '../../Types/Player';
+import { IconCheckbox } from './IconCheckbox';
+
+export const MonarchCrown = ({ player }: { player: Player }) => {
+  const { players, setPlayers } = usePlayers();
+
+  const iconSize =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? '5vmax'
+      : '10vmin';
+
+  return (
+    <div className="flex justify-center items-center pointer-events-all flex-grow">
+      <IconCheckbox
+        name="useMonarch"
+        checked={player.isMonarch}
+        icon={<Monarch size={iconSize} color={player.color} stroke="white" />}
+        checkedIcon={<Monarch size={iconSize} color="black" stroke="black" />}
+        onChange={(e) => {
+          const updatedPlayer = { ...player, isMonarch: e.target.checked };
+
+          const updatedPlayers = players.map((p) => {
+            if (p.index === player.index) {
+              return updatedPlayer;
+            }
+            return { ...p, isMonarch: false };
+          });
+
+          setPlayers(updatedPlayers);
+        }}
+        aria-checked={player.isMonarch}
+        aria-label="Monarch"
+      />
+    </div>
+  );
+};

src/Components/Players/PlayerMenu.tsx

@@ -11,6 +11,7 @@ import {
   Experience,
   FullscreenOff,
   FullscreenOn,
+  Monarch,
   NameTag,
   PartnerTax,
   Poison,
@@ -110,6 +111,7 @@ const PlayerMenu = ({
     wakeLock,
     goToStart,
     settings,
+    setSettings,
     setPlaying,
     setRandomizingPlayer,
     saveCurrentGame,
@@ -359,6 +361,36 @@ const PlayerMenu = ({
                 aria-checked={player.settings.useExperience}
                 aria-label="Experience"
               />
+            </div>
+                 <div>
+              <IconCheckbox
+                name="useMonarch"
+                checked={settings.useMonarch}
+                icon={
+                  <Monarch
+                    size={extraCountersSize}
+                    color="black"
+                    stroke="white"
+                    strokeWidth={2.5}
+                  />
+                }
+                checkedIcon={
+                  <Monarch
+                    size={extraCountersSize}
+                    color={player.color}
+                    stroke="white"
+                    strokeWidth={2.5}
+                  />
+                }
+                onChange={(e) => {
+                  analytics.trackEvent('toggle_monarch', {
+                    checked: e.target.checked,
+                  });
+                  setSettings({ ...settings, useMonarch: e.target.checked });
+                }}
+                aria-checked={settings.useMonarch}
+                aria-label="Monarch"
+              />
             </div>
           </TogglesSection>
           <ButtonsSections>

src/Data/getInitialPlayers.ts

@@ -231,6 +231,7 @@ export const createInitialPlayers = ({
       isStartingPlayer: false,
       isSide: rotation === Rotation.Side || rotation === Rotation.SideFlipped,
       name: '',
+      isMonarch: false,
     };
 
     players.push(player);

src/Icons/generated/Monarch.tsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+  size?: string;
+}
+const Monarch = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size || 16}
+      height={props.size || 16}
+      fill="none"
+      viewBox="0 0 52 52"
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        fill="currentColor"
+        d="M46.163 38.82s-8.614 2.73-14.234 3.106c-2.508.167-3.918 0-6.429 0-2.51 0-3.921.167-6.429 0-5.62-.376-14.234-3.107-14.234-3.107s.637-3.944.459-6.471C5.053 28.888 3 24.038 3 24.038s2.897 2.25 4.592 1.294C9.78 24.098 10.5 20 10.5 20s3.006 6.024 7 5.332c2.386-.414 3.327-1.974 4.5-4.016.97-1.69 1.27-4.827 1.27-4.827l1.77-4.827L25.5 10l.46 1.662 1.77 4.827s.3 3.136 1.27 4.827c1.173 2.042 2.388 3.353 4.5 4.016 4.051 1.273 7-5.332 7-5.332s.72 4.098 2.908 5.332c1.695.956 4.592-1.294 4.592-1.294s-2.053 4.85-2.296 8.31c-.178 2.527.46 6.471.46 6.471"
+      />
+    </svg>
+  );
+};
+Monarch.propTypes = {
+  title: PropTypes.string,
+};
+export default Monarch;

src/Icons/generated/index.ts

@@ -10,6 +10,7 @@ export { default as FullscreenOn } from './FullscreenOn';
 export { default as Info } from './Info';
 export { default as LittleGuy } from './LittleGuy';
 export { default as Logo } from './Logo';
+export { default as Monarch } from './Monarch';
 export { default as NameTag } from './NameTag';
 export { default as PartnerTax } from './PartnerTax';
 export { default as Poison } from './Poison';

src/Icons/svgs/Monarch.svg

@@ -0,0 +1,3 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.1633 38.8191C46.1633 38.8191 37.5494 41.5504 31.9286 41.9256C29.421 42.093 28.0105 41.9256 25.5 41.9256C22.9895 41.9256 21.579 42.093 19.0714 41.9256C13.4506 41.5504 4.83673 38.8191 4.83673 38.8191C4.83673 38.8191 5.47353 34.8751 5.29592 32.3476C5.05284 28.8883 3 24.0377 3 24.0377C3 24.0377 5.89664 26.2882 7.59184 25.332C9.77975 24.0978 10.5 20 10.5 20C10.5 20 13.5058 26.0243 17.5 25.332C19.886 24.9184 20.8269 23.3583 22 21.3158C22.9708 19.6255 23.2704 16.4887 23.2704 16.4887L25.0408 11.6616L25.5 10L25.9592 11.6616L27.7296 16.4887C27.7296 16.4887 28.0292 19.6255 29 21.3158C30.1731 23.3583 31.3881 24.6686 33.5 25.332C37.5515 26.6047 40.5 20 40.5 20C40.5 20 41.2203 24.0978 43.4082 25.332C45.1034 26.2882 48 24.0377 48 24.0377C48 24.0377 45.9472 28.8883 45.7041 32.3476C45.5265 34.8751 46.1633 38.8191 46.1633 38.8191Z" fill="currentColor"/>
+</svg>

src/Types/Player.ts

@@ -7,6 +7,7 @@ export type Player = {
   commanderDamage: CommanderDamage[];
   extraCounters: ExtraCounter[];
   isStartingPlayer: boolean;
+  isMonarch: boolean;
   hasLost: boolean;
   isSide: boolean;
   name: string;

src/Types/Settings.ts

@@ -26,6 +26,7 @@ export type Settings = {
   goFullscreenOnStart: boolean;
   preStartMode: PreStartMode;
   showAnimations: boolean;
+  useMonarch: boolean;
 };
 
 export type InitialGameSettings = {
@@ -59,6 +60,7 @@ export const settingsSchema = z.object({
   goFullscreenOnStart: z.boolean(),
   preStartMode: z.nativeEnum(PreStartMode),
   showAnimations: z.boolean(),
+  useMonarch: z.boolean().default(false),
 });
 
 export const defaultSettings: Settings = {
@@ -68,4 +70,5 @@ export const defaultSettings: Settings = {
   showPlayerMenuCog: true,
   preStartMode: PreStartMode.None,
   showAnimations: true,
+  useMonarch: false,
 };