From 3423319b9b877fcb9ce6f23cefe8020419818770 Mon Sep 17 00:00:00 2001 From: david raistrick <1108844+keen99@users.noreply.github.com> Date: Sat, 4 Jul 2026 22:27:32 -0400 Subject: [PATCH] feat(ui): replace all alert() with toast + info modal Native alert() vanished instantly (browser focus loss when player display window or devtools steals focus). Replaced all 23 alert() calls with two in-app feedback paths via React context: - ToastStack: bottom-right stack, 6s auto-dismiss + manual X. For transient failures (storage throws, catch blocks). - InfoModal: yellow notice modal with OK button, persistent until dismissed. For validations (dup-add, empty/invalid fields). UIFeedbackProvider wraps all 3 App branches (admin/player/logs). useUIFeedback() hook in 6 components (CharacterManager, ParticipantManager, InitiativeControls, EncounterManager, LogsView, AdminView). 244 tests green (App 84, shared 133, server 27). --- TODO.md | 156 +++++++++++++++++++++++++------------------------ src/App.js | 166 ++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 195 insertions(+), 127 deletions(-) diff --git a/TODO.md b/TODO.md index e91266b..7be198a 100644 --- a/TODO.md +++ b/TODO.md @@ -2,140 +2,146 @@ Backlog of bugs + long-term items. Milestones live in REWORK_PLAN.md. -## Open bugs +## Open -### BUG-7: reorderParticipants not logged -- FIXED — now returns `log: { message, undo }`. Handler calls logAction. - Undo snapshots participants[] + turnOrderIds + pointer. -- Found second gap: deathSave also returned null log. Fixed (message + undo). -- Logging contract test added: turn.logging.test.js (all mutating ops logged, - no-ops null, undo payloads valid). Documents addParticipants + - updateParticipant gaps (null log, intentional). +### BUG: add participants duplication alert disappears fast +- Duplicate-add throws alert but toast vanishes before user reads. +- Fix: extend toast duration OR require manual dismiss. -## Open features +### FEAT: filter already-added from add-participant dropdown +- Character list dropdown shows characters already in encounter. +- Filter them out (or disable with strike-through). -### FEAT-2: upgrade app internal logs to be parseable -- Goal: combat logs in storage store enough structured state to run - 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 - App.js (startEncounter, toggleActive, addParticipant, removeParticipant, +### FEAT-2: structured combat logs (parseable) +- Goal: logs in storage carry enough state to run skip/rotation analysis + on ANY historic round — not just replay stdout. +- Current: `{timestamp, message, encounterName, undo}`. Parser guesses + roster from message strings. Brittle. +- Upgrade: structured fields at turn-state mutation log sites in App.js + (startEncounter, toggleActive, addParticipant, removeParticipant, applyHpChange death/revive, togglePause, nextTurn): ``` turnSnapshot: { round, currentTurnParticipantId, turnOrderIds, activeIds } ``` -- Then `scripts/analyze-turns.js` ingests app logs directly (adapter fetch). - Works on real game sessions, any round, deterministic. +- Then `scripts/analyze-turns.js` ingests app logs directly. Works on real + game sessions, any round, deterministic. - -### FEAT-M6: Transactional undo (moved from REWORK_PLAN) +### FEAT-M6: transactional undo - Every mutating action writes event: `(type, payload, undo_payload, undone, ts)`. - Undo = apply `undo_payload` in same SQLite tx, flip `undone`. Transactional, no stale clobber. - Replaces fragile `/logs` snapshot-write undo. -- Migration: keep old undo working for existing entries until cleared; new - format for new entries. -- Related: BUG-7 (reorder no undo). - -### Death saves: D&D 5e model (FIXED) -- FIXED — separate success/fail tracking. `deathSave(enc, id, type, n)` - type='success'|'fail'. Fields: `deathSaves`, `deathFails`, `isStable`, - `isDying`. 3 success=stable, 3 fail=dead. Returns `{patch, log, status}`. - Old single-counter broken (successes missing, treated saves as fails). - Old data lost (user OK — feature didn't work). UI: green ✓ row + red ✕ row. - -### Custom conditions field (DONE) -- FIXED — per-campaign freeform conditions. Input field in picker → persists to - `campaigns/{id}.customConditions[]`. Merged with built-ins at render. - ParticipantManager subscribes campaign doc. DisplayView renders custom as - raw label. toggleCondition unchanged (any string id). Dedup case-insensitive. - Enter or button to add. maxLength 40. -- Conditions hardcoded list. No way for DM to add custom. - -### Test integrated timeouts -- No per-test timeout. Tests hang on regression. Add jest timeout (<60s). - -### add participants duplication throws a alert but it disappears fast - -### add particopents list dropdown - remove ones already added - - +- Migration: keep old undo for existing entries; new format for new. ## Done (history) -### Architecture: 1-list turn order model +### Architecture: 1-list turn order model (slot, never sort) - Single source: turnOrderIds === participants.map(id). No re-sort after startEncounter. nextTurn skips inactive (predicate), inactive stay in slot. - Drag (reorder) = same-init tie-break only. Cross-init blocked. - startEncounter sorts ALL participants by init once, then frozen. - addParticipant/updateParticipant slot by init (slotIndexForInit), preserve drag order. Display renders participants[] directly (no sort). -- Static guard test errs if `.sort(` reintroduced. +- Static guard test errs if `.sort(` reintroduced outside allowlist. +- Design doc: docs/INITIATIVE_ORDERING.md. -### BUG-1: addParticipant + pause/resume corrupts turn rotation +### Single source of truth: combat logic +- All 15 App.js handlers delegate to @ttrpg/shared. ~498 lines inline dupes deleted. +- shared/turn.js = only place turn logic lives. + +### Storage parity (firebase + server adapters) +- Neutral queryConstraints ({__type:'orderBy'|'limit'}) honored by both adapters. +- Shared contract test runs both identically. Memory adapter deleted; factory + throws on unknown mode. +- ws storage mode renamed to server (env var + adapter name). + +### Logging contract +- Every mutating op logs message + undo payload. No-op = null log. +- Structural enforcement: per-op contract test (turn.logging.test.js) + + static source-scan guard (static.no-unlogged.test.js). + +### Custom conditions per campaign (DONE) +- Freeform per-campaign conditions. Add applies to participant + persists to + campaign palette in one step. Badge render uses merged allConditions + (built-ins + custom). toggleCondition accepts any string. Dedup + case-insensitive. maxLength 40. Combat + replay tests prove arbitrary + string ids survive round-trip. + +### Death saves: D&D 5e model (DONE) +- Separate success/fail tracking. deathSave(enc, id, type, n), + type='success'|'fail'. Fields: deathSaves, deathFails, isStable, isDying. + 3 success=stable, 3 fail=dead. Returns {patch, log, status, isDying}. + Old single-counter broken (successes missing). Old data lost (feature + never worked in prod). UI: green ✓ + red ✕ rows, Stabilized/Dying badges. + +### FEAT-3: initiative first-class entry (DONE) +- Initiative field at add-char, add-monster, edit participant. +- Inline edit wired. Tie-break = drag order. + +### Test timeouts (DONE) +- jest.setTimeout(10000) in setupTests.js (CRA blocks config-level timeout). + +### Warning = failure in tests (DONE) +- console.error/warn throw in test env. + +### BUG-1: addParticipant + pause/resume corrupts rotation - RESOLVED as side effect of BUG-2 fix. ### BUG-2: addParticipant allows duplicate id - FIXED (addParticipant throws on dup id). ### BUG-4: hide-player-HP breaks display view -- FIXED --- mock honors setDoc{merge}, all 5 activeDisplay sites use merge. +- FIXED — mock honors setDoc{merge}, all 5 activeDisplay sites use merge. ### BUG-5: mid-round addParticipant/revive corrupts rotation -- FIXED --- slot-array + DRY advance core `nextActiveAfter`. +- FIXED — slot-array + DRY advance core nextActiveAfter. ### BUG-6: reorderParticipants doesn't update turnOrderIds - FIXED structurally by 1-list model. +### BUG-7: reorderParticipants not logged +- FIXED — returns log:{message, undo}. Handler calls logAction. deathSave, + addParticipants, updateParticipant logging gaps also closed. + ### BUG-8: server adapter has no reconnect -- FIXED --- onclose reconnects + re-subscribes existing paths. +- FIXED — onclose reconnects + re-subscribes existing paths. ### BUG-10: deact+reactivate same round double-acts participant -- FIXED --- 1-list model keeps slot position on toggle. Reactivate does not +- FIXED — 1-list model keeps slot position on toggle. Reactivate does not grant second turn. Test: turn.bug10.test.js. ### BUG-11: FE Combat.scenario test crashes -- FIXED --- moved to shared/turn.combat.test.js, pure functions, 100 rounds. +- FIXED — moved to shared/turn.combat.test.js, pure functions, 100 rounds. ### BUG-12: campaign selection follows activeDisplay - FIXED. -### BUG-13: reorderParticipants crossing current pointer = ambiguous acted-semantics -- FIXED --- block cross-pointer reorder during active encounter (both dirs). +### BUG-13: reorderParticipants crossing current pointer = ambiguous +- FIXED — block cross-pointer reorder during active encounter (both dirs). Full fix needs actedThisRound tracking. Pragmatic block prevents skip/double. - Pre-combat: free reorder. + Pre-combat: free reorder. Test: turn.bug13.test.js. ### BUG-14: addParticipant init-insertion breaks after drag-reorder -- FIXED --- slotIndexForInit scans current list (post-drag aware). +- FIXED — slotIndexForInit scans current list (post-drag aware). ### BUG-15: DisplayView re-sorts (drag order not preserved) -- FIXED --- display renders participants[] directly. +- FIXED — display renders participants[] directly. ### BUG-16: subscribeCollection hook drops queryConstraints -- FIXED --- neutral builders, both adapters honor orderBy/limit. +- FIXED — neutral builders, both adapters honor orderBy/limit. ### BUG-17: dead SDK imports in App.js -- FIXED --- trimmed (auth + getFirestore + getStorage remain). +- FIXED — trimmed (auth + getFirestore + getStorage remain). ### BUG-18: stale comments reference deleted memory adapter - FIXED. ### FEAT-1: Dead participants stay in turn order -- DONE --- applyHpChange no longer flips isActive on death. Dead stay in +- DONE — applyHpChange no longer flips isActive on death. Dead stay in rotation, nextTurn visits them, PCs get death-save turn. -### feat: add all characters to participants list -- DONE --- addParticipants bulk add wired (App.js:943). - -### Warning = failure in tests -- DONE --- console.error/warn throw in test env. - ### combat.scenario 100 rounds not turns -- DONE --- loops by actual round-wrap count. +- DONE — loops by actual round-wrap count. -### FEAT-3: initiative first-class entry (add + edit) DONE -- Current: only initMod at char-build. No initiative field at add-participant - or edit. 3-step to set after other steps. -- Need: initiative field at add-char, add-monster, AND edit participant. -- Related: tie-break = drag order (current, works). Expose clearly. +### feat: add all characters to participants list +- DONE — addParticipants bulk add wired. diff --git a/src/App.js b/src/App.js index 8df2b70..d0dbf68 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef, useMemo } from 'react'; +import React, { useState, useEffect, useRef, useMemo, createContext, useContext, useCallback } from 'react'; import * as shared from '@ttrpg/shared'; import { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, orderBy, limit, getStorage, getStorageMode } from './storage'; import { @@ -6,9 +6,78 @@ 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, Clock, ChevronRight + Maximize2, Minimize2, Moon, Coffee, Clock, ChevronRight, CheckCircle2, X } from 'lucide-react'; +// ----- UI feedback: toast (transient) + info modal (persistent) ----- +const UIFeedbackContext = createContext(null); +const useUIFeedback = () => useContext(UIFeedbackContext); + +function ToastStack({ toasts, onDismiss }) { + if (!toasts.length) return null; + return ( +
+ {toasts.map(t => ( +
+ + {t.message} + +
+ ))} +
+ ); +} + +function InfoModal({ message, onClose }) { + if (!message) return null; + return ( +
+
+
+ +

Notice

+
+

{message}

+
+ +
+
+
+ ); +} + +function UIFeedbackProvider({ children }) { + const [toasts, setToasts] = useState([]); + const [info, setInfo] = useState(null); + const nextId = useRef(1); + + const showToast = useCallback((message) => { + const id = nextId.current++; + setToasts(prev => [...prev, { id, message }]); + setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 6000); + }, []); + + const showInfo = useCallback((message) => { + setInfo(message); + }, []); + + const dismissToast = useCallback((id) => { + setToasts(prev => prev.filter(t => t.id !== id)); + }, []); + + return ( + + {children} + + setInfo(null)} /> + + ); +} + // Custom CSS for death animation (player view only) const deathAnimationStyles = ` @keyframes death-dissolve { @@ -533,6 +602,7 @@ function EditParticipantModal({ participant, onClose, onSave }) { // ============================================================================ function CharacterManager({ campaignId, campaignCharacters }) { + const { showToast, showInfo } = useUIFeedback(); const [characterName, setCharacterName] = useState(''); const [defaultMaxHp, setDefaultMaxHp] = useState(DEFAULT_MAX_HP); const [defaultInitMod, setDefaultInitMod] = useState(DEFAULT_INIT_MOD); @@ -548,12 +618,10 @@ function CharacterManager({ campaignId, campaignCharacters }) { const initMod = parseInt(defaultInitMod, 10); if (isNaN(hp) || hp <= 0) { - alert("Please enter a valid positive number for Default Max HP."); - return; + showInfo("Please enter a valid positive number for Default Max HP."); return; } if (isNaN(initMod)) { - alert("Please enter a valid number for Default Initiative Modifier."); - return; + showInfo("Please enter a valid number for Default Initiative Modifier."); return; } const newCharacter = { @@ -572,8 +640,7 @@ function CharacterManager({ campaignId, campaignCharacters }) { setDefaultInitMod(DEFAULT_INIT_MOD); } catch (err) { console.error("Error adding character:", err); - alert("Failed to add character. Please try again."); - } + showToast("Failed to add character. Please try again."); } }; const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod) => { @@ -583,13 +650,11 @@ function CharacterManager({ campaignId, campaignCharacters }) { const initMod = parseInt(newDefaultInitMod, 10); if (isNaN(hp) || hp <= 0) { - alert("Please enter a valid positive number for Default Max HP."); - setEditingCharacter(null); + showInfo("Please enter a valid positive number for Default Max HP."); setEditingCharacter(null); return; } if (isNaN(initMod)) { - alert("Please enter a valid number for Default Initiative Modifier."); - setEditingCharacter(null); + showInfo("Please enter a valid number for Default Initiative Modifier."); setEditingCharacter(null); return; } @@ -604,8 +669,7 @@ function CharacterManager({ campaignId, campaignCharacters }) { setEditingCharacter(null); } catch (err) { console.error("Error updating character:", err); - alert("Failed to update character. Please try again."); - } + showToast("Failed to update character. Please try again."); } }; const requestDeleteCharacter = (characterId, charName) => { @@ -622,8 +686,7 @@ function CharacterManager({ campaignId, campaignCharacters }) { await storage.updateDoc(getPath.campaign(campaignId), { players: updatedCharacters }); } catch (err) { console.error("Error deleting character:", err); - alert("Failed to delete character. Please try again."); - } + showToast("Failed to delete character. Please try again."); } setShowDeleteConfirm(false); setItemToDelete(null); @@ -798,6 +861,7 @@ function CharacterManager({ campaignId, campaignCharacters }) { // ============================================================================ function ParticipantManager({ encounter, encounterPath, campaignCharacters, campaignId }) { + const { showToast, showInfo } = useUIFeedback(); const [participantName, setParticipantName] = useState(''); const [participantType, setParticipantType] = useState('monster'); const [selectedCharacterId, setSelectedCharacterId] = useState(''); @@ -860,7 +924,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp return; } if (participants.some(p => p.type === 'character' && p.originalCharacterId === selectedCharacterId)) { - alert(`${character.name} is already in this encounter.`); + showInfo(`${character.name} is already in this encounter.`); return; } nameToAdd = character.name; @@ -914,8 +978,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp setIsNpc(false); setManualInitiative(''); } catch (err) { - alert("Failed to add participant. Please try again."); - } + showToast("Failed to add participant. Please try again."); } }; const handleAddAllCampaignCharacters = async () => { @@ -950,8 +1013,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp }); if (newParticipants.length === 0) { - alert("All campaign characters are already in this encounter."); - return; + showInfo("All campaign characters are already in this encounter."); return; } try { @@ -964,8 +1026,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp }); } } catch (err) { - alert("Failed to add all characters. Please try again."); - } + showToast("Failed to add all characters. Please try again."); } }; const handleUpdateParticipant = async (updatedData) => { @@ -981,8 +1042,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp } setEditingParticipant(null); } catch (err) { - alert("Failed to update participant. Please try again."); - } + showToast("Failed to update participant. Please try again."); } }; // Inline initiative edit (FEAT-3): blur/Enter commits. Reslots participant @@ -1022,8 +1082,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp updates: log.undo, }); } catch (err) { - alert("Failed to delete participant. Please try again."); - } + showToast("Failed to delete participant. Please try again."); } setShowDeleteConfirm(false); setItemToDelete(null); }; @@ -1612,6 +1671,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp // ============================================================================ function InitiativeControls({ campaignId, encounter, encounterPath }) { + const { showToast, showInfo } = useUIFeedback(); const [showEndConfirm, setShowEndConfirm] = useState(false); const { data: activeDisplayData } = useFirestoreDocument(getPath.activeDisplay()); const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true; @@ -1637,8 +1697,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) { const handleStartEncounter = async () => { if (!db || !encounter.participants || encounter.participants.length === 0) { - alert("Add participants first."); - return; + showInfo("Add participants first."); return; } try { @@ -1650,8 +1709,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) { updates: log.undo, }); } catch (err) { - alert(err.message || "Failed to start encounter. Please try again."); - } + showToast(err.message || "Failed to start encounter. Please try again."); } }; const handleTogglePause = async () => { @@ -1682,8 +1740,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) { } catch (err) { // nextTurn throws if no active participants — auto-end combat if (err.message === 'Encounter not running.' || err.message === 'No active turn.') return; - alert("No active participants left."); - await storage.updateDoc(encounterPath, { + showInfo("No active participants left."); await storage.updateDoc(encounterPath, { isStarted: false, isPaused: false, currentTurnParticipantId: null, @@ -1703,8 +1760,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) { updates: log.undo, }); } catch (err) { - alert("Failed to end encounter. Please try again."); - } + showToast("Failed to end encounter. Please try again."); } setShowEndConfirm(false); }; @@ -1805,6 +1861,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) { // ============================================================================ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharacters }) { + const { showToast, showInfo } = useUIFeedback(); const { data: encountersData, isLoading: isLoadingEncounters } = useFirestoreCollection( campaignId ? getPath.encounters(campaignId) : null ); @@ -1871,8 +1928,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac setSelectedEncounterId(newEncounterId); } catch (err) { console.error("Error creating encounter:", err); - alert("Failed to create encounter. Please try again."); - } + showToast("Failed to create encounter. Please try again."); } }; const requestDeleteEncounter = (encounterId, encounterName) => { @@ -1897,8 +1953,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac } } catch (err) { console.error("Error deleting encounter:", err); - alert("Failed to delete encounter. Please try again."); - } + showToast("Failed to delete encounter. Please try again."); } setShowDeleteConfirm(false); setItemToDelete(null); @@ -2051,6 +2106,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac // ============================================================================ function AdminView({ userId }) { + const { showToast, showInfo } = useUIFeedback(); const { data: campaignsData, isLoading: isLoadingCampaigns, error: campaignsError } = useFirestoreCollection( getPath.campaigns() ); @@ -2124,8 +2180,7 @@ function AdminView({ userId }) { setSelectedCampaignId(newCampaignId); } catch (err) { console.error("Error creating campaign:", err); - alert("Failed to create campaign. Please try again."); - } + showToast("Failed to create campaign. Please try again."); } }; const requestDeleteCampaign = (campaignId, campaignName) => { @@ -2160,8 +2215,7 @@ function AdminView({ userId }) { } } catch (err) { console.error("Error deleting campaign:", err); - alert("Failed to delete campaign. Please try again."); - } + showToast("Failed to delete campaign. Please try again."); } setShowDeleteConfirm(false); setItemToDelete(null); @@ -2619,6 +2673,7 @@ function DisplayView() { // ============================================================================ function LogsView() { + const { showToast } = useUIFeedback(); const { data: logs, isLoading } = useFirestoreCollection(getPath.logs(), LOG_QUERY); const [showClearConfirm, setShowClearConfirm] = useState(false); const [undoingId, setUndoingId] = useState(null); @@ -2647,8 +2702,7 @@ function LogsView() { await storage.updateDoc(`${getPath.logs()}/${entry.id}`, { undone: true }); } catch (err) { console.error('Error undoing action:', err); - alert('Failed to roll back. The encounter may have changed or no longer exists.'); - } + showToast("Failed to roll back. The encounter may have changed or no longer exists."); } setUndoingId(null); }; @@ -2825,19 +2879,26 @@ function App() { if (isPlayerViewOnlyMode) { return ( -
- {isAuthReady && } - {!isAuthReady && !error &&

Authenticating for Player Display...

} -
+ +
+ {isAuthReady && } + {!isAuthReady && !error &&

Authenticating for Player Display...

} +
+ ); } if (isLogsMode) { - return isAuthReady ? : ; + return ( + + {isAuthReady ? : } + + ); } return ( -
+ +

TTRPG Initiative Tracker

@@ -2868,7 +2929,8 @@ function App() { -
+
+ ); }