more view changes.

This commit is contained in:
Robert Johnson 2025-05-26 09:11:29 -04:00
parent 118804926f
commit 34e40ae769

View File

@ -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}