wip

src/Components/LifeCounter/LifeCounter.tsx

@@ -13,7 +13,7 @@ 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 PlayerMenu from '../Players/PlayerMenu';
 import Health from './Health';
 import { baseColors } from '../../../tailwind.config';
 
@@ -88,16 +88,24 @@ const playerCanLose = (player: Player) => {
 };
 
 type LifeCounterProps = {
+  stopRandom: boolean;
   player: Player;
   opponents: Player[];
+  isStartingPlayer?: boolean;
 };
 
 const RECENT_DIFFERENCE_TTL = 3_000;
 
-const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
+const LifeCounter = ({
+  stopRandom,
+  player,
+  opponents,
+  isStartingPlayer,
+}: LifeCounterProps) => {
   const { updatePlayer, updateLifeTotal } = usePlayers();
   const { settings } = useGlobalSettings();
   const playingTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [playing, setPlaying] = useState(false);
 
   const [showPlayerMenu, setShowPlayerMenu] = useState(false);
   const [recentDifference, setRecentDifference] = useState(0);
@@ -127,6 +135,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
     onSwiping: (e) => e.event.stopPropagation(),
     rotationAngle,
   });
+  console.log('stopRandom', stopRandom);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -153,6 +162,7 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
   useEffect(() => {
     playingTimerRef.current = setTimeout(() => {
       localStorage.setItem('playing', 'true');
+      setPlaying(true);
     }, 10_000);
 
     return () => clearTimeout(playingTimerRef.current);
@@ -191,39 +201,49 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
         style={{ rotate: `${calcRotation}deg` }}
         {...handlers}
       >
-        {settings.showStartingPlayer &&
-          player.isStartingPlayer &&
-          player.showStartingPlayer && (
-            <div
-              className="z-10 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
+        {!playing && settings.showStartingPlayer && isStartingPlayer && (
+          <div
+            className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
+            style={{
+              rotate: `${calcRotation}deg`,
+              backgroundImage:
+                stopRandom || !settings.useRandomStartingPlayerInterval
+                  ? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
+                  : 'none',
+            }}
+            onClick={() => {
+              clearTimeout(playingTimerRef.current);
+              localStorage.setItem('playing', 'true');
+              setPlaying(true);
+            }}
+          >
+            <DynamicText
               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);
+                rotate: `${calcTextRotation}deg`,
               }}
             >
-              <DynamicText
-                style={{
-                  rotate: `${calcTextRotation}deg`,
-                }}
-              >
-                <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>
-            </div>
-          )}
+              <div className="flex flex-col justify-center items-center">
+                <Paragraph>👑</Paragraph>
+                {(stopRandom || !settings.useRandomStartingPlayerInterval) && (
+                  <>
+                    <Paragraph>You start!</Paragraph>
+                    <Paragraph className="text-xl">(Press to hide)</Paragraph>
+                  </>
+                )}
+              </div>
+            </DynamicText>
+          </div>
+        )}
 
         {player.hasLost && (
           <PlayerLostWrapper $rotation={player.settings.rotation} />
         )}
+        {settings.useRandomStartingPlayerInterval && !stopRandom && (
+          <div
+            className="flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none z-10"
+            style={{ backgroundColor: player.color }}
+          />
+        )}
         <CommanderDamageBar
           opponents={opponents}
           player={player}