clerk

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import  { useEffect, useState } from 'react';
 import { usePartyKit } from './hooks/usePartyKit';
 import { ClickButton } from './components/ClickButton';
 import { Counter } from './components/Counter';
@@ -7,6 +7,7 @@ import { Milestones } from './components/Milestones';
 import { Leaderboard } from './components/Leaderboard';
 import { Background } from './components/Background';
 import { MILESTONES } from './config/milestones';
+import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react';
 
 function App() {
   const { gameState, sendClick, purchaseUpgrade, userId } = usePartyKit();
@@ -50,6 +51,13 @@ function App() {
     <div className="min-h-screen relative overflow-x-hidden">
       <Background background={gameState.currentBackground} />
       
+      {/* User Button */}
+      <div className="absolute top-4 right-4 z-50">
+        <SignedIn>
+          <UserButton />
+        </SignedIn>
+      </div>
+
       {/* Celebration Message */}
       {celebrationMessage && (
         <div className="fixed top-0 left-0 right-0 z-50 flex justify-center pt-8">
@@ -125,8 +133,22 @@ function App() {
           </div>
         ))}
       </div>
+      {/* If not logged in, show popup overlaying the game to login */}
+      <SignedOut>
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+          <div className="bg-white p-8 rounded-lg shadow-lg text-center">
+            <h2 className="text-2xl font-bold mb-4">Welcome to Bozo Clicker!</h2>
+            <p className="mb-6">Please sign in to start clicking!</p>
+            <SignInButton mode="modal">
+              <button className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition">
+                Sign In
+              </button>
+            </SignInButton>
+          </div>
+        </div>
+      </SignedOut>
     </div>
   );
 }
 
-export default App;
+export default App;