parse settings before setting

do
fix keep away state
2025-11-11 21:56:25 +00:00 · 2024-03-29 23:18:10 +01:00 · 2024-03-29 22:46:55 +01:00 · 2024-03-23 16:23:03 +01:00 · 2024-03-23 16:22:48 +01:00 · 2024-03-23 16:05:29 +01:00
37 changed files with 1939 additions and 771 deletions
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,8 +1,12 @@
-index.html,1705225256081,6ef0d7e2de82bf64addbb9294fb28845fd06daaa544b010a47422c12ae3ad97f
-robots.txt,1705225255906,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-manifest.json,1705225255906,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
-assets/index-08359bdb.css,1705225256081,d2766260d28230d960d75362810713efaddf40687205e697432b52869f162af7
-logo192.png,1705225255905,3b0fcf91fe2128f493de0bce2f6e2d35520a4260a04e05b8d855181359b3d3fe
-favicon.ico,1705225255905,75661e6187b524767554b4f28ec09a64bc72b0bb102a0b453aaead88519d9ed3
-logo512.png,1705225255906,cf49739c9e6890bbfcd4157f299dde425df60759b7320ae9188d7ab9dc51e8ca
-assets/index-20658f4b.js,1705225256081,742f2c10740beea3a23f269aa6266b3c288d1fd9c7e20b6829034e8a898bf1e1
+index.html,1711189442688,fa2549e32940c356ac5cee88c8db61076ad62fb4e599858c8e45cfc68cd901c4
+manifest.json,1711189442512,7ff5111aa04a42adff3b38924ec467b6f345ed0309dba1486dc9b783b60c2a9d
+registerSW.js,1711189442688,5b6445b5215737c53ef0d379c151d57de165a056de2d1c5812ed614f158ebcbd
+sw.js,1711189443521,9c09d33ea573bb818864bfad526fa911839637171773eca8e31905458679846d
+robots.txt,1711189442512,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.webmanifest,1711189442688,f2bf253209f6e292a6b0dbfa06fb4ac188eb5f2dba568c3ad5511b9ed52c1f51
+workbox-3e911b1d.js,1711189443521,d5dbc868a5c07af633d29de7ba3ffe37542aaaabdf33713b4298df31f92f11ff
+assets/index-WLCHZTqE.css,1711189442688,877e5ea9bfd3a1ca0e6449e8213da8a3c7717e530370f12669bb5c70dd21e700
+favicon.ico,1711189442511,8cefe5adbf00d337d8633fb744b9f2c4914f769b319be4bb7e184b7a4aa17160
+logo192.png,1711189442511,3d1e2e6f064d4fd325828f21bb6493ff0dbf2390b0e7d2aba9f2b6def4829799
+logo512.png,1711189442511,892a4da1cc5434929a83a71fcbcb0d0d80aa82f44e3c21e9b20ffe9267197133
+assets/index-OHs0lOr7.js,1711189442688,aa0dca732cd5b6f621ecb7c6dbcbfdbccde78941cfad954f6626d4ff83040c7f
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "life-trinket",
  "private": true,
-  "version": "0.5.52",
+  "version": "0.8.1",
  "type": "commonjs",
  "engines": {
    "node": ">=18",
@@ -22,6 +22,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-screen-wake-lock": "^3.0.2",
+    "react-swipeable": "^7.0.1",
    "react-twc": "^1.3.0",
    "zod": "^3.22.4"
  },
@@ -43,9 +44,9 @@
    "install": "^0.13.0",
    "postcss": "^8.4.32",
    "prettier": "2.8.8",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
    "vite-plugin-pwa": "^0.17.4"
  }
 }
--- a/src/Components/Buttons/CommanderDamage.tsx
+++ b/src/Components/Buttons/CommanderDamage.tsx
@@ -17,6 +17,8 @@ export type RotationButtonProps = TwcComponentProps<'button'> & {
  $rotation?: number;
 };

