bump

package.json

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

src/Components/LifeCounter/Health.tsx

@@ -53,23 +53,9 @@ const Health = ({
   differenceKey,
   recentDifference,
 }: HealthProps) => {
-  const [showStartingPlayer, setShowStartingPlayer] = useState(
-    localStorage.getItem('playing') === 'true'
-  );
   const [fontSize, setFontSize] = useState(16);
   const textContainerRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    if (!showStartingPlayer) {
-      const playingTimer = setTimeout(() => {
-        localStorage.setItem('playing', 'true');
-        setShowStartingPlayer(localStorage.getItem('playing') === 'true');
-      }, 3_000);
-
-      return () => clearTimeout(playingTimer);
-    }
-  }, [showStartingPlayer]);
-
   useEffect(() => {
     if (!textContainerRef.current) {
       return;

src/Components/LifeCounter/LifeCounter.tsx

@@ -1,15 +1,45 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { Cog } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
-import { RotationDivProps } from '../Buttons/CommanderDamage';
+import {
+  RotationButtonProps,
+  RotationDivProps,
+} from '../Buttons/CommanderDamage';
 import { LoseGameButton } from '../Buttons/LoseButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
+import { Paragraph } from '../Misc/TextComponents';
 import PlayerMenu from '../Player/PlayerMenu';
 import Health from './Health';
+import { baseColors } from '../../../tailwind.config';
+
+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,8 +51,6 @@ const LifeCounterWrapper = twc.div<RotationDivProps>((props) => [
     : `flex-col`,
 ]);
 
-const StartingPlayerNoticeWrapper = twc.div`z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`;
-
 const PlayerLostWrapper = twc.div<RotationDivProps>((props) => [
   'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper opacity-75',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
@@ -69,6 +97,7 @@ const RECENT_DIFFERENCE_TTL = 3_000;
 const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   const { updatePlayer, updateLifeTotal } = usePlayers();
   const { settings } = useGlobalSettings();
+  const playingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
   const [recentDifference, setRecentDifference] = useState(0);
@@ -122,17 +151,12 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   }, [recentDifference, document.body.clientHeight, document.body.clientWidth]);
 
   useEffect(() => {
-    if (player.showStartingPlayer) {
+    playingTimerRef.current = setTimeout(() => {
-      const playingTimer = setTimeout(() => {
       localStorage.setItem('playing', 'true');
-        player.showStartingPlayer = false;
+    }, 10_000);
-        updatePlayer(player);
-      }, 3_000);
 
-      return () => clearTimeout(playingTimer);
+    return () => clearTimeout(playingTimerRef.current);
-    }
+  }, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [player.showStartingPlayer]);
 
   player.settings.rotation === Rotation.SideFlipped ||
     player.settings.rotation === Rotation.Side;
@@ -170,17 +194,31 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
         {settings.showStartingPlayer &&
           player.isStartingPlayer &&
           player.showStartingPlayer && (
-            <StartingPlayerNoticeWrapper
+            <div
-              style={{ rotate: `${calcRotation}deg` }}
+              className="z-10 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
+              style={{
+                rotate: `${calcRotation}deg`,
+                backgroundImage: `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`,
+              }}
+              onClick={() => {
+                clearTimeout(playingTimerRef.current);
+                localStorage.setItem('playing', 'true');
+                player.showStartingPlayer = false;
+                updatePlayer(player);
+              }}
             >
               <DynamicText
                 style={{
                   rotate: `${calcTextRotation}deg`,
                 }}
               >
-                You start!
+                <div className="flex flex-col justify-center items-center">
+                  <Paragraph>👑</Paragraph>
+                  <Paragraph>You start!</Paragraph>
+                  <Paragraph className="text-xl">(Press to hide)</Paragraph>
+                </div>
               </DynamicText>
-            </StartingPlayerNoticeWrapper>
+            </div>
           )}
 
         {player.hasLost && (
@@ -192,6 +230,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
+                  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,
@@ -103,7 +104,7 @@ const PlayerMenu = ({
     containerRef: settingsContainerRef,
   });
 
-  const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
+  const { fullscreen, wakeLock, goToStart, settings } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -158,6 +159,14 @@ 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>
             <ColorPickerButton aria-label="Color picker">

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

tailwind.config.ts

@@ -2,45 +2,7 @@
 import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
 import type { Config } from 'tailwindcss';
 
-/** @type {import('tailwindcss').Config} */
+export const baseColors = {
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    screens: {
-      modalSm: '548px',
-    },
-    extend: {
-      gridTemplateAreas: {
-        onePlayerLandscape: ['player0 player0'],
-        onePlayerPortrait: ['player0', 'player0'],
-        twoPlayersOppositeLandscape: ['player0', 'player1'],
-        twoPlayersOppositePortrait: ['player0 player1', 'player0 player1'],
-        twoPlayersSameSideLandscape: ['player0 player1'],
-        threePlayers: ['player0 player0', 'player1 player2'],
-        threePlayersSide: [
-          'player0 player0 player0 player2',
-          'player1 player1 player1 player2',
-        ],
-        fourPlayerPortrait: [
-          'player0 player1 player1 player1 player1 player3',
-          'player0 player2 player2 player2 player2 player3',
-        ],
-        fourPlayer: ['player0 player1', 'player2 player3'],
-        fivePlayers: [
-          'player0 player0 player0 player1 player1 player1',
-          'player2 player2 player3 player3 player4 player4',
-        ],
-        fivePlayersSide: [
-          'player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2',
-          'player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2',
-        ],
-        sixPlayers: ['player0 player1 player2', 'player3 player4 player5'],
-        sixPlayersSide: [
-          'player0 player1 player1 player1 player1 player2 player2 player2 player2 player3',
-          'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
-        ],
-      },
-      colors: {
   primary: {
     main: '#3E7D78',
     dark: '#2D5F5B',
@@ -82,7 +44,47 @@ export default {
       text: '#333333',
     },
   },
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    screens: {
+      modalSm: '548px',
     },
+    extend: {
+      gridTemplateAreas: {
+        onePlayerLandscape: ['player0 player0'],
+        onePlayerPortrait: ['player0', 'player0'],
+        twoPlayersOppositeLandscape: ['player0', 'player1'],
+        twoPlayersOppositePortrait: ['player0 player1', 'player0 player1'],
+        twoPlayersSameSideLandscape: ['player0 player1'],
+        threePlayers: ['player0 player0', 'player1 player2'],
+        threePlayersSide: [
+          'player0 player0 player0 player2',
+          'player1 player1 player1 player2',
+        ],
+        fourPlayerPortrait: [
+          'player0 player1 player1 player1 player1 player3',
+          'player0 player2 player2 player2 player2 player3',
+        ],
+        fourPlayer: ['player0 player1', 'player2 player3'],
+        fivePlayers: [
+          'player0 player0 player0 player1 player1 player1',
+          'player2 player2 player3 player3 player4 player4',
+        ],
+        fivePlayersSide: [
+          'player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2',
+          'player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2',
+        ],
+        sixPlayers: ['player0 player1 player2', 'player3 player4 player5'],
+        sixPlayersSide: [
+          'player0 player1 player1 player1 player1 player2 player2 player2 player2 player3',
+          'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
+        ],
+      },
+      colors: baseColors,
       keyframes: {
         fadeOut: {
           '0%': {