fix(remote): hydrate authoritative room participants and scale mobile typography

Author: fayerman-source

App.tsx

@@ -64,6 +64,9 @@ const App: React.FC = () => {
     switch (event.type) {
       case 'START':
         soundService.playDrop();
+        if (event.participants && event.participants.length > 0) {
+          setFounders(buildParticipants(event.participantCount ?? event.participants.length, event.participants));
+        }
         setGameState({
           currentPrice: event.startPrice,
           status: AuctionStatus.RUNNING,
@@ -144,7 +147,13 @@ const App: React.FC = () => {
 
     if (isRemote) {
       try {
-        await syncService.sendEvent({ type: 'START', startTime, startPrice: config.startPrice });
+        await syncService.sendEvent({
+          type: 'START',
+          startTime,
+          startPrice: config.startPrice,
+          participantCount: founders.length,
+          participants: founders.map((f) => ({ id: f.id, name: f.name, color: f.color })),
+        });
       } catch (err) {
         showError(err);
       }
@@ -212,27 +221,13 @@ const App: React.FC = () => {
   };
 
   useEffect(() => {
-    let timer: number | null = null;
-
-    const refreshClaims = async () => {
-      if (!isRemote || !isConnected) return;
-      const claimed = await syncService.listClaimedParticipants();
-      setClaimedIds(claimed);
-    };
-
-    void refreshClaims();
-    if (isRemote && isConnected) {
-      timer = window.setInterval(() => {
-        void refreshClaims();
-      }, 3000);
-    }
-
+    syncService.onParticipantsChanged = isRemote && isConnected ? (claimed) => setClaimedIds(claimed) : null;
     return () => {
-      if (timer) window.clearInterval(timer);
+      syncService.onParticipantsChanged = null;
     };
   }, [isRemote, isConnected]);
 
-  const applySetup = () => {
+  const applySetup = async () => {
     const nextConfig: AuctionConfig = {
       startPrice: Math.max(1, Math.floor(draftConfig.startPrice)),
       floorPrice: Math.max(1, Math.floor(draftConfig.floorPrice)),
@@ -264,6 +259,15 @@ const App: React.FC = () => {
       history: [],
       nextDropTime: 0,
     });
+
+    if (isRemote && isConnected && isHost) {
+      try {
+        await syncService.publishRoomConfig(nextFounders, nextFounders.length);
+      } catch (err) {
+        showError(err);
+      }
+    }
+
     setSetupOpen(false);
   };
 
@@ -286,23 +290,46 @@ const App: React.FC = () => {
           </div>
 
           <div className="flex items-center gap-2 md:gap-4">
-            <button disabled={(isRemote && isConnected) || gameState.status === AuctionStatus.RUNNING || (isRemote && !isHost)} onClick={() => { setDraftConfig(config); setDraftInitials(founders.map((f) => f.name).join(', ')); setSetupOpen(true); }} className="text-[9px] md:text-[10px] uppercase font-bold text-slate-500 hover:text-amber-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
+            <button disabled={(isRemote && isConnected) || gameState.status === AuctionStatus.RUNNING || (isRemote && !isHost)} onClick={() => { setDraftConfig(config); setDraftInitials(founders.map((f) => f.name).join(', ')); setSetupOpen(true); }} className="text-[11px] md:text-xs uppercase font-bold text-slate-400 hover:text-amber-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
               Setup
             </button>
             {!isRemote ? (
-              <button onClick={() => setIsRemote(true)} className="text-[9px] md:text-[10px] uppercase font-bold text-slate-500 hover:text-cyan-400 transition-colors">
+              <button onClick={() => setIsRemote(true)} className="text-[11px] md:text-xs uppercase font-bold text-slate-400 hover:text-cyan-400 transition-colors">
                 Go Remote
               </button>
             ) : (
               <div className="flex items-center gap-2">
                 {!isConnected ? (
                   <div className="flex gap-1">
-                    <input type="text" placeholder="Room" className="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-[10px] w-16 md:w-24 outline-none focus:border-cyan-500" value={roomCode} onChange={(e) => setRoomCode(e.target.value)} />
-                    <button onClick={async () => { if (!roomCode.trim()) { showError('Please enter a room code.'); return; } await syncService.joinRoom(roomCode, handleRemoteEvent); setIsConnected(true); setIsHost(syncService.isHost()); setClaimedIds(await syncService.listClaimedParticipants()); }} className="bg-cyan-600 px-2 py-1 rounded text-[10px] font-bold">JOIN</button>
+                    <input type="text" placeholder="Room code" className="bg-slate-800 border border-slate-700 rounded px-2 py-1.5 text-xs w-28 md:w-32 outline-none focus:border-cyan-500" value={roomCode} onChange={(e) => setRoomCode(e.target.value)} />
+                    <button onClick={async () => {
+                      if (!roomCode.trim()) {
+                        showError('Please enter a room code.');
+                        return;
+                      }
+                      try {
+                        const roomInfo = await syncService.joinRoom(roomCode, handleRemoteEvent);
+                        const amHost = syncService.isHost();
+                        setIsConnected(true);
+                        setIsHost(amHost);
+
+                        if (!amHost && roomInfo.participants && roomInfo.participants.length > 0) {
+                          setFounders(buildParticipants(roomInfo.participantCount ?? roomInfo.participants.length, roomInfo.participants));
+                        }
+
+                        if (amHost) {
+                          await syncService.publishRoomConfig(founders, founders.length);
+                        }
+
+                        setClaimedIds(await syncService.listClaimedParticipants());
+                      } catch (err) {
+                        showError(err);
+                      }
+                    }} className="bg-cyan-600 px-2 py-1 rounded text-[10px] md:text-xs font-bold">JOIN</button>
                   </div>
                 ) : (
                   <div className="flex items-center gap-2">
-                    <span className="text-[9px] md:text-[10px] text-cyan-300 font-mono uppercase">Room: {roomCode}</span>
+                    <span className="text-[11px] md:text-xs text-cyan-300 font-mono uppercase">Room: {roomCode}</span>
                     <button
                       onClick={async () => {
                         try {
@@ -313,11 +340,11 @@ const App: React.FC = () => {
                           showError('Could not copy room code.');
                         }
                       }}
-                      className="text-[9px] md:text-[10px] text-cyan-400 uppercase font-bold"
+                      className="text-[11px] md:text-xs text-cyan-400 uppercase font-bold"
                     >
                       Copy
                     </button>
-                    <button onClick={() => { syncService.leaveRoom(); setIsConnected(false); setIsHost(false); setClaimedIds(new Set()); setIsRemote(false); setMyFounderId(null); }} className="text-[9px] md:text-[10px] text-red-500 uppercase font-bold">Disconnect</button>
+                    <button onClick={() => { syncService.leaveRoom(); setIsConnected(false); setIsHost(false); setClaimedIds(new Set()); setIsRemote(false); setMyFounderId(null); }} className="text-[11px] md:text-xs text-red-500 uppercase font-bold">Disconnect</button>
                   </div>
                 )}
               </div>
@@ -373,7 +400,7 @@ const App: React.FC = () => {
 
             <div className="mt-5 flex justify-end gap-2">
               <button onClick={() => { setDraftConfig(config); setDraftInitials(founders.map((f) => f.name).join(', ')); setSetupOpen(false); }} className="px-3 py-2 rounded border border-slate-700">Cancel</button>
-              <button onClick={applySetup} className="px-3 py-2 rounded bg-cyan-500 text-slate-900 font-bold">Apply & Reset</button>
+              <button onClick={() => { void applySetup(); }} className="px-3 py-2 rounded bg-cyan-500 text-slate-900 font-bold">Apply & Reset</button>
             </div>
           </div>
         </div>
@@ -415,7 +442,19 @@ const App: React.FC = () => {
             </button>
             <div className="grid grid-cols-1 gap-3">{founders.map((f) => {
               const alreadyClaimed = claimedIds.has(f.id);
-              return <button key={f.id} disabled={alreadyClaimed} onClick={async () => { const ok = await syncService.claimParticipant(f.id); if (ok) { setMyFounderId(f.id); setClaimedIds(await syncService.listClaimedParticipants()); } else { showError('This participant is already claimed. Choose another.'); } }} className={`p-3 md:p-4 rounded-xl border-2 border-slate-800 transition-all font-bold text-base md:text-lg ${f.color.replace('bg-', 'text-')} ${alreadyClaimed ? 'opacity-40 cursor-not-allowed' : 'hover:border-cyan-500'}`}>
+              return <button key={f.id} disabled={alreadyClaimed} onClick={async () => {
+                try {
+                  const ok = await syncService.claimParticipant(f.id);
+                  if (ok) {
+                    setMyFounderId(f.id);
+                    setClaimedIds(await syncService.listClaimedParticipants());
+                  } else {
+                    showError('This participant is already claimed. Choose another.');
+                  }
+                } catch (err) {
+                  showError(err);
+                }
+              }} className={`p-3 md:p-4 rounded-xl border-2 border-slate-800 transition-all font-bold text-base md:text-lg ${f.color.replace('bg-', 'text-')} ${alreadyClaimed ? 'opacity-40 cursor-not-allowed' : 'hover:border-cyan-500'}`}>
                 <div>{f.name}</div>
                 <div className="text-[10px] mt-1 text-slate-400">{alreadyClaimed ? 'Already joined' : 'Available'}</div>
               </button>;
@@ -427,9 +466,9 @@ const App: React.FC = () => {
       <main className="flex-1 flex flex-col md:flex-row overflow-hidden">
         <div className="flex-1 flex flex-col p-3 md:p-6 relative min-w-0">
           <div className="flex-none mb-2 border-b border-slate-800 pb-2">
-            <h3 className="text-[8px] md:text-xs font-bold text-slate-600 uppercase tracking-widest mb-1 md:mb-3">History</h3>
+            <h3 className="text-[10px] md:text-xs font-bold text-slate-500 uppercase tracking-widest mb-1 md:mb-3">History</h3>
             <div className="flex gap-1.5 md:gap-2 overflow-x-auto pb-1 mask-linear scrollbar-hide">
-              {gameState.history.slice().reverse().map((log, idx) => <div key={idx} className="flex-shrink-0 px-2 py-1 rounded bg-slate-900 border border-slate-800 text-[9px] md:text-[10px] font-mono whitespace-nowrap"><span className={log.event === 'WIN' ? 'text-green-400' : 'text-slate-400'}>${log.price.toLocaleString()}</span><span className="mx-1 opacity-20">|</span><span className="opacity-70">{log.event === 'WIN' ? log.details : log.event}</span></div>)}
+              {gameState.history.slice().reverse().map((log, idx) => <div key={idx} className="flex-shrink-0 px-2 py-1 rounded bg-slate-900 border border-slate-800 text-xs md:text-sm font-mono whitespace-nowrap"><span className={log.event === 'WIN' ? 'text-green-400' : 'text-slate-300'}>${log.price.toLocaleString()}</span><span className="mx-1 opacity-20">|</span><span className="opacity-75">{log.event === 'WIN' ? log.details : log.event}</span></div>)}
             </div>
           </div>
 

components/FounderButton.tsx

@@ -45,38 +45,38 @@ export const FounderButton: React.FC<FounderButtonProps> = ({
       className={`
         relative group flex flex-col items-center justify-center p-2.5 md:p-4 
         rounded-xl md:rounded-2xl border-2 w-full transition-all duration-200
-        min-h-[100px] md:min-h-[140px]
+        min-h-[124px] md:min-h-[140px]
         ${buttonStyle}
       `}
     >
       {isWinner && (
-        <div className="absolute -top-1.5 md:-top-2.5 px-1.5 py-0.5 md:px-2 md:py-1 bg-white text-black text-[7px] md:text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg z-10">
+        <div className="absolute -top-1.5 md:-top-2.5 px-1.5 py-0.5 md:px-2 md:py-1 bg-white text-black text-[9px] md:text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg z-10">
           Winner
         </div>
       )}
 
       {isMe && !isWinner && (
-        <div className="absolute -top-1.5 md:-top-2.5 px-1.5 py-0.5 md:px-2 md:py-1 bg-cyan-500 text-white text-[7px] md:text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg z-10 border border-white/10">
+        <div className="absolute -top-1.5 md:-top-2.5 px-1.5 py-0.5 md:px-2 md:py-1 bg-cyan-500 text-white text-[9px] md:text-[10px] font-bold uppercase tracking-widest rounded-full shadow-lg z-10 border border-white/10">
           YOU
         </div>
       )}
 
       {/* Initials Circle */}
       <div className={`
-        w-8 h-8 md:w-16 md:h-16 rounded-full mb-1.5 md:mb-3 flex items-center justify-center border md:border-2 shadow-sm transition-transform duration-300
+        w-11 h-11 md:w-16 md:h-16 rounded-full mb-1.5 md:mb-3 flex items-center justify-center border md:border-2 shadow-sm transition-transform duration-300
         ${isWinner ? 'bg-white text-slate-900 border-white scale-105 md:scale-110' : 
           disabled && !isWinner ? 'bg-slate-800 border-slate-700 text-slate-600' :
           `${founder.color} text-white border-white/5 group-hover:border-white/20`}
       `}>
-        <span className="text-sm md:text-xl font-bold tracking-wider">{founder.name}</span>
+        <span className="text-base md:text-xl font-bold tracking-wider">{founder.name}</span>
       </div>
 
-      <div className={`font-bold display-font uppercase ${isWinner ? 'text-[10px] md:text-lg tracking-normal' : 'text-[11px] md:text-base tracking-tight'}`}>
+      <div className={`font-bold display-font uppercase ${isWinner ? 'text-xs md:text-lg tracking-normal' : 'text-sm md:text-base tracking-tight'}`}>
         {isWinner ? 'ACCEPTED' : isRunning ? (disabled ? 'WAIT' : 'ACCEPT') : 'IDLE'}
       </div>
 
       {isRunning && !disabled && (
-        <div className="mt-1 text-[10px] md:text-[10px] font-mono opacity-60">
+        <div className="mt-1 text-xs md:text-sm font-mono opacity-70">
           ${(currentPrice / 1000).toFixed(0)}k
         </div>
       )}

components/Ticker.tsx

@@ -51,13 +51,13 @@ export const Ticker: React.FC<TickerProps> = ({ price, status, nextDropTime, dro
       </div>
 
       <div className="relative z-10 text-center">
-        <h2 className="text-slate-400 text-[11px] md:text-sm uppercase tracking-[0.16em] mb-1 md:mb-2 font-semibold">Current Price</h2>
-        <div className="text-5xl sm:text-7xl md:text-9xl font-bold text-white tracking-tighter tabular-nums display-font leading-none">
+        <h2 className="text-slate-300 text-xs md:text-sm uppercase tracking-[0.16em] mb-1 md:mb-2 font-semibold">Current Price</h2>
+        <div className="text-6xl sm:text-7xl md:text-9xl font-bold text-white tracking-tighter tabular-nums display-font leading-none">
           ${price.toLocaleString()}
         </div>
       </div>
 
-      <div className="w-32 md:w-64 h-1 md:h-2 bg-slate-800 rounded-full mt-3 md:mt-8 overflow-hidden relative">
+      <div className="w-full max-w-sm md:w-64 h-3 md:h-2 bg-slate-800 rounded-full mt-4 md:mt-8 overflow-hidden relative">
         <div
           className={`h-full absolute top-0 left-0 transition-all duration-75 ease-linear ${
             progress < 30 ? 'bg-red-500' : 'bg-cyan-500'
@@ -67,7 +67,7 @@ export const Ticker: React.FC<TickerProps> = ({ price, status, nextDropTime, dro
       </div>
 
       {status === AuctionStatus.RUNNING && (
-        <p className="mt-2 text-[11px] md:text-xs text-slate-400 font-mono animate-pulse">
+        <p className="mt-2 text-xs md:text-sm text-slate-300 font-mono animate-pulse">
           {Math.max(1, Math.ceil((progress / 100) * (dropIntervalMs / 1000)))}s
         </p>
       )}

services/syncService.ts

@@ -1,5 +1,5 @@
 import { createClient, type SupabaseClient } from '@supabase/supabase-js';
-import { AuctionStatus, SyncEvent } from '../types';
+import { AuctionStatus, Founder, SyncEvent, SyncParticipant } from '../types';
 
 const runtimeSetup = (window as any).AUCTION_SETUP ?? {};
 
@@ -29,6 +29,13 @@ type RoomState = {
   updatedAt: number;
   eventSeq: number;
   status: AuctionStatus;
+  participants?: SyncParticipant[];
+  participantCount?: number;
+};
+
+type JoinRoomResult = {
+  participants: SyncParticipant[] | null;
+  participantCount: number | null;
 };
 
 type RoomMeta = {
@@ -41,6 +48,7 @@ class SyncService {
   private channel: ReturnType<SupabaseClient['channel']> | null = null;
   private currentUserId: string | null = null;
   private isHostForRoom = false;
+  onParticipantsChanged: ((claimed: Set<string>) => void) | null = null;
 
   async initAuth() {
     if (this.currentUserId) return this.currentUserId;
@@ -106,6 +114,41 @@ class SyncService {
     if (error) throw new Error(error.message);
   }
 
+  private async getRoomParticipants(roomId: string): Promise<SyncParticipant[]> {
+    const state = await this.readRoomState(roomId);
+    if (!state?.participants || state.participants.length === 0) return [];
+    return state.participants
+      .map((p, idx) => ({
+        id: String(p?.id ?? idx + 1),
+        name: String(p?.name ?? `P${idx + 1}`).slice(0, 10).toUpperCase(),
+        color: String(p?.color ?? 'bg-cyan-500'),
+      }))
+      .filter((p) => Boolean(p.id) && Boolean(p.name));
+  }
+
+  async publishRoomConfig(participants: Founder[], count: number) {
+    if (!this.roomCode) return;
+    const current =
+      (await this.readRoomState(this.roomCode)) ??
+      ({ roomId: this.roomCode, updatedAt: Date.now(), eventSeq: 0, status: AuctionStatus.IDLE } as RoomState);
+
+    const normalized = participants.slice(0, Math.max(1, Math.floor(count))).map((p, idx) => ({
+      id: String(p.id ?? idx + 1),
+      name: String(p.name ?? `P${idx + 1}`).slice(0, 10).toUpperCase(),
+      color: String(p.color ?? 'bg-cyan-500'),
+    }));
+
+    const nextState: RoomState = {
+      ...current,
+      roomId: this.roomCode,
+      updatedAt: Date.now(),
+      participants: normalized,
+      participantCount: Math.max(1, Math.floor(count)),
+    };
+
+    await this.writeRoomState(this.roomCode, nextState);
+  }
+
   async listClaimedParticipants(): Promise<Set<string>> {
     if (!this.roomCode) return new Set();
     const supabase = getSupabase();
@@ -124,6 +167,11 @@ class SyncService {
     const supabase = getSupabase();
     const userId = await this.initAuth();
 
+    const configured = await this.getRoomParticipants(this.roomCode);
+    if (configured.length > 0 && !configured.some((p) => p.id === founderId)) {
+      throw new Error('Invalid participant slot for this room.');
+    }
+
     await supabase.from('room_participants').upsert(
       {
         room_id: this.roomCode,
@@ -160,12 +208,14 @@ class SyncService {
     return q.data?.user_id === userId;
   }
 
-  async joinRoom(code: string, onEvent: (event: SyncEvent) => void) {
+  async joinRoom(code: string, onEvent: (event: SyncEvent) => void): Promise<JoinRoomResult> {
     this.leaveRoom();
     const supabase = getSupabase();
 
     const roomId = code.trim().toLowerCase().replace(/[^a-z0-9]/g, '');
-    if (!roomId) return;
+    if (!roomId) {
+      return { participants: null, participantCount: null };
+    }
     this.roomCode = roomId;
 
     await this.getOrCreateRoomMeta(roomId);
@@ -191,7 +241,25 @@ class SyncService {
           if (ev) onEvent(ev);
         },
       )
+      .on(
+        'postgres_changes',
+        {
+          event: '*',
+          schema: 'public',
+          table: 'room_participants',
+          filter: `room_id=eq.${roomId}`,
+        },
+        async () => {
+          const claimed = await this.listClaimedParticipants();
+          this.onParticipantsChanged?.(claimed);
+        },
+      )
       .subscribe();
+
+    return {
+      participants: existing?.participants ?? null,
+      participantCount: existing?.participantCount ?? null,
+    };
   }
 
   private deriveNextStatus(current: AuctionStatus, event: SyncEvent): AuctionStatus {
@@ -267,6 +335,7 @@ class SyncService {
     }
     this.roomCode = null;
     this.isHostForRoom = false;
+    this.onParticipantsChanged = null;
   }
 }