2 Commits
Author SHA1 Message Date
david raistrick d00cc104c9 feat(FEAT-3): reslot on all participant mutation paths
Reslot (stable sort by init desc, tie-break = original array index) now
fires on all 4 paths that can change order:

1. Add participant — sortParticipantsByInitiative([...parts, new], parts)
2. Edit modal save (handleUpdateParticipant) — reslot + syncTurnOrder
3. Drag reorder — splice move (already correct, untouched)
4. Inline init field — reslot (already committed 08c27c1)

Before: add appended (ignored init), edit modal overwrote value without
moving slot. Both caused list order to drift from init order until
startEncounter (sorts once). Now any init change immediately reslots
into correct position. Display + AdminView reflect order.

Stable sort preserves drag order within ties (tie-break = original index
= reflects prior drag). Move-one semantics: only changed element moves.

EditParticipantModal: added htmlFor/id link on Initiative label (was
missing — a11y + testable).

Tests: ReslotAllPaths.test.js (2). RED first (add appended, edit modal
no reslot), green after impl.
2026-07-01 23:00:40 -04:00
david raistrick 36d7186a54 scripts: dev-start/dev-stop for local stack (backend+frontend)
dev-start.sh: starts node backend (better-sqlite3, :4001) + react frontend
(ws storage mode, :3999). Uses absolute DB_PATH to avoid workspace cwd
ambiguity (npm run server:dev runs in server/ subdir). Idempotent — skips
ports already in use.

dev-stop.sh: kills procs on :3999/:4001, sweeps node --watch + react-scripts.

Both write tmp/*.log + tmp/*.pid for debugging.
2026-07-01 22:55:37 -04:00
5 changed files with 175 additions and 3 deletions
+1
View File
@@ -10,6 +10,7 @@ REWORK_PLAN.md.
### 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)`.
+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."
+9 -3
View File
@@ -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"
@@ -857,7 +858,8 @@ 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: ${computedInitiative})`, { encounterName: encounter.name }, {
encounterPath,
@@ -939,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);
+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']);
});
});
});