Animate player display inactive transitions and death state
Player display now tracks displayParticipants separately from raw encounter participants so active->inactive can animate out before removal, and inactive-> active can animate in. This preserves 1-list order, keeps DM display behavior unchanged, and avoids fading dying/stable participants. PlayerParticipantCard handles transitions: - active->inactive: scale/slide/fade out, then parent removes from display list - inactive->active: scale/slide/fade in - alive->dead: keep visible with dim/desaturate/red-rim death cue + skull pulse - dying/stable: full visible, no fade/removal DisplayView inactive characterization updated to wait for exit animation before asserting removal. TODO item removed.
This commit is contained in:
david raistrick
@@ -11,18 +11,6 @@ not sure good way to do this
|
||||
|
||||
|
||||
|
||||
### FEAT: player display fade transitions for inactive state
|
||||
- Inactive is DM-triggered via Mark Inactive.
|
||||
- Player display should fade inactive participant out, then remove from display list.
|
||||
- Reactivating should fade participant in.
|
||||
- DM display keeps inactive participant visible.
|
||||
- Dead state does not imply inactive/disabled.
|
||||
- Dying/stable must not fade out or leave layout holes.
|
||||
- Dead can keep skull/Dead label; create some good visual cues, no removal - but a cool transition to death would be nice.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### TEST GAP: current branch changes need focused coverage
|
||||
- Storage `where()` contract: firebase + server adapters should honor `[where('encounterPath','==',x), orderBy('ts','desc'), limit(n)]`.
|
||||
|
||||
+94
-11
@@ -2554,6 +2554,61 @@ function AdminView({ userId }) {
|
||||
// DISPLAY VIEW COMPONENT (Player View)
|
||||
// ============================================================================
|
||||
|
||||
// Player participant card: animate state transitions.
|
||||
// mount/activate : animate in (opacity+scale+slide)
|
||||
// deactivate : animate out then signal exit
|
||||
// alive→dead : transition to death cue (dim+desaturate+skull pulse+red rim)
|
||||
// conscious/dying/stable: full visible, no fade
|
||||
function PlayerParticipantCard({ id, isActive, status, onExit, className, children, divRef }) {
|
||||
// phase: 'hidden' (opacity-0, start state) -> 'visible' (opacity-100)
|
||||
// disable: 'visible' -> 'exiting' (opacity-0, transition plays) -> onExit
|
||||
const [phase, setPhase] = useState('hidden');
|
||||
const isDead = status === 'dead';
|
||||
|
||||
useEffect(() => {
|
||||
if (!isActive) {
|
||||
// ensure current 'visible' frame painted, THEN flip to exiting so
|
||||
// browser sees opacity change and plays the fade-out.
|
||||
const raf = requestAnimationFrame(() => {
|
||||
setPhase('exiting');
|
||||
});
|
||||
const t = setTimeout(() => onExit(id), 1000);
|
||||
return () => { cancelAnimationFrame(raf); clearTimeout(t); };
|
||||
}
|
||||
// enable/reactivate: paint hidden frame first, THEN flip to visible
|
||||
// so browser sees opacity change and plays the transition.
|
||||
setPhase('hidden');
|
||||
const raf = requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => setPhase('visible'));
|
||||
});
|
||||
return () => cancelAnimationFrame(raf);
|
||||
}, [isActive, id, onExit]);
|
||||
|
||||
// animate: opacity + scale + slide. Visible motion, not just fade.
|
||||
const fadeClass = phase === 'visible'
|
||||
? 'opacity-100 scale-100 translate-y-0'
|
||||
: 'opacity-0 scale-75 translate-y-4';
|
||||
|
||||
// death transition: fires once when alive→dead. dim + desaturate + red rim.
|
||||
const deathClass = isDead
|
||||
? 'brightness-50 saturate-0 border-2 border-red-900/70 shadow-red-900/50 shadow-2xl'
|
||||
: '';
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={divRef}
|
||||
className={`transition-all duration-1000 ease-in-out ${fadeClass} ${deathClass} ${className}`}
|
||||
>
|
||||
{children}
|
||||
{isDead && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-6xl opacity-80 animate-pulse">☠️</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DisplayView() {
|
||||
const { data: activeDisplayData, isLoading: isLoadingActiveDisplay, error: activeDisplayError } = useFirestoreDocument(
|
||||
getPath.activeDisplay()
|
||||
@@ -2566,9 +2621,37 @@ function DisplayView() {
|
||||
const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [wakeLockEnabled, setWakeLockEnabled] = useState(false);
|
||||
const [displayParticipants, setDisplayParticipants] = useState([]);
|
||||
const wakeLockRef = useRef(null);
|
||||
const currentParticipantRef = useRef(null);
|
||||
|
||||
// Player display transition state. Active participants render normally.
|
||||
// Active→inactive: keep prior card, mark __displayActive=false, animate out,
|
||||
// then PlayerParticipantCard calls handleExit to remove from display list.
|
||||
// Inactive→active: card reappears with __displayActive=true and fades in.
|
||||
useEffect(() => {
|
||||
const source = (activeEncounterData && activeEncounterData.participants) || [];
|
||||
setDisplayParticipants(prev => {
|
||||
const prevById = new Map(prev.map(p => [p.id, p]));
|
||||
const out = [];
|
||||
for (const p of source) {
|
||||
const prevP = prevById.get(p.id);
|
||||
if (p.isActive !== false) {
|
||||
out.push({ ...p, __displayActive: true });
|
||||
} else if (prevP && prevP.__displayActive !== false) {
|
||||
out.push({ ...p, __displayActive: false });
|
||||
} else if (prevP && prevP.__displayActive === false) {
|
||||
out.push(prevP);
|
||||
}
|
||||
}
|
||||
return out;
|
||||
});
|
||||
}, [activeEncounterData]);
|
||||
|
||||
const handleExit = useCallback((id) => {
|
||||
setDisplayParticipants(prev => prev.filter(p => p.id !== id));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
|
||||
document.addEventListener('fullscreenchange', onFsChange);
|
||||
@@ -2706,13 +2789,9 @@ function DisplayView() {
|
||||
const hidePlayerHp = activeDisplayData?.hidePlayerHp ?? true;
|
||||
const hideNpcHp = activeDisplayData?.hideNpcHp ?? false;
|
||||
|
||||
let participantsToRender = [];
|
||||
if (participants) {
|
||||
// 1-list model: participants[] IS the display order (DM drag = source of
|
||||
// truth). Do NOT re-sort by initiative — that diverges from AdminView /
|
||||
// turnOrderIds after any cross-init drag (BUG-15).
|
||||
participantsToRender = participants.filter(p => p.isActive !== false);
|
||||
}
|
||||
// 1-list model: displayParticipants IS the display order (participants[] order
|
||||
// plus temporary exiting cards). Do NOT re-sort by initiative.
|
||||
const participantsToRender = displayParticipants;
|
||||
|
||||
const displayStyles = campaignBackgroundUrl
|
||||
? {
|
||||
@@ -2783,10 +2862,14 @@ function DisplayView() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
<PlayerParticipantCard
|
||||
key={p.id}
|
||||
ref={isCurrentTurn ? currentParticipantRef : null}
|
||||
className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${participantBgColor} ${status === 'dead' ? 'opacity-40 grayscale' : (!p.isActive ? 'opacity-40 grayscale' : '')}`}
|
||||
id={p.id}
|
||||
isActive={p.isActive !== false}
|
||||
status={status}
|
||||
onExit={handleExit}
|
||||
divRef={isCurrentTurn ? currentParticipantRef : null}
|
||||
className={`relative p-4 md:p-6 rounded-lg shadow-lg ${participantBgColor}`}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h3
|
||||
@@ -2850,7 +2933,7 @@ function DisplayView() {
|
||||
{!p.isActive && !isZeroHp && (
|
||||
<p className="text-center text-lg font-semibold text-stone-300 mt-2">(Inactive)</p>
|
||||
)}
|
||||
</div>
|
||||
</PlayerParticipantCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -94,7 +94,7 @@ describe('DisplayView characterization', () => {
|
||||
expect(screen.getAllByText(/Dead/i).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('DisplayView hides inactive participants for all types', async () => {
|
||||
test('DisplayView hides inactive participants for all types after fade-out', async () => {
|
||||
seedActiveDisplay([
|
||||
{ ...participant('conscious'), id: 'active-pc', name: 'Active PC', isActive: true },
|
||||
{ ...participant('conscious'), id: 'inactive-pc', name: 'Inactive PC', isActive: false },
|
||||
@@ -103,7 +103,8 @@ describe('DisplayView characterization', () => {
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => expect(screen.getByText('Active PC')).toBeInTheDocument());
|
||||
expect(screen.queryByText('Inactive PC')).not.toBeInTheDocument();
|
||||
// inactive held during exit animation, removed after transition
|
||||
await waitFor(() => expect(screen.queryByText('Inactive PC')).not.toBeInTheDocument(), { timeout: 1500 });
|
||||
expect(screen.queryByText('Inactive Monster')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user