From 118804926f5b98eb2e0842f32ecfde0f188c155a Mon Sep 17 00:00:00 2001
From: robert <robert@myemail.cloud>
Date: Mon, 26 May 2025 09:02:12 -0400
Subject: [PATCH] Changed view for more combatants.

---
 src/App.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 747b1e5..b470e7d 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.20
+        TTRPG Initiative Tracker v0.1.21
       </footer>
     </div>
   );
@@ -932,7 +932,7 @@ function DisplayView() {
   const [encounterError, setEncounterError] = useState(null);
   const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
   const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false); 
-  const currentTurnRef = useRef(null); // Ref for the current turn participant's element
+  const currentTurnRef = useRef(null); 
 
   useEffect(() => {
     if (!db) {
@@ -994,7 +994,6 @@ function DisplayView() {
     };
   }, [activeDisplayData, isLoadingActiveDisplay]); 
 
-  // Scroll to current turn participant
   useEffect(() => {
     if (currentTurnRef.current) {
       currentTurnRef.current.scrollIntoView({
@@ -1002,7 +1001,7 @@ function DisplayView() {
         block: 'center', 
       });
     }
-  }, [activeEncounterData?.currentTurnParticipantId]); // Rerun when current turn changes
+  }, [activeEncounterData?.currentTurnParticipantId]); 
 
   if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
       return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
@@ -1043,8 +1042,8 @@ function DisplayView() {
   }
 
   let participantsToRender = allOrderedActiveParticipants;
-  const FOCUSED_VIEW_THRESHOLD = 7;
-  const ITEMS_AROUND_CURRENT = 2; // Show 2 before and 2 after current = 5 total in focused view
+  const FOCUSED_VIEW_THRESHOLD = 7; // When to switch to focused view
+  const ITEMS_AROUND_CURRENT = 3;   // Show 3 before and 3 after current = 7 total in focused view
   let inFocusedView = false;
 
   if (isStarted && allOrderedActiveParticipants.length >= FOCUSED_VIEW_THRESHOLD) {
@@ -1054,12 +1053,12 @@ 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]);
       }
       participantsToRender = focusedList;
     } else {
-        // Fallback if current turn ID not found, show first few (should not happen ideally)
         participantsToRender = allOrderedActiveParticipants.slice(0, ITEMS_AROUND_CURRENT * 2 + 1);
     }
   }
@@ -1087,12 +1086,11 @@ 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>}
         
-        {/* Container for participant list - make it scrollable if focused view is not enough */}
-        <div className="space-y-4 max-w-3xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 200px)' /* Adjust as needed */}}>
+        <div className="space-y-4 max-w-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 220px)'}}> {/* Widened and adjusted maxHeight */}
           {participantsToRender.map(p => (
             <div 
               key={p.id} 
-              ref={p.id === currentTurnParticipantId ? currentTurnRef : null} // Add ref to current turn item
+              ref={p.id === currentTurnParticipantId ? currentTurnRef : null} 
               className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}
             >
               <div className="flex justify-between items-center mb-2">