diff --git a/web/src/components/BattlePhase.tsx b/web/src/components/BattlePhase.tsx index 094ec2a..1fcfb82 100644 --- a/web/src/components/BattlePhase.tsx +++ b/web/src/components/BattlePhase.tsx @@ -249,7 +249,10 @@ export function BattlePhase({ view, send }: Props) {
)} {summoning && lastEvent?.card && ( -
+ // Fly the spawned apple/bee out from where the pet stood (the unit + // zone sits on the inner edge) onto the top of the deck, so it reads + // as coming from the pet that just fainted. +
)} diff --git a/web/src/styles.css b/web/src/styles.css index 8320651..650907f 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -863,6 +863,55 @@ h3 { pointer-events: none; } +/* Spawn arcs out from the pet (inner edge) onto the deck. The pet sits to the + right of the deck on the left side and to the left on the right side, so + each side pulls its spawn in from the opposite direction. */ +@keyframes summon-from-right { + 0% { + opacity: 0; + transform: translate(120px, 8px) scale(0.5) rotate(10deg); + } + 25% { + opacity: 1; + transform: translate(64px, -22px) scale(1.05) rotate(5deg); + } + 70% { + opacity: 1; + transform: translate(0, -12px) scale(1) rotate(0); + } + 100% { + opacity: 0; + transform: translate(0, 2px) scale(0.72); + } +} + +@keyframes summon-from-left { + 0% { + opacity: 0; + transform: translate(-120px, 8px) scale(0.5) rotate(-10deg); + } + 25% { + opacity: 1; + transform: translate(-64px, -22px) scale(1.05) rotate(-5deg); + } + 70% { + opacity: 1; + transform: translate(0, -12px) scale(1) rotate(0); + } + 100% { + opacity: 0; + transform: translate(0, 2px) scale(0.72); + } +} + +.summon-pop.summon-from-right { + animation-name: summon-from-right; +} + +.summon-pop.summon-from-left { + animation-name: summon-from-left; +} + /* --- foods waiting for a pet --- */ .pending-foods {