add suggest expansion

backend/server.py

@@ -422,8 +422,11 @@ def private(sid):
 @sio.event
 @bang_handler
 def toggle_expansion(sid, expansion_name):
-    g = sio.get_session(sid).game
-    g.toggle_expansion(expansion_name)
+    game = sio.get_session(sid).game
+    if "suggest" in expansion_name:
+        sio.emit("suggest_expansion", room=game.name, data=expansion_name.split(";")[1])
+        return
+    game.toggle_expansion(expansion_name)
     advertise_lobbies()
 
 

frontend/src/components/AnimatedEffect.vue

@@ -0,0 +1,49 @@
+<template>
+	<p class="animated" :style="style">{{text}}</p>
+</template>
+
+<script>
+export default {
+	name: 'AnimatedEffect',
+	props: {
+		text: String,
+		startPosition: Object,
+	},
+	data: () => ({
+		style: ''
+	}),
+	computed: {
+	},
+	methods: {
+	},
+	mounted() {
+		let startPosition = {
+			top: this.startPosition.top + Math.random() * 100 - 50,
+			left: this.startPosition.left + Math.random() * 100 - 25,
+		}
+		let endPosition = {
+			top: startPosition.top + Math.random() * 50 - 25,
+			left: startPosition.left + Math.random() * 50 - 25,
+		}
+		this.style = `position: absolute;top:${startPosition.top}px;left: ${startPosition.left}px;`
+		setTimeout(() => {
+			this.style = `position:absolute;;top:${endPosition.top}px;left:${endPosition.left}px;`
+		}, 400)
+		setTimeout(() => {
+			this.style = `position:absolute;;top:${endPosition.top}px;left:${endPosition.left}px;opacity:0;`
+		}, 900)
+		setTimeout(() => {
+			this.style = `display:none;`
+		}, 1500)
+	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.animated {
+	position: absolute;
+	font-size: 26pt;
+	transition: all 0.5s;
+}
+</style>

frontend/src/components/Lobby.vue

@@ -201,6 +201,7 @@
           <card
             v-for="ex in expansionsStatus"
             v-bind:key="ex.id"
+            :id="ex.id"
             :card="ex.card"
             :class="{
               'cant-play': !ex.enabled,
@@ -308,6 +309,12 @@
         :midPosition="c.midPosition"
         :endPosition="c.endPosition"
       />
+      <AnimatedEffect
+        v-for="c in fullScreenEffects"
+        v-bind:key="c.key"
+        :text="c.text"
+        :startPosition="c.startPosition"
+      />
       <div v-if="started">
         <deck
           :endTurnAction="
@@ -404,6 +411,7 @@ import DeadRoleNotification from "./DeadRoleNotification.vue";
 import AnimatedCard from "./AnimatedCard.vue";
 import { emojiMap } from "@/utils/emoji-map.js";
 import { expansionsMap } from "@/utils/expansions-map.js";
+import AnimatedEffect from './AnimatedEffect.vue';
 
 const cumulativeOffset = function (element) {
   var top = 0,
@@ -433,6 +441,7 @@ export default {
     Status,
     DeadRoleNotification,
     AnimatedCard,
+    AnimatedEffect,
     Card,
   },
   data: () => ({
@@ -463,6 +472,7 @@ export default {
     deadRoleData: null,
     cardsToAnimate: [],
     characters_to_distribute: 2,
+    fullScreenEffects: [],
   }),
   sockets: {
     room(data) {
@@ -560,6 +570,27 @@ export default {
         this.cardsToAnimate = this.cardsToAnimate.filter((x) => x.key !== key);
       }, 1800);
     },
+    suggest_expansion(expansionName) {
+      if (this.expansions.includes(expansionName)) return;
+      let key = Math.random();
+      let decel = document.getElementById(expansionName);
+      if (!decel) return;
+      let decelOffset = cumulativeOffset(decel);
+      for (let i = 0; i < 6; i++) {
+        setTimeout(() => {
+          this.fullScreenEffects.push({
+            key: key,
+            text: i == 0 ? '🤠' : i == 5 ? '💭' : emojiMap[expansionName],
+            startPosition: decelOffset,
+          });
+        }, 50 * i);
+      }
+      setTimeout(() => {
+        this.fullScreenEffects = this.fullScreenEffects.filter(
+          (x) => x.key !== key
+        );
+      }, 3000);
+    },
     card_scrapped(data) {
       let decel = document.getElementById("actual-scrap");
       if (!decel) {
@@ -693,7 +724,7 @@ export default {
       document.title = "PewPew!";
     },
     toggleExpansions(name) {
-      if (!this.isRoomOwner) return;
+      if (!this.isRoomOwner) return this.$socket.emit("toggle_expansion", `suggest;${name}`);
       this.$socket.emit("toggle_expansion", name);
     },
     toggleCompetitive() {