robert/ttrpg-initiative-tracker
1
0
Fork 0
Code Pull Requests Releases 2 Wiki Activity

Changed view for more combatants.

Browse Source
This commit is contained in:
Robert Johnson 2025-05-26 09:02:12 -04:00
parent f530d4303d
commit 118804926f
1 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.js
View File

@ -234,7 +234,7 @@ function App() {
{!isAuthReady && !error && <p>Authenticating...</p>} {!isAuthReady && !error && <p>Authenticating...</p>}
</main> </main>
<footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8"> <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> </footer>
</div> </div>
); );
@ -932,7 +932,7 @@ function DisplayView() {
const [encounterError, setEncounterError] = useState(null); const [encounterError, setEncounterError] = useState(null);
const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState(''); const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false); const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false);
const currentTurnRef = useRef(null); // Ref for the current turn participant's element const currentTurnRef = useRef(null);
useEffect(() => { useEffect(() => {
if (!db) { if (!db) {
@ -994,7 +994,6 @@ function DisplayView() {
}; };
}, [activeDisplayData, isLoadingActiveDisplay]); }, [activeDisplayData, isLoadingActiveDisplay]);
// Scroll to current turn participant
useEffect(() => { useEffect(() => {
if (currentTurnRef.current) { if (currentTurnRef.current) {
currentTurnRef.current.scrollIntoView({ currentTurnRef.current.scrollIntoView({
@ -1002,7 +1001,7 @@ function DisplayView() {
block: 'center', block: 'center',
}); });
} }
}, [activeEncounterData?.currentTurnParticipantId]); // Rerun when current turn changes }, [activeEncounterData?.currentTurnParticipantId]);
if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) { if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>; 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; let participantsToRender = allOrderedActiveParticipants;
const FOCUSED_VIEW_THRESHOLD = 7; const FOCUSED_VIEW_THRESHOLD = 7; // When to switch to focused view
const ITEMS_AROUND_CURRENT = 2; // Show 2 before and 2 after current = 5 total in focused view const ITEMS_AROUND_CURRENT = 3; // Show 3 before and 3 after current = 7 total in focused view
let inFocusedView = false; let inFocusedView = false;
if (isStarted && allOrderedActiveParticipants.length >= FOCUSED_VIEW_THRESHOLD) { if (isStarted && allOrderedActiveParticipants.length >= FOCUSED_VIEW_THRESHOLD) {
@ -1054,12 +1053,12 @@ function DisplayView() {
const focusedList = []; const focusedList = [];
for (let i = -ITEMS_AROUND_CURRENT; i <= ITEMS_AROUND_CURRENT; i++) { for (let i = -ITEMS_AROUND_CURRENT; i <= ITEMS_AROUND_CURRENT; i++) {
const listLength = allOrderedActiveParticipants.length; const listLength = allOrderedActiveParticipants.length;
// Ensure the index wraps around correctly for the circular list effect
const actualIndex = (currentIndex + i + listLength) % listLength; const actualIndex = (currentIndex + i + listLength) % listLength;
focusedList.push(allOrderedActiveParticipants[actualIndex]); focusedList.push(allOrderedActiveParticipants[actualIndex]);
} }
participantsToRender = focusedList; participantsToRender = focusedList;
} else { } else {
// Fallback if current turn ID not found, show first few (should not happen ideally)
participantsToRender = allOrderedActiveParticipants.slice(0, ITEMS_AROUND_CURRENT * 2 + 1); 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>} {!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>} {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-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 220px)'}}> {/* Widened and adjusted maxHeight */}
<div className="space-y-4 max-w-3xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 200px)' /* Adjust as needed */}}>
{participantsToRender.map(p => ( {participantsToRender.map(p => (
<div <div
key={p.id} 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' : ''}`} 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"> <div className="flex justify-between items-center mb-2">