bump

Swipable settings

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.5.52",
+  "version": "0.6.4",
   "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",
+    "tailwindcss": "^3.4.1",
-    "typescript": "^5.0.2",
+    "typescript": "^5.3.3",
-    "vite": "^4.4.5",
+    "vite": "^5.0.12",
     "vite-plugin-pwa": "^0.17.4"
   }
 }

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 = ({
@@ -65,10 +68,7 @@ export const CommanderDamage = ({
   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 isSide =
-    player.settings.rotation === Rotation.Side ||
-    player.settings.rotation === Rotation.SideFlipped;
 
   const handleCommanderDamageChange = (
     index: number,
@@ -107,7 +107,8 @@ export const CommanderDamage = ({
     handleLifeChange(player.lifeTotal - increment);
   };
 
-  const handleDownInput = ({ opponentIndex, isPartner }: InputProps) => {
+  const handleDownInput = ({ opponentIndex, isPartner, event }: InputProps) => {
+    downPositionRef.current = { x: event.clientX, y: event.clientY };
     setTimeoutFinished(false);
     setHasPressedDown(true);
     timeoutRef.current = setTimeout(() => {
@@ -116,11 +117,23 @@ export const CommanderDamage = ({
     }, decrementTimeoutMs);
   };
 
-  const handleUpInput = ({ opponentIndex, isPartner }: InputProps) => {
+  const handleUpInput = ({ opponentIndex, isPartner, event }: InputProps) => {
     if (!(hasPressedDown && !timeoutFinished)) {
       return;
     }
-    clearTimeout(timeoutRef.current);
+
+    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;
+    }
+
     handleCommanderDamageChange(opponentIndex, 1, isPartner);
     setHasPressedDown(false);
   };
@@ -132,9 +145,9 @@ export const CommanderDamage = ({
   };
 
   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 +158,12 @@ export const CommanderDamage = ({
       <CommanderDamageButton
         key={opponentIndex}
         $rotation={player.settings.rotation}
-        onPointerDown={() =>
+        onPointerDown={(e) =>
-          handleDownInput({ opponentIndex, isPartner: false })
+          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 +186,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={() =>
+            onPointerDown={(e) =>
-              handleDownInput({ opponentIndex, isPartner: true })
+              handleDownInput({ opponentIndex, isPartner: true, event: e })
             }
-            onPointerUp={() =>
+            onPointerUp={(e) =>
-              handleUpInput({ opponentIndex, isPartner: true })
+              handleUpInput({ opponentIndex, isPartner: true, event: e })
             }
             onPointerLeave={handleLeaveInput}
             onContextMenu={(

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 downPositionRef = useRef({ x: 0, y: 0 });
-  const isSide =
-    rotation === Rotation.Side || rotation === Rotation.SideFlipped;
 
   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);

src/Components/Buttons/LifeCounterButton.tsx

@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 import { TwcComponentProps, twc } from 'react-twc';
 import { lifeLongPressMultiplier } from '../../Data/constants';
 import { Rotation } from '../../Types/Player';
+import { MAX_TAP_MOVE_DISTANCE } from './CommanderDamage';
 
 type RotationButtonProps = TwcComponentProps<'div'> & {
   $align?: string;
@@ -56,12 +57,14 @@ const LifeCounterButton = ({
   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 handleLifeChange = (increment: number) => {
     setLifeTotal(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 +73,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);

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
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? `right-auto top-[15%] left-[27%]`
+    ? `left-[19%]`
-    : props.$rotation === Rotation.Side
+    : 'top-[21%]',
-    ? `right-auto top-[15%] left-[27%]`
-    : 'right-[15%] top-1/4',
 ]);
 
 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>
   );
 };

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;

src/Components/Counters/ExtraCountersBar.tsx

@@ -100,6 +100,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
                 (counter) => counter.type === 'commanderTax'
               )?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -114,6 +115,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
                 (counter) => counter.type === 'partnerTax'
               )?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -127,6 +129,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
               player.extraCounters?.find((counter) => counter.type === 'poison')
                 ?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -140,6 +143,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
               player.extraCounters?.find((counter) => counter.type === 'energy')
                 ?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />
@@ -154,6 +158,7 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
                 (counter) => counter.type === 'experience'
               )?.value
             }
+            isSide={player.isSide}
             setCounterTotal={handleCounterChange}
             playerIndex={player.index}
           />

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,7 +49,6 @@ type HealthProps = {
 
 const Health = ({
   player,
-  rotation,
   handleLifeChange,
   differenceKey,
   recentDifference,
@@ -99,12 +98,13 @@ const Health = ({
   }, [textContainerRef]);
 
   const calculateFontSize = (container: HTMLDivElement) => {
-    const isSide =
+    const widthRatio = player.isSide
-      rotation === Rotation.SideFlipped || rotation === Rotation.Side;
+      ? container.clientHeight
+      : container.clientWidth;
 
-    const widthRatio = isSide ? container.clientHeight : container.clientWidth;
+    const heightRatio = player.isSide
-
+      ? container.clientWidth
-    const heightRatio = isSide ? container.clientWidth : container.clientHeight;
+      : container.clientHeight;
 
     const minRatio = Math.min(widthRatio, heightRatio);
 
@@ -116,7 +116,7 @@ const Health = ({
   };
 
   return (
-    <LifeCountainer $rotation={player.settings.rotation}>
+    <LifeContainer $rotation={player.settings.rotation}>
       <LifeCounterButton
         lifeTotal={player.lifeTotal}
         setLifeTotal={handleLifeChange}
@@ -154,7 +154,7 @@ const Health = ({
         operation="add"
         increment={1}
       />
-    </LifeCountainer>
+    </LifeContainer>
   );
 };
 

src/Components/LifeCounter/LifeCounter.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
 import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { Player, Rotation } from '../../Types/Player';
 import { 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';
@@ -24,7 +24,7 @@ const LifeCounterWrapper = twc.div<RotationDivProps>((props) => [
 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]`
     : '',
@@ -64,6 +64,8 @@ type LifeCounterProps = {
   opponents: Player[];
 };
 
+const RECENT_DIFFERENCE_TTL = 3_000;
+
 const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   const { updatePlayer, updateLifeTotal } = usePlayers();
   const { settings } = useGlobalSettings();
@@ -71,14 +73,53 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   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();
+      console.log(`User DOWN Swiped on player ${player.index}`);
+      setShowPlayerMenu(true);
+    },
+    onSwipedUp: (e) => {
+      e.event.stopPropagation();
+      console.log(`User UP Swiped on player ${player.index}`);
+      setShowPlayerMenu(false);
+    },
+
+    swipeDuration: 500,
+    onSwiping: (e) => e.event.stopPropagation(),
+    rotationAngle,
+  });
 
   useEffect(() => {
     const timer = setTimeout(() => {
       setRecentDifference(0);
-    }, 3_000);
+    }, RECENT_DIFFERENCE_TTL);
 
-    return () => clearTimeout(timer);
+    const resizeObserver = new ResizeObserver(() => {
-  }, [recentDifference]);
+      if (document.body.clientWidth > document.body.clientHeight)
+        setIsLandscape(true);
+      else setIsLandscape(false);
+      return;
+    });
+
+    resizeObserver.observe(document.body);
+
+    return () => {
+      clearTimeout(timer);
+      // Cleanup: disconnect the ResizeObserver when the component unmounts.
+      resizeObserver.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentDifference, document.body.clientHeight, document.body.clientWidth]);
 
   useEffect(() => {
     if (player.showStartingPlayer) {
@@ -124,6 +165,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
       <LifeCounterWrapper
         $rotation={player.settings.rotation}
         style={{ rotate: `${calcRotation}deg` }}
+        {...handlers}
       >
         {settings.showStartingPlayer &&
           player.isStartingPlayer &&
@@ -150,12 +192,6 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
           key={player.index}
           handleLifeChange={handleLifeChange}
         />
-        <SettingsButton
-          onClick={() => {
-            setShowPlayerMenu(!showPlayerMenu);
-          }}
-          rotation={player.settings.rotation}
-        />
         {playerCanLose(player) && (
           <LoseGameButton
             rotation={player.settings.rotation}
@@ -170,9 +206,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>
   );

src/Components/Misc/InfoModal.tsx

@@ -3,7 +3,7 @@ import { twc } from 'react-twc';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
 
-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,63 +12,77 @@ type InfoModalProps = {
 
 export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
   return (
-    <Modal open={isOpen} onClose={closeModal}>
+    <Modal
-      <ModalWrapper>
+      open={isOpen}
-        <div>
+      onClose={closeModal}
-          <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
+      style={{ display: 'flex', justifyContent: 'center' }}
-          <Separator height="1px" />
+    >
-          <Paragraph className="my-4">
+      <>
-            There are some controls that you might not know about, so here's a
+        <div className="flex relative w-full max-w-[548px]">
-            short list of them.
+          <button
-          </Paragraph>
+            onClick={closeModal}
-          <h3 className="text-lg font-bold mb-2">Life counter</h3>
+            className="flex absolute top-10 right-0 z-10 w-10 h-10 text-common-white bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
-          <ul className="list-disc ml-6 mb-4">
-            <li>
-              <strong>Tap</strong> on a player's + or - button to add or
-              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>.
-            </li>
-          </ul>
-
-          <h3 className="text-lg font-bold mb-2">
-            Commander damage and other counters
-          </h3>
-          <ul className="list-disc ml-6 mb-4">
-            <li>
-              <strong>Tap</strong> on the counter to add{' '}
-              <strong>1 counter</strong>.
-            </li>
-            <li>
-              <strong>Long press</strong> on the counter to subtract{' '}
-              <strong>1 counter</strong>.
-            </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.
-          </Paragraph>
-        </div>
-        <div className="text-center mt-4">
-          Visit my
-          <a
-            href="https://github.com/Vikeo/LifeTrinket"
-            target="_blank"
-            className="text-text-secondary underline"
           >
-            {' '}
+            X
-            GitHub{' '}
+          </button>
-          </a>
-          for more info about this web app.
         </div>
-      </ModalWrapper>
+        <ModalWrapper>
+          <div>
+            <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
+            <Separator height="1px" />
+            <Paragraph className="my-4">
+              There are some controls that you might not know about, so here's a
+              short list of them.
+            </Paragraph>
+            <h3 className="text-lg font-bold mb-2">Life counter</h3>
+            <ul className="list-disc ml-6 mb-4">
+              <li>
+                <strong>Tap</strong> on a player's + or - button to add or
+                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>.
+              </li>
+            </ul>
+
+            <h3 className="text-lg font-bold mb-2">
+              Commander damage and other counters
+            </h3>
+            <ul className="list-disc ml-6 mb-4">
+              <li>
+                <strong>Tap</strong> on the counter to add{' '}
+                <strong>1 counter</strong>.
+              </li>
+              <li>
+                <strong>Long press</strong> on the counter to subtract{' '}
+                <strong>1 counter</strong>.
+              </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.
+            </Paragraph>
+          </div>
+          <div className="text-center mt-4">
+            Visit my
+            <a
+              href="https://github.com/Vikeo/LifeTrinket"
+              target="_blank"
+              className="text-text-secondary underline"
+            >
+              {' '}
+              GitHub{' '}
+            </a>
+            for more info about this web app.
+          </div>
+        </ModalWrapper>
+      </>
     </Modal>
   );
 };

src/Components/Misc/SettingsModal.tsx

@@ -67,116 +67,129 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
 
   return (
     <Modal open={isOpen} onClose={closeModal}>
-      <ModalWrapper>
+      <>
-        <Container>
+        <div className="flex relative w-full max-w-[548px]">
-          <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
+          <button
-          <Separator height="1px" />
+            onClick={closeModal}
-          <SettingContainer>
+            className="flex absolute top-10 right-0 z-10 w-10 h-10 text-common-white bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
-            <ToggleContainer>
+          >
-              <FormLabel>Show Start Player</FormLabel>
+            X
-              <Switch
+          </button>
-                checked={settings.showStartingPlayer}
+        </div>
-                onChange={() => {
+        <ModalWrapper>
-                  setSettings({
+          <Container>
-                    ...settings,
+            <h2 className="text-center text-2xl mb-2">⚙️ Settings ⚙️</h2>
-                    showStartingPlayer: !settings.showStartingPlayer,
+            <Separator height="1px" />
-                  });
+            <SettingContainer>
-                }}
+              <ToggleContainer>
-              />
+                <FormLabel>Show Start Player</FormLabel>
-            </ToggleContainer>
+                <Switch
-            <Description>
+                  checked={settings.showStartingPlayer}
-              On start or reset of game, will pick a random player who will
+                  onChange={() => {
-              start first if this is enabled.
+                    setSettings({
-            </Description>
+                      ...settings,
-          </SettingContainer>
+                      showStartingPlayer: !settings.showStartingPlayer,
-          <SettingContainer>
+                    });
-            <ToggleContainer>
+                  }}
-              <FormLabel>Keep Awake</FormLabel>
+                />
-              <Switch
+              </ToggleContainer>
-                checked={settings.keepAwake}
+              <Description>
-                onChange={() => {
+                On start or reset of game, will pick a random player who will
-                  setSettings({ ...settings, keepAwake: !settings.keepAwake });
+                start first if this is enabled.
-                }}
+              </Description>
-              />
+            </SettingContainer>
-            </ToggleContainer>
+            <SettingContainer>
-            <Description>
+              <ToggleContainer>
-              Will prevent device from going to sleep while this app is open if
+                <FormLabel>Keep Awake</FormLabel>
-              this is enabled.
+                <Switch
-            </Description>
+                  checked={settings.keepAwake}
-          </SettingContainer>
+                  onChange={() => {
-          <SettingContainer>
+                    setSettings({
-            <ToggleContainer>
+                      ...settings,
-              <FormLabel>Go fullscreen on start (Android only)</FormLabel>
+                      keepAwake: !settings.keepAwake,
-              <Switch
+                    });
-                checked={settings.goFullscreenOnStart}
+                  }}
-                onChange={() => {
+                />
-                  setSettings({
+              </ToggleContainer>
-                    ...settings,
+              <Description>
-                    goFullscreenOnStart: !settings.goFullscreenOnStart,
+                Will prevent device from going to sleep while this app is open
-                  });
+                if this is enabled.
-                }}
+              </Description>
-              />
+            </SettingContainer>
-            </ToggleContainer>
+            <SettingContainer>
-            <Description>
+              <ToggleContainer>
-              Will enter fullscreen mode when starting a game if this is
+                <FormLabel>Go fullscreen on start (Android only)</FormLabel>
-              enabled.
+                <Switch
-            </Description>
+                  checked={settings.goFullscreenOnStart}
-          </SettingContainer>
+                  onChange={() => {
-          {!isPWA && (
+                    setSettings({
-            <>
+                      ...settings,
-              <Separator height="1px" />
+                      goFullscreenOnStart: !settings.goFullscreenOnStart,
-              <SettingContainer>
+                    });
-                <ToggleContainer>
+                  }}
-                  <Paragraph>
+                />
-                    <b>Tip:</b> You can{' '}
+              </ToggleContainer>
-                    <b>add this webapp to your home page on iOS</b> or{' '}
+              <Description>
-                    <b>install it on Android</b> to have it act just like a
+                Will enter fullscreen mode when starting a game if this is
-                    normal app!
+                enabled.
-                  </Paragraph>
+              </Description>
-                </ToggleContainer>
+            </SettingContainer>
-                <Description className="mt-1">
+            {!isPWA && (
-                  If you do, this app will work offline and the toolbar will be
+              <>
-                  automatically hidden.
+                <Separator height="1px" />
-                </Description>
+                <SettingContainer>
-              </SettingContainer>
+                  <ToggleContainer>
-            </>
+                    <Paragraph>
-          )}
+                      <b>Tip:</b> You can{' '}
-          <Separator height="1px" />
+                      <b>add this webapp to your home page on iOS</b> or{' '}
-          <SettingContainer>
+                      <b>install it on Android</b> to have it act just like a
-            <Paragraph>
+                      normal app!
-              {/* @ts-expect-error is defined in vite.config.ts*/}
+                    </Paragraph>
-              Current version: {APP_VERSION}{' '}
+                  </ToggleContainer>
-              {isLatestVersion && (
+                  <Description className="mt-1">
-                <span className="text-sm text-text-secondary">(latest)</span>
+                    If you do, this app will work offline and the toolbar will
-              )}
+                    be automatically hidden.
-            </Paragraph>
+                  </Description>
-            {!isLatestVersion && newVersion && (
+                </SettingContainer>
-              <Paragraph className="text-text-secondary text-lg text-center">
+              </>
-                New version ({newVersion}) is available!{' '}
-              </Paragraph>
             )}
-          </SettingContainer>
+            <Separator height="1px" />
-          {!isLatestVersion && newVersion && (
+            <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"
-              style={{ marginTop: '0.25rem', marginBottom: '0.25rem' }}
+              onClick={closeModal}
-              onClick={() => window?.location?.reload()}
+              style={{ marginTop: '0.25rem' }}
             >
-              <span>Update</span>
+              Save and Close
-              <span className="text-xs">&nbsp;(reload app)</span>
             </Button>
-          )}
+          </Container>
-          <Separator height="1px" />
+        </ModalWrapper>
-
+      </>
-          <Button
-            variant="contained"
-            onClick={closeModal}
-            style={{ marginTop: '0.25rem' }}
-          >
-            Save and Close
-          </Button>
-        </Container>
-      </ModalWrapper>
     </Modal>
   );
 };

src/Components/Player/PlayerMenu.tsx

@@ -6,7 +6,6 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { useSafeRotate } from '../../Hooks/useSafeRotate';
 import {
-  Cross,
   Energy,
   Exit,
   Experience,
@@ -17,10 +16,7 @@ import {
   ResetGame,
 } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
-import {
+import { RotationDivProps } from '../Buttons/CommanderDamage';
-  RotationButtonProps,
-  RotationDivProps,
-} from '../Buttons/CommanderDamage';
 
 const CheckboxContainer = twc.div``;
 
@@ -31,10 +27,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,16 +41,19 @@ const BetterRowContainer = twc.div`
   flex-grow
   w-full
   h-full
-  justify-end
+  justify-between
   items-stretch
 `;
 
 const TogglesSection = twc.div`
   flex
-  relative
   flex-row
+  flex-wrap
+  relative
   gap-2
+  h-full
   justify-evenly
+  items-center
 `;
 
 const ButtonsSections = twc.div`
@@ -62,14 +63,14 @@ const ButtonsSections = twc.div`
   justify-between
   p-[3%]
   items-center
+  flex-wrap
 `;
 
 const ColorPicker = twc.input`
-  absolute
-  top-[5%]
-  left-[5%]
   h-[8vmax]
   w-[8vmax]
+  max-h-12
+  max-w-11
   border-none
   outline-none
   cursor-pointer
@@ -85,21 +86,17 @@ const SettingsContainer = twc.div<RotationDivProps>((props) => [
     : '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);
 
@@ -108,9 +105,6 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
     containerRef: settingsContainerRef,
   });
 
-  const handleOnClick = () => {
-    setShowPlayerMenu(false);
-  };
   const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
@@ -142,7 +136,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 +149,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,15 +160,15 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
         }}
         ref={settingsContainerRef}
       >
-        <ColorPicker
-          type="color"
-          value={player.color}
-          onChange={handleColorChange}
-          role="button"
-          aria-label="Color picker"
-        />
         <BetterRowContainer>
           <TogglesSection>
+            <ColorPicker
+              type="color"
+              value={player.color}
+              onChange={handleColorChange}
+              role="button"
+              aria-label="Color picker"
+            />
             {player.settings.useCommanderDamage && (
               <CheckboxContainer>
                 <Checkbox
@@ -373,9 +343,9 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
         </BetterRowContainer>
         <dialog
           ref={dialogRef}
-          className="z-[9999] min-h-2/4 bg-background-default text-text-primary rounded-2xl border-none absolute top-[10%]"
+          className="z-[9999] min-h-2/4 bg-background-default text-text-primary rounded-2xl border-none absolute bottom-[20%]"
         >
-          <div className="h-full flex flex-col p-4 gap-2">
+          <div className="flex flex-col p-4 gap-2">
             <h1 className="text-center">Reset Game?</h1>
             <div className="flex justify-evenly gap-4">
               <Button

src/Components/Views/StartMenu/StartMenu.tsx

@@ -176,7 +176,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>

src/Data/getInitialPlayers.ts

@@ -229,6 +229,7 @@ export const createInitialPlayers = ({
       extraCounters: [],
       commanderDamage,
       hasLost: false,
+      isSide: rotation === Rotation.Side || rotation === Rotation.SideFlipped,
     };
 
     players.push(player);

src/Hooks/useOrientation.ts

@@ -0,0 +1,53 @@
+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;
+        console.log(orientation);
+
+        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 };
+}

src/Types/Player.ts

@@ -8,6 +8,7 @@ export type Player = {
   isStartingPlayer: boolean;
   showStartingPlayer: boolean;
   hasLost: boolean;
+  isSide: boolean;
 };
 
 export type PlayerSettings = {

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',

tailwind.config.ts

@@ -6,6 +6,9 @@ import type { Config } from 'tailwindcss';
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
+    screens: {
+      modalSm: '548px',
+    },
     extend: {
       gridTemplateAreas: {
         onePlayerLandscape: ['player0 player0'],
@@ -53,10 +56,10 @@ export default {
         },
         text: {
           primary: '#F5F5F5',
-          secondary: '#b3b39b',
+          secondary: '#76A6A5',
         },
         action: {
-          disabled: '#5E714C',
+          disabled: '#234A47',
         },
         common: {
           white: '#F9FFE3',
@@ -64,7 +67,7 @@ export default {
         },
         lifeCounter: {
           text: 'rgba(0, 0, 0, 0.4)',
-          lostWrapper: '#00000070',
+          lostWrapper: '#000000',
         },
         interface: {
           loseButton: {

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":
+"@esbuild/aix-ppc64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+  integrity sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==
 
-"@esbuild/android-arm@0.18.20":
+"@esbuild/android-arm64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz#b45d000017385c9051a4f03e17078abb935be220"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+  integrity sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==
 
-"@esbuild/android-x64@0.18.20":
+"@esbuild/android-arm@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.11.tgz#f46f55414e1c3614ac682b29977792131238164c"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+  integrity sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==
 
-"@esbuild/darwin-arm64@0.18.20":
+"@esbuild/android-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.11.tgz#bfc01e91740b82011ef503c48f548950824922b2"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+  integrity sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==
 
-"@esbuild/darwin-x64@0.18.20":
+"@esbuild/darwin-arm64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz#533fb7f5a08c37121d82c66198263dcc1bed29bf"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+  integrity sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==
 
-"@esbuild/freebsd-arm64@0.18.20":
+"@esbuild/darwin-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz#62f3819eff7e4ddc656b7c6815a31cf9a1e7d98e"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+  integrity sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==
 
-"@esbuild/freebsd-x64@0.18.20":
+"@esbuild/freebsd-arm64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz#d478b4195aa3ca44160272dab85ef8baf4175b4a"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+  integrity sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==
 
-"@esbuild/linux-arm64@0.18.20":
+"@esbuild/freebsd-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz#7bdcc1917409178257ca6a1a27fe06e797ec18a2"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+  integrity sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==
 
-"@esbuild/linux-arm@0.18.20":
+"@esbuild/linux-arm64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz#58ad4ff11685fcc735d7ff4ca759ab18fcfe4545"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+  integrity sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==
 
-"@esbuild/linux-ia32@0.18.20":
+"@esbuild/linux-arm@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz#ce82246d873b5534d34de1e5c1b33026f35e60e3"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+  integrity sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==
 
-"@esbuild/linux-loong64@0.18.20":
+"@esbuild/linux-ia32@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz#cbae1f313209affc74b80f4390c4c35c6ab83fa4"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+  integrity sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==
 
-"@esbuild/linux-mips64el@0.18.20":
+"@esbuild/linux-loong64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz#5f32aead1c3ec8f4cccdb7ed08b166224d4e9121"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+  integrity sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==
 
-"@esbuild/linux-ppc64@0.18.20":
+"@esbuild/linux-mips64el@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz#38eecf1cbb8c36a616261de858b3c10d03419af9"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+  integrity sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==
 
-"@esbuild/linux-riscv64@0.18.20":
+"@esbuild/linux-ppc64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz#9c5725a94e6ec15b93195e5a6afb821628afd912"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+  integrity sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==
 
-"@esbuild/linux-s390x@0.18.20":
+"@esbuild/linux-riscv64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz#2dc4486d474a2a62bbe5870522a9a600e2acb916"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+  integrity sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==
 
-"@esbuild/linux-x64@0.18.20":
+"@esbuild/linux-s390x@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz#4ad8567df48f7dd4c71ec5b1753b6f37561a65a8"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+  integrity sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==
 
-"@esbuild/netbsd-x64@0.18.20":
+"@esbuild/linux-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz#b7390c4d5184f203ebe7ddaedf073df82a658766"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+  integrity sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==
 
-"@esbuild/openbsd-x64@0.18.20":
+"@esbuild/netbsd-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz#d633c09492a1721377f3bccedb2d821b911e813d"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+  integrity sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==
 
-"@esbuild/sunos-x64@0.18.20":
+"@esbuild/openbsd-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz#17388c76e2f01125bf831a68c03a7ffccb65d1a2"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+  integrity sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==
 
-"@esbuild/win32-arm64@0.18.20":
+"@esbuild/sunos-x64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz#e320636f00bb9f4fdf3a80e548cb743370d41767"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+  integrity sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==
 
-"@esbuild/win32-ia32@0.18.20":
+"@esbuild/win32-arm64@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz#c778b45a496e90b6fc373e2a2bb072f1441fe0ee"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+  integrity sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==
 
-"@esbuild/win32-x64@0.18.20":
+"@esbuild/win32-ia32@0.19.11":
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz#481a65fee2e5cce74ec44823e6b09ecedcc5194c"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+  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:
+esbuild@^0.19.3:
-  version "0.18.20"
+  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.11.tgz#4a02dca031e768b5556606e1b468fe72e3325d96"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+  integrity sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==
   optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
+    "@esbuild/aix-ppc64" "0.19.11"
-    "@esbuild/android-arm64" "0.18.20"
+    "@esbuild/android-arm" "0.19.11"
-    "@esbuild/android-x64" "0.18.20"
+    "@esbuild/android-arm64" "0.19.11"
-    "@esbuild/darwin-arm64" "0.18.20"
+    "@esbuild/android-x64" "0.19.11"
-    "@esbuild/darwin-x64" "0.18.20"
+    "@esbuild/darwin-arm64" "0.19.11"
-    "@esbuild/freebsd-arm64" "0.18.20"
+    "@esbuild/darwin-x64" "0.19.11"
-    "@esbuild/freebsd-x64" "0.18.20"
+    "@esbuild/freebsd-arm64" "0.19.11"
-    "@esbuild/linux-arm" "0.18.20"
+    "@esbuild/freebsd-x64" "0.19.11"
-    "@esbuild/linux-arm64" "0.18.20"
+    "@esbuild/linux-arm" "0.19.11"
-    "@esbuild/linux-ia32" "0.18.20"
+    "@esbuild/linux-arm64" "0.19.11"
-    "@esbuild/linux-loong64" "0.18.20"
+    "@esbuild/linux-ia32" "0.19.11"
-    "@esbuild/linux-mips64el" "0.18.20"
+    "@esbuild/linux-loong64" "0.19.11"
-    "@esbuild/linux-ppc64" "0.18.20"
+    "@esbuild/linux-mips64el" "0.19.11"
-    "@esbuild/linux-riscv64" "0.18.20"
+    "@esbuild/linux-ppc64" "0.19.11"
-    "@esbuild/linux-s390x" "0.18.20"
+    "@esbuild/linux-riscv64" "0.19.11"
-    "@esbuild/linux-x64" "0.18.20"
+    "@esbuild/linux-s390x" "0.19.11"
-    "@esbuild/netbsd-x64" "0.18.20"
+    "@esbuild/linux-x64" "0.19.11"
-    "@esbuild/openbsd-x64" "0.18.20"
+    "@esbuild/netbsd-x64" "0.19.11"
-    "@esbuild/sunos-x64" "0.18.20"
+    "@esbuild/openbsd-x64" "0.19.11"
-    "@esbuild/win32-arm64" "0.18.20"
+    "@esbuild/sunos-x64" "0.19.11"
-    "@esbuild/win32-ia32" "0.18.20"
+    "@esbuild/win32-arm64" "0.19.11"
-    "@esbuild/win32-x64" "0.18.20"
+    "@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:
+rollup@^4.2.0:
-  version "3.29.4"
+  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.5.tgz#62999462c90f4c8b5d7c38fc7161e63b29101b05"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+  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:
+tailwindcss@^3.4.1:
-  version "3.4.0"
+  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.0.tgz#045a9c474e6885ebd0436354e611a76af1c76839"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
-  integrity sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==
+  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:
+vite@^5.0.12:
-  version "4.5.1"
+  version "5.0.12"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47"
-  integrity sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==
+  integrity sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==
   dependencies:
-    esbuild "^0.18.10"
+    esbuild "^0.19.3"
-    postcss "^8.4.27"
+    postcss "^8.4.32"
-    rollup "^3.27.1"
+    rollup "^4.2.0"
   optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"
 
 wcwidth@^1.0.1:
   version "1.0.1"