Rework backend #2

Merged
robert merged 7 commits from rework-backend into main 2026-07-03 08:35:32 -04:00
10 changed files with 489 additions and 67 deletions
+22 -8
View File
@@ -5,6 +5,13 @@ REWORK_PLAN.md.
## Feature backlog
### CRITICAL BUG - storage
- docker for sql is not using persistant storage...
### feat - campaign section rollup
### feat - add all characters to participants list
### FEAT-M6: Transactional undo (moved from REWORK_PLAN)
- Every mutating action writes event: `(type, payload, undo_payload, undone, ts)`.
- Undo = apply `undo_payload` in same SQLite tx, flip `undone`. Transactional,
@@ -17,7 +24,7 @@ REWORK_PLAN.md.
## Architecture: 1-list turn order model (DONE)
- Single source: turnOrderIds === participants.map(id). No re-sort after
startEncounter. nextTurn skips inactive (predicate), inactive stay in slot.
- Drag (reorder) overrides initiative cross-init allowed, DM choice.
- Drag (reorder) overrides initiative --- cross-init allowed, DM choice.
- startEncounter sorts ALL participants by init once, then frozen.
- addParticipant splices by init pos. remove/toggle/reorder sync list.
- Display renders participants[] directly (no sortParticipantsByInitiative).
@@ -31,7 +38,7 @@ REWORK_PLAN.md.
- Separate design + RED. Own work item.
- Related: tie-break = drag order (current, works). Expose clearly.
### FEAT-1: Dead participants stay in turn order DONE
### FEAT-1: Dead participants stay in turn order --- DONE
- Fixed: `applyHpChange` no longer flips `isActive` or touches `turnOrderIds`
on death/revive. Dead stay in rotation, `nextTurn` visits them, PCs get
death-save turn. `isActive` = DM toggle only.
@@ -40,7 +47,7 @@ REWORK_PLAN.md.
### FEAT-2: upgrade app internal logs to be parseable
- Goal: combat logs in Firestore store enough structured state to run
skip/rotation analysis on ANY historic round not just replay stdout.
skip/rotation analysis on ANY historic round --- not just replay stdout.
- Current logs: `{timestamp, message, encounterName, undo}`. Parser must
guess roster from message strings. Brittle.
- Upgrade: add structured fields at turn-state mutation log sites in
@@ -83,7 +90,7 @@ REWORK_PLAN.md.
### bug-3 was a halucination has been removed
### BUG-4: hide-player-HP breaks display view (preexisting)
### BUG-4: hide-player-HP breaks display view (preexisting) --- PROD FIXED, TEST RED (mock bug)
- **Broader than hide-HP**: ALL 5 `storage.setDoc(getPath.activeDisplay(), ...)` calls
use `{merge:true}` which is IGNORED (setDoc = replace per contract).
Each write clobbers other fields on activeDisplay/status doc.
@@ -101,15 +108,22 @@ REWORK_PLAN.md.
activeEncounterId with null (setDoc replace vs updateDoc patch).
- Fix: use updateDoc (patch) not setDoc (replace); or include all existing
fields when writing.
- Status update (2026-07): all 5 sites now use `{merge:true}`. Real firebase
adapter honors merge → production works. BUT jsdom test still RED because
`src/__mocks__/firebase/firestore.js` setDoc records call, IGNORES opts
(no actual merge). Mock must simulate firebase merge semantics for test
to pass. Fix = mock setDoc: if opts.merge, MOCK_DB.merge(path,data) else
replace. OR change App.js setDoc(merge) → updateDoc (cleaner, ws adapter
uses PATCH). Decide which.
- Test: render App + DisplayView, toggle hide-HP, assert display still shows
encounter (not paused).
### BUG-5: mid-round addParticipant/revive corrupts rotation FIXED
### BUG-5: mid-round addParticipant/revive corrupts rotation --- FIXED
- Fixed (commit `494327f`). Slot-array turn order + DRY advance core
`nextActiveAfter`. Both nextTurn + computeTurnOrderAfterRemoval delegate.
- 500-round replay: 0 skips, 0 double-acts.
### BUG-6: reorderParticipants doesn't update turnOrderIds FIXED
### BUG-6: reorderParticipants doesn't update turnOrderIds --- FIXED
- Fixed structurally by 1-list model (commit 5d3a060). turnOrderIds =
participants.map(id) always. reorder cross-init allowed (DM override).
Display === rotation by construction.
@@ -181,8 +195,8 @@ REWORK_PLAN.md.
- [ ] BUG-4: fix setDoc→updateDoc for all 5 activeDisplay sites
- [x] BUG-5: fixed (1-list model, 500 rounds clean)
- [x] BUG-6: fixed structurally (1-list model)
- [x] BUG-12: fixed campaign selection follows activeDisplay
- [x] BUG-15: fixed DisplayView no longer re-sorts (drag order preserved)
- [x] BUG-12: fixed --- campaign selection follows activeDisplay
- [x] BUG-15: fixed --- DisplayView no longer re-sorts (drag order preserved)
- [x] BUG-8: ws adapter reconnect (implemented + GREEN)
- [ ] BUG-10: deact+reactivate double-act
- [ ] BUG-11: FE Combat.scenario crash
+54
View File
@@ -0,0 +1,54 @@
#!/usr/bin/env bash
# Start local dev stack: node backend (sqlite) + react frontend, ws storage mode.
# Usage: ./scripts/dev-start.sh
# Stop: ./scripts/dev-stop.sh
set -euo pipefail
cd "$(dirname "$0")/.."
mkdir -p tmp data
# kill anything on the ports (zombies)
for port in 3999 4001; do
pids=$(lsof -ti :$port 2>/dev/null || true)
if [ -n "$pids" ]; then
echo "port $port in use by: $pids — leaving as-is."
echo " (run ./scripts/dev-stop.sh first to restart clean)"
fi
done
# backend: better-sqlite3, :4001
if ! lsof -ti :4001 >/dev/null 2>&1; then
echo "starting backend :4001..."
DB_PATH=$(pwd)/data/tracker.sqlite PORT=4001 \
nohup npm run server:dev > tmp/server.log 2>&1 &
echo $! > tmp/server.pid
else
echo "backend already on :4001"
fi
# frontend: ws storage, :3999
if ! lsof -ti :3999 >/dev/null 2>&1; then
echo "starting frontend :3999..."
REACT_APP_STORAGE=ws \
REACT_APP_BACKEND_URL=http://127.0.0.1:4001 \
REACT_APP_BACKEND_WS=ws://127.0.0.1:4001/ws \
BROWSER=none PORT=3999 \
nohup npm start > tmp/fe.log 2>&1 &
echo $! > tmp/fe.pid
else
echo "frontend already on :3999"
fi
# wait for ports to listen
echo "waiting for ports..."
for port in 4001 3999; do
for i in {1..30}; do
lsof -ti :$port >/dev/null 2>&1 && break
sleep 1
done
done
echo ""
echo "backend : http://127.0.0.1:4001 (curl http://127.0.0.1:4001/health)"
echo "frontend : http://127.0.0.1:3999 (admin / player /display)"
echo "logs : tmp/server.log tmp/fe.log"
echo "stop : ./scripts/dev-stop.sh"
+35
View File
@@ -0,0 +1,35 @@
#!/usr/bin/env bash
# Stop local dev stack. Usage: ./scripts/dev-stop.sh
set -uo pipefail
cd "$(dirname "$0")/.."
stopped=0
for port in 3999 4001; do
pids=$(lsof -ti :$port 2>/dev/null || true)
if [ -n "$pids" ]; then
echo "stopping :$port (pid: $pids)"
kill $pids 2>/dev/null || true
stopped=1
fi
done
# also kill recorded pids
for f in tmp/server.pid tmp/fe.pid; do
if [ -f "$f" ]; then
pid=$(cat "$f")
kill "$pid" 2>/dev/null || true
rm -f "$f"
fi
done
# node --watch spawns children — sweep by port pattern
pids=$(pgrep -f "node --watch index.js|react-scripts start" 2>/dev/null || true)
if [ -n "$pids" ]; then
echo "sweeping node dev procs: $pids"
kill $pids 2>/dev/null || true
fi
if [ "$stopped" = "0" ]; then
echo "nothing running."
fi
echo "stopped."
+155 -38
View File
@@ -8,7 +8,7 @@ import {
UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle,
Play as PlayIcon, Pause as PauseIcon, SkipForward as SkipForwardIcon,
StopCircle as StopCircleIcon, Users2, Dices, ChevronUp, ChevronDown, ScrollText,
Maximize2, Minimize2, Moon, Coffee
Maximize2, Minimize2, Moon, Coffee, Clock, ChevronRight
} from 'lucide-react';
// Custom CSS for death animation (player view only)
@@ -444,9 +444,10 @@ function EditParticipantModal({ participant, onClose, onSave }) {
/>
</div>
<div>
<label className="block text-sm font-medium text-stone-300">Initiative</label>
<label htmlFor="edit-initiative" className="block text-sm font-medium text-stone-300">Initiative</label>
<input
type="number"
id="edit-initiative"
value={initiative}
onChange={(e) => setInitiative(e.target.value)}
className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
@@ -781,6 +782,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
const [selectedCharacterId, setSelectedCharacterId] = useState('');
const [monsterInitMod, setMonsterInitMod] = useState(MONSTER_DEFAULT_INIT_MOD);
const [maxHp, setMaxHp] = useState(DEFAULT_MAX_HP);
const [manualInitiative, setManualInitiative] = useState('');
const [isNpc, setIsNpc] = useState(false);
const [editingParticipant, setEditingParticipant] = useState(null);
const [hpChangeValues, setHpChangeValues] = useState({});
@@ -817,6 +819,8 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
let modifier = 0;
let currentMaxHp = parseInt(maxHp, 10) || DEFAULT_MAX_HP;
let participantIsNpc = false;
const manualInit = manualInitiative !== '' && !isNaN(parseInt(manualInitiative, 10));
const finalInitiative = manualInit ? parseInt(manualInitiative, 10) : null;
if (participantType === 'character') {
const character = campaignCharacters.find(c => c.id === selectedCharacterId);
@@ -836,13 +840,13 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
participantIsNpc = isNpc;
}
const finalInitiative = initiativeRoll + modifier;
const computedInitiative = manualInit ? finalInitiative : (initiativeRoll + modifier);
const newParticipant = {
id: generateId(),
name: nameToAdd,
type: participantType,
originalCharacterId: participantType === 'character' ? selectedCharacterId : null,
initiative: finalInitiative,
initiative: computedInitiative,
maxHp: currentMaxHp,
currentHp: currentMaxHp,
isNpc: participantType === 'monster' ? participantIsNpc : false,
@@ -854,19 +858,21 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
try {
await storage.updateDoc(encounterPath, {
participants: [...participants, newParticipant]
participants: sortParticipantsByInitiative([...participants, newParticipant], participants),
...syncTurnOrder([...participants, newParticipant]),
});
logAction(`${nameToAdd} added to encounter (Initiative: ${finalInitiative})`, { encounterName: encounter.name }, {
logAction(`${nameToAdd} added to encounter (Initiative: ${computedInitiative})`, { encounterName: encounter.name }, {
encounterPath,
updates: { participants: [...participants] },
});
setLastRollDetails({
name: nameToAdd,
roll: initiativeRoll,
mod: modifier,
total: finalInitiative,
type: participantIsNpc ? 'NPC' : participantType
roll: manualInit ? null : initiativeRoll,
mod: manualInit ? null : modifier,
total: computedInitiative,
type: participantIsNpc ? 'NPC' : participantType,
manual: manualInit,
});
setTimeout(() => setLastRollDetails(null), ROLL_DISPLAY_DURATION);
@@ -876,6 +882,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
setSelectedCharacterId('');
setMonsterInitMod(MONSTER_DEFAULT_INIT_MOD);
setIsNpc(false);
setManualInitiative('');
} catch (err) {
console.error("Error adding participant:", err);
alert("Failed to add participant. Please try again.");
@@ -934,9 +941,13 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
const updatedParticipants = participants.map(p =>
p.id === editingParticipant.id ? { ...p, ...updatedData } : p
);
const reslotted = sortParticipantsByInitiative(updatedParticipants, participants);
try {
await storage.updateDoc(encounterPath, { participants: updatedParticipants });
await storage.updateDoc(encounterPath, {
participants: reslotted,
...syncTurnOrder(reslotted),
});
setEditingParticipant(null);
} catch (err) {
console.error("Error updating participant:", err);
@@ -944,6 +955,28 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
}
};
// Inline initiative edit (FEAT-3): blur/Enter commits. Reslots participant
// into correct list position (stable sort by init desc, tie-break original
// index). Display + AdminView both reflect new order. Pre-combat only —
// field gated to !started||paused elsewhere.
const handleInlineInitiative = async (participantId, value) => {
if (!db) return;
const n = parseInt(value, 10);
if (isNaN(n)) return;
const updatedParticipants = participants.map(p =>
p.id === participantId ? { ...p, initiative: n } : p
);
const reslotted = sortParticipantsByInitiative(updatedParticipants, participants);
try {
await storage.updateDoc(encounterPath, {
participants: reslotted,
...syncTurnOrder(reslotted),
});
} catch (err) {
console.error("Error updating initiative:", err);
}
};
const requestDeleteParticipant = (participantId, participantName) => {
setItemToDelete({ id: participantId, name: participantName });
setShowDeleteConfirm(true);
@@ -1307,6 +1340,19 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
/>
</div>
<div className="md:col-span-2">
<label htmlFor="manualInitiative" className="block text-sm font-medium text-stone-300">
Initiative <span className="text-xs text-stone-400">(blank=roll)</span>
</label>
<input
type="number"
id="manualInitiative"
value={manualInitiative}
onChange={(e) => setManualInitiative(e.target.value)}
placeholder="auto"
className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
/>
</div>
<div className="md:col-span-2">
<label htmlFor="monsterMaxHp" className="block text-sm font-medium text-stone-300">
Max HP
@@ -1358,6 +1404,19 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
/>
</div>
<div className="md:col-span-2">
<label htmlFor="charManualInitiative" className="block text-sm font-medium text-stone-300">
Initiative <span className="text-xs text-stone-400">(blank=roll)</span>
</label>
<input
type="number"
id="charManualInitiative"
value={manualInitiative}
onChange={(e) => setManualInitiative(e.target.value)}
placeholder="auto"
className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
/>
</div>
</>
)}
@@ -1375,8 +1434,10 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
{lastRollDetails && (
<p className="text-sm text-green-400 mt-2 mb-2 text-center">
{lastRollDetails.name} ({lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type})
: Rolled d20 ({lastRollDetails.roll}) {formatInitMod(lastRollDetails.mod)} = {lastRollDetails.total} Initiative
{lastRollDetails.manual
? `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type}): Set initiative ${lastRollDetails.total}`
: `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type}): Rolled d20 (${lastRollDetails.roll}) ${formatInitMod(lastRollDetails.mod)} = ${lastRollDetails.total} Initiative`
}
</p>
)}
@@ -1422,9 +1483,27 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters }) {
)}
{isDead && <span className="ml-2 text-xs text-red-300 font-semibold">{p.type === 'character' ? '(Unconscious)' : '(Dead)'}</span>}
</p>
<p className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-stone-200'}`}>
Init: {p.initiative} | HP: {p.currentHp}/{p.maxHp}
</p>
<div className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-stone-200'} flex items-center gap-2`}>
<span className="inline-flex items-center gap-1">
<label htmlFor={`init-${p.id}`} className="sr-only">Initiative</label>
<input
type="number"
id={`init-${p.id}`}
defaultValue={p.initiative}
key={p.initiative}
min="0"
max="99"
disabled={encounter.isStarted && !encounter.isPaused}
onChange={(e) => { if (e.target.value.length > 2) e.target.value = e.target.value.slice(0, 2); }}
onFocus={(e) => e.target.select()}
onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); }}
onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
className="w-10 px-1 py-0.5 bg-stone-800 border border-stone-700 rounded-md shadow-sm text-white text-sm focus:outline-none focus:ring-1 focus:ring-amber-600 focus:border-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
aria-label={`Initiative for ${p.name}`}
/>
</span>
<span>HP: {p.currentHp}/{p.maxHp}</span>
</div>
{/* Death Saves - only player characters make death saving throws */}
{isDead && encounter.isStarted && p.type === 'character' && (
@@ -1579,16 +1658,26 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
const [showEndConfirm, setShowEndConfirm] = useState(false);
const { data: activeDisplayData } = useFirestoreDocument(getPath.activeDisplay());
const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
const hideNpcHp = activeDisplayData?.hideNpcHp ?? false;
const handleToggleHidePlayerHp = async () => {
if (!db) return;
try {
await storage.setDoc(getPath.activeDisplay(), { hidePlayerHp: !hidePlayerHp }, { merge: true });
await storage.updateDoc(getPath.activeDisplay(), { hidePlayerHp: !hidePlayerHp });
} catch (err) {
console.error("Error toggling hidePlayerHp:", err);
}
};
const handleToggleHideNpcHp = async () => {
if (!db) return;
try {
await storage.updateDoc(getPath.activeDisplay(), { hideNpcHp: !hideNpcHp });
} catch (err) {
console.error("Error toggling hideNpcHp:", err);
}
};
const handleStartEncounter = async () => {
if (!db || !encounter.participants || encounter.participants.length === 0) {
alert("Add participants first.");
@@ -1616,10 +1705,10 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
turnOrderIds: sortedParticipants.map(p => p.id)
});
await storage.setDoc(getPath.activeDisplay(), {
await storage.updateDoc(getPath.activeDisplay(), {
activeCampaignId: campaignId,
activeEncounterId: encounter.id
}, { merge: true });
});
logAction(`Combat started: "${encounter.name}" — ${sortedParticipants[0].name}'s turn (Round 1)`, { encounterName: encounter.name }, {
encounterPath,
@@ -1747,10 +1836,10 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
turnOrderIds: []
});
await storage.setDoc(getPath.activeDisplay(), {
await storage.updateDoc(getPath.activeDisplay(), {
activeCampaignId: null,
activeEncounterId: null
}, { merge: true });
});
logAction(`Combat ended: "${encounter.name}"`, { encounterName: encounter.name }, {
encounterPath,
@@ -1836,6 +1925,17 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
<span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hidePlayerHp ? 'translate-x-4' : 'translate-x-0'}`} />
</button>
</label>
<label className="flex items-center justify-between cursor-pointer gap-2 mt-2">
<span className="text-sm text-stone-300">Hide NPC/monster HP</span>
<button
role="switch"
aria-checked={hideNpcHp}
onClick={handleToggleHideNpcHp}
className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hideNpcHp ? 'bg-amber-600' : 'bg-stone-600'}`}
>
<span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hideNpcHp ? 'translate-x-4' : 'translate-x-0'}`} />
</button>
</label>
</div>
</div>
@@ -1965,15 +2065,15 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
const currentActiveEncounter = activeDisplayInfo?.activeEncounterId;
if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) {
await storage.setDoc(getPath.activeDisplay(), {
await storage.updateDoc(getPath.activeDisplay(), {
activeCampaignId: null,
activeEncounterId: null,
}, { merge: true });
});
} else {
await storage.setDoc(getPath.activeDisplay(), {
await storage.updateDoc(getPath.activeDisplay(), {
activeCampaignId: campaignId,
activeEncounterId: encounterId,
}, { merge: true });
});
}
} catch (err) {
console.error("Error toggling Player Display:", err);
@@ -2116,6 +2216,7 @@ function AdminView({ userId }) {
const [showCreateModal, setShowCreateModal] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [itemToDelete, setItemToDelete] = useState(null);
const [campaignsCollapsed, setCampaignsCollapsed] = useState(false);
useEffect(() => {
if (campaignsData && db) {
@@ -2243,7 +2344,18 @@ function AdminView({ userId }) {
<div className="space-y-6">
<div>
<div className="flex justify-between items-center mb-4">
<h2 className="text-2xl font-semibold text-amber-300 font-cinzel tracking-wide">Campaigns</h2>
<button
onClick={() => setCampaignsCollapsed(c => !c)}
className="flex items-center gap-2 text-2xl font-semibold text-amber-300 font-cinzel tracking-wide hover:text-amber-200 transition-colors"
aria-expanded={!campaignsCollapsed}
aria-controls="campaigns-grid"
>
{campaignsCollapsed
? <ChevronRight size={24} />
: <ChevronDown size={24} />}
Campaigns
<span className="text-sm font-normal text-stone-400">({campaignsWithDetails.length})</span>
</button>
<button
onClick={() => setShowCreateModal(true)}
className="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-4 rounded-lg flex items-center transition-colors"
@@ -2252,12 +2364,14 @@ function AdminView({ userId }) {
</button>
</div>
{campaignsWithDetails.length === 0 && !isLoadingCampaigns && (
<p className="text-stone-400">No campaigns yet. Create one to get started!</p>
)}
{!campaignsCollapsed && (
<>
{campaignsWithDetails.length === 0 && !isLoadingCampaigns && (
<p className="text-stone-400">No campaigns yet. Create one to get started!</p>
)}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{campaignsWithDetails.map(campaign => {
<div id="campaigns-grid" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{campaignsWithDetails.map(campaign => {
const cardStyle = campaign.playerDisplayBackgroundUrl
? { backgroundImage: `url(${campaign.playerDisplayBackgroundUrl})` }
: {};
@@ -2283,12 +2397,12 @@ function AdminView({ userId }) {
<span className="inline-flex items-center">
<Swords size={12} className="mr-1" /> {campaign.encounterCount === undefined ? '...' : campaign.encounterCount} Encounters
</span>
{campaign.createdAt && (
<span className="inline-flex items-center opacity-80">
{new Date(campaign.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}
</span>
)}
</div>
{campaign.createdAt && (
<div className="text-xs text-stone-300 opacity-70 mt-1">
<Clock size={12} className="mr-1 inline-block" /> Created: {new Date(campaign.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}
</div>
)}
</div>
<button
onClick={(e) => {
@@ -2303,7 +2417,9 @@ function AdminView({ userId }) {
</div>
);
})}
</div>
</div>
</>
)}
</div>
{showCreateModal && (
@@ -2497,6 +2613,7 @@ function DisplayView() {
const { name, participants, round, currentTurnParticipantId, isStarted, isPaused } = activeEncounterData;
const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
const hideNpcHp = activeDisplayData?.hideNpcHp ?? false;
let participantsToRender = [];
if (participants) {
@@ -2598,7 +2715,7 @@ function DisplayView() {
</span>
</div>
{!(hidePlayerHp && p.type === 'character') && (
{!(hidePlayerHp && p.type === 'character') && !(hideNpcHp && p.type !== 'character') && (
<div className="flex justify-between items-center">
<div className="w-full bg-stone-700 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-stone-600">
<div
+6 -6
View File
@@ -41,7 +41,7 @@ describe('Combat -> Firebase', () => {
test('startEncounter: also sets activeDisplay to this encounter', async () => {
await setupWithMonsters();
await startCombatViaUI();
const adCalls = findCallActiveDisplay('setDoc');
const adCalls = findCallActiveDisplay('updateDoc');
const last = adCalls[adCalls.length - 1];
expect(last.data.activeCampaignId).toBeTruthy();
expect(last.data.activeEncounterId).toBeTruthy();
@@ -111,26 +111,26 @@ describe('Combat -> Firebase', () => {
fireEvent.click(screen.getByRole('button', { name: /End Combat/i }));
fireEvent.click(await screen.findByRole('button', { name: /Confirm/i }));
await waitFor(() => {
const adCalls = findCallActiveDisplay('setDoc');
const adCalls = findCallActiveDisplay('updateDoc');
const last = adCalls[adCalls.length - 1];
return last && last.data.activeCampaignId === null;
});
const adCalls = findCallActiveDisplay('setDoc');
const adCalls = findCallActiveDisplay('updateDoc');
const last = adCalls[adCalls.length - 1];
expect(last.data).toMatchObject({ activeCampaignId: null, activeEncounterId: null });
});
test('toggleHidePlayerHp: setDoc merge on activeDisplay/status', async () => {
test('toggleHidePlayerHp: updateDoc patch on activeDisplay/status', async () => {
await setupWithMonsters();
await startCombatViaUI();
const switchBtn = screen.getByRole('switch');
fireEvent.click(switchBtn);
await waitFor(() => {
const adCalls = findCallActiveDisplay('setDoc');
const adCalls = findCallActiveDisplay('updateDoc');
const last = adCalls[adCalls.length - 1];
return last && 'hidePlayerHp' in last.data;
});
const adCalls = findCallActiveDisplay('setDoc');
const adCalls = findCallActiveDisplay('updateDoc');
const last = adCalls[adCalls.length - 1];
expect(last.data).toHaveProperty('hidePlayerHp');
});
+9 -9
View File
@@ -42,7 +42,7 @@ describe('Encounter -> Firebase', () => {
expect(call.path).toMatch(/campaigns\/[^/]+\/encounters\//);
});
test('togglePlayerDisplay: setDoc merge on activeDisplay/status', async () => {
test('togglePlayerDisplay: updateDoc patch on activeDisplay/status', async () => {
await setupCampaignAndEncounter('Camp D', 'Enc D');
await selectEncounterByName('Enc D');
@@ -50,33 +50,33 @@ describe('Encounter -> Firebase', () => {
const eyeBtn = await screen.findByTitle('Activate for Player Display');
fireEvent.click(eyeBtn);
await waitFor(() => findCall('setDoc', 'activeDisplay/status'));
const call = findCall('setDoc', 'activeDisplay/status');
// activeDisplay/status setDoc is called with merge option in App
await waitFor(() => findCall('updateDoc', 'activeDisplay/status'));
const call = findCall('updateDoc', 'activeDisplay/status');
// BUG-4 fix: updateDoc patch, not setDoc replace (was clobbering fields)
expect(call.data).toMatchObject({
activeCampaignId: expect.any(String),
activeEncounterId: expect.any(String),
});
});
test('togglePlayerDisplay off: setDoc nulls active ids', async () => {
test('togglePlayerDisplay off: updateDoc nulls active ids', async () => {
await setupCampaignAndEncounter('Camp O', 'Enc O');
await selectEncounterByName('Enc O');
// turn ON
const onBtn = await screen.findByTitle('Activate for Player Display');
fireEvent.click(onBtn);
await waitFor(() => findCall('setDoc', 'activeDisplay/status'));
await waitFor(() => findCall('updateDoc', 'activeDisplay/status'));
// turn OFF
const offBtn = await screen.findByTitle('Deactivate for Player Display');
fireEvent.click(offBtn);
await waitFor(() => {
const calls = findCalls('setDoc', 'activeDisplay/status');
const calls = findCalls('updateDoc', 'activeDisplay/status');
const last = calls[calls.length - 1];
return last.data.activeCampaignId === null;
});
const calls = findCalls('setDoc', 'activeDisplay/status');
const calls = findCalls('updateDoc', 'activeDisplay/status');
const last = calls[calls.length - 1];
expect(last.data).toMatchObject({ activeCampaignId: null, activeEncounterId: null });
});
@@ -103,7 +103,7 @@ describe('Encounter -> Firebase', () => {
// activate display first
const onBtn = await screen.findByTitle('Activate for Player Display');
fireEvent.click(onBtn);
await waitFor(() => findCall('setDoc', 'activeDisplay/status'));
await waitFor(() => findCall('updateDoc', 'activeDisplay/status'));
// delete the active encounter
const trashBtn = screen.getAllByTitle('Delete Encounter')[0];
+6 -6
View File
@@ -43,21 +43,21 @@ describe('BUG-4: hide-player-HP toggle preserves activeDisplay', () => {
await selectCampaignByName('Camp');
// find the hide-player-HP toggle (role switch)
const toggle = await screen.findByRole('switch', { name: /hide/i }, { timeout: 3000 });
const toggle = await screen.findByRole('switch', { name: /hide player hp/i }, { timeout: 3000 });
// toggle ON
fireEvent.click(toggle);
await waitFor(() => {
const writes = getAdapterCalls().filter(
c => c.fn === 'setDoc' && c.path.includes('activeDisplay/status')
c => c.fn === 'updateDoc' && c.path.includes('activeDisplay/status')
);
expect(writes.length).toBeGreaterThan(0);
const last = writes[writes.length - 1];
// data written must include activeCampaignId AND activeEncounterId
// BUG: writes only {hidePlayerHp:true}, clobbering them.
expect(last.data.activeCampaignId).toBe('c1');
expect(last.data.activeEncounterId).toBe('e1');
// patch must NOT clobber activeCampaignId/activeEncounterId.
// BUG: setDoc replace writes only {hidePlayerHp:true} clobbers.
// Fix: updateDoc patch — other fields untouched.
expect(last.patch.hidePlayerHp).toBe(true);
}, { timeout: 3000 });
});
});
+57
View File
@@ -0,0 +1,57 @@
// RED test: FEAT-3 initiative field on add participant.
// If initiative field set, use it (no roll). Empty = roll d20+mod (current).
import React from 'react';
import { screen, waitFor, within } from '@testing-library/react';
import '@testing-library/jest-dom';
import { renderApp, createCampaignViaUI, selectCampaignByName, createEncounterViaUI, selectEncounterByName, getParticipantForm } from './testHelpers';
import { fireEvent } from '@testing-library/react';
import { getCalls } from '../__mocks__/firebase/_mock-db';
function lastParticipantUpdate(name) {
const calls = getCalls().filter(c => c.fn === 'updateDoc' && c.path.includes('/encounters/'));
const last = calls[calls.length - 1];
return last && last.data.participants && last.data.participants.find(p => p.name === name);
}
describe('FEAT-3: initiative field on add (optional, empty=roll)', () => {
test('initiative field set → uses value, no roll', async () => {
await renderApp();
await createCampaignViaUI('Camp');
await selectCampaignByName('Camp');
await createEncounterViaUI('Enc');
await selectEncounterByName('Enc');
const form = within(getParticipantForm());
fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: 'Goblin' } });
fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: '2' } });
fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: '7' } });
// set explicit initiative
fireEvent.change(form.getByPlaceholderText('auto'), { target: { value: '15' } });
fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
await waitFor(() => lastParticipantUpdate('Goblin'));
const p = lastParticipantUpdate('Goblin');
expect(p.initiative).toBe(15);
});
test('initiative field empty → rolls d20+mod', async () => {
await renderApp();
await createCampaignViaUI('Camp2');
await selectCampaignByName('Camp2');
await createEncounterViaUI('Enc2');
await selectEncounterByName('Enc2');
const form = within(getParticipantForm());
fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: 'Wolf' } });
fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: '3' } });
fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: '11' } });
// leave initiative empty
fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
await waitFor(() => lastParticipantUpdate('Wolf'));
const p = lastParticipantUpdate('Wolf');
// rolled d20 (1-20) + mod 3 = range 4-23
expect(p.initiative).toBeGreaterThanOrEqual(4);
expect(p.initiative).toBeLessThanOrEqual(23);
});
});
+69
View File
@@ -0,0 +1,69 @@
// RED: FEAT-3 followup. Inline init change must reslot participant into
// correct order (stable sort by init desc, tie-break original index).
// Before combat starts: list reorders. Also field gated to !started||paused.
import React from 'react';
import { screen, waitFor, within, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { renderApp, createCampaignViaUI, selectCampaignByName, createEncounterViaUI, selectEncounterByName, getParticipantForm, addMonsterViaUI } from './testHelpers';
import { getCalls } from '../__mocks__/firebase/_mock-db';
function lastParticipantsUpdate() {
const calls = getCalls().filter(c => c.fn === 'updateDoc' && c.path.includes('/encounters/'));
const last = calls[calls.length - 1];
return last && last.data.participants;
}
describe('FEAT-3 reslot: inline init change reorders list', () => {
test('raising init moves participant up in list (pre-combat)', async () => {
await renderApp();
await createCampaignViaUI('Camp');
await selectCampaignByName('Camp');
await createEncounterViaUI('Enc');
await selectEncounterByName('Enc');
// add two monsters with manual init: Orc=5 (first), Goblin=3 (second)
const form = within(getParticipantForm());
const addOne = async (name, hp, mod, init) => {
fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: name } });
fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: String(mod) } });
fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: String(hp) } });
fireEvent.change(form.getByPlaceholderText('auto'), { target: { value: String(init) } });
fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
await waitFor(() => {
const parts = lastParticipantsUpdate();
if (!parts || !parts.some(p => p.name === name)) throw new Error('not added');
});
};
await addOne('Orc', 15, 0, 5);
await addOne('Goblin', 7, 2, 3);
// verify pre-state: Orc(5) before Goblin(3)
let parts = lastParticipantsUpdate();
expect(parts.map(p => p.name)).toEqual(['Orc', 'Goblin']);
// bump Goblin to 8 — should reslot above Orc
const goblinField = screen.getByLabelText('Initiative for Goblin');
fireEvent.change(goblinField, { target: { value: '8' } });
fireEvent.blur(goblinField);
await waitFor(() => {
const p = lastParticipantsUpdate();
expect(p.map(x => x.name)).toEqual(['Goblin', 'Orc']);
});
});
test('inline init field disabled when combat active (not paused)', async () => {
await renderApp();
await createCampaignViaUI('Camp2');
await selectCampaignByName('Camp2');
await createEncounterViaUI('Enc2');
await selectEncounterByName('Enc2');
await addMonsterViaUI('Goblin', 7, 2);
// gate check: field exists pre-combat
expect(screen.getByLabelText('Initiative for Goblin')).toBeInTheDocument();
// no way to start combat + check disabled via mock easily here;
// this test documents the gate requirement.
});
});
+76
View File
@@ -0,0 +1,76 @@
// RED: reslot must fire on ALL 4 participant-mutation paths.
// Path 1 add, path 2 edit modal, path 3 drag (already correct), path 4 inline field (already correct).
// Tests add + edit modal reslot. Drag + inline already covered.
import React from 'react';
import { screen, waitFor, within, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { renderApp, createCampaignViaUI, selectCampaignByName, createEncounterViaUI, selectEncounterByName, getParticipantForm, addMonsterViaUI } from './testHelpers';
import { getCalls } from '../__mocks__/firebase/_mock-db';
function lastParticipantsUpdate() {
const calls = getCalls().filter(c => c.fn === 'updateDoc' && c.path.includes('/encounters/'));
const last = calls[calls.length - 1];
return last && last.data.participants;
}
async function addOne(form, name, hp, mod, init) {
fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: name } });
fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: String(mod) } });
fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: String(hp) } });
fireEvent.change(form.getByPlaceholderText('auto'), { target: { value: String(init) } });
fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
await waitFor(() => {
const parts = lastParticipantsUpdate();
if (!parts || !parts.some(p => p.name === name)) throw new Error('not added');
});
}
describe('reslot on all mutation paths', () => {
test('add inserts at correct init position (not append)', async () => {
await renderApp();
await createCampaignViaUI('Camp');
await selectCampaignByName('Camp');
await createEncounterViaUI('Enc');
await selectEncounterByName('Enc');
const form = within(getParticipantForm());
// add Orc(5) first, then Goblin(8) — Goblin should slot ABOVE Orc, not append below
await addOne(form, 'Orc', 15, 0, 5);
await addOne(form, 'Goblin', 7, 2, 8);
const parts = lastParticipantsUpdate();
expect(parts.map(p => p.name)).toEqual(['Goblin', 'Orc']);
});
test('edit modal init change reslots participant', async () => {
await renderApp();
await createCampaignViaUI('Camp2');
await selectCampaignByName('Camp2');
await createEncounterViaUI('Enc2');
await selectEncounterByName('Enc2');
const form = within(getParticipantForm());
await addOne(form, 'Orc', 15, 0, 5);
await addOne(form, 'Goblin', 7, 2, 3);
// pre: Orc(5) before Goblin(3)
expect(lastParticipantsUpdate().map(p => p.name)).toEqual(['Orc', 'Goblin']);
// open edit modal for Goblin, bump init to 8
const editBtns = screen.getAllByTitle('Edit');
const goblinEdit = editBtns.find(b => b.closest('li')?.textContent.includes('Goblin'));
fireEvent.click(goblinEdit);
await waitFor(() => screen.getByText(`Edit Goblin`));
// modal renders after row inputs; take last Initiative-labeled input
const initInputs = screen.getAllByLabelText('Initiative');
fireEvent.change(initInputs[initInputs.length - 1], { target: { value: '8' } });
const saveBtns = screen.getAllByRole('button', { name: /Save/i });
fireEvent.click(saveBtns[saveBtns.length - 1]);
await waitFor(() => {
const parts = lastParticipantsUpdate();
expect(parts.map(p => p.name)).toEqual(['Goblin', 'Orc']);
});
});
});