Phase 4: interactive dice & sheet rolling

- Dice notation: exploding (Nd6!) and reroll-below (Nd6r2), capped + tested
- Degrees of success / roll-vs-DC (PF2e ±10 + nat 20/1 steps; 5e crit on nat 20/1)
- Global roll tray (shared store + RollTray in layout) with animated result + degree
- Roll from the character sheet: skills, saves, and attack to-hit/damage are
  clickable and post to the tray + history (rollAndShow/rollCheck helpers)
- Saved roll macros per campaign (persisted) on the Dice page

10 new unit tests (notation explode/reroll, degrees), interactive-dice e2e.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-08 01:32:15 +02:00
parent 3e5bdc06e2
commit 9647e6b3d6
14 changed files with 431 additions and 16 deletions
+34
View File
@@ -0,0 +1,34 @@
import { useRollStore } from '@/stores/rollStore';
import { DEGREE_COLOR, DEGREE_LABEL } from '@/lib/dice/check';
import { cn } from '@/lib/cn';
/** Floating result of the most recent roll, shared across the whole app. */
export function RollTray() {
const last = useRollStore((s) => s.last);
const dismiss = useRollStore((s) => s.dismiss);
if (!last) return null;
return (
<div className="pointer-events-none fixed bottom-4 right-4 z-50 w-72">
<div
key={last.seq}
className="animate-dice-settle pointer-events-auto rounded-lg border border-line bg-panel p-4 shadow-2xl"
>
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
{last.label && <div className="truncate text-xs font-medium text-muted">{last.label}</div>}
{last.degree && (
<div className={cn('text-xs font-semibold', DEGREE_COLOR[last.degree])}>
{DEGREE_LABEL[last.degree]}
{last.dc !== undefined ? ` (DC ${last.dc})` : ''}
</div>
)}
</div>
<button onClick={dismiss} aria-label="Dismiss roll" className="text-muted hover:text-ink"></button>
</div>
<div className="mt-1 font-display text-4xl font-bold text-accent">{last.result.total}</div>
<div className="mt-1 font-mono text-xs text-muted">{last.result.breakdown}</div>
</div>
</div>
);
}