Add option to show player menu cog

Better colors

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.6.2",
+  "version": "0.6.6",
   "type": "commonjs",
   "engines": {
     "node": ">=18",

src/Components/Buttons/CommanderDamage.tsx

@@ -66,8 +66,7 @@ export const CommanderDamage = ({
 }: CommanderDamageButtonComponentProps) => {
   const { updatePlayer } = usePlayers();
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
-  const [timeoutFinished, setTimeoutFinished] = useState(false);
+  const [downLongPressed, setDownLongPressed] = useState(false);
-  const [hasPressedDown, setHasPressedDown] = useState(false);
   const downPositionRef = useRef({ x: 0, y: 0 });
 
   const handleCommanderDamageChange = (
@@ -109,16 +108,16 @@ export const CommanderDamage = ({
 
   const handleDownInput = ({ opponentIndex, isPartner, event }: InputProps) => {
     downPositionRef.current = { x: event.clientX, y: event.clientY };
-    setTimeoutFinished(false);
+    setDownLongPressed(false);
-    setHasPressedDown(true);
+
     timeoutRef.current = setTimeout(() => {
-      setTimeoutFinished(true);
+      setDownLongPressed(true);
       handleCommanderDamageChange(opponentIndex, -1, isPartner);
     }, decrementTimeoutMs);
   };
 
   const handleUpInput = ({ opponentIndex, isPartner, event }: InputProps) => {
-    if (!(hasPressedDown && !timeoutFinished)) {
+    if (downLongPressed) {
       return;
     }
 
@@ -134,14 +133,14 @@ export const CommanderDamage = ({
       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;

src/Components/Buttons/LifeCounterButton.tsx

@@ -1,8 +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;
@@ -13,7 +14,6 @@ const LifeCounterButtonTwc = twc.button`
   h-full
   w-full
   flex
-  text-lifeCounter-text
   font-semibold
   bg-transparent
   border-none
@@ -40,17 +40,15 @@ 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) => {
@@ -59,8 +57,20 @@ const LifeCounterButton = ({
   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 = (event: React.PointerEvent<HTMLButtonElement>) => {
@@ -102,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';
 
@@ -118,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>

src/Components/Buttons/LoseButton.tsx

@@ -7,7 +7,7 @@ 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 py-2 px-4 ',
 
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? `left-[19%]`
+    ? `left-[21%]`
     : 'top-[21%]',
 ]);
 

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',
@@ -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,7 +106,13 @@ 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(
@@ -108,7 +127,13 @@ 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(
@@ -123,7 +148,13 @@ 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')
@@ -137,7 +168,13 @@ 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')
@@ -151,7 +188,13 @@ 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(

src/Components/LifeCounter/Health.tsx

@@ -118,9 +118,8 @@ const Health = ({
   return (
     <LifeContainer $rotation={player.settings.rotation}>
       <LifeCounterButton
-        lifeTotal={player.lifeTotal}
+        player={player}
         setLifeTotal={handleLifeChange}
-        rotation={player.settings.rotation}
         operation="subtract"
         increment={-1}
       />
@@ -148,9 +147,8 @@ const Health = ({
         </LifeCounterTextContainer>
       </TextWrapper>
       <LifeCounterButton
-        lifeTotal={player.lifeTotal}
+        player={player}
         setLifeTotal={handleLifeChange}
-        rotation={player.settings.rotation}
         operation="add"
         increment={1}
       />

src/Components/LifeCounter/LifeCounter.tsx

@@ -4,12 +4,40 @@ 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 {
+  RotationButtonProps,
+  RotationDivProps,
+} from '../Buttons/CommanderDamage';
 import { LoseGameButton } from '../Buttons/LoseButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
 import PlayerMenu from '../Player/PlayerMenu';
 import Health from './Health';
+import { Cog } from '../../Icons/generated';
+
+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>
+  );
+};
 
 const LifeCounterContentWrapper = twc.div`
   relative flex flex-grow flex-col items-center w-full h-full overflow-hidden`;
@@ -21,7 +49,7 @@ 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 StartingPlayerNoticeWrapper = twc.div`z-10 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 opacity-75',
@@ -192,6 +220,14 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
           key={player.index}
           handleLifeChange={handleLifeChange}
         />
+        {settings.showPlayerMenuCog && (
+          <SettingsButton
+            onClick={() => {
+              setShowPlayerMenu(!showPlayerMenu);
+            }}
+            rotation={player.settings.rotation}
+          />
+        )}
         {playerCanLose(player) && (
           <LoseGameButton
             rotation={player.settings.rotation}

src/Components/Misc/InfoModal.tsx

@@ -2,6 +2,7 @@ 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 h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary w-[95vw] max-w-[548px]`;
 
@@ -18,12 +19,12 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
       style={{ display: 'flex', justifyContent: 'center' }}
     >
       <>
-        <div className="flex relative w-full max-w-[548px]">
+        <div className="flex justify-center items-center relative w-full max-w-[532px]">
           <button
             onClick={closeModal}
-            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"
+            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"
           >
-            X
+            <Cross size="16px" className="text-text-primary " />
           </button>
         </div>
         <ModalWrapper>
@@ -60,25 +61,34 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
               </li>
             </ul>
 
-            <h3 className="text-lg font-bold mb-2">Other</h3>
+            <h3 className="text-lg font-bold mb-2">Other functionality</h3>
-            <Paragraph className="mb-4">
+            <ul className="list-disc ml-6">
-              When a player is <strong>at or below 0 life</strong>, has taken{' '}
+              <li>
-              <strong>21 or more Commander Damage</strong> or has{' '}
+                <Paragraph className="mb-1">
-              <strong>10 or more poison counters</strong>, a button with a skull
+                  When a player is <strong>at or below 0 life</strong>, has
-              will appear on that player's card. Tapping it will dim the
+                  taken <strong>21 or more Commander Damage</strong> or has{' '}
-              player's card.
+                  <strong>10 or more poison counters</strong>, a button with a
-            </Paragraph>
+                  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
-              GitHub{' '}
+            </a>{' '}
-            </a>
             for more info about this web app.
           </div>
         </ModalWrapper>

src/Components/Misc/SettingsModal.tsx

@@ -5,10 +5,11 @@ import { ModalWrapper } from './InfoModal';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
 import { useEffect, useState } from 'react';
+import { Cross } from '../../Icons/generated';
 
-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 +67,18 @@ 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 relative w-full max-w-[548px]">
+        <div className="flex justify-center items-center relative w-full max-w-[532px]">
           <button
             onClick={closeModal}
-            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"
+            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"
           >
-            X
+            <Cross size="16px" className="text-text-primary " />
           </button>
         </div>
         <ModalWrapper>
@@ -98,6 +103,24 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                 start first if this is enabled.
               </Description>
             </SettingContainer>
+            <SettingContainer>
+              <ToggleContainer>
+                <FormLabel>Show Player Menu Cog</FormLabel>
+                <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>
                 <FormLabel>Keep Awake</FormLabel>

src/Components/Player/PlayerMenu.tsx

@@ -6,6 +6,7 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { useSafeRotate } from '../../Hooks/useSafeRotate';
 import {
+  Cross,
   Energy,
   Exit,
   Experience,
@@ -27,6 +28,7 @@ const PlayerMenuWrapper = twc.div`
   w-full
   h-full
   bg-background-settings
+  backdrop-blur-[3px]
   items-center
   justify-center
   z-[2]
@@ -65,17 +67,15 @@ const ButtonsSections = twc.div`
   flex-wrap
 `;
 
-const ColorPicker = twc.input`
+const ColorPickerButton = twc.div`
   h-[8vmax]
   w-[8vmax]
+  relative
   max-h-12
-  max-w-11
+  max-w-12
-  border-none
+  rounded-full
-  outline-none
   cursor-pointer
-  bg-transparent
+  overflow-hidden
-  user-select-none
-  text-common-white
 `;
 
 const SettingsContainer = twc.div<RotationDivProps>((props) => [
@@ -97,14 +97,14 @@ const PlayerMenu = ({
   isShown,
 }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
 
   const { isSide } = useSafeRotate({
     rotation: player.settings.rotation,
     containerRef: settingsContainerRef,
   });
 
-  const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
+  const { fullscreen, wakeLock, goToStart, settings } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -159,15 +159,24 @@ const PlayerMenu = ({
         }}
         ref={settingsContainerRef}
       >
+        {settings.showPlayerMenuCog && (
+          <button
+            onClick={() => setShowPlayerMenu(false)}
+            className="flex absolute top-0 right-2 z-10 w-8 h-8 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2"
+          >
+            <Cross size="16px" className="text-primary-main " />
+          </button>
+        )}
         <BetterRowContainer>
           <TogglesSection>
-            <ColorPicker
+            <ColorPickerButton aria-label="Color picker">
-              type="color"
+              <input
-              value={player.color}
+                onChange={handleColorChange}
-              onChange={handleColorChange}
+                type="color"
-              role="button"
+                className="size-[200%] absolute -left-2 -top-2"
-              aria-label="Color picker"
+                value={player.color}
-            />
+              />
+            </ColorPickerButton>
             {player.settings.useCommanderDamage && (
               <CheckboxContainer>
                 <Checkbox
@@ -196,7 +205,6 @@ const PlayerMenu = ({
                 />
               </CheckboxContainer>
             )}
-
             <CheckboxContainer>
               <Checkbox
                 name="usePoison"
@@ -223,7 +231,6 @@ const PlayerMenu = ({
                 aria-label="Poison"
               />
             </CheckboxContainer>
-
             <CheckboxContainer>
               <Checkbox
                 name="useEnergy"
@@ -250,7 +257,6 @@ const PlayerMenu = ({
                 aria-label="Energy"
               />
             </CheckboxContainer>
-
             <CheckboxContainer>
               <Checkbox
                 name="useExperience"
@@ -331,7 +337,7 @@ const PlayerMenu = ({
                 fontSize: buttonFontSize,
                 padding: '4px',
               }}
-              onClick={() => dialogRef.current?.show()}
+              onClick={() => resetGameDialogRef.current?.show()}
               role="checkbox"
               aria-checked={wakeLock.active}
               aria-label="Reset Game"
@@ -341,27 +347,30 @@ const PlayerMenu = ({
           </ButtonsSections>
         </BetterRowContainer>
         <dialog
-          ref={dialogRef}
+          ref={resetGameDialogRef}
-          className="z-[9999] min-h-2/4 bg-background-default text-text-primary rounded-2xl border-none absolute bottom-[20%]"
+          className="z-[999] size-full bg-background-settings"
+          onClick={() => resetGameDialogRef.current?.close()}
         >
-          <div className="flex flex-col p-4 gap-2">
+          <div className="flex size-full items-center justify-center">
-            <h1 className="text-center">Reset Game?</h1>
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-2xl border-none">
-            <div className="flex justify-evenly gap-4">
+              <h1 className="text-center text-text-primary">Reset Game?</h1>
-              <Button
+              <div className="flex justify-evenly gap-4">
-                variant="contained"
+                <Button
-                onClick={() => dialogRef.current?.close()}
+                  variant="contained"
-              >
+                  onClick={() => resetGameDialogRef.current?.close()}
-                No
+                >
-              </Button>
+                  No
-              <Button
+                </Button>
-                variant="contained"
+                <Button
-                onClick={() => {
+                  variant="contained"
-                  handleResetGame();
+                  onClick={() => {
-                  dialogRef.current?.close();
+                    handleResetGame();
-                }}
+                    resetGameDialogRef.current?.close();
-              >
+                  }}
-                Yes
+                >
-              </Button>
+                  Yes
+                </Button>
+              </div>
             </div>
           </div>
         </dialog>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -20,7 +20,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`;
 

src/Providers/GlobalSettingsProvider.tsx

@@ -34,7 +34,12 @@ export const GlobalSettingsProvider = ({
   const [settings, setSettings] = useState<Settings>(
     savedSettings
       ? JSON.parse(savedSettings)
-      : { goFullscreenOnStart: true, keepAwake: true, showStartingPlayer: true }
+      : {
+          goFullscreenOnStart: true,
+          keepAwake: true,
+          showStartingPlayer: true,
+          showPlayerMenuCog: true,
+        }
   );
 
   const removeLocalStorage = async () => {

src/Types/Settings.ts

@@ -15,6 +15,7 @@ export enum GameFormat {
 export type Settings = {
   keepAwake: boolean;
   showStartingPlayer: boolean;
+  showPlayerMenuCog: boolean;
   goFullscreenOnStart: boolean;
 };
 

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;
+};

tailwind.config.ts

@@ -54,6 +54,10 @@ export default {
           backdrop: 'rgba(0, 0, 0, 0.3)',
           settings: 'rgba(20, 20, 0, 0.9)',
         },
+        icons: {
+          dark: '#00000080',
+          light: '#ffffff4f',
+        },
         text: {
           primary: '#F5F5F5',
           secondary: '#76A6A5',