adminpage

src/App.tsx

@@ -12,14 +12,22 @@ import { useAuth } from '@clerk/clerk-react';
 import { ClickableMascot } from './components/ClickableMascot'; // Import ClickableMascot component
 import { ClickableMascot as ClickableMascotType, Upgrade } from './types'; // Import ClickableMascotType and Upgrade
 import { UPGRADES } from './config/upgrades'; // Import UPGRADES for upgrade config
+import { useLocation, Link } from 'wouter'; // Import wouter hooks
+import AdminPage from './components/AdminPage'; // Import AdminPage
 
 function App() {
-  const { isSignedIn, isLoaded } = useAuth();
-  const { gameState, sendClick, purchaseUpgrade, userId, sendMascotClickBonus } = usePartyKit(); // Renamed sendShoominionClickBonus
+  const { isSignedIn, isLoaded, userId: clerkUserId } = useAuth(); // Get clerkUserId from useAuth
+  const { gameState, sendClick, purchaseUpgrade, userId, sendMascotClickBonus, lastMessage } = usePartyKit(); // Renamed sendShoominionClickBonus
   const [celebrationMessage, setCelebrationMessage] = useState<string | null>(null);
   const [previousMilestones, setPreviousMilestones] = useState<Record<string, boolean>>({});
   const [mascotEntities, setMascotEntities] = useState<ClickableMascotType[]>([]);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [location] = useLocation(); // Get current location from wouter
+  const [adminBroadcastMessage, setAdminBroadcastMessage] = useState<string | null>(null); // New state for admin messages
+
+  // Admin user ID from .env
+  const CLERK_ADMIN_USERID = import.meta.env.VITE_CLERK_ADMIN_USERID;
+  const isAdmin = clerkUserId === CLERK_ADMIN_USERID;
 
   // Effect for milestone celebrations
   useEffect(() => {
@@ -42,6 +50,21 @@ function App() {
     }
   }, [gameState, previousMilestones]);
 
+  // Effect for receiving admin broadcast messages
+  useEffect(() => {
+    if (lastMessage) {
+      try {
+        const parsedMessage = JSON.parse(lastMessage);
+        if (parsedMessage.type === 'admin-message') {
+          setAdminBroadcastMessage(parsedMessage.message);
+          setTimeout(() => setAdminBroadcastMessage(null), 7000); // Message disappears after 7 seconds
+        }
+      } catch (error) {
+        console.error('Failed to parse last message in App.tsx:', error);
+      }
+    }
+  }, [lastMessage]);
+
   // Effect for spawning mascots
   useEffect(() => {
     if (!gameState) return;
@@ -152,12 +175,24 @@ function App() {
   const userBonusMultiplier = isSignedIn && userId ? gameState.users[userId]?.bonusMultiplier || 1 : 1;
   const effectiveClickMultiplier = gameState.clickMultiplier * userBonusMultiplier;
 
+  // Render the AdminPage if the current location is /admin
+  if (location === '/admin') {
+    return <AdminPage />;
+  }
+
   return (
     <div className="min-h-screen relative overflow-x-hidden">
       <Background background={gameState.currentBackground} />
-      
-      {/* User Button */}
-      <div className="absolute top-4 right-4 z-50">
+
+      {/* User Button and Admin Link */}
+      <div className="absolute top-4 right-4 z-50 flex items-center space-x-4">
+        {isAdmin && (
+          <Link href="/admin">
+            <a className="text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md font-bold transition duration-300 ease-in-out">
+              Admin Page
+            </a>
+          </Link>
+        )}
         <SignedIn>
           <UserButton />
         </SignedIn>
@@ -172,6 +207,15 @@ function App() {
         </div>
       )}
 
+      {/* Admin Broadcast Message */}
+      {adminBroadcastMessage && (
+        <div className="fixed top-20 left-0 right-0 z-50 flex justify-center pt-8">
+          <div className="bg-red-600 text-white px-8 py-4 rounded-full text-2xl font-bold shadow-2xl animate-pulse border-4 border-white">
+            📢 Admin Message: {adminBroadcastMessage} 📢
+          </div>
+        </div>
+      )}
+
       <div className="container mx-auto px-4 py-8 relative z-10">
         {/* Header */}
         <div className="mb-8">