monarch button

src/Components/Misc/MonarchCrown.tsx

@@ -12,28 +12,43 @@ export const MonarchCrown = ({ player }: { player: Player }) => {
       ? '5vmax'
       : '10vmin';
 
+  const rotationIsSide =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side;
+
   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 };
+    <div
+      data-rotation-is-side={rotationIsSide}
+      className="absolute w-full h-full flex items-start justify-center pointer-events-none z-[1]
+      data-[rotation-is-side=true]:justify-start data-[rotation-is-side=true]:items-center
+      "
+    >
+      <div
+        data-rotation-is-side={rotationIsSide}
+        className="data-[rotation-is-side=true]:-rotate-90"
+      >
+        <IconCheckbox
+          className="pointer-events-all"
+          name="useMonarch"
+          checked={player.isMonarch}
+          icon={<Monarch size={iconSize} color={player.color} stroke="white" />}
+          checkedIcon={<Monarch size={iconSize} color="gold" stroke="white" />}
+          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 };
-          });
+            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"
-      />
+            setPlayers(updatedPlayers);
+          }}
+          aria-checked={player.isMonarch}
+          aria-label="Monarch"
+        />
+      </div>
     </div>
   );
 };