Add api key and sorting on scoreboard

hooks/useGame.ts

@@ -390,16 +390,20 @@ export const useGame = () => {
     }
     
     setIsReconnecting(true);
+    setRole('HOST');
+    setGamePin(session.pin);
+    setGameState('DISCONNECTED'); // Show loading state on disconnected screen
+    setCurrentPlayerName("Host");
+    
     const hostData = await fetchHostSession(session.pin, session.hostSecret);
     
     if (!hostData) {
       clearStoredSession();
       setIsReconnecting(false);
+      setGameState('LANDING');
       return;
     }
     
-    setRole('HOST');
-    setGamePin(session.pin);
     setHostSecret(session.hostSecret);
     setQuiz(hostData.quiz);
     setGameConfig(hostData.gameConfig);
@@ -422,6 +426,7 @@ export const useGame = () => {
       }
     } else {
       setPlayers([]);
+      setCurrentPlayerName('Host'); // Ensure name is set for DisconnectedScreen
     }
     
     setupHostPeer(session.pin, async (peerId) => {
@@ -452,6 +457,7 @@ export const useGame = () => {
     setRole('CLIENT');
     setGamePin(session.pin);
     setCurrentPlayerName(session.playerName);
+    setGameState('WAITING_TO_REJOIN'); // Show "Welcome Back" screen early
     
     const gameInfo = await fetchGameInfo(session.pin);
     
@@ -464,6 +470,7 @@ export const useGame = () => {
     if (gameInfo.gameState === 'PODIUM') {
       clearStoredSession();
       setIsReconnecting(false);
+      setGameState('LANDING');
       return;
     }
     
@@ -493,30 +500,34 @@ export const useGame = () => {
       
       const hostMatch = path.match(/^\/host\/(\d+)$/);
       const playMatch = path.match(/^\/play\/(\d+)$/);
-      
-      if (hostMatch) {
-        const pin = hostMatch[1];
-        const session = getStoredSession();
-        if (session && session.pin === pin && session.role === 'HOST') {
-          isInitializingFromUrl.current = true;
+      const session = getStoredSession();
+      const pinFromUrl = hostMatch ? hostMatch[1] : (playMatch ? playMatch[1] : null);
+
+      if (pinFromUrl && session && session.pin === pinFromUrl) {
+        isInitializingFromUrl.current = true;
+        if (session.role === 'HOST') {
           await reconnectAsHost(session);
-          isInitializingFromUrl.current = false;
         } else {
-          navigate('/', { replace: true });
+          await reconnectAsClient(session);
         }
+        isInitializingFromUrl.current = false;
         return;
       }
-      
+
+      if (hostMatch) {
+        navigate('/', { replace: true });
+        return;
+      }
+
       if (playMatch) {
-        const pin = playMatch[1];
-        const session = getStoredSession();
-        if (session && session.pin === pin && session.role === 'CLIENT') {
+        const urlPin = playMatch[1];
+        if (session && session.pin === urlPin && session.role === 'CLIENT' && session.playerName) {
           isInitializingFromUrl.current = true;
           await reconnectAsClient(session);
           isInitializingFromUrl.current = false;
-        } else {
-          setGamePin(pin);
+          return;
         }
+        setGamePin(urlPin);
         return;
       }
       
@@ -563,7 +574,6 @@ export const useGame = () => {
         return;
       }
       
-      const session = getStoredSession();
       if (session) {
         if (session.role === 'HOST') {
           reconnectAsHost(session);
@@ -605,9 +615,11 @@ export const useGame = () => {
     questionCount?: number; 
     files?: File[]; 
     useOcr?: boolean;
-    aiProvider?: 'gemini' | 'openrouter';
+    aiProvider?: 'gemini' | 'openrouter' | 'openai';
     apiKey?: string;
+    geminiModel?: string;
     openRouterModel?: string;
+    openAIModel?: string;
   }) => {
     try {
       setGameState('GENERATING');
@@ -627,7 +639,9 @@ export const useGame = () => {
         documents,
         aiProvider: options.aiProvider,
         apiKey: options.apiKey,
+        geminiModel: options.geminiModel,
         openRouterModel: options.openRouterModel,
+        openAIModel: options.openAIModel,
       };
       
       const generatedQuiz = await generateQuiz(generateOptions);

hooks/useUserPreferences.ts

@@ -45,8 +45,11 @@ export const useUserPreferences = (): UseUserPreferencesReturn => {
           colorScheme: data.colorScheme || 'blue',
           aiProvider: data.aiProvider || 'gemini',
           geminiApiKey: data.geminiApiKey || undefined,
+          geminiModel: data.geminiModel || undefined,
           openRouterApiKey: data.openRouterApiKey || undefined,
           openRouterModel: data.openRouterModel || undefined,
+          openAIApiKey: data.openAIApiKey || undefined,
+          openAIModel: data.openAIModel || undefined,
         };
         setPreferences(prefs);
         setHasAIAccess(data.hasAIAccess || false);