addded ratmsic

src/App.tsx

@@ -15,6 +15,7 @@ import { UPGRADES } from './config/upgrades'; // Import UPGRADES for upgrade con
 import { useLocation, Link } from 'wouter'; // Import wouter hooks
 import AdminPage from './components/AdminPage'; // Import AdminPage
 import { NewsMarquee } from './components/NewsMarquee'; // Import NewsMarquee
+import YouTube from 'react-youtube'; // Import YouTube component
 
 function App() {
   const { isSignedIn, isLoaded, userId: clerkUserId } = useAuth(); // Get clerkUserId from useAuth
@@ -24,9 +25,10 @@ function App() {
   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 [location, setLocation] = useLocation(); // Get current location from wouter
   const [adminBroadcastMessage, setAdminBroadcastMessage] = useState<string | null>(null); // New state for admin messages
+  const [showSecretVideo, setShowSecretVideo] = useState(false); // New state for secret video
 
   // Admin user ID from .env
   const CLERK_ADMIN_USERID = import.meta.env.VITE_CLERK_ADMIN_USERID;
@@ -53,6 +55,13 @@ function App() {
     }
   }, [gameState, previousMilestones]);
 
+  // Effect for secret video
+  useEffect(() => {
+    if (gameState?.upgrades['secretVideo']?.owned > 0) {
+      setShowSecretVideo(true);
+    }
+  }, [gameState?.upgrades['secretVideo']?.owned]);
+
   // Effect for receiving admin broadcast messages
   useEffect(() => {
     if (lastMessage) {
@@ -86,11 +95,11 @@ function App() {
     }
 
     if (ownedFriendBoost > 0 && friendBoostUpgrade && friendBoostUpgrade.mascotTiers) {
-      const baseInterval = 12000; // Increased base interval for less frequent spawns
+      const baseInterval = 18000; // Further 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
 
@@ -99,25 +108,13 @@ function App() {
         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 ref not found!');
-          timeoutRef.current = setTimeout(spawnMascot, 1000); // Retry after 1 second
-          return;
-        }
-
-        const rect = buttonContainer.getBoundingClientRect();
-        const spawnAreaPadding = 150;
-        const minX = rect.left - spawnAreaPadding;
-        const maxX = rect.right + spawnAreaPadding;
-        const minY = rect.top - spawnAreaPadding;
-        const maxY = rect.bottom + spawnAreaPadding;
-
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
 
-        const randomX = Math.max(0, Math.min(viewportWidth, minX + Math.random() * (maxX - minX)));
-        const randomY = Math.max(0, Math.min(viewportHeight, minY + Math.random() * (maxY - minY)));
+        // Spawn anywhere on the viewport, with a small padding to avoid edges
+        const padding = 50;
+        const randomX = Math.random() * (viewportWidth - padding * 2) + padding;
+        const randomY = Math.random() * (viewportHeight - padding * 2) + padding;
 
         // Filter available mascots based on ownedFriendBoost level
         const availableMascots = currentMascotTiers.filter(
@@ -152,7 +149,7 @@ function App() {
         };
 
         setMascotEntities((prev) => [...prev, newMascot]);
-        
+
         timeoutRef.current = setTimeout(spawnMascot, interval);
       };
 
@@ -248,7 +245,7 @@ function App() {
         {/* Main Content */}
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           {/* Left Column - Click Button */}
-          <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 */}
+          <div 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}
@@ -298,6 +295,22 @@ function App() {
         </div>
       </div>
 
+      {/* Secret Video Player */}
+      {showSecretVideo && (
+        <div className="fixed bottom-4 left-4 z-50">
+          <YouTube
+            videoId={UPGRADES.find(u => u.id === 'secretVideo')?.youtubeId || ''}
+            opts={{
+              height: '195',
+              width: '320',
+              playerVars: {
+                autoplay: 1,
+              },
+            }}
+          />
+        </div>
+      )}
+
       {/* Sparkle Effects */}
       <div className="fixed inset-0 pointer-events-none z-20">
         {[...Array(10)].map((_, i) => (