fix some animations

frontend/src/components/Card.vue

@@ -20,7 +20,7 @@
       :style="`background-image: url(${card.avatar});`"
     ></div>
     <div :class="{ emoji: true, bottomed: card.avatar }">{{ emoji }}</div>
-    <div v-if="card.isMe" :class="{ emoji: true, bottomed: card.avatar, isMe: true }">🫵</div>
+    <div v-if="card.isMe" :class="{ emoji: true, bottomed: card.avatar, isMe: true }"></div>
     <div class="alt_text">{{ card.alt_text }}</div>
     <div class="suit">
       {{ number
@@ -280,6 +280,26 @@ export default {
   top: 52%;
   right: 12pt;
 }
+.emoji.isMe::after {
+  content: "🫵";
+  display: block;
+}
+.card:HOVER .isMe::after {
+  content: "👋";
+  animation: wave 0.5s infinite;
+  will-change: transform;
+}
+@keyframes wave {
+  0% {
+    transform: translate(-5px, 0px) rotate(0deg);
+  }
+  50% {
+    transform: translate(-5px, -5px) rotate(25deg);
+  }
+  100% {
+    transform: translate(-5px, 0) rotate(0deg);
+  }
+}
 .emoji.bottomed {
   top: 45%;
   left: 8pt;

frontend/src/components/Lobby.vue

@@ -390,6 +390,7 @@
     <transition name="bounce">
       <DeadRoleNotification
         v-if="deadRoleData"
+        :key="deadRoleData.name"
         :playerCard="deadRoleData"
         :playerRole="deadRoleData.role"
       />
@@ -470,7 +471,7 @@ export default {
     displayAdminStatus: false,
     is_replay: false,
     turn: -1,
-    deadRoleData: null,
+    deadRoleData: false,
     cardsToAnimate: [],
     characters_to_distribute: 2,
     fullScreenEffects: [],
@@ -505,7 +506,7 @@ export default {
     notify_dead_role(data) {
       this.deadRoleData = data;
       setTimeout(() => {
-        this.deadRoleData = null;
+        this.deadRoleData = false;
       }, 4000);
     },
     debug(data) {
@@ -575,33 +576,36 @@ export default {
       let params = msg.split('|')
       let type = params.shift().substring(1)
       let messageMap = {
-        prison_turn: '⛓️',
+        prison_turn: '⛓️;🔒;⏭️',
-        explode: '💥',
+        explode: '💥;🧨',
-        purchase_card: '🛒',
+        purchase_card: '🛒;💸',
-        prison_free: '🆓',
+        prison_free: '🆓;🔑',
-        snake_bit: '🐍',
+        snake_bit: '🐍;🩸',
-        beer_save: '🍺😇',
+        beer_save: '🍺;😇',
         sheriff: '⭐',
-        spilled_beer: '🍺😭',
+        spilled_beer: '🍺;😭',
-        use_special: '🔝',
+        use_special: '🔝;✨',
+        died: '💀;👻;😭;☠️;🪦;F',
+        died_role: '💀;👻;😭;☠️;🪦;F',
       }
       if (messageMap[type]) {
         let key = Math.random();
+        let avail = messageMap[type].split(';');
         for (let i = 0; i < 5; i++) {
           setTimeout(() => {
             this.fullScreenEffects.push({
-              key,
+              key: key+i,
-              text: messageMap[type],
+              text: avail[Math.floor(Math.random() * avail.length)],
               startPosition: cumulativeOffset(document.getElementById(params[0])),
             });
           }, 50 * i);
-        }
           setTimeout(() => {
             this.fullScreenEffects = this.fullScreenEffects.filter(
-            (x) => x.key !== key
+                (x) => x.key !== key+i
             );
           }, 3000);
         }
+      }
     },
     suggest_expansion(expansionName) {
       if (this.expansions.includes(expansionName)) return;
@@ -612,17 +616,17 @@ export default {
       for (let i = 0; i < 6; i++) {
         setTimeout(() => {
           this.fullScreenEffects.push({
-            key: key,
+            key: key+i,
             text: i == 0 ? '🤠' : i == 5 ? '💭' : emojiMap[expansionName],
             startPosition: decelOffset,
           });
         }, 50 * i);
-      }
         setTimeout(() => {
           this.fullScreenEffects = this.fullScreenEffects.filter(
-          (x) => x.key !== key
+            (x) => x.key !== key+i
           );
         }, 3000);
+      }
     },
     card_scrapped(data) {
       let decel = document.getElementById("actual-scrap");