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

reverted the caraosel affect. Didn't like it.

Browse Source
This commit is contained in:
Robert Johnson 2025-05-26 09:17:53 -04:00
parent 34e40ae769
commit d27f7844a5
1 changed files with 12 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.js
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.22
TTRPG Initiative Tracker v0.1.19
</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);
// currentTurnRef removed as we are reverting the scroll-to-view logic for now
useEffect(() => {
if (!db) {
@ -994,14 +994,7 @@ function DisplayView() {
};
}, [activeDisplayData, isLoadingActiveDisplay]);
useEffect(() => {
if (currentTurnRef.current) {
currentTurnRef.current.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
}, [activeEncounterData?.currentTurnParticipantId, activeEncounterData?.participants]); // Also re-scroll if participants list changes (e.g. focused view)
// useEffect for scrollIntoView removed
if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
@ -1023,13 +1016,14 @@ function DisplayView() {
const { name, participants, round, currentTurnParticipantId, isStarted } = activeEncounterData;
let allOrderedActiveParticipants = [];
// Reverted to showing all active participants, no focused view logic
let participantsToRender = [];
if (participants) {
if (isStarted && activeEncounterData.turnOrderIds?.length > 0 ) {
allOrderedActiveParticipants = activeEncounterData.turnOrderIds
participantsToRender = activeEncounterData.turnOrderIds
.map(id => participants.find(p => p.id === id)).filter(p => p && p.isActive);
} else {
allOrderedActiveParticipants = [...participants].filter(p => p.isActive)
participantsToRender = [...participants].filter(p => p.isActive)
.sort((a, b) => {
if (a.initiative === b.initiative) {
const indexA = participants.findIndex(p => p.id === a.id);
@ -1041,27 +1035,6 @@ function DisplayView() {
}
}
let participantsToRender = allOrderedActiveParticipants;
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;
if (isStarted && allOrderedActiveParticipants.length >= FOCUSED_VIEW_THRESHOLD) {
inFocusedView = true;
const currentIndex = allOrderedActiveParticipants.findIndex(p => p.id === currentTurnParticipantId);
if (currentIndex !== -1) {
const focusedList = [];
for (let i = -ITEMS_AROUND_CURRENT; i <= ITEMS_AROUND_CURRENT; i++) {
const listLength = allOrderedActiveParticipants.length;
const actualIndex = (currentIndex + i + listLength) % listLength;
focusedList.push(allOrderedActiveParticipants[actualIndex]);
}
participantsToRender = focusedList;
} else {
participantsToRender = allOrderedActiveParticipants.slice(0, ITEMS_AROUND_CURRENT * 2 + 1);
}
}
const displayStyles = campaignBackgroundUrl ? {
backgroundImage: `url(${campaignBackgroundUrl})`,
@ -1079,17 +1052,18 @@ function DisplayView() {
>
<div className={campaignBackgroundUrl ? 'bg-slate-900 bg-opacity-75 p-4 md:p-6 rounded-lg' : ''}>
<h2 className="text-4xl md:text-5xl font-bold text-center text-amber-400 mb-2">{name}</h2>
{isStarted && <p className="text-2xl text-center text-sky-300 mb-2">Round: {round}</p>}
{inFocusedView && <p className="text-sm text-center text-slate-400 mb-4">(Focused View: {participantsToRender.length} of {allOrderedActiveParticipants.length} active)</p>}
{isStarted && <p className="text-2xl text-center text-sky-300 mb-6">Round: {round}</p>} {/* Adjusted margin */}
{/* Focused view indicator removed */}
{!isStarted && participants?.length > 0 && <p className="text-2xl text-center text-slate-400 mb-6">Awaiting Start</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>}
<div className="space-y-4 max-w-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 180px)'}}> {/* Adjusted maxHeight */}
{/* Reverted to simpler list container */}
<div className="space-y-4 max-w-3xl mx-auto">
{participantsToRender.map(p => (
<div
key={p.id}
ref={p.id === currentTurnParticipantId ? currentTurnRef : null}
// ref removed
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">