techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visualize turn

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-21 15:09:46 +01:00
parent 9d512404a1
commit ac895afb29
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
4 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/game.py
View File

@ -141,7 +141,8 @@ class Game:
'equipment': [e.__dict__ for e in p.equipment],
'lives': p.lives,
'max_lives': p.max_lives,
'is_sheriff': isinstance(p.role, roles.Sheriff)
'is_sheriff': isinstance(p.role, roles.Sheriff),
'is_my_turn': p.is_my_turn,
} for p in self.players]
self.sio.emit('players_update', room=self.name, data=data)

21
frontend/src/components/Lobby.vue
View File

@ -6,7 +6,7 @@
<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
<!-- <div style="position: relative;width:260pt;height:400pt;"> -->
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
<Card :card="p.card"/>
<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
<tiny-hand :ncards="p.ncards"/>
</div>
<!-- :style="p.style"/> -->
@ -114,7 +114,7 @@ export default {
return {
name: player.name,
number: ((this.username == player.name) ? 'YOU' : (this.players[0].name == player.name) ? 'OWNER' :'') + (player.dist ? `${player.dist}⛰` : ''),
icon: (player.lives === undefined || player.lives > 0) ? '🤠' : '☠️',
icon: (player.lives === undefined || player.lives > 0) ? (player.is_sheriff ? '⭐' : '🤠') : '☠️',
alt_text: player.lives !== undefined ? Array(player.lives).join('❤️')+Array(player.max_lives-player.lives).join('💀') : '',
is_character: true,
}
@ -136,4 +136,21 @@ export default {
#logo {
display:none;
}
.is_my_turn {
box-shadow: 0 0 0 3pt rgb(138, 12, 12), 0 0 0 6pt white, 0 0 5pt 6pt #aaa !important;
animation-name: turn-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes turn-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
</style>

2
frontend/src/components/TinyHand.vue
View File

@ -1,5 +1,5 @@
<template>
<div style="position:absolute;transform:scale(0.5);bottom:50pt;">
<div style="position:absolute;transform:scale(0.45);bottom:50pt;">
<div class="card back" v-for="(n, i) in ncards" :style="`position:absolute; transform:rotate(${(i-ncards/2)*2}deg) translate(${i*15}px,0);`" v-bind:key="n" :alt="i">
<h4 v-if="n==ncards">PewPew!</h4>
<div class="emoji" v-if="n==ncards">💥</div>