@@ -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 }) {
{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 (