refactor
This commit is contained in:
401
src/App.js
401
src/App.js
@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
||||
import { initializeApp } from 'firebase/app';
|
||||
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
|
||||
import { getFirestore, doc, setDoc, addDoc, getDoc, getDocs, collection, onSnapshot, updateDoc, deleteDoc, query, writeBatch } from 'firebase/firestore';
|
||||
import { ArrowLeft, PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, ChevronDown, ChevronUp, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Share2, Copy as CopyIcon, Image as ImageIcon, EyeOff, ExternalLink } from 'lucide-react';
|
||||
import { PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Image as ImageIcon, EyeOff, ExternalLink } from 'lucide-react'; // Removed unused icons
|
||||
|
||||
// --- Firebase Configuration ---
|
||||
const firebaseConfig = {
|
||||
@ -37,12 +37,96 @@ if (missingKeys.length > 0) {
|
||||
// --- Firestore Paths ---
|
||||
const APP_ID = process.env.REACT_APP_TRACKER_APP_ID || 'ttrpg-initiative-tracker-default';
|
||||
const PUBLIC_DATA_PATH = `artifacts/${APP_ID}/public/data`;
|
||||
const CAMPAIGNS_COLLECTION = `${PUBLIC_DATA_PATH}/campaigns`;
|
||||
const ACTIVE_DISPLAY_DOC = `${PUBLIC_DATA_PATH}/activeDisplay/status`;
|
||||
|
||||
// --- Firestore Path Helpers ---
|
||||
const getCampaignsCollectionPath = () => `${PUBLIC_DATA_PATH}/campaigns`;
|
||||
const getCampaignDocPath = (campaignId) => `${PUBLIC_DATA_PATH}/campaigns/${campaignId}`;
|
||||
const getEncountersCollectionPath = (campaignId) => `${PUBLIC_DATA_PATH}/campaigns/${campaignId}/encounters`;
|
||||
const getEncounterDocPath = (campaignId, encounterId) => `${PUBLIC_DATA_PATH}/campaigns/${campaignId}/encounters/${encounterId}`;
|
||||
const getActiveDisplayDocPath = () => `${PUBLIC_DATA_PATH}/activeDisplay/status`;
|
||||
|
||||
|
||||
// --- Helper Functions ---
|
||||
const generateId = () => crypto.randomUUID();
|
||||
|
||||
// --- Custom Hooks for Firestore ---
|
||||
function useFirestoreDocument(docPath) {
|
||||
const [data, setData] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!db || !docPath) {
|
||||
setData(null);
|
||||
setIsLoading(false);
|
||||
setError(docPath ? "Firestore not available." : "Document path not provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const docRef = doc(db, docPath);
|
||||
const unsubscribe = onSnapshot(docRef, (docSnap) => {
|
||||
if (docSnap.exists()) {
|
||||
setData({ id: docSnap.id, ...docSnap.data() });
|
||||
} else {
|
||||
setData(null);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, (err) => {
|
||||
console.error(`Error fetching document ${docPath}:`, err);
|
||||
setError(err.message || "Failed to fetch document.");
|
||||
setIsLoading(false);
|
||||
setData(null);
|
||||
});
|
||||
|
||||
return () => unsubscribe();
|
||||
}, [docPath]);
|
||||
|
||||
return { data, isLoading, error };
|
||||
}
|
||||
|
||||
function useFirestoreCollection(collectionPath, queryConstraints = []) {
|
||||
const [data, setData] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!db || !collectionPath) {
|
||||
setData([]);
|
||||
setIsLoading(false);
|
||||
setError(collectionPath ? "Firestore not available." : "Collection path not provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Ensure queryConstraints is an array before spreading
|
||||
const constraints = Array.isArray(queryConstraints) ? queryConstraints : [];
|
||||
const q = query(collection(db, collectionPath), ...constraints);
|
||||
|
||||
const unsubscribe = onSnapshot(q, (snapshot) => {
|
||||
const items = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
|
||||
setData(items);
|
||||
setIsLoading(false);
|
||||
}, (err) => {
|
||||
console.error(`Error fetching collection ${collectionPath}:`, err);
|
||||
setError(err.message || "Failed to fetch collection.");
|
||||
setIsLoading(false);
|
||||
setData([]);
|
||||
});
|
||||
|
||||
return () => unsubscribe();
|
||||
// Using JSON.stringify for queryConstraints is a common way to handle array/object dependencies.
|
||||
// For simple cases, it's fine. For complex queries, a more robust memoization or comparison might be needed.
|
||||
}, [collectionPath, JSON.stringify(queryConstraints)]);
|
||||
|
||||
return { data, isLoading, error };
|
||||
}
|
||||
|
||||
|
||||
// --- Main App Component ---
|
||||
function App() {
|
||||
const [userId, setUserId] = useState(null);
|
||||
@ -153,7 +237,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.18
|
||||
TTRPG Initiative Tracker v0.1.19
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
@ -161,51 +245,34 @@ function App() {
|
||||
|
||||
// --- Admin View Component ---
|
||||
function AdminView({ userId }) {
|
||||
const { data: campaignsData, isLoading: isLoadingCampaigns } = useFirestoreCollection(getCampaignsCollectionPath());
|
||||
const { data: initialActiveInfoData } = useFirestoreDocument(getActiveDisplayDocPath());
|
||||
|
||||
const [campaigns, setCampaigns] = useState([]);
|
||||
const [selectedCampaignId, setSelectedCampaignId] = useState(null);
|
||||
const [showCreateCampaignModal, setShowCreateCampaignModal] = useState(false);
|
||||
const [initialActiveInfo, setInitialActiveInfo] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!db) return;
|
||||
const campaignsCollectionRef = collection(db, CAMPAIGNS_COLLECTION);
|
||||
const q = query(campaignsCollectionRef);
|
||||
const unsubscribeCampaigns = onSnapshot(q, (snapshot) => {
|
||||
setCampaigns(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data(), characters: doc.data().players || [] })));
|
||||
}, (err) => console.error("Error fetching campaigns:", err));
|
||||
|
||||
const activeDisplayRef = doc(db, ACTIVE_DISPLAY_DOC);
|
||||
const unsubscribeActiveDisplay = onSnapshot(activeDisplayRef, (docSnap) => {
|
||||
if (docSnap.exists()) {
|
||||
setInitialActiveInfo(docSnap.data());
|
||||
} else {
|
||||
setInitialActiveInfo(null);
|
||||
}
|
||||
}, (err) => {
|
||||
console.error("Error fetching initial active display info for AdminView:", err);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribeCampaigns();
|
||||
unsubscribeActiveDisplay();
|
||||
};
|
||||
}, []);
|
||||
if (campaignsData) {
|
||||
setCampaigns(campaignsData.map(c => ({ ...c, characters: c.players || [] })));
|
||||
}
|
||||
}, [campaignsData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialActiveInfo && initialActiveInfo.activeCampaignId && campaigns.length > 0 && !selectedCampaignId) {
|
||||
const campaignExists = campaigns.some(c => c.id === initialActiveInfo.activeCampaignId);
|
||||
if (initialActiveInfoData && initialActiveInfoData.activeCampaignId && campaigns.length > 0 && !selectedCampaignId) {
|
||||
const campaignExists = campaigns.some(c => c.id === initialActiveInfoData.activeCampaignId);
|
||||
if (campaignExists) {
|
||||
setSelectedCampaignId(initialActiveInfo.activeCampaignId);
|
||||
setSelectedCampaignId(initialActiveInfoData.activeCampaignId);
|
||||
}
|
||||
}
|
||||
}, [initialActiveInfo, campaigns, selectedCampaignId]);
|
||||
}, [initialActiveInfoData, campaigns, selectedCampaignId]);
|
||||
|
||||
|
||||
const handleCreateCampaign = async (name, backgroundUrl) => {
|
||||
if (!db || !name.trim()) return;
|
||||
const newCampaignId = generateId();
|
||||
try {
|
||||
await setDoc(doc(db, CAMPAIGNS_COLLECTION, newCampaignId), {
|
||||
await setDoc(doc(db, getCampaignDocPath(newCampaignId)), {
|
||||
name: name.trim(),
|
||||
playerDisplayBackgroundUrl: backgroundUrl.trim() || '',
|
||||
ownerId: userId,
|
||||
@ -222,14 +289,15 @@ function AdminView({ userId }) {
|
||||
// TODO: Implement custom confirmation modal for deleting campaigns
|
||||
console.warn("Attempting to delete campaign without confirmation:", campaignId);
|
||||
try {
|
||||
const encountersPath = `${CAMPAIGNS_COLLECTION}/${campaignId}/encounters`;
|
||||
const encountersPath = getEncountersCollectionPath(campaignId);
|
||||
const encountersSnapshot = await getDocs(collection(db, encountersPath));
|
||||
const batch = writeBatch(db);
|
||||
encountersSnapshot.docs.forEach(encounterDoc => batch.delete(encounterDoc.ref));
|
||||
await batch.commit();
|
||||
await deleteDoc(doc(db, CAMPAIGNS_COLLECTION, campaignId));
|
||||
await deleteDoc(doc(db, getCampaignDocPath(campaignId)));
|
||||
if (selectedCampaignId === campaignId) setSelectedCampaignId(null);
|
||||
const activeDisplayRef = doc(db, ACTIVE_DISPLAY_DOC);
|
||||
|
||||
const activeDisplayRef = doc(db, getActiveDisplayDocPath());
|
||||
const activeDisplaySnap = await getDoc(activeDisplayRef);
|
||||
if (activeDisplaySnap.exists() && activeDisplaySnap.data().activeCampaignId === campaignId) {
|
||||
await updateDoc(activeDisplayRef, { activeCampaignId: null, activeEncounterId: null });
|
||||
@ -239,6 +307,10 @@ function AdminView({ userId }) {
|
||||
|
||||
const selectedCampaign = campaigns.find(c => c.id === selectedCampaignId);
|
||||
|
||||
if (isLoadingCampaigns) {
|
||||
return <p className="text-center text-slate-300">Loading campaigns...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
@ -280,7 +352,7 @@ function AdminView({ userId }) {
|
||||
<hr className="my-6 border-slate-600" />
|
||||
<EncounterManager
|
||||
campaignId={selectedCampaignId}
|
||||
initialActiveEncounterId={initialActiveInfo && initialActiveInfo.activeCampaignId === selectedCampaignId ? initialActiveInfo.activeEncounterId : null}
|
||||
initialActiveEncounterId={initialActiveInfoData && initialActiveInfoData.activeCampaignId === selectedCampaignId ? initialActiveInfoData.activeEncounterId : null}
|
||||
campaignCharacters={selectedCampaign.players || []}
|
||||
/>
|
||||
</div>
|
||||
@ -324,7 +396,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
|
||||
if (!db ||!characterName.trim() || !campaignId) return;
|
||||
const newCharacter = { id: generateId(), name: characterName.trim() };
|
||||
try {
|
||||
await updateDoc(doc(db, CAMPAIGNS_COLLECTION, campaignId), { players: [...campaignCharacters, newCharacter] });
|
||||
await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: [...campaignCharacters, newCharacter] });
|
||||
setCharacterName('');
|
||||
} catch (err) { console.error("Error adding character:", err); }
|
||||
};
|
||||
@ -333,7 +405,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
|
||||
if (!db ||!newName.trim() || !campaignId) return;
|
||||
const updatedCharacters = campaignCharacters.map(c => c.id === characterId ? { ...c, name: newName.trim() } : c);
|
||||
try {
|
||||
await updateDoc(doc(db, CAMPAIGNS_COLLECTION, campaignId), { players: updatedCharacters });
|
||||
await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters });
|
||||
setEditingCharacter(null);
|
||||
} catch (err) { console.error("Error updating character:", err); }
|
||||
};
|
||||
@ -344,7 +416,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
|
||||
console.warn("Attempting to delete character without confirmation:", characterId);
|
||||
const updatedCharacters = campaignCharacters.filter(c => c.id !== characterId);
|
||||
try {
|
||||
await updateDoc(doc(db, CAMPAIGNS_COLLECTION, campaignId), { players: updatedCharacters });
|
||||
await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters });
|
||||
} catch (err) { console.error("Error deleting character:", err); }
|
||||
};
|
||||
|
||||
@ -374,11 +446,12 @@ function CharacterManager({ campaignId, campaignCharacters }) {
|
||||
}
|
||||
|
||||
function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharacters }) {
|
||||
const [encounters, setEncounters] = useState([]);
|
||||
const {data: encounters, isLoading: isLoadingEncounters } = useFirestoreCollection(campaignId ? getEncountersCollectionPath(campaignId) : null);
|
||||
const {data: activeDisplayInfo } = useFirestoreDocument(getActiveDisplayDocPath());
|
||||
|
||||
const [selectedEncounterId, setSelectedEncounterId] = useState(null);
|
||||
const [showCreateEncounterModal, setShowCreateEncounterModal] = useState(false);
|
||||
const [activeDisplayInfo, setActiveDisplayInfo] = useState(null);
|
||||
const encountersPath = `${CAMPAIGNS_COLLECTION}/${campaignId}/encounters`;
|
||||
|
||||
const selectedEncounterIdRef = useRef(selectedEncounterId);
|
||||
|
||||
useEffect(() => {
|
||||
@ -386,44 +459,31 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
|
||||
}, [selectedEncounterId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!db || !campaignId) {
|
||||
setEncounters([]);
|
||||
setSelectedEncounterId(null);
|
||||
return;
|
||||
if (!campaignId) { // If no campaign is selected, clear selection
|
||||
setSelectedEncounterId(null);
|
||||
return;
|
||||
}
|
||||
const unsubEncounters = onSnapshot(query(collection(db, encountersPath)), (snapshot) => {
|
||||
const fetchedEncounters = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
|
||||
setEncounters(fetchedEncounters);
|
||||
|
||||
const currentSelection = selectedEncounterIdRef.current;
|
||||
if (currentSelection === null || !fetchedEncounters.some(e => e.id === currentSelection)) {
|
||||
if (initialActiveEncounterId && fetchedEncounters.some(e => e.id === initialActiveEncounterId)) {
|
||||
setSelectedEncounterId(initialActiveEncounterId);
|
||||
} else if (activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId &&
|
||||
fetchedEncounters.some(e => e.id === activeDisplayInfo.activeEncounterId)) {
|
||||
setSelectedEncounterId(activeDisplayInfo.activeEncounterId);
|
||||
if (encounters && encounters.length > 0) {
|
||||
const currentSelection = selectedEncounterIdRef.current;
|
||||
if (currentSelection === null || !encounters.some(e => e.id === currentSelection)) {
|
||||
if (initialActiveEncounterId && encounters.some(e => e.id === initialActiveEncounterId)) {
|
||||
setSelectedEncounterId(initialActiveEncounterId);
|
||||
} else if (activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId &&
|
||||
encounters.some(e => e.id === activeDisplayInfo.activeEncounterId)) {
|
||||
setSelectedEncounterId(activeDisplayInfo.activeEncounterId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, (err) => console.error(`Error fetching encounters for campaign ${campaignId}:`, err));
|
||||
|
||||
return () => unsubEncounters();
|
||||
}, [campaignId, initialActiveEncounterId, activeDisplayInfo]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!db) return;
|
||||
const unsub = onSnapshot(doc(db, ACTIVE_DISPLAY_DOC), (docSnap) => {
|
||||
setActiveDisplayInfo(docSnap.exists() ? docSnap.data() : null);
|
||||
}, (err) => { console.error("Error fetching active display info:", err); setActiveDisplayInfo(null); });
|
||||
return () => unsub();
|
||||
}, []);
|
||||
} else if (encounters && encounters.length === 0) { // No encounters in this campaign
|
||||
setSelectedEncounterId(null);
|
||||
}
|
||||
}, [campaignId, initialActiveEncounterId, activeDisplayInfo, encounters]);
|
||||
|
||||
|
||||
const handleCreateEncounter = async (name) => {
|
||||
if (!db ||!name.trim() || !campaignId) return;
|
||||
const newEncounterId = generateId();
|
||||
try {
|
||||
await setDoc(doc(db, encountersPath, newEncounterId), {
|
||||
await setDoc(doc(db, getEncountersCollectionPath(campaignId), newEncounterId), {
|
||||
name: name.trim(), createdAt: new Date().toISOString(), participants: [], round: 0, currentTurnParticipantId: null, isStarted: false,
|
||||
});
|
||||
setShowCreateEncounterModal(false);
|
||||
@ -436,10 +496,10 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
|
||||
// TODO: Implement custom confirmation modal for deleting encounters
|
||||
console.warn("Attempting to delete encounter without confirmation:", encounterId);
|
||||
try {
|
||||
await deleteDoc(doc(db, encountersPath, encounterId));
|
||||
await deleteDoc(doc(db, getEncounterDocPath(campaignId, encounterId)));
|
||||
if (selectedEncounterId === encounterId) setSelectedEncounterId(null);
|
||||
if (activeDisplayInfo && activeDisplayInfo.activeEncounterId === encounterId) {
|
||||
await updateDoc(doc(db, ACTIVE_DISPLAY_DOC), { activeCampaignId: null, activeEncounterId: null });
|
||||
await updateDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: null, activeEncounterId: null });
|
||||
}
|
||||
} catch (err) { console.error("Error deleting encounter:", err); }
|
||||
};
|
||||
@ -451,13 +511,13 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
|
||||
const currentActiveEncounter = activeDisplayInfo?.activeEncounterId;
|
||||
|
||||
if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) {
|
||||
await setDoc(doc(db, ACTIVE_DISPLAY_DOC), {
|
||||
await setDoc(doc(db, getActiveDisplayDocPath()), {
|
||||
activeCampaignId: null,
|
||||
activeEncounterId: null,
|
||||
}, { merge: true });
|
||||
console.log("Player Display for this encounter turned OFF.");
|
||||
} else {
|
||||
await setDoc(doc(db, ACTIVE_DISPLAY_DOC), {
|
||||
await setDoc(doc(db, getActiveDisplayDocPath()), {
|
||||
activeCampaignId: campaignId,
|
||||
activeEncounterId: encounterId,
|
||||
}, { merge: true });
|
||||
@ -468,7 +528,11 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
|
||||
}
|
||||
};
|
||||
|
||||
const selectedEncounter = encounters.find(e => e.id === selectedEncounterId);
|
||||
const selectedEncounter = encounters?.find(e => e.id === selectedEncounterId);
|
||||
|
||||
if (isLoadingEncounters && campaignId) {
|
||||
return <p className="text-center text-slate-300 mt-4">Loading encounters...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-6 p-4 bg-slate-800 rounded-lg shadow">
|
||||
@ -476,9 +540,9 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
|
||||
<h3 className="text-xl font-semibold text-sky-300 flex items-center"><Swords size={24} className="mr-2" /> Encounters</h3>
|
||||
<button onClick={() => setShowCreateEncounterModal(true)} className="px-4 py-2 text-sm font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-md transition-colors flex items-center"><PlusCircle size={18} className="mr-1" /> Create Encounter</button>
|
||||
</div>
|
||||
{encounters.length === 0 && <p className="text-sm text-slate-400">No encounters yet.</p>}
|
||||
{(!encounters || encounters.length === 0) && <p className="text-sm text-slate-400">No encounters yet.</p>}
|
||||
<div className="space-y-3">
|
||||
{encounters.map(encounter => {
|
||||
{encounters?.map(encounter => {
|
||||
const isLiveOnPlayerDisplay = activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId && activeDisplayInfo.activeEncounterId === encounter.id;
|
||||
return (
|
||||
<div key={encounter.id} className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-sky-600 ring-2 ring-sky-400' : 'bg-slate-700 hover:bg-slate-650'} ${isLiveOnPlayerDisplay ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''}`}>
|
||||
@ -507,8 +571,8 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
|
||||
{selectedEncounter && (
|
||||
<div className="mt-6 p-4 bg-slate-750 rounded-lg shadow-inner">
|
||||
<h3 className="text-xl font-semibold text-amber-300 mb-3">Managing Encounter: {selectedEncounter.name}</h3>
|
||||
<ParticipantManager encounter={selectedEncounter} encounterPath={`${encountersPath}/${selectedEncounterId}`} campaignCharacters={campaignCharacters} />
|
||||
<InitiativeControls campaignId={campaignId} encounter={selectedEncounter} encounterPath={`${encountersPath}/${selectedEncounterId}`} />
|
||||
<ParticipantManager encounter={selectedEncounter} encounterPath={getEncounterDocPath(campaignId, selectedEncounter.id)} campaignCharacters={campaignCharacters} />
|
||||
<InitiativeControls campaignId={campaignId} encounter={selectedEncounter} encounterPath={getEncounterDocPath(campaignId, selectedEncounter.id)} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -615,56 +679,83 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
|
||||
} catch (err) { console.error("Error applying HP change:", err); }
|
||||
};
|
||||
|
||||
// --- Drag and Drop Handlers ---
|
||||
const handleDragStart = (e, id) => {
|
||||
setDraggedItemId(id);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.effectAllowed = 'move'; // Indicates that the element can be moved
|
||||
// e.dataTransfer.setData('text/plain', id); // Optional: useful for some browsers or inter-app drag
|
||||
};
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
e.preventDefault(); // This is necessary to allow a drop
|
||||
e.dataTransfer.dropEffect = 'move'; // Visual feedback to the user
|
||||
};
|
||||
|
||||
const handleDrop = async (e, targetId) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault(); // Prevent default browser behavior
|
||||
if (!db || draggedItemId === null || draggedItemId === targetId) {
|
||||
setDraggedItemId(null); return;
|
||||
setDraggedItemId(null); // Reset if no valid drag or dropping on itself
|
||||
return;
|
||||
}
|
||||
const currentParticipants = [...participants];
|
||||
|
||||
const currentParticipants = [...participants]; // Create a mutable copy
|
||||
const draggedItemIndex = currentParticipants.findIndex(p => p.id === draggedItemId);
|
||||
const targetItemIndex = currentParticipants.findIndex(p => p.id === targetId);
|
||||
|
||||
// Ensure both items are found
|
||||
if (draggedItemIndex === -1 || targetItemIndex === -1) {
|
||||
setDraggedItemId(null); return;
|
||||
console.error("Dragged or target item not found in participants list.");
|
||||
setDraggedItemId(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const draggedItem = currentParticipants[draggedItemIndex];
|
||||
const targetItem = currentParticipants[targetItemIndex];
|
||||
|
||||
// Crucial: Only allow reordering within the same initiative score for tie-breaking
|
||||
if (draggedItem.initiative !== targetItem.initiative) {
|
||||
setDraggedItemId(null); return;
|
||||
console.log("Drag-and-drop for tie-breaking only allowed between participants with the same initiative score.");
|
||||
setDraggedItemId(null);
|
||||
return;
|
||||
}
|
||||
const reorderedParticipants = [...currentParticipants];
|
||||
const [removedItem] = reorderedParticipants.splice(draggedItemIndex, 1);
|
||||
reorderedParticipants.splice(targetItemIndex, 0, removedItem);
|
||||
|
||||
// Perform the reorder
|
||||
const [removedItem] = currentParticipants.splice(draggedItemIndex, 1); // Remove dragged item
|
||||
currentParticipants.splice(targetItemIndex, 0, removedItem); // Insert it at the target's position
|
||||
|
||||
try {
|
||||
await updateDoc(doc(db, encounterPath), { participants: reorderedParticipants });
|
||||
} catch (err) { console.error("Error updating participants after drag-drop:", err); }
|
||||
setDraggedItemId(null);
|
||||
// Update Firestore with the new participants order
|
||||
await updateDoc(doc(db, encounterPath), { participants: currentParticipants });
|
||||
console.log("Participants reordered in Firestore for tie-breaking.");
|
||||
} catch (err) {
|
||||
console.error("Error updating participants after drag-drop:", err);
|
||||
// Optionally, you might want to revert the local state if Firestore update fails,
|
||||
// or display an error to the user. For now, we log the error.
|
||||
}
|
||||
setDraggedItemId(null); // Clear the dragged item ID
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedItemId(null);
|
||||
// This event fires after a drag operation, regardless of whether it was successful or not.
|
||||
setDraggedItemId(null); // Always clear the dragged item ID
|
||||
};
|
||||
|
||||
// Sort participants for display. Primary sort by initiative (desc), secondary by existing order in array (for stable tie-breaking after D&D)
|
||||
const sortedAdminParticipants = [...participants].sort((a, b) => {
|
||||
if (a.initiative === b.initiative) {
|
||||
// If initiatives are tied, maintain their current relative order from the `participants` array.
|
||||
// This relies on `Array.prototype.sort` being stable, which it is in modern JS engines.
|
||||
// To be absolutely sure or for older engines, one might compare original indices if stored.
|
||||
// However, since drag-and-drop directly modifies the `participants` array order in Firestore,
|
||||
// this simple stable sort approach should preserve the manually set tie-breaker order.
|
||||
const indexA = participants.findIndex(p => p.id === a.id);
|
||||
const indexB = participants.findIndex(p => p.id === b.id);
|
||||
return indexA - indexB;
|
||||
}
|
||||
return b.initiative - a.initiative;
|
||||
return b.initiative - a.initiative; // Higher initiative first
|
||||
});
|
||||
|
||||
// Identify which initiative scores have ties to enable dragging only for them
|
||||
const initiativeGroups = participants.reduce((acc, p) => {
|
||||
acc[p.initiative] = (acc[p.initiative] || 0) + 1;
|
||||
return acc;
|
||||
@ -705,6 +796,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
|
||||
<ul className="space-y-2">
|
||||
{sortedAdminParticipants.map((p, index) => {
|
||||
const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
|
||||
// A participant is draggable if the encounter hasn't started AND their initiative score is part of a tie.
|
||||
const isDraggable = !encounter.isStarted && tiedInitiatives.includes(Number(p.initiative));
|
||||
return (
|
||||
<li
|
||||
@ -793,7 +885,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
|
||||
await updateDoc(doc(db, encounterPath), {
|
||||
isStarted: true, round: 1, currentTurnParticipantId: sortedPs[0].id, turnOrderIds: sortedPs.map(p => p.id)
|
||||
});
|
||||
await setDoc(doc(db, ACTIVE_DISPLAY_DOC), {
|
||||
await setDoc(doc(db, getActiveDisplayDocPath()), {
|
||||
activeCampaignId: campaignId,
|
||||
activeEncounterId: encounter.id
|
||||
}, { merge: true });
|
||||
@ -824,7 +916,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
|
||||
console.warn("Attempting to end encounter without confirmation");
|
||||
try {
|
||||
await updateDoc(doc(db, encounterPath), { isStarted: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [] });
|
||||
await setDoc(doc(db, ACTIVE_DISPLAY_DOC), {
|
||||
await setDoc(doc(db, getActiveDisplayDocPath()), {
|
||||
activeCampaignId: null,
|
||||
activeEncounterId: null
|
||||
}, { merge: true });
|
||||
@ -852,81 +944,80 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
|
||||
}
|
||||
|
||||
function DisplayView() {
|
||||
const { data: activeDisplayData, isLoading: isLoadingActiveDisplay, error: activeDisplayError } = useFirestoreDocument(getActiveDisplayDocPath());
|
||||
|
||||
const [activeEncounterData, setActiveEncounterData] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [isLoadingEncounter, setIsLoadingEncounter] = useState(true); // Separate loading for encounter
|
||||
const [encounterError, setEncounterError] = useState(null);
|
||||
const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
|
||||
const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!db) {
|
||||
setError("Firestore not available."); setIsLoading(false); return;
|
||||
setEncounterError("Firestore not available.");
|
||||
setIsLoadingEncounter(false);
|
||||
setIsPlayerDisplayActive(false);
|
||||
return;
|
||||
}
|
||||
setIsLoading(true); setError(null); setActiveEncounterData(null); setCampaignBackgroundUrl(''); setIsPlayerDisplayActive(false);
|
||||
|
||||
|
||||
let unsubscribeEncounter;
|
||||
let unsubscribeCampaign;
|
||||
|
||||
const activeDisplayRef = doc(db, ACTIVE_DISPLAY_DOC);
|
||||
const unsubDisplayConfig = onSnapshot(activeDisplayRef, async (docSnap) => {
|
||||
if (docSnap.exists()) {
|
||||
const { activeCampaignId, activeEncounterId } = docSnap.data();
|
||||
if (activeDisplayData) {
|
||||
const { activeCampaignId, activeEncounterId } = activeDisplayData;
|
||||
if (activeCampaignId && activeEncounterId) {
|
||||
setIsPlayerDisplayActive(true);
|
||||
setIsPlayerDisplayActive(true);
|
||||
setIsLoadingEncounter(true);
|
||||
setEncounterError(null);
|
||||
|
||||
const campaignDocRef = doc(db, CAMPAIGNS_COLLECTION, activeCampaignId);
|
||||
if (unsubscribeCampaign) unsubscribeCampaign();
|
||||
unsubscribeCampaign = onSnapshot(campaignDocRef, (campSnap) => {
|
||||
if (campSnap.exists()) {
|
||||
setCampaignBackgroundUrl(campSnap.data().playerDisplayBackgroundUrl || '');
|
||||
} else {
|
||||
setCampaignBackgroundUrl('');
|
||||
}
|
||||
}, (err) => console.error("Error fetching campaign background for display:", err));
|
||||
const campaignDocRef = doc(db, getCampaignDocPath(activeCampaignId));
|
||||
unsubscribeCampaign = onSnapshot(campaignDocRef, (campSnap) => {
|
||||
if (campSnap.exists()) {
|
||||
setCampaignBackgroundUrl(campSnap.data().playerDisplayBackgroundUrl || '');
|
||||
} else {
|
||||
setCampaignBackgroundUrl('');
|
||||
}
|
||||
}, (err) => console.error("Error fetching campaign background for display:", err));
|
||||
|
||||
const encounterPath = `${CAMPAIGNS_COLLECTION}/${activeCampaignId}/encounters/${activeEncounterId}`;
|
||||
if (unsubscribeEncounter) unsubscribeEncounter();
|
||||
unsubscribeEncounter = onSnapshot(doc(db, encounterPath), (encDocSnap) => {
|
||||
if (encDocSnap.exists()) {
|
||||
setActiveEncounterData({ id: encDocSnap.id, ...encDocSnap.data() });
|
||||
setError(null);
|
||||
} else {
|
||||
setActiveEncounterData(null);
|
||||
setError("Active encounter data not found. The DM might have deleted it or it's misconfigured.");
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, (err) => {
|
||||
console.error("Error fetching active encounter details for display:", err);
|
||||
setError("Error loading active encounter data.");
|
||||
setIsLoading(false);
|
||||
});
|
||||
} else {
|
||||
setActiveEncounterData(null);
|
||||
setCampaignBackgroundUrl('');
|
||||
setIsPlayerDisplayActive(false);
|
||||
setIsLoading(false);
|
||||
const encounterPath = getEncounterDocPath(activeCampaignId, activeEncounterId);
|
||||
unsubscribeEncounter = onSnapshot(doc(db, encounterPath), (encDocSnap) => {
|
||||
if (encDocSnap.exists()) {
|
||||
setActiveEncounterData({ id: encDocSnap.id, ...encDocSnap.data() });
|
||||
} else {
|
||||
setActiveEncounterData(null);
|
||||
setEncounterError("Active encounter data not found.");
|
||||
}
|
||||
setIsLoadingEncounter(false);
|
||||
}, (err) => {
|
||||
console.error("Error fetching active encounter details for display:", err);
|
||||
setEncounterError("Error loading active encounter data.");
|
||||
setIsLoadingEncounter(false);
|
||||
});
|
||||
} else {
|
||||
setActiveEncounterData(null);
|
||||
setCampaignBackgroundUrl('');
|
||||
setIsPlayerDisplayActive(false);
|
||||
setIsLoadingEncounter(false);
|
||||
}
|
||||
} else {
|
||||
} else if (!isLoadingActiveDisplay) { // activeDisplayData is null and not loading
|
||||
setActiveEncounterData(null);
|
||||
setCampaignBackgroundUrl('');
|
||||
setIsPlayerDisplayActive(false);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, (err) => {
|
||||
console.error("Error fetching active display config:", err);
|
||||
setError("Could not load display configuration.");
|
||||
setIsLoading(false);
|
||||
});
|
||||
|
||||
setIsLoadingEncounter(false);
|
||||
}
|
||||
|
||||
return () => {
|
||||
unsubDisplayConfig();
|
||||
if (unsubscribeEncounter) unsubscribeEncounter();
|
||||
if (unsubscribeCampaign) unsubscribeCampaign();
|
||||
};
|
||||
}, []);
|
||||
}, [activeDisplayData, isLoadingActiveDisplay]);
|
||||
|
||||
if (isLoading) return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
|
||||
if (error) return <div className="text-center py-10 text-2xl text-red-400">{error}</div>;
|
||||
if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
|
||||
return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
|
||||
}
|
||||
if (activeDisplayError || (isPlayerDisplayActive && encounterError)) {
|
||||
return <div className="text-center py-10 text-2xl text-red-400">{activeDisplayError || encounterError}</div>;
|
||||
}
|
||||
|
||||
if (!isPlayerDisplayActive || !activeEncounterData) {
|
||||
return (
|
||||
@ -990,7 +1081,7 @@ function DisplayView() {
|
||||
<div className="w-full bg-slate-600 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-slate-500">
|
||||
<div className={`h-full rounded-full transition-all ${p.currentHp <= p.maxHp / 4 ? 'bg-red-500' : (p.currentHp <= p.maxHp / 2 ? 'bg-yellow-500' : 'bg-green-500')}`} style={{ width: `${Math.max(0, (p.currentHp / p.maxHp) * 100)}%` }}></div>
|
||||
{p.type !== 'monster' && (
|
||||
<span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white px-2"> {/* Removed mix-blend-difference */}
|
||||
<span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white px-2">
|
||||
HP: {p.currentHp} / {p.maxHp}
|
||||
</span>
|
||||
)}
|
||||
@ -1029,4 +1120,4 @@ const PlayIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.or
|
||||
const SkipForwardIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>;
|
||||
const StopCircleIcon = ({size=24, className=''}) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>;
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
Reference in New Issue
Block a user