fixed bozos

src/App.tsx

@@ -23,6 +23,8 @@ function App() {
   const [previousMilestones, setPreviousMilestones] = useState<Record<string, boolean>>({});
   const [mascotEntities, setMascotEntities] = useState<ClickableMascotType[]>([]);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const gameStateRef = useRef(gameState); // Ref to hold the latest gameState
+  const clickButtonContainerRef = useRef<HTMLDivElement>(null); // New ref for the click button container
   const [location] = useLocation(); // Get current location from wouter
   const [adminBroadcastMessage, setAdminBroadcastMessage] = useState<string | null>(null); // New state for admin messages
 
@@ -66,12 +68,18 @@ function App() {
     }
   }, [lastMessage]);
 
+  // Effect to keep gameStateRef updated
+  useEffect(() => {
+    gameStateRef.current = gameState;
+  }, [gameState]);
+
   // Effect for spawning mascots
   useEffect(() => {
-    if (!gameState) return;
+    // Use gameStateRef.current for initial check and to get latest state inside spawnMascot
+    if (!gameStateRef.current) return;
 
     const friendBoostUpgrade = UPGRADES.find(u => u.id === 'friendBoost') as Upgrade | undefined;
-    const ownedFriendBoost = gameState.upgrades['friendBoost']?.owned || 0;
+    const ownedFriendBoost = gameStateRef.current.upgrades['friendBoost']?.owned || 0;
 
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -81,13 +89,19 @@ function App() {
       const baseInterval = 10000; // Increased base interval for less frequent spawns
       const minInterval = 1000; // Increased min interval
       const interval = Math.max(minInterval, baseInterval / (1 + ownedFriendBoost * 0.2)); // Adjusted scaling
+      console.log(`Spawning mascots every ${interval} ms for friendBoost level ${ownedFriendBoost}`);
+      
 
       const currentMascotTiers = friendBoostUpgrade.mascotTiers; // Ensure mascotTiers is not undefined
 
       const spawnMascot = () => {
-        const buttonContainer = document.getElementById('click-button-container');
+        // Access the latest gameState from the ref inside the closure
+        const currentGameState = gameStateRef.current;
+        if (!currentGameState) return; // Should not happen if initial check passes
+
+        const buttonContainer = clickButtonContainerRef.current; // Use the ref
         if (!buttonContainer) {
-          console.warn('Click button container not found!');
+          console.warn('Click button container ref not found!');
           timeoutRef.current = setTimeout(spawnMascot, 1000); // Retry after 1 second
           return;
         }
@@ -152,7 +166,7 @@ function App() {
         clearTimeout(timeoutRef.current);
       }
     };
-  }, [gameState?.upgrades['friendBoost']?.owned, gameState]);
+  }, [gameState?.upgrades['friendBoost']?.owned]); // Only depend on friendBoost level
 
   const handleMascotClick = (id: string, multiplierBonus: number) => { // Renamed handler
     sendMascotClickBonus(multiplierBonus); // Renamed function call
@@ -234,7 +248,7 @@ function App() {
         {/* Main Content */}
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           {/* Left Column - Click Button */}
-          <div id="click-button-container" className="lg:col-span-1 flex flex-col items-center justify-center relative"> {/* Added id and relative positioning */}
+          <div ref={clickButtonContainerRef} id="click-button-container" className="lg:col-span-1 flex flex-col items-center justify-center relative"> {/* Added ref, id and relative positioning */}
             <ClickButton 
               onClick={sendClick}
               imageUrl={gameState.currentClickImage}