From 2b3be6569f5e82b2779a3975f7295308657e92d6 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Sun, 25 Jan 2026 08:54:04 -0700
Subject: [PATCH] Fix host

---
 components/HostReconnected.tsx | 83 +++++++++++++++++++++++++---------
 1 file changed, 62 insertions(+), 21 deletions(-)

diff --git a/components/HostReconnected.tsx b/components/HostReconnected.tsx
index 4783fef..2396f1c 100644
--- a/components/HostReconnected.tsx
+++ b/components/HostReconnected.tsx
@@ -1,57 +1,98 @@
 import React from 'react';
-import { motion } from 'framer-motion';
-import { Play, Users, X } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Play, Users, X, Wifi, WifiOff } from 'lucide-react';
+import { Player } from '../types';
+import { PlayerAvatar } from './PlayerAvatar';
 
 interface HostReconnectedProps {
   quizTitle: string;
   currentQuestionIndex: number;
   totalQuestions: number;
-  playerCount: number;
+  players: Player[];
   onResume: () => void;
   onEndGame: () => void;
+  connectedPlayerIds: string[];
 }
 
 export const HostReconnected: React.FC<HostReconnectedProps> = ({
   quizTitle,
   currentQuestionIndex,
   totalQuestions,
-  playerCount,
+  players,
   onResume,
   onEndGame,
+  connectedPlayerIds,
 }) => {
+  const realPlayers = players.filter(p => p.id !== 'host');
+  const connectedCount = connectedPlayerIds.length;
+  const totalCount = realPlayers.length;
+
   return (
     <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-lg w-full"
+        className="bg-white/10 backdrop-blur-md p-6 md:p-10 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-lg w-full"
       >
         <motion.div
           initial={{ rotate: -10 }}
           animate={{ rotate: 0 }}
-          className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
+          className="bg-green-500 p-4 md:p-6 rounded-full inline-block mb-4 md:mb-6 shadow-lg"
         >
-          <Play size={48} className="text-white ml-1" />
+          <Play size={36} className="text-white ml-1 md:w-12 md:h-12" />
         </motion.div>
 
-        <h1 className="text-3xl font-black font-display mb-2">Game Restored</h1>
-        <p className="text-xl opacity-80 mb-6">{quizTitle}</p>
+        <h1 className="text-2xl md:text-3xl font-black font-display mb-1 md:mb-2">Game Restored</h1>
+        <p className="text-base md:text-xl opacity-80 mb-4 md:mb-6">{quizTitle}</p>
         
-        <div className="grid grid-cols-2 gap-4 mb-8">
-          <div className="bg-white/10 rounded-2xl p-4">
-            <p className="text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
-            <p className="text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
+        <div className="grid grid-cols-2 gap-3 md:gap-4 mb-4 md:mb-6">
+          <div className="bg-white/10 rounded-2xl p-3 md:p-4">
+            <p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Question</p>
+            <p className="text-2xl md:text-3xl font-black">{currentQuestionIndex + 1} / {totalQuestions}</p>
           </div>
-          <div className="bg-white/10 rounded-2xl p-4">
-            <p className="text-sm uppercase tracking-wide opacity-70 mb-1">Players</p>
-            <p className="text-3xl font-black flex items-center justify-center gap-2">
-              <Users size={24} />
-              {playerCount}
+          <div className="bg-white/10 rounded-2xl p-3 md:p-4">
+            <p className="text-xs md:text-sm uppercase tracking-wide opacity-70 mb-1">Connected</p>
+            <p className="text-2xl md:text-3xl font-black flex items-center justify-center gap-2">
+              <Users size={20} className="md:w-6 md:h-6" />
+              {connectedCount} / {totalCount}
             </p>
           </div>
         </div>
 
-        <p className="text-sm opacity-60 mb-6">
+        {/* Player list showing connection status */}
+        {realPlayers.length > 0 && (
+          <div className="bg-black/20 rounded-xl p-3 mb-4 md:mb-6 max-h-32 md:max-h-40 overflow-y-auto">
+            <div className="flex flex-wrap gap-2 justify-center">
+              <AnimatePresence>
+                {realPlayers.map((player) => {
+                  const isConnected = connectedPlayerIds.includes(player.id);
+                  return (
+                    <motion.div
+                      key={player.id}
+                      initial={{ scale: 0, opacity: 0 }}
+                      animate={{ scale: 1, opacity: 1 }}
+                      className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-sm font-bold ${
+                        isConnected 
+                          ? 'bg-green-500/30 text-green-200' 
+                          : 'bg-white/10 text-white/50'
+                      }`}
+                    >
+                      {isConnected ? (
+                        <Wifi size={12} className="text-green-400" />
+                      ) : (
+                        <WifiOff size={12} className="text-white/40" />
+                      )}
+                      <PlayerAvatar seed={player.avatarSeed} size={16} />
+                      <span className="max-w-[80px] truncate">{player.name}</span>
+                    </motion.div>
+                  );
+                })}
+              </AnimatePresence>
+            </div>
+          </div>
+        )}
+
+        <p className="text-xs md:text-sm opacity-60 mb-4 md:mb-6">
           Players will rejoin automatically when they reconnect
         </p>
 
@@ -60,7 +101,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             onClick={onResume}
-            className="w-full bg-white text-theme-primary px-8 py-4 rounded-full text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] hover:shadow-[0_4px_0_rgba(0,0,0,0.2)] hover:translate-y-[2px] active:shadow-none active:translate-y-[6px] transition-all flex items-center justify-center gap-3"
+            className="w-full bg-white text-theme-primary px-6 md:px-8 py-3 md:py-4 rounded-full text-lg md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] hover:shadow-[0_4px_0_rgba(0,0,0,0.2)] hover:translate-y-[2px] active:shadow-none active:translate-y-[6px] transition-all flex items-center justify-center gap-3"
           >
             <Play size={24} />
             Resume Game
@@ -70,7 +111,7 @@ export const HostReconnected: React.FC<HostReconnectedProps> = ({
             whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             onClick={onEndGame}
-            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"
+            className="w-full bg-white/20 text-white px-6 md:px-8 py-3 md:py-4 rounded-full text-base md:text-lg font-bold hover:bg-white/30 transition-all flex items-center justify-center gap-2"
           >
             <X size={20} />
             End Game