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;

src/hooks/usePartyKit.ts

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import PartySocket from 'partysocket';
 import { GameState } from '../types';
 
-const PARTY_HOST = import.meta.env.DEV ? 'localhost:1998' : 'bozo-clicker.your-username.partykit.dev';
+const PARTY_HOST = import.meta.env.DEV ? 'localhost:1999' : 'bozo-clicker.your-username.partykit.dev';
 
 export function usePartyKit() {
   const [gameState, setGameState] = useState<GameState | null>(null);

src/main.tsx

@@ -2,9 +2,18 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { ClerkProvider } from '@clerk/clerk-react'
 
+// Import your Publishable Key
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error('Missing Publishable Key')
+}
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+  <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
     <App />
+  </ClerkProvider>
   </StrictMode>
 );