add more importance to a dead role
This commit is contained in:
Alberto Xamin
parent
ee7e02a525
commit
c3a53b7ace
@ -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()
|
||||
|
||||
153
frontend/src/components/DeadRoleNotification.vue
Normal file
153
frontend/src/components/DeadRoleNotification.vue
Normal file
@ -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>
|
||||
@ -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
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user