From 34e40ae7693941c5b42ab342c245562655d4b5b9 Mon Sep 17 00:00:00 2001
From: robert <robert@myemail.cloud>
Date: Mon, 26 May 2025 09:11:29 -0400
Subject: [PATCH] more view changes.

---
 src/App.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index b470e7d..36d2ed7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -234,7 +234,7 @@ function App() {
         {!isAuthReady && !error && <p>Authenticating...</p>} 
       </main>
        <footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
-        TTRPG Initiative Tracker v0.1.21
+        TTRPG Initiative Tracker v0.1.22 
       </footer>
     </div>
   );
@@ -1001,7 +1001,7 @@ function DisplayView() {
         block: 'center', 
       });
     }
-  }, [activeEncounterData?.currentTurnParticipantId]); 
+  }, [activeEncounterData?.currentTurnParticipantId, activeEncounterData?.participants]); // Also re-scroll if participants list changes (e.g. focused view)
 
   if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
       return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
@@ -1042,7 +1042,7 @@ function DisplayView() {
   }
 
   let participantsToRender = allOrderedActiveParticipants;
-  const FOCUSED_VIEW_THRESHOLD = 7; // When to switch to focused view
+  const FOCUSED_VIEW_THRESHOLD = 7; 
   const ITEMS_AROUND_CURRENT = 3;   // Show 3 before and 3 after current = 7 total in focused view
   let inFocusedView = false;
 
@@ -1053,7 +1053,6 @@ function DisplayView() {
       const focusedList = [];
       for (let i = -ITEMS_AROUND_CURRENT; i <= ITEMS_AROUND_CURRENT; i++) {
         const listLength = allOrderedActiveParticipants.length;
-        // Ensure the index wraps around correctly for the circular list effect
         const actualIndex = (currentIndex + i + listLength) % listLength;
         focusedList.push(allOrderedActiveParticipants[actualIndex]);
       }
@@ -1086,7 +1085,7 @@ function DisplayView() {
         {!isStarted && (!participants || participants.length === 0) && <p className="text-2xl text-slate-500 mb-6">No participants.</p>}
         {participantsToRender.length === 0 && isStarted && <p className="text-xl text-slate-400">No active participants.</p>}
         
-        <div className="space-y-4 max-w-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 220px)'}}> {/* Widened and adjusted maxHeight */}
+        <div className="space-y-4 max-w-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 180px)'}}> {/* Adjusted maxHeight */}
           {participantsToRender.map(p => (
             <div 
               key={p.id}