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], 'equipment': [e.__dict__ for e in p.equipment],
'lives': p.lives, 'lives': p.lives,
'max_lives': p.max_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] } for p in self.players]
self.sio.emit('players_update', room=self.name, data=data) self.sio.emit('players_update', room=self.name, data=data)

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="{ card: true, equipment: card.is_equipment, character:card.is_character }"> <div :class="{ card: true, equipment: card.is_equipment, character:card.is_character}">
<h4>{{card.name}}</h4> <h4>{{card.name}}</h4>
<div class="emoji">{{card.icon}}</div> <div class="emoji">{{card.icon}}</div>
<div v-if="card.is_character" class="alt_text">{{card.alt_text}}</div> <div v-if="card.is_character" class="alt_text">{{card.alt_text}}</div>

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

@ -6,7 +6,7 @@
<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/> <Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
<!-- <div style="position: relative;width:260pt;height:400pt;"> --> <!-- <div style="position: relative;width:260pt;height:400pt;"> -->
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;"> <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"/> <tiny-hand :ncards="p.ncards"/>
</div> </div>
<!-- :style="p.style"/> --> <!-- :style="p.style"/> -->
@ -114,7 +114,7 @@ export default {
return { return {
name: player.name, name: player.name,
number: ((this.username == player.name) ? 'YOU' : (this.players[0].name == player.name) ? 'OWNER' :'') + (player.dist ? `${player.dist}⛰` : ''), 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('💀') : '', alt_text: player.lives !== undefined ? Array(player.lives).join('❤️')+Array(player.max_lives-player.lives).join('💀') : '',
is_character: true, is_character: true,
} }
@ -136,4 +136,21 @@ export default {
#logo { #logo {
display:none; 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> </style>

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

@ -1,5 +1,5 @@
<template> <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"> <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> <h4 v-if="n==ncards">PewPew!</h4>
<div class="emoji" v-if="n==ncards">💥</div> <div class="emoji" v-if="n==ncards">💥</div>