vibe-debugged the storyteller reconnect experience. Not yet perfect but good enough for now.

Author: pnkfelix

pnkfelix/pagelets/demo-botc-pubnub.html

@@ -1521,13 +1521,63 @@ <h3 id="removeReminderTitle">Remove Reminder</h3>
                     messages.forEach(messageWrapper => {
                         // PubNub history wraps messages in an object with timetoken
                         const message = messageWrapper.entry;
+                        reconstructGameStateFromMessage(message);
                         handleIncomingMessage(message, true); // true = from history
                     });
                 }
             }).catch((error) => {
                 console.log('Error fetching message history:', error);
             });
         }
+
+        function reconstructGameStateFromMessage(message) {
+            // Only reconstruct for storytellers in reconnect mode
+            if (userType !== 'storyteller' || gameMode !== 'reconnect') {
+                return;
+            }
+            
+            // Find the most recent game_setup message to establish current game
+            if (message.type === 'game_setup' && message.gameId) {
+                if (!currentGameId || message.timestamp > mostRecentSetupTimestamp) {
+                    currentGameId = message.gameId;
+                    mostRecentSetupTimestamp = message.timestamp;
+                    
+                    // Reconstruct basic game state
+                    if (message.players) {
+                        players = message.players;
+                    }
+                    if (message.script) {
+                        if (typeof message.script === 'string') {
+                            currentScript = Object.values(EMBEDDED_SCRIPTS).find(s => s.name === message.script) ||
+                                           EMBEDDED_SCRIPTS[message.script];
+                        } else {
+                            currentScript = message.script;
+                        }
+                    }
+                    if (message.playerRoles) {
+                        playerRoles = message.playerRoles;
+                    }
+                    if (message.playerReminders) {
+                        playerReminders = message.playerReminders;
+                    }
+                }
+            }
+            
+            // Update role assignments from more recent role_assignment messages
+            if (message.type === 'role_assignment' && message.gameId === currentGameId && message.playerRoles) {
+                playerRoles = { ...playerRoles, ...message.playerRoles };
+            }
+            
+            // Update reminders from more recent reminder_update messages  
+            if (message.type === 'reminder_update' && message.gameId === currentGameId && message.playerReminders) {
+                playerReminders = { ...playerReminders, ...message.playerReminders };
+            }
+            
+            // Reconstruct phase state from daybreak/nightfall messages
+            if ((message.type === 'daybreak' || message.type === 'nightfall') && message.gameId === currentGameId) {
+                isNightTime = (message.type === 'nightfall');
+            }
+        }
 
         function handleConnectionStatus(statusEvent) {
             const statusEl = document.getElementById('connectionStatus');
@@ -1541,7 +1591,18 @@ <h3 id="removeReminderTitle">Remove Reminder</h3>
                 statusEl.textContent = 'Connection lost';
                 statusEl.className = 'status disconnected';
             }
+
+            // After connection is established and history is processed, update UI for reconnecting storytellers
+            if (statusEvent.category === 'PNConnectedCategory' && userType === 'storyteller' && gameMode === 'reconnect') {
+                setTimeout(() => {
+                    updatePlayersList();
+                    updatePhaseUI();
+                    populateTargetPlayerDropdown();
+                }, 2000); // Give time for history processing
+            }
         }
+
+
 
         function sendGameSetup() {
 	  console.log('sendGameSetup called, currentScript:', currentScript); // Add this line
@@ -1771,6 +1832,19 @@ <h3 id="removeReminderTitle">Remove Reminder</h3>
             }
         }
 
+        function populateTargetPlayerDropdown() {
+            if (userType === 'storyteller' && players.length > 0) {
+                const targetSelect = document.getElementById('targetPlayer');
+                targetSelect.innerHTML = '<option value="">Select player...</option>';
+                players.forEach(player => {
+                    const option = document.createElement('option');
+                    option.value = player;
+                    option.textContent = player;
+                    targetSelect.appendChild(option);
+                });
+            }
+        }
+
         function getRoleById(roleId) {
             return ROLES[roleId] || null;
         }
@@ -3485,4 +3559,8 @@ <h3 id="removeReminderTitle">Remove Reminder</h3>
 
      F: I don't think that's the fix; my players still cannot join the room while I am on the role selection screen. Is there something important from the "Continue to Game" button that we need to do as soon as we get to the Role Selection screen?
 
+     F: Look at this code. Pay attention to the instructions for CLAUDE at the top.  Immediate task: When I reconnect as the storyteller, I do not get a reconstruction of the game state, even though I think I should be able to derive much of it from the pubnub messages. E.g. the set of players and the messages that I have sent to them and their responses.
+
+     TODO: while this does re-establish the set of players, it does not load up past messages that we have sent. Also, we could easily include the player assignments in the pubnub messages for later retrieval in these situations.
+
 -->