P13: dice — crit/fumble animation + roll visibility

- Crit/fumble emphasis: RollTray (and the Dice page result) highlight a nat-20 /
  critical-success as "✦ Critical ✦" (gold pop + glow) and a nat-1 / critical-
  failure as "✦ Fumble ✦" (red shake). naturalD20() exported from notation.
- DM sees players' rolls: RollFeed now also renders on the Combat page (players'
  rolls already broadcast to the GM).
- Players see the DM's public rolls: new gmRoll message — a hosting GM's rolls
  (Dice page + rollAndShow) broadcast to the table as "GM".
- DM secret-roll toggle (rollStore.secret) on the Dice page suppresses the broadcast.
- Realtime e2e: GM public roll appears in the player's table feed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-08 16:35:48 +02:00
parent d4ae60f199
commit d94df41a95
12 changed files with 129 additions and 25 deletions
+23
View File
@@ -139,3 +139,26 @@ body {
.animate-dice-rolling {
animation: dice-shake 0.12s linear infinite;
}
/* Crit / fumble emphasis on the roll tray */
@keyframes crit-pop {
0% { transform: scale(0.6) rotate(-10deg); }
45% { transform: scale(1.2) rotate(5deg); }
70% { transform: scale(0.96); }
100% { transform: scale(1) rotate(0deg); }
}
.animate-crit { animation: crit-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes crit-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 60, 0); }
50% { box-shadow: 0 0 24px 5px rgba(255, 200, 60, 0.8); }
}
.animate-crit-glow { animation: crit-glow 1s ease-in-out 2; }
@keyframes fumble-fall {
0% { transform: translateY(-5px) rotate(0); }
20% { transform: translateX(-7px) rotate(-5deg); }
40% { transform: translateX(6px) rotate(4deg); }
60% { transform: translateX(-5px) rotate(-3deg); }
80% { transform: translateX(3px) rotate(2deg); }
100% { transform: translateX(0) rotate(0); }
}
.animate-fumble { animation: fumble-fall 0.6s ease-in-out; }