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:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user