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) {
-      const playingTimer = setTimeout(() => {
+    playingTimerRef.current = setTimeout(() => {
       localStorage.setItem('playing', 'true');
-        player.showStartingPlayer = false;
-        updatePlayer(player);
-      }, 3_000);
+    }, 10_000);
 
-      return () => clearTimeout(playingTimer);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [player.showStartingPlayer]);
+    return () => clearTimeout(playingTimerRef.current);
+  }, []);
 
   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
-              style={{ rotate: `${calcRotation}deg` }}
+            <div
+              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,45 +2,7 @@
 import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
 import type { Config } from 'tailwindcss';
 
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    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: {
+export const baseColors = {
   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%': {