From 5242f8d1f341fa31ed957bf16bbc4e9083c451ee Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Sun, 25 Jan 2026 08:05:57 -0700
Subject: [PATCH] Fix host screen

---
 App.tsx                     |  1 +
 components/RevealScreen.tsx | 32 ++++++++++++++++++++++++++------
 hooks/useGame.ts            | 19 +++++++++++++++++--
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/App.tsx b/App.tsx
index 270be7b..bf7a69f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -299,6 +299,7 @@ function App() {
                 onNext={showScoreboard}
                 isPresenter={currentPlayerId === presenterId}
                 onPresenterAdvance={() => sendAdvance('SCOREBOARD')}
+                hostParticipates={gameConfig.hostParticipates}
             />
           ) : currentPlayerName ? (
             <WaitingToRejoin
diff --git a/components/RevealScreen.tsx b/components/RevealScreen.tsx
index 8bd7043..a51eab6 100644
--- a/components/RevealScreen.tsx
+++ b/components/RevealScreen.tsx
@@ -37,6 +37,7 @@ interface RevealScreenProps {
   onNext?: () => void;
   isPresenter?: boolean;
   onPresenterAdvance?: () => void;
+  hostParticipates?: boolean;
 }
 
 export const RevealScreen: React.FC<RevealScreenProps> = ({
@@ -49,10 +50,13 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
   role,
   onNext,
   isPresenter = false,
-  onPresenterAdvance
+  onPresenterAdvance,
+  hostParticipates = false
 }) => {
   const isHost = role === 'HOST';
   const canAdvance = isHost || isPresenter;
+  // When host is participating, show client-style feedback view instead of presentation view
+  const showPlayerFeedback = !isHost || hostParticipates;
 
   // Trigger confetti for correct answers
   useEffect(() => {
@@ -66,7 +70,8 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
     }
   }, [isCorrect, isHost]);
 
-  if (isHost) {
+  // Host spectating (not participating) - show presentation view with big answer card
+  if (isHost && !hostParticipates) {
     const ShapeIcon = SHAPES[correctOption.shape];
     const colorClass = COLORS[correctOption.color];
 
@@ -196,7 +201,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
       </motion.div>
 
       {!isCorrect && (
-           <div className={`absolute bottom-0 left-0 right-0 overflow-hidden z-20 ${isPresenter ? 'pb-20' : ''}`}>
+           <div className={`absolute bottom-0 left-0 right-0 overflow-hidden z-20 ${(isHost || isPresenter) ? 'pb-20' : ''}`}>
              <motion.div 
                 initial={{ y: "100%" }}
                 animate={{ y: 0 }}
@@ -229,16 +234,31 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
            </div>
       )}
 
-      {isPresenter && onPresenterAdvance && (
+      {/* Host participating gets the continue button */}
+      {isHost && onNext && (
+        <motion.button
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5 }}
+          onClick={onNext}
+          className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 z-30 cursor-pointer"
+        >
+          Continue to Scoreboard
+          <ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />
+        </motion.button>
+      )}
+
+      {/* Presenter (non-host) gets the continue button */}
+      {!isHost && isPresenter && onPresenterAdvance && (
         <motion.button
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.5 }}
           onClick={onPresenterAdvance}
-          className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-8 py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 z-30 cursor-pointer"
+          className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 z-30 cursor-pointer"
         >
           Continue to Scoreboard
-          <ChevronRight size={28} strokeWidth={3} />
+          <ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />
         </motion.button>
       )}
     </div>
diff --git a/hooks/useGame.ts b/hooks/useGame.ts
index a5a66b6..03bd3b7 100644
--- a/hooks/useGame.ts
+++ b/hooks/useGame.ts
@@ -544,11 +544,26 @@ export const useGame = (defaultGameConfig?: GameConfig) => {
         await updateHostPeerId(session.pin, session.hostSecret!, peerId);
       }
       
-      if (hostData.gameState === 'LOBBY') {
+      // Determine which state to restore to
+      const savedState = hostData.gameState;
+      const restoredPlayers = hostData.players || [];
+      const allAnswered = restoredPlayers.length > 0 && restoredPlayers.every((p: Player) => p.lastAnswerCorrect !== null);
+      
+      if (savedState === 'LOBBY') {
         setGameState('LOBBY');
-      } else if (hostData.gameState === 'PODIUM') {
+      } else if (savedState === 'PODIUM') {
         setGameState('PODIUM');
+      } else if (savedState === 'REVEAL') {
+        // Go directly to reveal screen - players may have already seen their results
+        setGameState('REVEAL');
+      } else if (savedState === 'SCOREBOARD') {
+        // Go directly to scoreboard
+        setGameState('SCOREBOARD');
+      } else if (savedState === 'QUESTION' && allAnswered) {
+        // All players answered while host was disconnected - go directly to reveal
+        setGameState('REVEAL');
       } else {
+        // For QUESTION or COUNTDOWN states where not everyone answered, show HOST_RECONNECTED to let them resume
         setGameState('HOST_RECONNECTED');
       }