+export const MAX_TAP_MOVE_DISTANCE = 20;
+
 const CommanderDamageContainer = twc.div<RotationDivProps>((props) => [
  'flex flex-grow',
  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
@@ -38,7 +40,7 @@ const CommanderDamageTextContainer = twc.div<RotationDivProps>((props) => [
    : '',
 ]);

-const PartnerDamageSeperator = twc.div<RotationDivProps>((props) => [
+const PartnerDamageSeparator = twc.div<RotationDivProps>((props) => [
  'bg-black',
  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
    ? 'w-full h-px'
@@ -54,6 +56,7 @@ type CommanderDamageButtonComponentProps = {
 type InputProps = {
  opponentIndex: number;
  isPartner: boolean;
+  event: React.PointerEvent<HTMLButtonElement>;
 };

 export const CommanderDamage = ({
@@ -63,12 +66,8 @@ export const CommanderDamage = ({
 }: CommanderDamageButtonComponentProps) => {
  const { updatePlayer } = usePlayers();
  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const [timeoutFinished, setTimeoutFinished] = useState(false);
-  const [hasPressedDown, setHasPressedDown] = useState(false);
-
-  const isSide =
-    player.settings.rotation === Rotation.Side ||
-    player.settings.rotation === Rotation.SideFlipped;
+  const [downLongPressed, setDownLongPressed] = useState(false);
+  const downPositionRef = useRef({ x: 0, y: 0 });

  const handleCommanderDamageChange = (
    index: number,
@@ -107,34 +106,47 @@ export const CommanderDamage = ({
    handleLifeChange(player.lifeTotal - increment);
  };

-  const handleDownInput = ({ opponentIndex, isPartner }: InputProps) => {
-    setTimeoutFinished(false);
-    setHasPressedDown(true);
+  const handleDownInput = ({ opponentIndex, isPartner, event }: InputProps) => {
+    downPositionRef.current = { x: event.clientX, y: event.clientY };
+    setDownLongPressed(false);
+
    timeoutRef.current = setTimeout(() => {
-      setTimeoutFinished(true);
+      setDownLongPressed(true);
      handleCommanderDamageChange(opponentIndex, -1, isPartner);
    }, decrementTimeoutMs);
  };

-  const handleUpInput = ({ opponentIndex, isPartner }: InputProps) => {
-    if (!(hasPressedDown && !timeoutFinished)) {
+  const handleUpInput = ({ opponentIndex, isPartner, event }: InputProps) => {
+    if (downLongPressed) {
      return;
    }
+
+    const upPosition = { x: event.clientX, y: event.clientY };
+
+    const hasMoved =
+      Math.abs(upPosition.x - downPositionRef.current.x) >
+        MAX_TAP_MOVE_DISTANCE ||
+      Math.abs(upPosition.y - downPositionRef.current.y) >
+        MAX_TAP_MOVE_DISTANCE;
+
+    if (hasMoved) {
+      return;
+    }
+
    clearTimeout(timeoutRef.current);
+
    handleCommanderDamageChange(opponentIndex, 1, isPartner);
-    setHasPressedDown(false);
  };

  const handleLeaveInput = () => {
-    setTimeoutFinished(true);
+    setDownLongPressed(true);
    clearTimeout(timeoutRef.current);
-    setHasPressedDown(false);
  };

  const opponentIndex = opponent.index;
-  const fontSize = isSide ? '4vmax' : '7vmin';
+  const fontSize = player.isSide ? '4vmax' : '7vmin';
  const fontWeight = 'bold';
-  const strokeWidth = isSide ? '0.4vmax' : '0.7vmin';
+  const strokeWidth = player.isSide ? '0.4vmax' : '0.7vmin';

  return (
    <CommanderDamageContainer
@@ -145,10 +157,12 @@ export const CommanderDamage = ({
      <CommanderDamageButton
        key={opponentIndex}
        $rotation={player.settings.rotation}
-        onPointerDown={() =>
-          handleDownInput({ opponentIndex, isPartner: false })
+        onPointerDown={(e) =>
+          handleDownInput({ opponentIndex, isPartner: false, event: e })
+        }
+        onPointerUp={(e) =>
+          handleUpInput({ opponentIndex, isPartner: false, event: e })
        }
-        onPointerUp={() => handleUpInput({ opponentIndex, isPartner: false })}
        onPointerLeave={handleLeaveInput}
        onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
          e.preventDefault();
@@ -171,15 +185,15 @@ export const CommanderDamage = ({

      {opponent.settings.usePartner && (
        <>
-          <PartnerDamageSeperator $rotation={player.settings.rotation} />
+          <PartnerDamageSeparator $rotation={player.settings.rotation} />
          <CommanderDamageButton
            key={opponentIndex}
            $rotation={player.settings.rotation}
-            onPointerDown={() =>
-              handleDownInput({ opponentIndex, isPartner: true })
+            onPointerDown={(e) =>
+              handleDownInput({ opponentIndex, isPartner: true, event: e })
            }
-            onPointerUp={() =>
-              handleUpInput({ opponentIndex, isPartner: true })
+            onPointerUp={(e) =>
+              handleUpInput({ opponentIndex, isPartner: true, event: e })
            }
            onPointerLeave={handleLeaveInput}
            onContextMenu={(
--- a/src/Components/Buttons/ExtraCounter.tsx
+++ b/src/Components/Buttons/ExtraCounter.tsx
@@ -3,7 +3,7 @@ import { twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
-import { RotationDivProps } from './CommanderDamage';
+import { MAX_TAP_MOVE_DISTANCE, RotationDivProps } from './CommanderDamage';

 const ExtraCounterContainer = twc.div`
  flex
@@ -47,6 +47,7 @@ type ExtraCounterProps = {
  type: CounterType;
  setCounterTotal: (updatedCounterTotal: number, type: CounterType) => void;
  rotation: number;
+  isSide: boolean;
  playerIndex: number;
 };

@@ -56,14 +57,13 @@ const ExtraCounter = ({
  setCounterTotal,
  type,
  rotation,
+  isSide,
  playerIndex,
 }: ExtraCounterProps) => {
  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
  const [timeoutFinished, setTimeoutFinished] = useState(false);
  const [hasPressedDown, setHasPressedDown] = useState(false);
-
-  const isSide =
-    rotation === Rotation.Side || rotation === Rotation.SideFlipped;
+  const downPositionRef = useRef({ x: 0, y: 0 });

  const handleCountChange = (increment: number) => {
    if (!counterTotal) {
@@ -73,7 +73,8 @@ const ExtraCounter = ({
    setCounterTotal(counterTotal + increment, type);
  };

-  const handleDownInput = () => {
+  const handleDownInput = (event: React.PointerEvent<HTMLButtonElement>) => {
+    downPositionRef.current = { x: event.clientX, y: event.clientY };
    setTimeoutFinished(false);
    setHasPressedDown(true);
    timeoutRef.current = setTimeout(() => {
@@ -82,10 +83,23 @@ const ExtraCounter = ({
    }, decrementTimeoutMs);
  };

-  const handleUpInput = () => {
+  const handleUpInput = (event: React.PointerEvent<HTMLButtonElement>) => {
    if (!(hasPressedDown && !timeoutFinished)) {
      return;
    }
+
+    const upPosition = { x: event.clientX, y: event.clientY };
+
+    const hasMoved =
+      Math.abs(upPosition.x - downPositionRef.current.x) >
+        MAX_TAP_MOVE_DISTANCE ||
+      Math.abs(upPosition.y - downPositionRef.current.y) >
+        MAX_TAP_MOVE_DISTANCE;
+
+    if (hasMoved) {
+      return;
+    }
+
    clearTimeout(timeoutRef.current);
    handleCountChange(1);
    setHasPressedDown(false);
--- a/src/Components/Buttons/LifeCounterButton.tsx
+++ b/src/Components/Buttons/LifeCounterButton.tsx
@@ -1,7 +1,9 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TwcComponentProps, twc } from 'react-twc';
 import { lifeLongPressMultiplier } from '../../Data/constants';
-import { Rotation } from '../../Types/Player';
+import { Player, Rotation } from '../../Types/Player';
+import { MAX_TAP_MOVE_DISTANCE } from './CommanderDamage';
+import { checkContrast } from '../../Utils/checkContrast';

 type RotationButtonProps = TwcComponentProps<'div'> & {
  $align?: string;
@@ -12,7 +14,6 @@ const LifeCounterButtonTwc = twc.button`
  h-full
  w-full
  flex
-  text-lifeCounter-text
  font-semibold
  bg-transparent
  border-none
@@ -39,29 +40,41 @@ const TextContainer = twc.div<RotationButtonProps>((props) => [
 ]);

 type LifeCounterButtonProps = {
-  lifeTotal: number;
+  player: Player;
  setLifeTotal: (lifeTotal: number) => void;
-  rotation: number;
  operation: 'add' | 'subtract';
  increment: number;
 };

 const LifeCounterButton = ({
-  lifeTotal,
+  player,
  setLifeTotal,
-  rotation,
  operation,
  increment,
 }: LifeCounterButtonProps) => {
  const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
  const [timeoutFinished, setTimeoutFinished] = useState(false);
  const [hasPressedDown, setHasPressedDown] = useState(false);
+  const downPositionRef = useRef({ x: 0, y: 0 });
+
+  const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const contrast = checkContrast(player.color, '#00000080');
+
+    if (contrast === 'Fail') {
+      setIconColor('light');
+    } else {
+      setIconColor('dark');
+    }
+  }, [player.color]);

  const handleLifeChange = (increment: number) => {
-    setLifeTotal(lifeTotal + increment);
+    setLifeTotal(player.lifeTotal + increment);
  };

-  const handleDownInput = () => {
+  const handleDownInput = (event: React.PointerEvent<HTMLButtonElement>) => {
+    downPositionRef.current = { x: event.clientX, y: event.clientY };
    setTimeoutFinished(false);
    setHasPressedDown(true);
    timeoutRef.current = setTimeout(() => {
@@ -70,10 +83,23 @@ const LifeCounterButton = ({
    }, 500);
  };

-  const handleUpInput = () => {
+  const handleUpInput = (event: React.PointerEvent<HTMLButtonElement>) => {
    if (!(hasPressedDown && !timeoutFinished)) {
      return;
    }
+
+    const upPosition = { x: event.clientX, y: event.clientY };
+
+    const hasMoved =
+      Math.abs(upPosition.x - downPositionRef.current.x) >
+        MAX_TAP_MOVE_DISTANCE ||
+      Math.abs(upPosition.y - downPositionRef.current.y) >
+        MAX_TAP_MOVE_DISTANCE;
+
+    if (hasMoved) {
+      return;
+    }
+
    clearTimeout(timeoutRef.current);
    handleLifeChange(operation === 'add' ? 1 : -1);
    setHasPressedDown(false);
@@ -86,7 +112,8 @@ const LifeCounterButton = ({
  };

  const fontSize =
-    rotation === Rotation.SideFlipped || rotation === Rotation.Side
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
      ? '8vmax'
      : '12vmin';

@@ -102,8 +129,11 @@ const LifeCounterButton = ({
      aria-label={`${operation === 'add' ? 'Add' : 'Subtract'} life`}
    >
      <TextContainer
-        $rotation={rotation}
+        $rotation={player.settings.rotation}
        $align={operation === 'add' ? 'right' : 'left'}
+        data-contrast={iconColor}
+        className="data-[contrast=dark]:text-icons-dark
+        data-[contrast=light]:text-icons-light"
      >
        {operation === 'add' ? '\u002B' : '\u2212'}
      </TextContainer>
--- a/src/Components/Buttons/LoseButton.tsx
+++ b/src/Components/Buttons/LoseButton.tsx
@@ -4,13 +4,11 @@ import { Rotation } from '../../Types/Player';
 import { RotationDivProps } from './CommanderDamage';

 const LoseButton = twc.div<RotationDivProps>((props) => [
-  'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none',
+  'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none py-2 px-4 ',

-  props.$rotation === Rotation.SideFlipped
-    ? `right-auto top-[15%] left-[27%]`
-    : props.$rotation === Rotation.Side
-    ? `right-auto top-[15%] left-[27%]`
-    : 'right-[15%] top-1/4',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? `left-[21%]`
+    : 'top-[21%]',
 ]);

 type LoseButtonProps = {
@@ -24,6 +22,8 @@ export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
      ? rotation
      : rotation === Rotation.Side
      ? rotation - 180
+      : rotation === Rotation.Flipped
+      ? rotation - 180
      : rotation;

  return (
@@ -33,7 +33,7 @@ export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
      aria-label={`Lose Game`}
      style={{ rotate: `${calcRotation}deg` }}
    >
-      <Skull size="5vmin" color="black" opacity={0.5} />
+      <Skull size="8vmin" color="black" opacity={0.5} />
    </LoseButton>
  );
 };
--- a/src/Components/Buttons/SettingsButton.tsx
+++ b/src/Components/Buttons/SettingsButton.tsx
@@ -1,30 +0,0 @@
-import { twc } from 'react-twc';
-import { Cog } from '../../Icons/generated';
-import { Rotation } from '../../Types/Player';
-import { RotationButtonProps } from './CommanderDamage';
-
-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',
-  props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
-    ? `right-auto top-[1vmax] left-[27%]`
-    : 'top-1/4 right-[1vmax]',
-]);
-
-type SettingsButtonProps = {
-  onClick: () => void;
-  rotation: Rotation;
-};
-
-const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
-  return (
-    <SettingsButtonTwc
-      onClick={onClick}
-      $rotation={rotation}
-      aria-label={`Settings`}
-    >
-      <Cog size="5vmin" color="black" opacity="0.3" />
-    </SettingsButtonTwc>
-  );
-};
-
-export default SettingsButton;
--- a/src/Components/Counters/ExtraCountersBar.tsx
+++ b/src/Components/Counters/ExtraCountersBar.tsx
@@ -10,6 +10,8 @@ import {
 import { CounterType, Player, Rotation } from '../../Types/Player';
 import { RotationDivProps } from '../Buttons/CommanderDamage';
 import ExtraCounter from '../Buttons/ExtraCounter';
+import { useEffect, useState } from 'react';
+import { checkContrast } from '../../Utils/checkContrast';

 const Container = twc.div<RotationDivProps>((props) => [
  'flex',
@@ -19,9 +21,9 @@ const Container = twc.div<RotationDivProps>((props) => [
 ]);

 export const ExtraCountersGrid = twc.div<RotationDivProps>((props) => [
-  'flex absolute flex-row flex-grow pointer-events-none',
+  'flex absolute flex-row flex-grow pointer-events-none overflow-x-scroll overflow-y-hidden',
  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? 'flex-col-reverse h-full w-auto bottom-auto'
+    ? 'flex-col-reverse h-full w-auto bottom-auto right-0'
    : 'w-full bottom-0',
 ]);

@@ -31,6 +33,17 @@ type ExtraCountersBarProps = {

 const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
  const { updatePlayer } = usePlayers();
+  const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const contrast = checkContrast(player.color, '#00000080');
+
+    if (contrast === 'Fail') {
+      setIconColor('light');
+    } else {
+      setIconColor('dark');
+    }
+  }, [player.color]);

  const handleCounterChange = (
    updatedCounterTotal: number,
@@ -93,13 +106,20 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
        {useCommanderDamage && (
          <ExtraCounter
            rotation={player.settings.rotation}
-            Icon={<CommanderTax size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <CommanderTax
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
            type={CounterType.CommanderTax}
            counterTotal={
              player.extraCounters?.find(
                (counter) => counter.type === 'commanderTax'
              )?.value
            }
+            isSide={player.isSide}
            setCounterTotal={handleCounterChange}
            playerIndex={player.index}
          />
@@ -107,13 +127,20 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
        {Boolean(useCommanderDamage && usePartner) && (
          <ExtraCounter
            rotation={player.settings.rotation}
-            Icon={<PartnerTax size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <PartnerTax
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
            type={CounterType.PartnerTax}
            counterTotal={
              player.extraCounters?.find(
                (counter) => counter.type === 'partnerTax'
              )?.value
            }
+            isSide={player.isSide}
            setCounterTotal={handleCounterChange}
            playerIndex={player.index}
          />
@@ -121,12 +148,19 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
        {usePoison && (
          <ExtraCounter
            rotation={player.settings.rotation}
-            Icon={<Poison size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <Poison
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
            type={CounterType.Poison}
            counterTotal={
              player.extraCounters?.find((counter) => counter.type === 'poison')
                ?.value
            }
+            isSide={player.isSide}
            setCounterTotal={handleCounterChange}
            playerIndex={player.index}
          />
@@ -134,12 +168,19 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
        {useEnergy && (
          <ExtraCounter
            rotation={player.settings.rotation}
-            Icon={<Energy size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <Energy
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
            type={CounterType.Energy}
            counterTotal={
              player.extraCounters?.find((counter) => counter.type === 'energy')
                ?.value
            }
+            isSide={player.isSide}
            setCounterTotal={handleCounterChange}
            playerIndex={player.index}
          />
@@ -147,13 +188,20 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
        {useExperience && (
          <ExtraCounter
            rotation={player.settings.rotation}
-            Icon={<Experience size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <Experience
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
            type={CounterType.Experience}
            counterTotal={
              player.extraCounters?.find(
                (counter) => counter.type === 'experience'
              )?.value
            }
+            isSide={player.isSide}
            setCounterTotal={handleCounterChange}
            playerIndex={player.index}
          />
--- a/src/Components/LifeCounter/Health.tsx
+++ b/src/Components/LifeCounter/Health.tsx
@@ -8,7 +8,7 @@ import {
 import LifeCounterButton from '../Buttons/LifeCounterButton';
 import { OutlinedText } from '../Misc/OutlinedText';

-const LifeCountainer = twc.div<RotationDivProps>((props) => [
+const LifeContainer = twc.div<RotationDivProps>((props) => [
  'flex flex-grow relative w-full h-full justify-between items-center',
  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
    ? 'flex-col-reverse'
@@ -49,28 +49,13 @@ type HealthProps = {

 const Health = ({
  player,
-  rotation,
  handleLifeChange,
  differenceKey,
  recentDifference,
 }: HealthProps) => {
-  const [showStartingPlayer, setShowStartingPlayer] = useState(
-    localStorage.getItem('playing') === 'true'
-  );
  const [fontSize, setFontSize] = useState(16);
  const textContainerRef = useRef<HTMLDivElement | null>(null);

-  useEffect(() => {
-    if (!showStartingPlayer) {
-      const playingTimer = setTimeout(() => {
-        localStorage.setItem('playing', 'true');
-        setShowStartingPlayer(localStorage.getItem('playing') === 'true');
-      }, 3_000);
-
-      return () => clearTimeout(playingTimer);
-    }
-  }, [showStartingPlayer]);
-
  useEffect(() => {
    if (!textContainerRef.current) {
      return;
@@ -99,12 +84,13 @@ const Health = ({
  }, [textContainerRef]);

  const calculateFontSize = (container: HTMLDivElement) => {
-    const isSide =
-      rotation === Rotation.SideFlipped || rotation === Rotation.Side;
+    const widthRatio = player.isSide
+      ? container.clientHeight
+      : container.clientWidth;

-    const widthRatio = isSide ? container.clientHeight : container.clientWidth;
-
-    const heightRatio = isSide ? container.clientWidth : container.clientHeight;
+    const heightRatio = player.isSide
+      ? container.clientWidth
+      : container.clientHeight;

    const minRatio = Math.min(widthRatio, heightRatio);

@@ -116,11 +102,10 @@ const Health = ({
  };

  return (
-    <LifeCountainer $rotation={player.settings.rotation}>
+    <LifeContainer $rotation={player.settings.rotation}>
      <LifeCounterButton
-        lifeTotal={player.lifeTotal}
+        player={player}
        setLifeTotal={handleLifeChange}
-        rotation={player.settings.rotation}
        operation="subtract"
        increment={-1}
      />
@@ -148,13 +133,12 @@ const Health = ({
        </LifeCounterTextContainer>
      </TextWrapper>
      <LifeCounterButton
-        lifeTotal={player.lifeTotal}
+        player={player}
        setLifeTotal={handleLifeChange}
-        rotation={player.settings.rotation}
        operation="add"
        increment={1}
      />
-    </LifeCountainer>
+    </LifeContainer>
  );
 };

--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -1,16 +1,64 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
 import { twc } from 'react-twc';
+import { useAnalytics } from '../../Hooks/useAnalytics';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { Cog } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
-import { RotationDivProps } from '../Buttons/CommanderDamage';
+import { checkContrast } from '../../Utils/checkContrast';
+import {
+  RotationButtonProps,
+  RotationDivProps,
+} from '../Buttons/CommanderDamage';
 import { LoseGameButton } from '../Buttons/LoseButton';
-import SettingsButton from '../Buttons/SettingsButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
-import PlayerMenu from '../Player/PlayerMenu';
+import PlayerMenu from '../Players/PlayerMenu';
+import { StartingPlayerCard } from '../PreStartGame/StartingPlayerCard';
 import Health from './Health';

+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',
+  props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
+    ? `right-auto top-[1vmax] left-[27%]`
+    : 'top-1/4 right-[1vmax]',
+]);
+
+type SettingsButtonProps = {
+  onClick: () => void;
+  rotation: Rotation;
+  color: string;
+};
+
+const SettingsButton = ({ onClick, rotation, color }: SettingsButtonProps) => {
+  const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const contrast = checkContrast(color, '#00000080');
+
+    if (contrast === 'Fail') {
+      setIconColor('light');
+    } else {
+      setIconColor('dark');
+    }
+  }, [color]);
+
+  return (
+    <SettingsButtonTwc
+      onClick={onClick}
+      $rotation={rotation}
+      aria-label={`Settings`}
+    >
+      <Cog
+        size="5vmin"
+        data-contrast={iconColor}
+        className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+      />
+    </SettingsButtonTwc>
+  );
+};
+
 const LifeCounterContentWrapper = twc.div`
  relative flex flex-grow flex-col items-center w-full h-full overflow-hidden`;

@@ -21,17 +69,13 @@ const LifeCounterWrapper = twc.div<RotationDivProps>((props) => [
    : `flex-col`,
 ]);

-const StartingPlayerNoticeWrapper = twc.div`z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`;
-
 const PlayerLostWrapper = twc.div<RotationDivProps>((props) => [
-  'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper',
+  'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper opacity-75',
  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
    ? `rotate-[${props.$rotation - 90}deg]`
    : '',
 ]);

-const DynamicText = twc.div`text-[8vmin] whitespace-nowrap`;
-
 const hasCommanderDamageReached21 = (player: Player) => {
  const commanderDamageTotals = player.commanderDamage.map(
    (commanderDamage) => commanderDamage.damageTotal
@@ -62,36 +106,79 @@ const playerCanLose = (player: Player) => {
 type LifeCounterProps = {
  player: Player;
  opponents: Player[];
+  isStartingPlayer?: boolean;
 };

+const RECENT_DIFFERENCE_TTL = 3_000;
+
 const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
  const { updatePlayer, updateLifeTotal } = usePlayers();
-  const { settings } = useGlobalSettings();
+  const { settings, playing } = useGlobalSettings();
+  const recentDifferenceTimerRef = useRef<NodeJS.Timeout | undefined>(
+    undefined
+  );

  const [showPlayerMenu, setShowPlayerMenu] = useState(false);
  const [recentDifference, setRecentDifference] = useState(0);
  const [differenceKey, setDifferenceKey] = useState(Date.now());
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  const calcRot = player.isSide
+    ? player.settings.rotation - 180
+    : player.settings.rotation;
+
+  const rotationAngle = isLandscape ? calcRot : calcRot + 90;
+
+  const handlers = useSwipeable({
+    trackMouse: true,
+    onSwipedDown: (e) => {
+      e.event.stopPropagation();
+      setShowPlayerMenu(true);
+    },
+    onSwipedUp: (e) => {
+      e.event.stopPropagation();
+      setShowPlayerMenu(false);
+    },
+
+    swipeDuration: 500,
+    onSwiping: (e) => e.event.stopPropagation(),
+    rotationAngle,
+  });
+  const analytics = useAnalytics();

  useEffect(() => {
-    const timer = setTimeout(() => {
-      setRecentDifference(0);
-    }, 3_000);
+    if (recentDifference === 0) {
+      clearTimeout(recentDifferenceTimerRef.current);
+      return;
+    }

-    return () => clearTimeout(timer);
+    recentDifferenceTimerRef.current = setTimeout(() => {
+      analytics.trackEvent('life_changed', {
+        lifeChangedAmount: recentDifference,
+      });
+      setRecentDifference(0);
+    }, RECENT_DIFFERENCE_TTL);
+
+    return () => {
+      clearTimeout(recentDifferenceTimerRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [recentDifference]);

  useEffect(() => {
-    if (player.showStartingPlayer) {
-      const playingTimer = setTimeout(() => {
-        localStorage.setItem('playing', 'true');
-        player.showStartingPlayer = false;
-        updatePlayer(player);
-      }, 3_000);
+    const resizeObserver = new ResizeObserver(() => {
+      if (document.body.clientWidth > document.body.clientHeight)
+        setIsLandscape(true);
+      else setIsLandscape(false);
+      return () => {
+        // Cleanup: disconnect the ResizeObserver when the component unmounts.
+        resizeObserver.disconnect();
+      };
+    });

-      return () => clearTimeout(playingTimer);
-    }
+    resizeObserver.observe(document.body);
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [player.showStartingPlayer]);
+  }, [document.body.clientHeight, document.body.clientWidth]);

  player.settings.rotation === Rotation.SideFlipped ||
    player.settings.rotation === Rotation.Side;
@@ -113,49 +200,39 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
      ? player.settings.rotation - 90
      : player.settings.rotation;

-  const calcTextRotation =
-    player.settings.rotation === Rotation.SideFlipped ||
-    player.settings.rotation === Rotation.Side
-      ? player.settings.rotation - 180
-      : player.settings.rotation;
+  const amountOfPlayers = opponents.length + 1;

  return (
    <LifeCounterContentWrapper style={{ background: player.color }}>
      <LifeCounterWrapper
        $rotation={player.settings.rotation}
        style={{ rotate: `${calcRotation}deg` }}
+        {...handlers}
      >
-        {settings.showStartingPlayer &&
-          player.isStartingPlayer &&
-          player.showStartingPlayer && (
-            <StartingPlayerNoticeWrapper
-              style={{ rotate: `${calcRotation}deg` }}
-            >
-              <DynamicText
-                style={{
-                  rotate: `${calcTextRotation}deg`,
-                }}
-              >
-                You start!
-              </DynamicText>
-            </StartingPlayerNoticeWrapper>
-          )}
+        {amountOfPlayers > 1 &&
+          !playing &&
+          settings.showStartingPlayer &&
+          player.isStartingPlayer && <StartingPlayerCard player={player} />}

        {player.hasLost && (
          <PlayerLostWrapper $rotation={player.settings.rotation} />
        )}
+
        <CommanderDamageBar
          opponents={opponents}
          player={player}
          key={player.index}
          handleLifeChange={handleLifeChange}
        />
+        {settings.showPlayerMenuCog && (
          <SettingsButton
            onClick={() => {
              setShowPlayerMenu(!showPlayerMenu);
            }}
            rotation={player.settings.rotation}
+            color={player.color}
          />
+        )}
        {playerCanLose(player) && (
          <LoseGameButton
            rotation={player.settings.rotation}
@@ -170,9 +247,12 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
          handleLifeChange={handleLifeChange}
        />
        <ExtraCountersBar player={player} />
-        {showPlayerMenu && (
-          <PlayerMenu player={player} setShowPlayerMenu={setShowPlayerMenu} />
-        )}
+
+        <PlayerMenu
+          isShown={showPlayerMenu}
+          player={player}
+          setShowPlayerMenu={setShowPlayerMenu}
+        />
      </LifeCounterWrapper>
    </LifeCounterContentWrapper>
  );
--- a/src/Components/Misc/InfoModal.tsx
+++ b/src/Components/Misc/InfoModal.tsx
@@ -2,8 +2,9 @@ import { Modal } from '@mui/material';
 import { twc } from 'react-twc';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
+import { Cross } from '../../Icons/generated';

-export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;
+export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`;

 type InfoModalProps = {
  isOpen: boolean;
@@ -12,7 +13,20 @@ type InfoModalProps = {

 export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
  return (
-    <Modal open={isOpen} onClose={closeModal}>
+    <Modal
+      open={isOpen}
+      onClose={closeModal}
+      style={{ display: 'flex', justifyContent: 'center' }}
+    >
+      <>
+        <div className="flex justify-center items-center relative w-full max-w-[532px]">
+          <button
+            onClick={closeModal}
+            className="flex absolute top-12 right-0 z-10 w-10 h-10 bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
+          >
+            <Cross size="16px" className="text-text-primary " />
+          </button>
+        </div>
        <ModalWrapper>
          <div>
            <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
@@ -28,8 +42,8 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
                subtract <strong>1 life</strong>.
              </li>
              <li>
-              <strong>Long press</strong> on a player's + or - button to add or
-              subtract <strong>10 life</strong>.
+                <strong>Long press</strong> on a player's + or - button to add
+                or subtract <strong>10 life</strong>.
              </li>
            </ul>

@@ -47,28 +61,38 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
              </li>
            </ul>

-          <h3 className="text-lg font-bold mb-2">Other</h3>
-          <Paragraph className="mb-4">
-            When a player is <strong>at or below 0 life</strong>, has taken{' '}
-            <strong>21 or more Commander Damage</strong> or has{' '}
-            <strong>10 or more poison counters</strong>, a button with a skull
-            will appear on that player's card. Tapping it will dim the player's
-            card.
+            <h3 className="text-lg font-bold mb-2">Other functionality</h3>
+            <ul className="list-disc ml-6">
+              <li>
+                <Paragraph className="mb-1">
+                  When a player is <strong>at or below 0 life</strong>, has
+                  taken <strong>21 or more Commander Damage</strong> or has{' '}
+                  <strong>10 or more poison counters</strong>, a button with a
+                  skull will appear on that player's card. Tapping it will dim
+                  the player's card.
                </Paragraph>
+              </li>
+              <li>
+                <Paragraph className="mb-4">
+                  Swiping <strong>down</strong> on a player's card will show
+                  that player's settings menu.
+                </Paragraph>
+              </li>
+            </ul>
          </div>
          <div className="text-center mt-4">
-          Visit my
+            Visit my{' '}
            <a
              href="https://github.com/Vikeo/LifeTrinket"
              target="_blank"
              className="text-text-secondary underline"
            >
-            {' '}
-            GitHub{' '}
-          </a>
+              GitHub
+            </a>{' '}
            for more info about this web app.
          </div>
        </ModalWrapper>
+      </>
    </Modal>
  );
 };
--- a/src/Components/Misc/SettingsModal.tsx
+++ b/src/Components/Misc/SettingsModal.tsx
@@ -1,14 +1,16 @@
-import { Button, FormLabel, Modal, Switch } from '@mui/material';
+import { Button, Modal, Switch } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { Cross } from '../../Icons/generated';
+import { PreStartMode } from '../../Types/Settings';
 import { ModalWrapper } from './InfoModal';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
-import { useEffect, useState } from 'react';

-const SettingContainer = twc.div`w-full flex flex-col`;
+const SettingContainer = twc.div`w-full flex flex-col mb-2`;

-const ToggleContainer = twc.div`flex flex-row justify-between items-center`;
+const ToggleContainer = twc.div`flex flex-row justify-between items-center -mb-1`;

 const Container = twc.div`flex flex-col items-center w-full`;

@@ -66,14 +68,70 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
  }, [isOpen]);

  return (
-    <Modal open={isOpen} onClose={closeModal}>
+    <Modal
+      open={isOpen}
+      onClose={closeModal}
+      className="w-full flex justify-center"
+    >
+      <>
+        <div className="flex justify-center items-center relative w-full max-w-[532px]">
+          <button
+            onClick={closeModal}
+            className="flex absolute top-12 right-0 z-10 w-10 h-10 bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
+          >
+            <Cross size="16px" className="text-text-primary " />
+          </button>
+        </div>
        <ModalWrapper>
          <Container>
            <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
+            <SettingContainer>
+              <Paragraph>
+                {/* @ts-expect-error is defined in vite.config.ts*/}
+                Current version: {APP_VERSION}{' '}
+                {isLatestVersion && (
+                  <span className="text-sm text-text-secondary">(latest)</span>
+                )}
+              </Paragraph>
+              {!isLatestVersion && newVersion && (
+                <Paragraph className="text-text-secondary text-lg text-center">
+                  New version ({newVersion}) is available!{' '}
+                </Paragraph>
+              )}
+            </SettingContainer>
+            {!isLatestVersion && newVersion && (
+              <Button
+                variant="contained"
+                style={{ marginTop: '0.25rem', marginBottom: '0.25rem' }}
+                onClick={() => window?.location?.reload()}
+              >
+                <span>Update</span>
+                <span className="text-xs">&nbsp;(reload app)</span>
+              </Button>
+            )}
            <Separator height="1px" />
+
            <SettingContainer>
              <ToggleContainer>
-              <FormLabel>Show Start Player</FormLabel>
+                <label>Show Player Menu Cog</label>
+                <Switch
+                  checked={settings.showPlayerMenuCog}
+                  onChange={() => {
+                    setSettings({
+                      ...settings,
+                      showPlayerMenuCog: !settings.showPlayerMenuCog,
+                    });
+                  }}
+                />
+              </ToggleContainer>
+              <Description>
+                A cog on the top right of each player's card will be shown if
+                this is enabled.
+              </Description>
+            </SettingContainer>
+            <SettingContainer>
+              <ToggleContainer>
+                <label>Show Start Player</label>
                <Switch
                  checked={settings.showStartingPlayer}
                  onChange={() => {
@@ -85,28 +143,82 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                />
              </ToggleContainer>
              <Description>
-              On start or reset of game, will pick a random player who will
-              start first if this is enabled.
+                On start or reset of game, will pick a random starting player,
+                according to the <b>Pre-Start mode</b>
              </Description>
            </SettingContainer>
+            <SettingContainer>
+              <div className="flex flex-row justify-between items-center mb-1">
+                <label htmlFor="pre-start-modes">Pre-Start mode</label>
+                <select
+                  name="pre-start-modes"
+                  id="pre-start-modes"
+                  value={settings.preStartMode}
+                  className="bg-primary-main border-none outline-none text-text-primary rounded-md p-1 text-xs disabled:bg-primary-dark"
+                  onChange={(e) => {
+                    setSettings({
+                      ...settings,
+                      preStartMode: e.target.value as PreStartMode,
+                    });
+                  }}
+                  disabled={!settings.showStartingPlayer}
+                >
+                  <option value={PreStartMode.None}>None</option>
+                  <option value={PreStartMode.RandomKing}>Random King</option>
+                  <option value={PreStartMode.FingerGame}>Finger Game</option>
+                </select>
+              </div>
+              <div className="text-xs text-left text-text-secondary">
+                Different ways to determine the starting player before the game
+                starts.
+              </div>
+
+              {settings.preStartMode === PreStartMode.None && (
+                <div className="text-xs text-left text-text-secondary mt-1">
+                  <span className="text-text-primary">None:</span> The starting
+                  player will simply be shown.
+                </div>
+              )}
+              {settings.preStartMode === PreStartMode.RandomKing && (
+                <div className="text-xs text-left text-text-secondary mt-1">
+                  <span className="text-text-primary">Random King:</span>{' '}
+                  Randomly pass a crown between all players, press the screen to
+                  stop it. The player who has the crown when it stops gets to
+                  start.
+                </div>
+              )}
+              {settings.preStartMode === PreStartMode.FingerGame && (
+                <div className="text-xs text-left text-text-secondary mt-1">
+                  <span className="text-text-primary">Finger Game:</span> All
+                  players put a finger on the screen, one will be chosen at
+                  random.
+                </div>
+              )}
+            </SettingContainer>
            <SettingContainer>
              <ToggleContainer>
-              <FormLabel>Keep Awake</FormLabel>
+                <label>Keep Awake</label>
                <Switch
                  checked={settings.keepAwake}
                  onChange={() => {
-                  setSettings({ ...settings, keepAwake: !settings.keepAwake });
+                    setSettings({
+                      ...settings,
+                      keepAwake: !settings.keepAwake,
+                    });
                  }}
                />
              </ToggleContainer>
              <Description>
-              Will prevent device from going to sleep while this app is open if
-              this is enabled.
+                Will prevent device from going to sleep while this app is open
+                if this is enabled.
              </Description>
            </SettingContainer>
            <SettingContainer>
              <ToggleContainer>
-              <FormLabel>Go fullscreen on start (Android only)</FormLabel>
+                <label>
+                  Fullscreen on start{' '}
+                  <span className="text-xs">(Android only)</span>
+                </label>
                <Switch
                  checked={settings.goFullscreenOnStart}
                  onChange={() => {
@@ -135,38 +247,13 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                    </Paragraph>
                  </ToggleContainer>
                  <Description className="mt-1">
-                  If you do, this app will work offline and the toolbar will be
-                  automatically hidden.
+                    If you do, this app will work offline and the toolbar will
+                    be automatically hidden.
                  </Description>
                </SettingContainer>
              </>
            )}
            <Separator height="1px" />
-          <SettingContainer>
-            <Paragraph>
-              {/* @ts-expect-error is defined in vite.config.ts*/}
-              Current version: {APP_VERSION}{' '}
-              {isLatestVersion && (
-                <span className="text-sm text-text-secondary">(latest)</span>
-              )}
-            </Paragraph>
-            {!isLatestVersion && newVersion && (
-              <Paragraph className="text-text-secondary text-lg text-center">
-                New version ({newVersion}) is available!{' '}
-              </Paragraph>
-            )}
-          </SettingContainer>
-          {!isLatestVersion && newVersion && (
-            <Button
-              variant="contained"
-              style={{ marginTop: '0.25rem', marginBottom: '0.25rem' }}
-              onClick={() => window?.location?.reload()}
-            >
-              <span>Update</span>
-              <span className="text-xs">&nbsp;(reload app)</span>
-            </Button>
-          )}
-          <Separator height="1px" />

            <Button
              variant="contained"
@@ -177,6 +264,7 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
            </Button>
          </Container>
        </ModalWrapper>
+      </>
    </Modal>
  );
 };
--- a/src/Components/Players/PlayerMenu.tsx
+++ b/src/Components/Players/PlayerMenu.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { useRef } from 'react';
 import { twc } from 'react-twc';
 import { theme } from '../../Data/theme';
@@ -17,12 +17,7 @@ import {
  ResetGame,
 } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
-import {
-  RotationButtonProps,
-  RotationDivProps,
-} from '../Buttons/CommanderDamage';
-
-const CheckboxContainer = twc.div``;
+import { RotationDivProps } from '../Buttons/CommanderDamage';

 const PlayerMenuWrapper = twc.div`
  flex
@@ -31,10 +26,12 @@ const PlayerMenuWrapper = twc.div`
  w-full
  h-full
  bg-background-settings
+  backdrop-blur-[3px]
  items-center
  justify-center
  z-[2]
  webkit-user-select-none
+  transition-all
 `;

 const BetterRowContainer = twc.div`
@@ -43,75 +40,77 @@ const BetterRowContainer = twc.div`
  flex-grow
  w-full
  h-full
-  justify-end
+  justify-between
  items-stretch
 `;

 const TogglesSection = twc.div`
  flex
-  relative
  flex-row
-  gap-2
+  flex-wrap
+  relative
+  h-full
  justify-evenly
+  items-center
 `;

 const ButtonsSections = twc.div`
  flex
  max-w-full
-  gap-4
-  justify-between
-  p-[3%]
+  justify-evenly
  items-center
+  flex-wrap
+  mt-0
+  px-2
 `;

-const ColorPicker = twc.input`
-  absolute
-  top-[5%]
-  left-[5%]
+const ColorPickerButton = twc.div`
  h-[8vmax]
  w-[8vmax]
-  border-none
-  outline-none
+  relative
+  max-h-12
+  max-w-12
+  rounded-full
  cursor-pointer
-  bg-transparent
-  user-select-none
-  text-common-white
+  overflow-hidden
 `;

 const SettingsContainer = twc.div<RotationDivProps>((props) => [
-  'flex flex-wrap h-full w-full',
+  'flex flex-wrap h-full w-full overflow-y-scroll',
  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
    ? 'flex-col'
    : 'flex-row',
 ]);

-const CloseButton = twc.button<RotationButtonProps>((props) => [
-  'absolute border-none outline-none cursor-pointer bg-transparent z-[99]',
-  props.$rotation === Rotation.Side
-    ? `top-[5%] right-auto left-[5%]`
-    : props.$rotation === Rotation.SideFlipped
-    ? 'top-auto left-auto bottom-[5%] right-[5%]'
-    : 'top-[15%] right-[5%]',
-]);
-
 type PlayerMenuProps = {
  player: Player;
  setShowPlayerMenu: (showPlayerMenu: boolean) => void;
+  isShown: boolean;
 };

-const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
+const PlayerMenu = ({
+  player,
+  setShowPlayerMenu,
+  isShown,
+}: PlayerMenuProps) => {
  const settingsContainerRef = useRef<HTMLDivElement | null>(null);
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
+  const endGameDialogRef = useRef<HTMLDialogElement | null>(null);

  const { isSide } = useSafeRotate({
    rotation: player.settings.rotation,
    containerRef: settingsContainerRef,
  });

-  const handleOnClick = () => {
-    setShowPlayerMenu(false);
-  };
-  const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
+  const {
+    fullscreen,
+    wakeLock,
+    goToStart,
+    settings,
+    setPlaying,
+    setRandomizingPlayer,
+  } = useGlobalSettings();
+
  const { updatePlayer, resetCurrentGame } = usePlayers();

  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -129,6 +128,13 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
  const handleResetGame = () => {
    resetCurrentGame();
    setShowPlayerMenu(false);
+    setPlaying(false);
+    setRandomizingPlayer(true);
+  };
+
+  const handleGoToStart = () => {
+    goToStart();
+    setRandomizingPlayer(true);
  };

  const toggleFullscreen = () => {
@@ -142,7 +148,6 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
  const buttonFontSize = isSide ? '1.5vmax' : '3vmin';
  const iconSize = isSide ? '6vmin' : '3vmax';
  const extraCountersSize = isSide ? '8vmin' : '4vmax';
-  const closeButtonSize = isSide ? '6vmin' : '3vmax';

  const calcRotation =
    player.settings.rotation === Rotation.Side
@@ -156,33 +161,10 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
      //TODO: Fix hacky solution to rotation for SideFlipped
      style={{
        rotate:
-          player.settings.rotation === Rotation.SideFlipped ? '180deg' : '',
+          player.settings.rotation === Rotation.SideFlipped ? `180deg` : '',
+        translate: isShown ? '' : player.isSide ? `-100%` : `0 -100%`,
      }}
    >
-      <CloseButton
-        $rotation={player.settings.rotation}
-        style={{
-          rotate:
-            player.settings.rotation === Rotation.Side ||
-            player.settings.rotation === Rotation.SideFlipped
-              ? `${player.settings.rotation - 180}deg`
-              : '',
-        }}
-      >
-        <Button
-          variant="text"
-          onClick={handleOnClick}
-          style={{
-            margin: 0,
-            padding: 0,
-            height: closeButtonSize,
-            width: closeButtonSize,
-          }}
-        >
-          <Cross size={closeButtonSize} />
-        </Button>
-      </CloseButton>
-
      <SettingsContainer
        $rotation={player.settings.rotation}
        style={{
@@ -190,17 +172,25 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
        }}
        ref={settingsContainerRef}
      >
-        <ColorPicker
-          type="color"
-          value={player.color}
-          onChange={handleColorChange}
-          role="button"
-          aria-label="Color picker"
-        />
+        <button
+          onClick={() => setShowPlayerMenu(false)}
+          className="flex absolute top-0 right-2 z-10 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2 p-[0.2rem]"
+        >
+          <Cross size={buttonFontSize} className="text-primary-main " />
+        </button>
+
        <BetterRowContainer>
          <TogglesSection>
+            <ColorPickerButton aria-label="Color picker">
+              <input
+                onChange={handleColorChange}
+                type="color"
+                className="size-[200%] absolute -left-2 -top-2"
+                value={player.color}
+              />
+            </ColorPickerButton>
            {player.settings.useCommanderDamage && (
-              <CheckboxContainer>
+              <div>
                <Checkbox
                  name="usePartner"
                  checked={player.settings.usePartner}
@@ -225,10 +215,9 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
                  aria-checked={player.settings.usePartner}
                  aria-label="Partner"
                />
-              </CheckboxContainer>
+              </div>
            )}
-
-            <CheckboxContainer>
+            <div>
              <Checkbox
                name="usePoison"
                checked={player.settings.usePoison}
@@ -253,9 +242,8 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
                aria-checked={player.settings.usePoison}
                aria-label="Poison"
              />
-            </CheckboxContainer>
-
-            <CheckboxContainer>
+            </div>
+            <div>
              <Checkbox
                name="useEnergy"
                checked={player.settings.useEnergy}
@@ -280,9 +268,8 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
                aria-checked={player.settings.useEnergy}
                aria-label="Energy"
              />
-            </CheckboxContainer>
-
-            <CheckboxContainer>
+            </div>
+            <div>
              <Checkbox
                name="useExperience"
                checked={player.settings.useExperience}
@@ -307,21 +294,22 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
                aria-checked={player.settings.useExperience}
                aria-label="Experience"
              />
-            </CheckboxContainer>
+            </div>
          </TogglesSection>
-          <ButtonsSections className="mt-4">
-            <Button
-              variant="text"
-              style={{
-                cursor: 'pointer',
-                userSelect: 'none',
-              }}
-              onClick={goToStart}
+          <ButtonsSections>
+            <button
+              className="text-primary-main cursor-pointer webkit-user-select-none"
+              onClick={() => endGameDialogRef.current?.show()}
              aria-label="Back to start"
            >
              <Exit size={iconSize} style={{ rotate: '180deg' }} />
-            </Button>
-            <CheckboxContainer>
+            </button>
+            <div
+              data-fullscreen={document.fullscreenElement ? true : false}
+              className="flex
+                data-[fullscreen=true]:bg-secondary-dark rounded-lg border border-transparent
+              data-[fullscreen=true]:border-primary-main"
+            >
              <Checkbox
                name="fullscreen"
                checked={document.fullscreenElement ? true : false}
@@ -336,63 +324,114 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
                role="checkbox"
                aria-checked={document.fullscreenElement ? true : false}
                aria-label="Fullscreen"
+                style={{ padding: '4px' }}
              />
-            </CheckboxContainer>
+            </div>

-            <Button
-              variant={wakeLock.active ? 'contained' : 'outlined'}
+            <button
+              data-wake-lock-active={settings.keepAwake}
              style={{
-                cursor: 'pointer',
-                userSelect: 'none',
                fontSize: buttonFontSize,
-                padding: '0 4px 0 4px',
              }}
-              onClick={wakeLock.toggleWakeLock}
+              className="text-primary-main px-1 webkit-user-select-none cursor-pointer 
+              data-[wake-lock-active=true]:bg-secondary-dark rounded-lg border border-transparent
+              data-[wake-lock-active=true]:border-primary-main
+              "
+              onClick={() => {
+                wakeLock.toggleWakeLock();
+              }}
              role="checkbox"
-              aria-checked={wakeLock.active}
+              aria-checked={settings.keepAwake}
              aria-label="Keep awake"
            >
              Keep Awake
-            </Button>
+            </button>

-            <Button
+            <button
              style={{
                cursor: 'pointer',
                userSelect: 'none',
                fontSize: buttonFontSize,
-                padding: '4px',
+                padding: '2px',
              }}
-              onClick={() => dialogRef.current?.show()}
+              className="text-primary-main"
+              onClick={() => resetGameDialogRef.current?.show()}
              role="checkbox"
-              aria-checked={wakeLock.active}
              aria-label="Reset Game"
            >
              <ResetGame size={iconSize} />
-            </Button>
+            </button>
          </ButtonsSections>
        </BetterRowContainer>
+
        <dialog
-          ref={dialogRef}
-          className="z-[9999] min-h-2/4 bg-background-default text-text-primary rounded-2xl border-none absolute top-[10%]"
+          ref={resetGameDialogRef}
+          className="z-[999] size-full bg-background-settings overflow-y-scroll"
+          onClick={() => resetGameDialogRef.current?.close()}
        >
-          <div className="h-full flex flex-col p-4 gap-2">
-            <h1 className="text-center">Reset Game?</h1>
-            <div className="flex justify-evenly gap-4">
-              <Button
-                variant="contained"
-                onClick={() => dialogRef.current?.close()}
+          <div className="flex size-full items-center justify-center">
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
+              <h1
+                className="text-center text-text-primary"
+                style={{ fontSize: extraCountersSize }}
+              >
+                Reset Game?
+              </h1>
+              <div className="flex justify-evenly gap-2">
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  style={{ fontSize: iconSize }}
+                  onClick={() => resetGameDialogRef.current?.close()}
                >
                  No
-              </Button>
-              <Button
-                variant="contained"
+                </button>
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
                  onClick={() => {
                    handleResetGame();
-                  dialogRef.current?.close();
+                    resetGameDialogRef.current?.close();
                  }}
+                  style={{ fontSize: iconSize }}
                >
                  Yes
-              </Button>
+                </button>
+              </div>
+            </div>
+          </div>
+        </dialog>
+
+        <dialog
+          ref={endGameDialogRef}
+          className="z-[999] size-full bg-background-settings overflow-y-scroll"
+          onClick={() => endGameDialogRef.current?.close()}
+        >
+          <div className="flex size-full items-center justify-center">
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-xl border-none">
+              <h1
+                className="text-center text-text-primary"
+                style={{ fontSize: extraCountersSize }}
+              >
+                End Game?
+              </h1>
+              <div className="flex justify-evenly gap-2">
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  style={{ fontSize: iconSize }}
+                  onClick={() => endGameDialogRef.current?.close()}
+                >
+                  No
+                </button>
+                <button
+                  className="bg-primary-main border border-primary-dark text-text-primary rounded-lg flex-grow"
+                  onClick={() => {
+                    handleGoToStart();
+                    endGameDialogRef.current?.close();
+                  }}
+                  style={{ fontSize: iconSize }}
+                >
+                  Yes
+                </button>
+              </div>
            </div>
          </div>
        </dialog>
--- a/src/Components/Players/Players.tsx
+++ b/src/Components/Players/Players.tsx
@@ -1,6 +1,8 @@
-import LifeCounter from '../LifeCounter/LifeCounter';
-import { Player as PlayerType } from '../../Types/Player';
 import { twc } from 'react-twc';
+import { usePlayers } from '../../Hooks/usePlayers';
+import { Player as PlayerType } from '../../Types/Player';
+import LifeCounter from '../LifeCounter/LifeCounter';
+import { GridLayout } from '../Views/Play';

 const getGridArea = (player: PlayerType) => {
  switch (player.index) {
@@ -21,15 +23,16 @@ const getGridArea = (player: PlayerType) => {
  }
 };

-const PlayerWrapper = twc.div`w-full h-full bg-black`;
+const PlayersWrapper = twc.div`w-full h-full bg-black`;
+
+export const Players = ({ gridLayout }: { gridLayout: GridLayout }) => {
+  const { players } = usePlayers();

-export const Player = (players: PlayerType[], gridClasses: string) => {
  return (
-    <PlayerWrapper>
-      <div className={`grid w-full h-full gap-1 box-border ${gridClasses} `}>
+    <PlayersWrapper>
+      <div className={`grid w-full h-full gap-1 box-border ${gridLayout} `}>
        {players.map((player) => {
          const gridArea = getGridArea(player);
-
          return (
            <div
              key={player.index}
@@ -45,6 +48,6 @@ export const Player = (players: PlayerType[], gridClasses: string) => {
          );
        })}
      </div>
-    </PlayerWrapper>
+    </PlayersWrapper>
  );
 };
--- a/src/Components/PreStartGame/Games/FingerGame.tsx
+++ b/src/Components/PreStartGame/Games/FingerGame.tsx
@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from 'react';
+import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../../Hooks/usePlayers';
+
+type TouchPoint = {
+  x: number;
+  y: number;
+  id: number;
+};
+
+const getOrientation = () => {
+  return window.matchMedia('(orientation: portrait)').matches
+    ? 'portrait'
+    : 'landscape';
+};
+
+export const FingerGame = () => {
+  const { players } = usePlayers();
+
+  const aboutToStartTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const selectingPlayerTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [touchPoints, setTouchPoints] = useState<TouchPoint[]>([]);
+  const [selectedTouchPoint, setSelectedTouchPoint] = useState<
+    TouchPoint | undefined
+  >();
+  const [timerStarted, setTimerStarted] = useState(false);
+
+  const { setPlaying, goToStart } = useGlobalSettings();
+
+  useEffect(() => {
+    //Start playing when someone is selected and any touch point is released
+    if (selectedTouchPoint && touchPoints.length !== players.length) {
+      aboutToStartTimerRef.current = setTimeout(() => {
+        setSelectedTouchPoint(undefined);
+        setPlaying(true);
+      }, 500);
+
+      setTimerStarted(true);
+      return;
+    }
+
+    // If no touch point is selected, select one with a delay
+    if (touchPoints.length === players.length && !selectedTouchPoint) {
+      selectingPlayerTimerRef.current = setTimeout(() => {
+        const randomIndex = Math.floor(Math.random() * touchPoints.length);
+        const randomTouchPoint = touchPoints[randomIndex];
+        setSelectedTouchPoint(randomTouchPoint);
+      }, 250);
+      return;
+    }
+
+    if (selectingPlayerTimerRef.current) {
+      clearTimeout(selectingPlayerTimerRef.current);
+    }
+
+    return () => {
+      if (aboutToStartTimerRef.current) {
+        clearTimeout(aboutToStartTimerRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [touchPoints, players.length]);
+
+  const handleOnTouchStart = (e: React.TouchEvent) => {
+    if (selectedTouchPoint) {
+      return;
+    }
+    //Get the first touch point id that isn't already in the touchPoints array
+    const touch = Array.from(e.changedTouches).find(
+      (t) => !touchPoints.find((p) => p.id === t.identifier)
+    );
+
+    if (!touch) {
+      console.error('No touch found');
+      return;
+    }
+
+    let { clientX, clientY } = touch;
+
+    // Adjust coordinates for portrait mode
+    if (getOrientation() === 'portrait') {
+      const tempX = clientX;
+      clientX = clientY;
+      clientY = window.innerWidth - tempX;
+    }
+
+    const newTouchPoints = {
+      x: clientX,
+      y: clientY,
+      id: touch.identifier,
+    };
+
+    setTouchPoints([...touchPoints, newTouchPoints]);
+  };
+
+  const handleOnTouchEnd = (e: React.TouchEvent) => {
+    if (selectedTouchPoint) {
+      aboutToStartTimerRef.current = setTimeout(() => {
+        setSelectedTouchPoint(undefined);
+        setPlaying(true);
+      }, 500);
+      setTimerStarted(true);
+      return;
+    }
+
+    // Get the touch point that was just released
+    const touch = e.changedTouches[e.changedTouches.length - 1];
+
+    // Get the index of the touch point that was just released
+    const index = touchPoints.findIndex((p) => p.id === touch.identifier);
+
+    // Remove the touch point that was just released
+    setTouchPoints([
+      ...touchPoints.slice(0, index),
+      ...touchPoints.slice(index + 1),
+    ]);
+  };
+
+  return (
+    <div
+      className="absolute flex justify-center items-center w-full h-full portrait:h-[100dvw] portrait:w-[100dvh] z-50 bg-secondary-main overflow-hidden"
+      onTouchStart={handleOnTouchStart}
+      onTouchEnd={handleOnTouchEnd}
+
+      // FIXEME: This code is not performant, but updates a touch point's position when it moves
+      // onTouchMove={(e) => {
+      //   e.preventDefault();
+
+      //   // Get the touch point that was just moved
+      //   const touch = Array.from(e.changedTouches).find((t) =>
+      //     touchPoints.find((p) => p.id === t.identifier)
+      //   );
+
+      //   if (!touch) {
+      //     console.error('No touch found');
+      //     return;
+      //   }
+
+      //   let { clientX, clientY } = touch;
+
+      //   // Adjust coordinates for portrait mode
+      //   if (getOrientation() === 'portrait') {
+      //     const tempX = clientX;
+      //     clientX = clientY;
+      //     clientY = window.innerWidth - tempX;
+      //   }
+
+      //   // Get the index of the touch point that was just moved
+      //   const index = touchPoints.findIndex(
+      //     (p) => p.id === touch.identifier
+      //   );
+
+      //   // Update the touch point that was just moved
+      //   setTouchPoints([
+      //     ...touchPoints.slice(0, index),
+      //     { x: clientX, y: clientY, id: touch.identifier },
+      //     ...touchPoints.slice(index + 1),
+      //   ]);
+      // }}
+    >
+      <button
+        className="absolute flex top-4 left-4 rounded-lg px-2 py-1 justify-center bg-primary-main text-text-primary text-xs"
+        onClick={goToStart}
+      >
+        <div className="text-xl leading-4">{'<'}&nbsp;</div>
+        Back
+      </button>
+      {touchPoints.length !== players.length && (
+        <div className="flex flex-col items-center text-[13vmin] whitespace-nowrap pointer-events-none webkit-user-select-none">
+          Waiting for fingers <br />
+          <div className="tabular-nums">
+            {touchPoints.length}/{players.length}
+          </div>
+        </div>
+      )}
+
+      {touchPoints.map((point, index) => (
+        <div
+          key={`touch-point-${index}`}
+          data-is-selected={selectedTouchPoint?.id === point.id}
+          data-unloading={timerStarted}
+          className="absolute rounded-full translate-x-[-50%] translate-y-[-50%] transition-all duration-1000
+              h-[75px] w-[75px]
+              data-[unloading=false]:data-[is-selected=true]:h-[250px] data-[unloading=false]:data-[is-selected=true]:w-[250px]
+              data-[unloading=true]:h-[0px] data-[unloading=true]:w-[0px] data-[unloading=true]:duration-[400ms]
+              pointer-events-none
+              "
+          style={{
+            left: point.x,
+            top: point.y,
+            backgroundColor: players[index]?.color ?? 'red',
+          }}
+        />
+      ))}
+    </div>
+  );
+};
--- a/src/Components/PreStartGame/Games/RandomKing/RandomKingPlayers.tsx
+++ b/src/Components/PreStartGame/Games/RandomKing/RandomKingPlayers.tsx
@@ -0,0 +1,49 @@
+import { usePlayers } from '../../../../Hooks/usePlayers';
+import { Player } from '../../../../Types/Player';
+import { GridLayout } from '../../../Views/Play';
+import { RoulettePlayerCard } from './RoulettePlayerCard';
+
+const getGridArea = (player: Player) => {
+  switch (player.index) {
+    case 0:
+      return 'grid-in-player0';
+    case 1:
+      return 'grid-in-player1';
+    case 2:
+      return 'grid-in-player2';
+    case 3:
+      return 'grid-in-player3';
+    case 4:
+      return 'grid-in-player4';
+    case 5:
+      return 'grid-in-player5';
+    default:
+      throw new Error('Invalid player index');
+  }
+};
+
+export const RandomKingPlayers = ({
+  gridLayout,
+}: {
+  gridLayout: GridLayout;
+}) => {
+  const { players } = usePlayers();
+
+  return (
+    <div className="w-full h-full bg-black">
+      <div className={`grid w-full h-full gap-1 box-border ${gridLayout} `}>
+        {players.map((player) => {
+          const gridArea = getGridArea(player);
+          return (
+            <div
+              key={player.index}
+              className={`flex justify-center items-center align-middle ${gridArea}`}
+            >
+              <RoulettePlayerCard player={player} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
--- a/src/Components/PreStartGame/Games/RandomKing/RandomKingSelectWrapper.tsx
+++ b/src/Components/PreStartGame/Games/RandomKing/RandomKingSelectWrapper.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useRef } from 'react';
+import { useGlobalSettings } from '../../../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../../../Hooks/usePlayers';
+
+export const RandomKingSelectWrapper = () => {
+  const { setRandomizingPlayer } = useGlobalSettings();
+
+  const randomIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const prevRandomIndexRef = useRef<number>(-1);
+
+  const { settings, randomizingPlayer, setPreStartCompleted } =
+    useGlobalSettings();
+
+  const { players, setPlayers } = usePlayers();
+
+  useEffect(() => {
+    if (
+      players.length > 1 &&
+      settings.showStartingPlayer &&
+      randomizingPlayer
+    ) {
+      randomIntervalRef.current = setInterval(() => {
+        let randomIndex: number;
+
+        do {
+          randomIndex = Math.floor(Math.random() * players.length);
+        } while (randomIndex === prevRandomIndexRef.current);
+
+        prevRandomIndexRef.current = randomIndex;
+        setPlayers(
+          players.map((p) =>
+            p.index === prevRandomIndexRef.current
+              ? {
+                  ...p,
+                  isStartingPlayer: true,
+                }
+              : {
+                  ...p,
+                  isStartingPlayer: false,
+                }
+          )
+        );
+      }, 100);
+    }
+
+    const randomPlayerIndex = Math.floor(Math.random() * players.length);
+    setPlayers(
+      players.map((p) =>
+        p.index === randomPlayerIndex
+          ? {
+              ...p,
+              isStartingPlayer: true,
+            }
+          : {
+              ...p,
+              isStartingPlayer: false,
+            }
+      )
+    );
+
+    return () => {
+      if (randomIntervalRef.current) {
+        clearInterval(randomIntervalRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [players.length, setPlayers, randomizingPlayer]);
+
+  const gradientColors = players.map((player) => player.color).join(', ');
+
+  return (
+    <div
+      className="absolute flex justify-center items-center h-screen w-screen portrait:h-[100vw] portrait:w-[100vh] z-40 cursor-pointer text-5xl"
+      onClick={() => {
+        if (randomIntervalRef.current) {
+          clearInterval(randomIntervalRef.current);
+          randomIntervalRef.current = null;
+        }
+        setRandomizingPlayer(false);
+        setPreStartCompleted(true);
+      }}
+    >
+      <div className="absolute flex top-[30%] justify-center items-center px-8 py-4">
+        <div
+          className="absolute size-full blur-[3px] rounded-2xl opacity-90 saturate-150"
+          style={{
+            backgroundImage: `linear-gradient(60deg, ${gradientColors})`,
+          }}
+        />
+        <p className="relative z-10 text-[5vmax]">PRESS TO SELECT PLAYER</p>
+      </div>
+    </div>
+  );
+};
--- a/src/Components/PreStartGame/Games/RandomKing/RoulettePlayerCard.tsx
+++ b/src/Components/PreStartGame/Games/RandomKing/RoulettePlayerCard.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react';
+import { useGlobalSettings } from '../../../../Hooks/useGlobalSettings';
+import { Player, Rotation } from '../../../../Types/Player';
+import { Paragraph } from '../../../Misc/TextComponents';
+import { DynamicText } from '../../StartingPlayerCard';
+
+export const RoulettePlayerCard = ({ player }: { player: Player }) => {
+  const startPlayingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const { settings, randomizingPlayer, playing, setPlaying } =
+    useGlobalSettings();
+
+  useEffect(() => {
+    if (
+      player.isStartingPlayer &&
+      ((!playing && randomizingPlayer) || !playing)
+    ) {
+      startPlayingTimerRef.current = setTimeout(() => {
+        setPlaying(true);
+      }, 10_000);
+    }
+
+    return () => clearTimeout(startPlayingTimerRef.current);
+  }, [
+    player.isStartingPlayer,
+    playing,
+    setPlaying,
+    settings.preStartMode,
+    randomizingPlayer,
+  ]);
+
+  const calcTextRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 180
+      : player.settings.rotation;
+
+  return (
+    <div className="relative flex flex-grow flex-col items-center w-full h-full overflow-hidden">
+      <div
+        className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
+        style={{ backgroundColor: player.color }}
+      >
+        {player.isStartingPlayer && (
+          <DynamicText
+            style={{
+              rotate: `${calcTextRotation}deg`,
+            }}
+          >
+            <div className="flex flex-col justify-center items-center">
+              <Paragraph>👑</Paragraph>
+            </div>
+          </DynamicText>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/src/Components/PreStartGame/PreStart.tsx
+++ b/src/Components/PreStartGame/PreStart.tsx
@@ -0,0 +1,30 @@
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { PreStartMode } from '../../Types/Settings';
+import { GridLayout } from '../Views/Play';
+import { FingerGame } from './Games/FingerGame';
+import { RandomKingPlayers } from './Games/RandomKing/RandomKingPlayers';
+import { RandomKingSelectWrapper } from './Games/RandomKing/RandomKingSelectWrapper';
+
+export const PreStart = ({ gridLayout }: { gridLayout: GridLayout }) => {
+  const { settings, randomizingPlayer, goToStart } = useGlobalSettings();
+
+  if (settings.preStartMode === PreStartMode.RandomKing) {
+    if (!randomizingPlayer) {
+      return null;
+    }
+
+    return (
+      <>
+        <RandomKingSelectWrapper />
+        <RandomKingPlayers gridLayout={gridLayout} />
+      </>
+    );
+  }
+
+  if (settings.preStartMode === PreStartMode.FingerGame) {
+    return <FingerGame />;
+  }
+
+  goToStart();
+  return null;
+};
--- a/src/Components/PreStartGame/StartingPlayerCard.tsx
+++ b/src/Components/PreStartGame/StartingPlayerCard.tsx
@@ -0,0 +1,60 @@
+import { twc } from 'react-twc';
+import { baseColors } from '../../../tailwind.config';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { Player, Rotation } from '../../Types/Player';
+import { PreStartMode } from '../../Types/Settings';
+import { Paragraph } from '../Misc/TextComponents';
+
+export const DynamicText = twc.div`text-[8vmin] whitespace-nowrap`;
+
+export const StartingPlayerCard = ({ player }: { player: Player }) => {
+  const { settings, setPlaying, randomizingPlayer } = useGlobalSettings();
+
+  const calcTextRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 180
+      : player.settings.rotation;
+
+  const calcRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 90
+      : player.settings.rotation;
+
+  return (
+    <div
+      className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
+      style={{
+        rotate: `${calcRotation}deg`,
+        backgroundImage:
+          !randomizingPlayer ||
+          (settings.preStartMode !== PreStartMode.None &&
+            settings.preStartMode !== PreStartMode.FingerGame)
+            ? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
+            : 'none',
+      }}
+      onClick={() => {
+        setPlaying(true);
+      }}
+    >
+      <DynamicText
+        style={{
+          rotate: `${calcTextRotation}deg`,
+        }}
+      >
+        <div className="flex flex-col justify-center items-center">
+          <Paragraph>👑</Paragraph>
+          {(!randomizingPlayer ||
+            (settings.preStartMode !== PreStartMode.None &&
+              settings.preStartMode !== PreStartMode.FingerGame)) && (
+            <>
+              <Paragraph>You start!</Paragraph>
+              <Paragraph className="text-xl">(Press to hide)</Paragraph>
+            </>
+          )}
+        </div>
+      </DynamicText>
+    </div>
+  );
+};
--- a/src/Components/Views/Play.tsx
+++ b/src/Components/Views/Play.tsx
@@ -1,67 +1,115 @@
+import { useEffect } from 'react';
+import { twc } from 'react-twc';
+import { twGridTemplateAreas } from '../../../tailwind.config';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
-import { Orientation } from '../../Types/Settings';
-import { Player } from '../Player/Player';
-import { twc } from 'react-twc';
+import { Orientation, PreStartMode } from '../../Types/Settings';
+import { Players } from '../Players/Players';
+import { PreStart } from '../PreStartGame/PreStart';

-const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden`;
+const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden, setPlayers`;
+
+type GridTemplateAreasKeys = keyof typeof twGridTemplateAreas;
+
+export type GridLayout = `grid-areas-${GridTemplateAreasKeys}`;

 export const Play = () => {
-  const { players } = usePlayers();
-  const { initialGameSettings } = useGlobalSettings();
+  const { players, setPlayers } = usePlayers();
+  const { initialGameSettings, playing, settings, preStartCompleted } =
+    useGlobalSettings();

-  let Layout: JSX.Element;
+  let gridLayout: GridLayout;
  switch (players.length) {
    case 1:
      if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Player(players, 'grid-areas-onePlayerPortrait');
+        gridLayout = 'grid-areas-onePlayerPortrait';
      }
-      Layout = Player(players, 'grid-areas-onePlayerLandscape');
+      gridLayout = 'grid-areas-onePlayerLandscape';
      break;
    case 2:
      switch (initialGameSettings?.orientation) {
        case Orientation.Portrait:
-          Layout = Player(players, 'grid-areas-twoPlayersOppositePortrait');
+          gridLayout = 'grid-areas-twoPlayersOppositePortrait';
          break;
        default:
        case Orientation.Landscape:
-          Layout = Player(players, 'grid-areas-twoPlayersSameSideLandscape');
+          gridLayout = 'grid-areas-twoPlayersSameSideLandscape';
          break;
        case Orientation.OppositeLandscape:
-          Layout = Player(players, 'grid-areas-twoPlayersOppositeLandscape');
+          gridLayout = 'grid-areas-twoPlayersOppositeLandscape';
          break;
      }
      break;
    case 3:
      if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Player(players, 'grid-areas-threePlayersSide');
+        gridLayout = 'grid-areas-threePlayersSide';
        break;
      }
-      Layout = Player(players, 'grid-areas-threePlayers');
+      gridLayout = 'grid-areas-threePlayers';
      break;
    default:
    case 4:
      if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Player(players, 'grid-areas-fourPlayerPortrait');
+        gridLayout = 'grid-areas-fourPlayerPortrait';
        break;
      }
-      Layout = Player(players, 'grid-areas-fourPlayer');
+      gridLayout = 'grid-areas-fourPlayer';
      break;
    case 5:
      if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Player(players, 'grid-areas-fivePlayersSide');
+        gridLayout = 'grid-areas-fivePlayersSide';
        break;
      }
-      Layout = Player(players, 'grid-areas-fivePlayers');
+      gridLayout = 'grid-areas-fivePlayers';
      break;
    case 6:
      if (initialGameSettings?.orientation === Orientation.Portrait) {
-        Layout = Player(players, 'grid-areas-sixPlayersSide');
+        gridLayout = 'grid-areas-sixPlayersSide';
        break;
      }
-      Layout = Player(players, 'grid-areas-sixPlayers');
+      gridLayout = 'grid-areas-sixPlayers';
      break;
  }

-  return <MainWrapper>{Layout}</MainWrapper>;
+  useEffect(() => {
+    if (settings.preStartMode !== PreStartMode.None) {
+      return;
+    }
+
+    const randomIndex = Math.floor(Math.random() * players.length);
+
+    setPlayers(
+      players.map((p) =>
+        p.index === randomIndex
+          ? {
+              ...p,
+              isStartingPlayer: true,
+            }
+          : {
+              ...p,
+              isStartingPlayer: false,
+            }
+      )
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (
+    !preStartCompleted &&
+    settings.preStartMode !== PreStartMode.None &&
+    !playing &&
+    settings.showStartingPlayer
+  ) {
+    return (
+      <MainWrapper>
+        <PreStart gridLayout={gridLayout} />
+      </MainWrapper>
+    );
+  }
+
+  return (
+    <MainWrapper>
+      <Players gridLayout={gridLayout} />
+    </MainWrapper>
+  );
 };
--- a/src/Components/Views/StartMenu/LayoutOptions.tsx
+++ b/src/Components/Views/StartMenu/LayoutOptions.tsx
@@ -3,10 +3,12 @@ import React from 'react';
 import { theme } from '../../../Data/theme';
 import {
  FivePlayers,
+  FivePlayersSide,
  FourPlayers,
  FourPlayersSide,
  OnePlayerPortrait,
  SixPlayers,
+  SixPlayersSide,
  ThreePlayers,
  ThreePlayersSide,
  TwoPlayersOppositeLandscape,
@@ -40,7 +42,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
    switch (numberOfPlayers) {
      case 1:
        return (
-          <div>
+          <>
            <FormControlLabel
              value={Orientation.Landscape}
              control={
@@ -89,7 +91,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              }
              label=""
            />
-          </div>
+          </>
        );
      case 2:
        return (
@@ -303,10 +305,11 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              }
              label=""
            />
-            {/* <FormControlLabel
-              value={GridTemplateAreas.FivePlayersSide}
+            <FormControlLabel
+              value={Orientation.Portrait}
              control={
                <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                  icon={
                    <FivePlayersSide
                      height={iconHeight}
@@ -325,7 +328,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                />
              }
              label=""
-            /> */}
+            />
          </>
        );

@@ -356,10 +359,11 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              }
              label=""
            />
-            {/* <FormControlLabel
-              value={GridTemplateAreas.SixPlayersSide}
+            <FormControlLabel
+              value={Orientation.Portrait}
              control={
                <Radio
+                  style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
                  icon={
                    <SixPlayersSide
                      height={iconHeight}
@@ -378,7 +382,7 @@ export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
                />
              }
              label=""
-            /> */}
+            />
          </>
        );

--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/src/Components/Views/StartMenu/StartMenu.tsx
@@ -12,6 +12,7 @@ import {
  GameFormat,
  InitialGameSettings,
  Orientation,
+  PreStartMode,
 } from '../../../Types/Settings';
 import { InfoModal } from '../../Misc/InfoModal';
 import { SettingsModal } from '../../Misc/SettingsModal';
@@ -20,7 +21,7 @@ import { LayoutOptions } from './LayoutOptions';

 const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;

-const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4 z-10`;

 const SliderWrapper = twc.div`mx-8`;

@@ -89,6 +90,7 @@ const Start = () => {
    setInitialGameSettings,
    settings,
    isPWA,
+    setRandomizingPlayer,
  } = useGlobalSettings();

  const [openInfoModal, setOpenInfoModal] = useState(false);
@@ -126,6 +128,7 @@ const Start = () => {
    setInitialGameSettings(initialGameSettings);
    setPlayers(createInitialPlayers(initialGameSettings));
    setShowPlay(true);
+    setRandomizingPlayer(settings.preStartMode === PreStartMode.RandomKing);
    localStorage.setItem('playing', 'false');
    localStorage.setItem('showPlay', 'true');
  };
@@ -176,7 +179,7 @@ const Start = () => {
        Life Trinket
      </h1>

-      <div className="overflow-hidden items-center flex flex-col max-w-[548px] mb-8 px-4">
+      <div className="overflow-hidden items-center flex flex-col max-w-[548px] w-full mb-8 px-4">
        <FormControl focused={false} style={{ width: '100%' }}>
          <FormLabel>Number of Players</FormLabel>
          <SliderWrapper>
@@ -262,18 +265,6 @@ const Start = () => {
          </ToggleButtonsWrapper>

          <FormLabel>Layout</FormLabel>
-          {/* <LayoutOptions
-          numberOfPlayers={playerOptions.numberOfPlayers}
-          gridAreas={playerOptions.gridAreas}
-          onChange={(gridAreas) =>
-            setPlayerOptions({
-              ...playerOptions,
-              gridAreas,
-              //TODO fix the layout selection
-              orientation: Orientation.Portrait,
-            })
-          }
-        /> */}
          <LayoutOptions
            numberOfPlayers={playerOptions.numberOfPlayers}
            selectedOrientation={playerOptions.orientation}
--- a/src/Contexts/GlobalSettingsContext.tsx
+++ b/src/Contexts/GlobalSettingsContext.tsx
@@ -22,7 +22,13 @@ export type GlobalSettingsContextType = {
  setInitialGameSettings: (initialGameSettings: InitialGameSettings) => void;
  settings: Settings;
  setSettings: (settings: Settings) => void;
+  playing: boolean;
+  setPlaying: (playing: boolean) => void;
+  randomizingPlayer: boolean;
+  setRandomizingPlayer: (stopRandom: boolean) => void;
  isPWA: boolean;
+  preStartCompleted: boolean;
+  setPreStartCompleted: (completed: boolean) => void;
 };

 export const GlobalSettingsContext =
--- a/src/Contexts/PlayersContext.tsx
+++ b/src/Contexts/PlayersContext.tsx
@@ -7,6 +7,8 @@ export type PlayersContextType = {
  updatePlayer: (updatedPlayer: Player) => void;
  updateLifeTotal: (player: Player, updatedLifeTotal: number) => number;
  resetCurrentGame: () => void;
+  startingPlayerIndex: number;
+  setStartingPlayerIndex: (index: number) => void;
 };

 export const PlayersContext = createContext<PlayersContextType | null>(null);
--- a/src/Data/getInitialPlayers.ts
+++ b/src/Data/getInitialPlayers.ts
@@ -1,7 +1,7 @@
 import { Player, Rotation } from '../Types/Player';
 import { InitialGameSettings, Orientation } from '../Types/Settings';

-const presetColors = [
+export const presetColors = [
  '#F06292', // Light Pink
  '#4DB6AC', // Teal
  '#FFA726', // Orange
@@ -127,15 +127,15 @@ const getOrientationRotations = (
        case Orientation.Portrait:
          switch (index) {
            case 0:
-              return Rotation.Side;
+              return Rotation.Flipped;
            case 1:
-              return Rotation.Side;
+              return Rotation.Flipped;
            case 2:
-              return Rotation.SideFlipped;
+              return Rotation.Side;
            case 3:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
            case 4:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
            default:
              return Rotation.Normal;
          }
@@ -163,17 +163,17 @@ const getOrientationRotations = (
        case Orientation.Portrait:
          switch (index) {
            case 0:
-              return Rotation.Side;
+              return Rotation.SideFlipped;
            case 1:
-              return Rotation.Side;
+              return Rotation.Flipped;
            case 2:
-              return Rotation.Side;
+              return Rotation.Flipped;
            case 3:
-              return Rotation.SideFlipped;
+              return Rotation.Side;
            case 4:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
            case 5:
-              return Rotation.SideFlipped;
+              return Rotation.Normal;
            default:
              return Rotation.Normal;
          }
@@ -191,10 +191,8 @@ export const createInitialPlayers = ({
 }: InitialGameSettings): Player[] => {
  const players: Player[] = [];
  const availableColors = [...presetColors]; // Create a copy of the colors array
-  const firstPlayerIndex = Math.floor(Math.random() * numberOfPlayers);

  for (let i = 0; i <= numberOfPlayers - 1; i++) {
-    const isStartingPlayer = i === firstPlayerIndex;
    const colorIndex = Math.floor(Math.random() * availableColors.length);
    const color = availableColors[colorIndex];

@@ -224,11 +222,11 @@ export const createInitialPlayers = ({
        usePoison: false,
        rotation,
      },
-      isStartingPlayer,
-      showStartingPlayer: isStartingPlayer,
      extraCounters: [],
      commanderDamage,
      hasLost: false,
+      isStartingPlayer: false,
+      isSide: rotation === Rotation.Side || rotation === Rotation.SideFlipped,
    };

    players.push(player);
--- a/src/Hooks/useAnalytics.ts
+++ b/src/Hooks/useAnalytics.ts
@@ -18,6 +18,11 @@ export const useAnalytics = () => {
    eventName: string,
    eventParams?: { [key: string]: unknown }
  ) => {
+    if (process.env.NODE_ENV === 'development') {
+      console.info('Event not tracked:', { eventName, eventParams });
+      return;
+    }
+
    logEvent(analytics, eventName, eventParams);
  };

--- a/src/Hooks/useOrientation.ts
+++ b/src/Hooks/useOrientation.ts
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+export interface OrientationState {
+  angle: number;
+  type: string;
+}
+
+const defaultState: OrientationState = {
+  angle: 0,
+  type: 'landscape-primary',
+};
+
+export default function useOrientation(
+  initialState: OrientationState = defaultState
+) {
+  const [state, setState] = useState(initialState);
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  useEffect(() => {
+    const screen = window.screen;
+    let mounted = true;
+
+    const onChange = () => {
+      if (mounted) {
+        const { orientation } = screen;
+
+        if (orientation) {
+          const { angle, type } = orientation;
+          setState({ angle, type });
+          if (type.includes('landscape')) {
+            setIsLandscape(true);
+          } else if (type.includes('portrait')) {
+            setIsLandscape(false);
+          }
+        } else if (window.orientation !== undefined) {
+          setState({
+            angle:
+              typeof window.orientation === 'number' ? window.orientation : 0,
+            type: '',
+          });
+        }
+      }
+    };
+    onChange();
+
+    return () => {
+      mounted = false;
+    };
+  }, [isLandscape]);
+
+  return { state, isLandscape };
+}
--- a/src/Providers/GlobalSettingsProvider.tsx
+++ b/src/Providers/GlobalSettingsProvider.tsx
@@ -7,8 +7,10 @@ import {
 import { useAnalytics } from '../Hooks/useAnalytics';
 import {
  InitialGameSettings,
-  InitialGameSettingsSchema,
+  initialGameSettingsSchema,
+  PreStartMode,
  Settings,
+  settingsSchema,
 } from '../Types/Settings';

 export const GlobalSettingsProvider = ({
@@ -21,28 +23,66 @@ export const GlobalSettingsProvider = ({
  const savedShowPlay = localStorage.getItem('showPlay');
  const savedGameSettings = localStorage.getItem('initialGameSettings');
  const savedSettings = localStorage.getItem('settings');
+  const savedPlaying = localStorage.getItem('playing');
+  const savedPreStartComplete = localStorage.getItem('preStartComplete');
+
+  const [playing, setPlaying] = useState<boolean>(
+    savedPlaying ? savedPlaying === 'true' : false
+  );
+  const setPlayingAndLocalStorage = (playing: boolean) => {
+    setPlaying(playing);
+    localStorage.setItem('playing', String(playing));
+  };
+
+  const [preStartCompleted, setPreStartCompleted] = useState<boolean>(
+    savedPreStartComplete ? savedPreStartComplete === 'true' : false
+  );

  const [showPlay, setShowPlay] = useState<boolean>(
    savedShowPlay ? savedShowPlay === 'true' : false
  );

+  const [randomizingPlayer, setRandomizingPlayer] = useState<boolean>(
+    savedSettings
+      ? Boolean(JSON.parse(savedSettings).preStartMode === 'random-king')
+      : true
+  );
+
  const [initialGameSettings, setInitialGameSettings] =
    useState<InitialGameSettings | null>(
      savedGameSettings ? JSON.parse(savedGameSettings) : null
    );

-  const [settings, setSettings] = useState<Settings>(
-    savedSettings
-      ? JSON.parse(savedSettings)
-      : { goFullscreenOnStart: true, keepAwake: true, showStartingPlayer: true }
+  const parsedSettings = settingsSchema.safeParse(
+    JSON.parse(savedSettings ?? '')
  );
+  const [settings, setSettings] = useState<Settings>(
+    parsedSettings.success
+      ? parsedSettings.data
+      : {
+          goFullscreenOnStart: true,
+          keepAwake: true,
+          showStartingPlayer: true,
+          showPlayerMenuCog: true,
+          preStartMode: PreStartMode.None,
+        }
+  );
+
+  const setSettingsAndLocalStorage = (settings: Settings) => {
+    setSettings(settings);
+    localStorage.setItem('settings', JSON.stringify(settings));
+  };

  const removeLocalStorage = async () => {
    localStorage.removeItem('initialGameSettings');
    localStorage.removeItem('players');
    localStorage.removeItem('playing');
    localStorage.removeItem('showPlay');
+    localStorage.removeItem('preStartComplete');
+
+    setPlaying(false);
    setShowPlay(false);
+    setPreStartCompleted(false);
  };

  useEffect(() => {
@@ -54,7 +94,7 @@ export const GlobalSettingsProvider = ({

    //parse existing game settings with zod schema
    const parsedInitialGameSettings =
-      InitialGameSettingsSchema.safeParse(initialGameSettings);
+      initialGameSettingsSchema.safeParse(initialGameSettings);

    if (!parsedInitialGameSettings.success) {
      removeLocalStorage();
@@ -68,10 +108,6 @@ export const GlobalSettingsProvider = ({
    );
  }, [initialGameSettings, savedGameSettings]);

-  useEffect(() => {
-    localStorage.setItem('settings', JSON.stringify(settings));
-  }, [settings]);
-
  const [isFullscreen, setIsFullscreen] = useState(false);

  useEffect(() => {
@@ -135,6 +171,11 @@ export const GlobalSettingsProvider = ({
      }
    };

+    const setPreStartCompletedAndLocalStorage = (preStartComplete: boolean) => {
+      setPreStartCompleted(preStartComplete);
+      localStorage.setItem('playing', String(playing));
+    };
+
    return {
      fullscreen: { isFullscreen, enableFullscreen, disableFullscreen },
      wakeLock: {
@@ -148,23 +189,32 @@ export const GlobalSettingsProvider = ({
      goToStart,
      showPlay,
      setShowPlay,
+      playing,
+      setPlaying: setPlayingAndLocalStorage,
      initialGameSettings,
      setInitialGameSettings,
      settings,
-      setSettings,
+      setSettings: setSettingsAndLocalStorage,
+      randomizingPlayer,
+      setRandomizingPlayer,
      isPWA: window?.matchMedia('(display-mode: standalone)').matches,
+      preStartCompleted,
+      setPreStartCompleted: setPreStartCompletedAndLocalStorage,
    };
  }, [
-    active,
-    analytics,
-    initialGameSettings,
    isFullscreen,
    isSupported,
    release,
+    active,
    request,
-    settings,
-    showPlay,
    type,
+    showPlay,
+    playing,
+    initialGameSettings,
+    settings,
+    randomizingPlayer,
+    preStartCompleted,
+    analytics,
  ]);

  return (
--- a/src/Providers/PlayersProvider.tsx
+++ b/src/Providers/PlayersProvider.tsx
@@ -7,6 +7,17 @@ import { InitialGameSettings } from '../Types/Settings';
 export const PlayersProvider = ({ children }: { children: ReactNode }) => {
  const savedPlayers = localStorage.getItem('players');

+  const savedStartingPlayerIndex = localStorage.getItem('startingPlayerIndex');
+
+  const [startingPlayerIndex, setStartingPlayerIndex] = useState<number>(
+    savedStartingPlayerIndex ? parseInt(savedStartingPlayerIndex) : -1
+  );
+
+  const setStartingPlayerIndexAndLocalStorage = (index: number) => {
+    setStartingPlayerIndex(index);
+    localStorage.setItem('startingPlayerIndex', String(index));
+  };
+
  const [players, setPlayers] = useState<Player[]>(
    savedPlayers ? JSON.parse(savedPlayers) : []
  );
@@ -50,9 +61,7 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
        return;
      }

-      const startingPlayerIndex = Math.floor(
-        Math.random() * initialGameSettings.numberOfPlayers
-      );
+      const newStartingPlayerIndex = Math.floor(Math.random() * players.length);

      players.forEach((player: Player) => {
        player.commanderDamage.map((damage) => {
@@ -65,16 +74,9 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
        });

        player.lifeTotal = initialGameSettings.startingLifeTotal;
-
        player.hasLost = false;

-        const isStartingPlayer = player.index === startingPlayerIndex;
-
-        player.isStartingPlayer = isStartingPlayer;
-
-        if (player.isStartingPlayer) {
-          player.showStartingPlayer = true;
-        }
+        player.isStartingPlayer = newStartingPlayerIndex === player.index;

        updatePlayer(player);
      });
@@ -87,8 +89,10 @@ export const PlayersProvider = ({ children }: { children: ReactNode }) => {
      updatePlayer,
      updateLifeTotal,
      resetCurrentGame,
+      startingPlayerIndex,
+      setStartingPlayerIndex: setStartingPlayerIndexAndLocalStorage,
    };
-  }, [players]);
+  }, [players, startingPlayerIndex]);

  return (
    <PlayersContext.Provider value={ctxValue}>
--- a/src/Types/Player.ts
+++ b/src/Types/Player.ts
@@ -6,8 +6,8 @@ export type Player = {
  commanderDamage: CommanderDamage[];
  extraCounters: ExtraCounter[];
  isStartingPlayer: boolean;
-  showStartingPlayer: boolean;
  hasLost: boolean;
+  isSide: boolean;
 };

 export type PlayerSettings = {
--- a/src/Types/Settings.ts
+++ b/src/Types/Settings.ts
@@ -12,10 +12,18 @@ export enum GameFormat {
  TwoHeadedGiant = 'two-headed-giant',
 }

+export enum PreStartMode {
+  None = 'none',
+  RandomKing = 'random-king',
+  FingerGame = 'finger-game',
+}
+
 export type Settings = {
  keepAwake: boolean;
  showStartingPlayer: boolean;
+  showPlayerMenuCog: boolean;
  goFullscreenOnStart: boolean;
+  preStartMode: PreStartMode;
 };

 export type InitialGameSettings = {
@@ -26,10 +34,18 @@ export type InitialGameSettings = {
  orientation: Orientation;
 };

-export const InitialGameSettingsSchema = z.object({
+export const initialGameSettingsSchema = z.object({
  startingLifeTotal: z.number().min(1).max(200).default(20),
  useCommanderDamage: z.boolean().default(false),
  gameFormat: z.nativeEnum(GameFormat).optional(),
  numberOfPlayers: z.number().min(1).max(6).default(2),
  orientation: z.nativeEnum(Orientation).default(Orientation.Landscape),
 });
+
+export const settingsSchema = z.object({
+  keepAwake: z.boolean().default(true),
+  showStartingPlayer: z.boolean().default(true),
+  showPlayerMenuCog: z.boolean().default(true),
+  goFullscreenOnStart: z.boolean().default(true),
+  preStartMode: z.nativeEnum(PreStartMode).default(PreStartMode.None),
+});
--- a/src/Utils/checkContrast.ts
+++ b/src/Utils/checkContrast.ts
@@ -0,0 +1,87 @@
+type RGBA = {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+};
+
+export const hexToRgb = (hex: string): RGBA => {
+  hex = hex.replace(/^#/, '');
+  let alpha = 255;
+
+  if (hex.length === 8) {
+    alpha = parseInt(hex.slice(6, 8), 16);
+    hex = hex.substring(0, 6);
+  }
+
+  if (hex.length === 4) {
+    alpha = parseInt(hex.slice(3, 4).repeat(2), 16);
+    hex = hex.substring(0, 3);
+  }
+
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+
+  const num = parseInt(hex, 16);
+  const red = num >> 16;
+  const green = (num >> 8) & 255;
+  const blue = num & 255;
+
+  return { red, green, blue, alpha };
+};
+
+export const luminance = (a: number, b: number) => {
+  const l1 = Math.max(a, b);
+  const l2 = Math.min(a, b);
+  return (l1 + 0.05) / (l2 + 0.05);
+};
+
+export const rgbContrast = (a: RGBA, b: RGBA) => {
+  return luminance(relativeLuminance(a), relativeLuminance(b));
+};
+
+// calculate the color contrast ratio
+export const checkContrast = (hexC1: string, hexC2: string) => {
+  const color1rgb = hexToRgb(hexC1);
+  const color2rgb = hexToRgb(hexC2);
+
+  const contrast = rgbContrast(color1rgb, color2rgb);
+
+  if (contrast >= 7) {
+    return 'AAA';
+  }
+
+  if (contrast >= 4.5) {
+    return 'AA';
+  }
+
+  if (contrast >= 3) {
+    return 'AA Large';
+  }
+
+  return 'Fail';
+};
+
+// red, green, and blue coefficients
+const rc = 0.2126;
+const gc = 0.7152;
+const bc = 0.0722;
+// low-gamma adjust coefficient
+const lowc = 1 / 12.92;
+
+function adjustGamma(input: number) {
+  return Math.pow((input + 0.055) / 1.055, 2.4);
+}
+
+export const relativeLuminance = (rgb: RGBA) => {
+  const rsrgb = rgb.red / 255;
+  const gsrgb = rgb.green / 255;
+  const bsrgb = rgb.blue / 255;
+
+  const r = rsrgb <= 0.03928 ? rsrgb * lowc : adjustGamma(rsrgb);
+  const g = gsrgb <= 0.03928 ? gsrgb * lowc : adjustGamma(gsrgb);
+  const b = bsrgb <= 0.03928 ? bsrgb * lowc : adjustGamma(bsrgb);
+
+  return r * rc + g * gc + b * bc;
+};
--- a/src/index.css
+++ b/src/index.css
@@ -2,8 +2,18 @@
@tailwind components;
@tailwind utilities;

+html {
+  overflow: hidden;
+}
+
+body {
+  overflow: auto;
+}
+
 html,
 body {
+  height: 100%;
+  position: relative;
  background-color: theme('colors.background.default');
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,12 +2,51 @@
 import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
 import type { Config } from 'tailwindcss';

-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      gridTemplateAreas: {
+export const baseColors = {
+  primary: {
+    main: '#3E7D78',
+    dark: '#2D5F5B',
+  },
+  secondary: {
+    main: '#284F4C',
+    dark: '#1B3B38',
+  },
+  background: {
+    default: '#08253B',
+    backdrop: 'rgba(0, 0, 0, 0.3)',
+    settings: 'rgba(20, 20, 0, 0.9)',
+  },
+  icons: {
+    dark: '#00000080',
+    light: '#ffffff4f',
+  },
+  text: {
+    primary: '#F5F5F5',
+    secondary: '#76A6A5',
+  },
+  action: {
+    disabled: '#234A47',
+  },
+  common: {
+    white: '#F9FFE3',
+    black: '#000000',
+  },
+  lifeCounter: {
+    text: 'rgba(0, 0, 0, 0.4)',
+    lostWrapper: '#000000',
+  },
+  interface: {
+    loseButton: {
+      background: '#43434380',
+    },
+    recentDifference: {
+      background: 'rgba(255, 255, 255, 0.6);',
+      text: '#333333',
+    },
+  },
+};
+
+export const twGridTemplateAreas = {
  onePlayerLandscape: ['player0 player0'],
  onePlayerPortrait: ['player0', 'player0'],
  twoPlayersOppositeLandscape: ['player0', 'player1'],
@@ -33,49 +72,21 @@ export default {
  ],
  sixPlayers: ['player0 player1 player2', 'player3 player4 player5'],
  sixPlayersSide: [
-          'player0 player1 player1 player1 player1 player2 player2 player2 player2 player3',
-          'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
+    'player0 player1 player1 player1 player1 player1 player1  player2 player2 player2 player2 player2 player2 player3',
+    'player0 player4 player4 player4 player4 player4 player4 player5 player5 player5 player5 player5 player5 player3',
  ],
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    screens: {
+      modalSm: '548px',
    },
-      colors: {
-        primary: {
-          main: '#3E7D78',
-          dark: '#2D5F5B',
-        },
-        secondary: {
-          main: '#284F4C',
-          dark: '#1B3B38',
-        },
-        background: {
-          default: '#08253B',
-          backdrop: 'rgba(0, 0, 0, 0.3)',
-          settings: 'rgba(20, 20, 0, 0.9)',
-        },
-        text: {
-          primary: '#F5F5F5',
-          secondary: '#b3b39b',
-        },
-        action: {
-          disabled: '#5E714C',
-        },
-        common: {
-          white: '#F9FFE3',
-          black: '#000000',
-        },
-        lifeCounter: {
-          text: 'rgba(0, 0, 0, 0.4)',
-          lostWrapper: '#00000070',
-        },
-        interface: {
-          loseButton: {
-            background: '#43434380',
-          },
-          recentDifference: {
-            background: 'rgba(255, 255, 255, 0.6);',
-            text: '#333333',
-          },
-        },
-      },
+    extend: {
+      gridTemplateAreas: twGridTemplateAreas,
+      colors: baseColors,
      keyframes: {
        fadeOut: {
          '0%': {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1157,115 +1157,120 @@
  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==

-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+"@esbuild/aix-ppc64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3"
+  integrity sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==

-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+"@esbuild/android-arm64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz#b45d000017385c9051a4f03e17078abb935be220"
+  integrity sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==

-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+"@esbuild/android-arm@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.11.tgz#f46f55414e1c3614ac682b29977792131238164c"
+  integrity sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==

-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+"@esbuild/android-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.11.tgz#bfc01e91740b82011ef503c48f548950824922b2"
+  integrity sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==

-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+"@esbuild/darwin-arm64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz#533fb7f5a08c37121d82c66198263dcc1bed29bf"
+  integrity sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==

-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+"@esbuild/darwin-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz#62f3819eff7e4ddc656b7c6815a31cf9a1e7d98e"
+  integrity sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==

-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+"@esbuild/freebsd-arm64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz#d478b4195aa3ca44160272dab85ef8baf4175b4a"
+  integrity sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==

-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+"@esbuild/freebsd-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz#7bdcc1917409178257ca6a1a27fe06e797ec18a2"
+  integrity sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==

-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+"@esbuild/linux-arm64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz#58ad4ff11685fcc735d7ff4ca759ab18fcfe4545"
+  integrity sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==

-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+"@esbuild/linux-arm@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz#ce82246d873b5534d34de1e5c1b33026f35e60e3"
+  integrity sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==

-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+"@esbuild/linux-ia32@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz#cbae1f313209affc74b80f4390c4c35c6ab83fa4"
+  integrity sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==

-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+"@esbuild/linux-loong64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz#5f32aead1c3ec8f4cccdb7ed08b166224d4e9121"
+  integrity sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==

-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+"@esbuild/linux-mips64el@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz#38eecf1cbb8c36a616261de858b3c10d03419af9"
+  integrity sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==

-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+"@esbuild/linux-ppc64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz#9c5725a94e6ec15b93195e5a6afb821628afd912"
+  integrity sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==

-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+"@esbuild/linux-riscv64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz#2dc4486d474a2a62bbe5870522a9a600e2acb916"
+  integrity sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==

-"@esbuild/linux-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+"@esbuild/linux-s390x@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz#4ad8567df48f7dd4c71ec5b1753b6f37561a65a8"
+  integrity sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==

-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+"@esbuild/linux-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz#b7390c4d5184f203ebe7ddaedf073df82a658766"
+  integrity sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==

-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+"@esbuild/netbsd-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz#d633c09492a1721377f3bccedb2d821b911e813d"
+  integrity sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==

-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+"@esbuild/openbsd-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz#17388c76e2f01125bf831a68c03a7ffccb65d1a2"
+  integrity sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==

-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+"@esbuild/sunos-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz#e320636f00bb9f4fdf3a80e548cb743370d41767"
+  integrity sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==

-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+"@esbuild/win32-arm64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz#c778b45a496e90b6fc373e2a2bb072f1441fe0ee"
+  integrity sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==

-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+"@esbuild/win32-ia32@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz#481a65fee2e5cce74ec44823e6b09ecedcc5194c"
+  integrity sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==
+
+"@esbuild/win32-x64@0.19.11":
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz#a5d300008960bb39677c46bf16f53ec70d8dee04"
+  integrity sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==

 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
  version "4.4.0"
@@ -2127,6 +2132,71 @@
    estree-walker "^1.0.1"
    picomatch "^2.2.2"

+"@rollup/rollup-android-arm-eabi@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.5.tgz#b752b6c88a14ccfcbdf3f48c577ccc3a7f0e66b9"
+  integrity sha512-idWaG8xeSRCfRq9KpRysDHJ/rEHBEXcHuJ82XY0yYFIWnLMjZv9vF/7DOq8djQ2n3Lk6+3qfSH8AqlmHlmi1MA==
+
+"@rollup/rollup-android-arm64@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.5.tgz#33757c3a448b9ef77b6f6292d8b0ec45c87e9c1a"
+  integrity sha512-f14d7uhAMtsCGjAYwZGv6TwuS3IFaM4ZnGMUn3aCBgkcHAYErhV1Ad97WzBvS2o0aaDv4mVz+syiN0ElMyfBPg==
+
+"@rollup/rollup-darwin-arm64@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.5.tgz#5234ba62665a3f443143bc8bcea9df2cc58f55fb"
+  integrity sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w==
+
+"@rollup/rollup-darwin-x64@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.5.tgz#981256c054d3247b83313724938d606798a919d1"
+  integrity sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.5.tgz#120678a5a2b3a283a548dbb4d337f9187a793560"
+  integrity sha512-Q0LcU61v92tQB6ae+udZvOyZ0wfpGojtAKrrpAaIqmJ7+psq4cMIhT/9lfV6UQIpeItnq/2QDROhNLo00lOD1g==
+
+"@rollup/rollup-linux-arm64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.5.tgz#c99d857e2372ece544b6f60b85058ad259f64114"
+  integrity sha512-dkRscpM+RrR2Ee3eOQmRWFjmV/payHEOrjyq1VZegRUa5OrZJ2MAxBNs05bZuY0YCtpqETDy1Ix4i/hRqX98cA==
+
+"@rollup/rollup-linux-arm64-musl@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.5.tgz#3064060f568a5718c2a06858cd6e6d24f2ff8632"
+  integrity sha512-QaKFVOzzST2xzY4MAmiDmURagWLFh+zZtttuEnuNn19AiZ0T3fhPyjPPGwLNdiDT82ZE91hnfJsUiDwF9DClIQ==
+
+"@rollup/rollup-linux-riscv64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.5.tgz#987d30b5d2b992fff07d055015991a57ff55fbad"
+  integrity sha512-HeGqmRJuyVg6/X6MpE2ur7GbymBPS8Np0S/vQFHDmocfORT+Zt76qu+69NUoxXzGqVP1pzaY6QIi0FJWLC3OPA==
+
+"@rollup/rollup-linux-x64-gnu@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.5.tgz#85946ee4d068bd12197aeeec2c6f679c94978a49"
+  integrity sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==
+
+"@rollup/rollup-linux-x64-musl@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.5.tgz#fe0b20f9749a60eb1df43d20effa96c756ddcbd4"
+  integrity sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg==
+
+"@rollup/rollup-win32-arm64-msvc@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.5.tgz#422661ef0e16699a234465d15b2c1089ef963b2a"
+  integrity sha512-aHSsMnUw+0UETB0Hlv7B/ZHOGY5bQdwMKJSzGfDfvyhnpmVxLMGnQPGNE9wgqkLUs3+gbG1Qx02S2LLfJ5GaRQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.5.tgz#7b73a145891c202fbcc08759248983667a035d85"
+  integrity sha512-AiqiLkb9KSf7Lj/o1U3SEP9Zn+5NuVKgFdRIZkvd4N0+bYrTOovVd0+LmYCPQGbocT4kvFyK+LXCDiXPBF3fyA==
+
+"@rollup/rollup-win32-x64-msvc@4.9.5":
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.5.tgz#10491ccf4f63c814d4149e0316541476ea603602"
+  integrity sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ==
+
 "@savvywombat/tailwindcss-grid-areas@^3.1.0":
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.1.0.tgz#4a54d9430cc6ee1198278c341799195f0f3757e1"
@@ -2361,6 +2431,11 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==

+"@types/estree@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
 "@types/glob@*":
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.1.0.tgz#b63e70155391b0584dce44e7ea25190bbc38f2fc"
@@ -4015,33 +4090,34 @@ es-to-primitive@^1.2.1:
    is-date-object "^1.0.1"
    is-symbol "^1.0.2"

-esbuild@^0.18.10:
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.19.3:
+  version "0.19.11"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.11.tgz#4a02dca031e768b5556606e1b468fe72e3325d96"
+  integrity sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==
  optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
-    "@esbuild/android-arm64" "0.18.20"
-    "@esbuild/android-x64" "0.18.20"
-    "@esbuild/darwin-arm64" "0.18.20"
-    "@esbuild/darwin-x64" "0.18.20"
-    "@esbuild/freebsd-arm64" "0.18.20"
-    "@esbuild/freebsd-x64" "0.18.20"
-    "@esbuild/linux-arm" "0.18.20"
-    "@esbuild/linux-arm64" "0.18.20"
-    "@esbuild/linux-ia32" "0.18.20"
-    "@esbuild/linux-loong64" "0.18.20"
-    "@esbuild/linux-mips64el" "0.18.20"
-    "@esbuild/linux-ppc64" "0.18.20"
-    "@esbuild/linux-riscv64" "0.18.20"
-    "@esbuild/linux-s390x" "0.18.20"
-    "@esbuild/linux-x64" "0.18.20"
-    "@esbuild/netbsd-x64" "0.18.20"
-    "@esbuild/openbsd-x64" "0.18.20"
-    "@esbuild/sunos-x64" "0.18.20"
-    "@esbuild/win32-arm64" "0.18.20"
-    "@esbuild/win32-ia32" "0.18.20"
-    "@esbuild/win32-x64" "0.18.20"
+    "@esbuild/aix-ppc64" "0.19.11"
+    "@esbuild/android-arm" "0.19.11"
+    "@esbuild/android-arm64" "0.19.11"
+    "@esbuild/android-x64" "0.19.11"
+    "@esbuild/darwin-arm64" "0.19.11"
+    "@esbuild/darwin-x64" "0.19.11"
+    "@esbuild/freebsd-arm64" "0.19.11"
+    "@esbuild/freebsd-x64" "0.19.11"
+    "@esbuild/linux-arm" "0.19.11"
+    "@esbuild/linux-arm64" "0.19.11"
+    "@esbuild/linux-ia32" "0.19.11"
+    "@esbuild/linux-loong64" "0.19.11"
+    "@esbuild/linux-mips64el" "0.19.11"
+    "@esbuild/linux-ppc64" "0.19.11"
+    "@esbuild/linux-riscv64" "0.19.11"
+    "@esbuild/linux-s390x" "0.19.11"
+    "@esbuild/linux-x64" "0.19.11"
+    "@esbuild/netbsd-x64" "0.19.11"
+    "@esbuild/openbsd-x64" "0.19.11"
+    "@esbuild/sunos-x64" "0.19.11"
+    "@esbuild/win32-arm64" "0.19.11"
+    "@esbuild/win32-ia32" "0.19.11"
+    "@esbuild/win32-x64" "0.19.11"

 escalade@^3.1.1:
  version "3.1.1"
@@ -4673,7 +4749,7 @@ fs.realpath@^1.0.0:
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==

-fsevents@~2.3.2:
+fsevents@~2.3.2, fsevents@~2.3.3:
  version "2.3.3"
  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -6759,7 +6835,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

-postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.32:
+postcss@^8.4.23, postcss@^8.4.32:
  version "8.4.32"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
  integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
@@ -7049,6 +7125,11 @@ react-screen-wake-lock@^3.0.2:
  resolved "https://registry.yarnpkg.com/react-screen-wake-lock/-/react-screen-wake-lock-3.0.2.tgz#ce185ebfdb74a82c89d532726738f60466f00438"
  integrity sha512-f88vcfMG1AWYRSIWQ5Qx5YVboH6TSL0F4ZlFLERZp6aKiZRGVRAAJ9wedJdO5jqTMcCDZ4OXJ8PjcSkDmvGSBg==

+react-swipeable@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
+  integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
+
 react-transition-group@^4.4.5:
  version "4.4.5"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -7302,11 +7383,26 @@ rollup@^2.43.1:
  optionalDependencies:
    fsevents "~2.3.2"

-rollup@^3.27.1:
-  version "3.29.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+rollup@^4.2.0:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.5.tgz#62999462c90f4c8b5d7c38fc7161e63b29101b05"
+  integrity sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==
+  dependencies:
+    "@types/estree" "1.0.5"
  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.9.5"
+    "@rollup/rollup-android-arm64" "4.9.5"
+    "@rollup/rollup-darwin-arm64" "4.9.5"
+    "@rollup/rollup-darwin-x64" "4.9.5"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.9.5"
+    "@rollup/rollup-linux-arm64-gnu" "4.9.5"
+    "@rollup/rollup-linux-arm64-musl" "4.9.5"
+    "@rollup/rollup-linux-riscv64-gnu" "4.9.5"
+    "@rollup/rollup-linux-x64-gnu" "4.9.5"
+    "@rollup/rollup-linux-x64-musl" "4.9.5"
+    "@rollup/rollup-win32-arm64-msvc" "4.9.5"
+    "@rollup/rollup-win32-ia32-msvc" "4.9.5"
+    "@rollup/rollup-win32-x64-msvc" "4.9.5"
    fsevents "~2.3.2"

 router@^1.3.1:
@@ -7851,10 +7947,10 @@ svgo@^3.0.2:
    csso "5.0.5"
    picocolors "^1.0.0"

-tailwindcss@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.0.tgz#045a9c474e6885ebd0436354e611a76af1c76839"
-  integrity sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==
+tailwindcss@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
+  integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==
  dependencies:
    "@alloc/quick-lru" "^5.2.0"
    arg "^5.0.2"
@@ -8142,7 +8238,7 @@ typedarray-to-buffer@^3.1.5:
  dependencies:
    is-typedarray "^1.0.0"

-typescript@^5.0.2:
+typescript@^5.3.3:
  version "5.3.3"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
@@ -8348,16 +8444,16 @@ vite-plugin-pwa@^0.17.4:
    workbox-build "^7.0.0"
    workbox-window "^7.0.0"

-vite@^4.4.5:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a"
-  integrity sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==
+vite@^5.0.12:
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47"
+  integrity sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==
  dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
+    esbuild "^0.19.3"
+    postcss "^8.4.32"
+    rollup "^4.2.0"
  optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"

 wcwidth@^1.0.1:
  version "1.0.1"
Author	SHA1	Message	Date
Viktor Rådberg	eb99cff736	parse settings before setting	2024-03-29 23:18:10 +01:00
Viktor Rådberg	318520ea53	do	2024-03-29 22:46:55 +01:00
Viktor Rådberg	fa5829b402	fix keep away state	2024-03-23 16:23:03 +01:00
Viktor Rådberg	71f26d0dc5	fix keep awake toggle and layout styling	2024-03-23 16:22:48 +01:00
Viktor Rådberg	3a568fc3ab	Better scaling on small devices	2024-03-23 16:05:29 +01:00
Viktor Rådberg	355f4bd4cd	track only on prod, and add life changed amount tracking	2024-03-23 12:39:07 +01:00
Viktor Rådberg	17e174bfe1	new deploy	2024-03-23 11:24:14 +01:00
Viktor Rådberg	e1e8da858b	remove prod check	2024-03-23 11:23:46 +01:00
Viktor Rådberg	e02f071415	new deploy	2024-03-23 11:23:06 +01:00
Viktor Rådberg	e04f31bb67	prod log	2024-03-23 11:22:12 +01:00
Viktor Rådberg	e5386d08a4	fix settings cog color	2024-03-17 19:01:15 +01:00
Viktor Rådberg	d6cd678e9f	fix random interval wrapper showing if enabled but show player is disabled	2024-03-17 18:41:58 +01:00
Viktor Rådberg	334b46db6e	bump	2024-03-16 22:29:25 +01:00
Viktor Rådberg	e03ecc6f51	Merge pull request #33 from Vikeo/random-player-interval random player interval	2024-03-16 22:28:49 +01:00
Viktor Rådberg	d4dc44076d	fix lint	2024-03-16 22:28:37 +01:00
Viktor Rådberg	a1b5cfd871	fix tsc	2024-03-16 22:26:06 +01:00
Viktor Rådberg	f11eea5e53	better styling	2024-03-16 22:23:03 +01:00
Viktor Rådberg	905912a7fd	fix random interval	2024-03-16 21:59:24 +01:00
Viktor Rådberg	a90dd7c9ea	wip	2024-03-16 14:40:18 +01:00
Viktor Rådberg	ef1310d674	bump	2024-03-16 13:22:47 +01:00
Viktor Rådberg	fe3bb6c78c	show starting player untill press	2024-03-16 13:22:03 +01:00
Viktor Rådberg	6d2b3b6a6f	Add option to show player menu cog	2024-03-16 12:29:16 +01:00
Viktor Rådberg	0f86928cb3	Merge pull request #32 from Vikeo/better-colors Better colors	2024-03-16 10:42:13 +01:00
Viktor Rådberg	efbfb7719c	tsc	2024-03-16 10:40:18 +01:00
Viktor Rådberg	71e5614f52	bump to new version	2024-03-16 10:38:23 +01:00
Viktor Rådberg	677fd79bee	fix long press down	2024-03-16 10:23:15 +01:00
Viktor Rådberg	1bff41bc10	remove colorful	2024-03-16 10:04:35 +01:00
Viktor Rådberg	7852520f8e	minus plus icon color	2024-03-16 09:59:40 +01:00
Viktor Rådberg	04c3d60967	use normal picker again	2024-03-16 09:31:59 +01:00
Viktor Rådberg	664e2e5688	round color picker	2024-02-19 07:38:17 +01:00
Viktor Rådberg	6eb7ac9f50	Merge branch 'main' into better-colors	2024-02-18 16:08:09 +01:00
Viktor Rådberg	ef06e0d125	bump	2024-02-09 23:04:29 +01:00
Viktor Rådberg	ae9f5707b2	update blur	2024-02-09 23:04:14 +01:00
Viktor Rådberg	a18c253624	bump	2024-01-31 23:12:46 +01:00
Viktor Rådberg	3f319c4f3c	add some blur to settings	2024-01-31 23:12:31 +01:00
Viktor Rådberg	8b33a2a38a	wip	2024-01-28 17:04:30 +01:00
Viktor Rådberg	cc915dff36	better color picker	2024-01-28 11:54:37 +01:00
Viktor Rådberg	db80e563f2	bump	2024-01-27 18:05:54 +01:00
Viktor Rådberg	573af42b75	fix taps and some settings stuff	2024-01-27 18:05:18 +01:00
Viktor Rådberg	89e1eaff4e	bump	2024-01-27 16:25:40 +01:00
Viktor Rådberg	0f4e896342	Merge pull request #31 from Vikeo/swipable-settings Swipable settings	2024-01-27 16:23:54 +01:00
Viktor Rådberg	dc1d5fe01d	tsc	2024-01-27 16:20:09 +01:00
Viktor Rådberg	41e73d2c0c	swipe	2024-01-27 11:05:54 +01:00
Viktor Rådberg	724dcf086c	is side	2024-01-27 09:32:00 +01:00
Viktor Rådberg	51f9c4d20e	initial test	2024-01-26 21:24:40 +01:00
Viktor Rådberg	354c0dbbb2	bump	2024-01-20 11:11:03 +01:00
Viktor Rådberg	3770d13beb	fix some styling	2024-01-20 10:56:53 +01:00