From 968d868c2737a2bbf6565ca775b117cb5fad4600 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Sun, 25 Jan 2026 08:26:40 -0700
Subject: [PATCH] Host disconnected

---
 App.tsx | 51 ++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/App.tsx b/App.tsx
index bf7a69f..503e242 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { useAuth } from 'react-oidc-context';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { RefreshCw, LogOut } from 'lucide-react';
 import { useGame } from './hooks/useGame';
 import { useQuizLibrary } from './hooks/useQuizLibrary';
 import { useUserConfig } from './hooks/useUserConfig';
@@ -328,13 +330,48 @@ function App() {
         ) : null}
 
         {gameState === 'DISCONNECTED' && currentPlayerName && gamePin ? (
-          <DisconnectedScreen
-            playerName={currentPlayerName}
-            gamePin={gamePin}
-            isReconnecting={isReconnecting}
-            onReconnect={attemptReconnect}
-            onGoHome={goHomeFromDisconnected}
-          />
+          role === 'HOST' ? (
+            // Host disconnected - show reconnecting state or allow ending game
+            <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
+              <motion.div
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-md w-full"
+              >
+                <motion.div
+                  animate={{ rotate: 360 }}
+                  transition={{ repeat: Infinity, duration: 2, ease: "linear" }}
+                  className="bg-blue-500 p-6 rounded-full inline-block mb-6 shadow-lg"
+                >
+                  <RefreshCw size={48} className="text-white" />
+                </motion.div>
+
+                <h1 className="text-3xl font-black font-display mb-4">Reconnecting...</h1>
+                
+                <p className="text-lg opacity-70 mb-8">
+                  Restoring your game session for <span className="font-mono font-bold">{gamePin}</span>
+                </p>
+
+                <motion.button
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  onClick={goHomeFromDisconnected}
+                  className="w-full bg-white/20 text-white px-8 py-4 rounded-full text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2"
+                >
+                  <LogOut size={20} />
+                  Cancel & End Game
+                </motion.button>
+              </motion.div>
+            </div>
+          ) : (
+            <DisconnectedScreen
+              playerName={currentPlayerName}
+              gamePin={gamePin}
+              isReconnecting={isReconnecting}
+              onReconnect={attemptReconnect}
+              onGoHome={goHomeFromDisconnected}
+            />
+          )
         ) : null}
 
         {gameState === 'WAITING_TO_REJOIN' && currentPlayerName ? (