add more importance to a dead role

backend/bang/game.py

@@ -747,6 +747,17 @@ class Game:
         G.sio.emit('chat_message', room=self.name, data=f'_died|{player.name}')
         if self.started:
             G.sio.emit('chat_message', room=self.name, data=f'_died_role|{player.name}|{player.role.name}')
+            if not isinstance(player.role, roles.Sheriff) and not self.initial_players == 3:
+                G.sio.emit('notify_dead_role', room=self.name, data={
+                    'name': player.name,
+                    'lives': 0,
+                    'max_lives': player.max_lives,
+                    'is_ghost': player.is_ghost,
+                    'is_bot': player.is_bot,
+                    'icon': '🤠',
+                    'avatar': player.avatar,
+                    'role': player.role.__dict__,
+                })
         for p in self.players:
             if not p.is_bot:
                 p.notify_self()

frontend/src/components/DeadRoleNotification.vue

@@ -0,0 +1,153 @@
+<template>
+	<div id="overlay" class="center-stuff">
+		<h1>{{text}}</h1>
+		<div>
+			<Card v-if="playerCard" :card="playerCard" />
+			<Card v-if="playerRole" :card="playerRole" class="back"/>
+		</div>
+	</div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue'
+
+export default {
+	name: 'DeadRoleNotification',
+	components: {
+		Card,
+	},
+	props: {
+		playerCard: Object,
+		playerRole: Object
+	},
+	data: () => ({
+
+	}),
+	computed: {
+	},
+	methods: {
+	},
+	mounted() {
+	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#overlay {
+	position: fixed; /* Sit on top of the page content */
+	width: 100%; /* Full width (cover the whole page) */
+	height: 100%; /* Full height (cover the whole page) */
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.7); /* Black background with opacity */
+	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+	/* display: flex; */
+	color: white;
+	justify-content: center;
+	text-align: center;
+}
+
+#overlay>div {
+	margin:auto;
+	position: relative;
+	top:35%;
+	text-align: center;
+	width: 72pt;
+	transform: scale(1.5);
+}
+.card {
+	width: 72pt;
+	min-width:72pt;
+	height: 120pt;
+	position: absolute;
+}
+.card.avatarred{
+	animation: slide-in-fwd-bottom 2s ease, puff-out-center 1s ease 2s, make-invisible 10s step-start 3s;
+}
+.card.back {
+	animation: make-visible 3s step-end, wobble-ver-left 2s ease 3s;
+}
+@keyframes make-invisible {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes make-visible {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes wobble-ver-left {
+		0% {
+			transform:translateY(0) rotate(0);
+			transform-origin:50% 50%;
+		}
+		15% {
+			transform:translateY(-30px) rotate(-6deg);
+		}
+		30% {
+			transform:translateY(15px) rotate(6deg);
+		}
+		45% {
+			transform:translateY(-15px) rotate(-3.6deg);
+		}
+		60% {
+			transform:translateY(9px) rotate(2.4deg);
+		}
+		75% {
+			transform:translateY(-6px) rotate(-1.2deg);
+		}
+		100% {
+			transform:translateY(0) rotate(0);
+			transform-origin:50% 50%;
+		}
+	}
+@keyframes slide-in-fwd-bottom {
+		0% {
+			transform:translateZ(-1400px) translateY(800px);
+			opacity:0;
+		}
+		100% {
+			transform:translateZ(0) translateY(0);
+			opacity:1;
+		}
+	}
+@keyframes puff-out-center {
+			
+		0% {
+			transform:scale(1);
+			filter:blur(0);
+			opacity:1;
+		}
+		100% {
+			transform:scale(2);
+			filter:blur(4px);
+			opacity:0;
+		}
+	}
+
+.button {
+	background-color: #0000;
+	color: white;
+	border: 2px solid white;
+	transition-duration: 0.2s;
+	width: 100pt;
+	height: 24pt;
+	border-radius: 12pt;
+	cursor: pointer;
+}
+
+.button:hover {
+	background-color: white; /* Green */
+	color: black;
+}
+</style>

frontend/src/components/Lobby.vue

@@ -93,6 +93,9 @@
 				<Status deploy_key="ok"/>
 			</div>
 		</transition>
+		<transition name="bounce">
+			<DeadRoleNotification v-if="deadRoleData" :playerCard="deadRoleData" :playerRole="deadRoleData.role"/>
+		</transition>
 	</div>
 </template>
 
@@ -107,6 +110,7 @@ import Deck from './Deck.vue'
 import TinyHand from './TinyHand.vue'
 import FullScreenInput from './FullScreenInput.vue'
 import Status from './Status.vue'
+import DeadRoleNotification from './DeadRoleNotification.vue'
 
 export default {
 	name: 'Lobby',
@@ -119,7 +123,8 @@ export default {
 		TinyHand,
 		PrettyCheck,
 		FullScreenInput,
-		Status
+		Status,
+		DeadRoleNotification
 	},
 	data: () => ({
 		username: '',
@@ -147,6 +152,7 @@ export default {
 		displayAdminStatus: false,
 		is_replay: false,
 		turn: -1,
+		deadRoleData: null,
 	}),
 	sockets: {
 		room(data) {
@@ -174,6 +180,12 @@ export default {
 				}
 			})
 		},
+		notify_dead_role(data) {
+			this.deadRoleData = data
+			setTimeout(() => {
+				this.deadRoleData = null
+			}, 4000);
+		},
 		debug(data) {
 			this.debug_mode = data;
 		},
@@ -191,28 +203,10 @@ export default {
 				this.$router.push('/')
 			}
 			this.username = username
-			// this.$socket.emit('get_cards', 'dodge_city')
 		},
 		mount_status() {
 			this.displayAdminStatus = true
 		},
-		// cards_info(data) {
-		// 	data = JSON.parse(data)
-		// 	let bigthing = {}
-		// 	let bigthing_eng = {}
-		// 	data.forEach(x => {
-		// 		bigthing[x.name] = {
-		// 			name:x.name,
-		// 			desc:x.desc,
-		// 		}
-		// 		bigthing_eng[x.name] = {
-		// 			name:x.name,
-		// 			desc:x.desc_eng,
-		// 		}
-		// 	})
-		// 	console.log(JSON.stringify(bigthing))
-		// 	console.log(JSON.stringify(bigthing_eng))
-		// },
 		change_username() {
 			this.hasToSetUsername = true
 		},