bump

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.6.6",
+  "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,8 +1,9 @@
-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 {
   RotationButtonProps,
@@ -11,9 +12,10 @@ import {
 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 { Cog } from '../../Icons/generated';
+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',
@@ -49,8 +51,6 @@ const LifeCounterWrapper = twc.div<RotationDivProps>((props) => [
     : `flex-col`,
 ]);
 
-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',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
@@ -97,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);
@@ -150,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');
-        localStorage.setItem('playing', 'true');
+    }, 10_000);
-        player.showStartingPlayer = false;
-        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;
@@ -198,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 && (

tailwind.config.ts

@@ -2,6 +2,50 @@
 import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
 import type { Config } from 'tailwindcss';
 
+export const baseColors = {
+  primary: {
+    main: '#3E7D78',
+    dark: '#2D5F5B',
+  },
+  secondary: {
+    main: '#284F4C',
+    dark: '#1B3B38',
+  },
+  background: {
+    default: '#08253B',
+    backdrop: 'rgba(0, 0, 0, 0.3)',
+    settings: 'rgba(20, 20, 0, 0.9)',
+  },
+  icons: {
+    dark: '#00000080',
+    light: '#ffffff4f',
+  },
+  text: {
+    primary: '#F5F5F5',
+    secondary: '#76A6A5',
+  },
+  action: {
+    disabled: '#234A47',
+  },
+  common: {
+    white: '#F9FFE3',
+    black: '#000000',
+  },
+  lifeCounter: {
+    text: 'rgba(0, 0, 0, 0.4)',
+    lostWrapper: '#000000',
+  },
+  interface: {
+    loseButton: {
+      background: '#43434380',
+    },
+    recentDifference: {
+      background: 'rgba(255, 255, 255, 0.6);',
+      text: '#333333',
+    },
+  },
+};
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
@@ -40,49 +84,7 @@ export default {
           'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
         ],
       },
-      colors: {
+      colors: baseColors,
-        primary: {
-          main: '#3E7D78',
-          dark: '#2D5F5B',
-        },
-        secondary: {
-          main: '#284F4C',
-          dark: '#1B3B38',
-        },
-        background: {
-          default: '#08253B',
-          backdrop: 'rgba(0, 0, 0, 0.3)',
-          settings: 'rgba(20, 20, 0, 0.9)',
-        },
-        icons: {
-          dark: '#00000080',
-          light: '#ffffff4f',
-        },
-        text: {
-          primary: '#F5F5F5',
-          secondary: '#76A6A5',
-        },
-        action: {
-          disabled: '#234A47',
-        },
-        common: {
-          white: '#F9FFE3',
-          black: '#000000',
-        },
-        lifeCounter: {
-          text: 'rgba(0, 0, 0, 0.4)',
-          lostWrapper: '#000000',
-        },
-        interface: {
-          loseButton: {
-            background: '#43434380',
-          },
-          recentDifference: {
-            background: 'rgba(255, 255, 255, 0.6);',
-            text: '#333333',
-          },
-        },
-      },
       keyframes: {
         fadeOut: {
           '0%': {