From ac895afb297c09286cff71c4d67bf9ed1dffb1a7 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sat, 21 Nov 2020 15:09:46 +0100
Subject: [PATCH] visualize turn

---
 backend/game.py                      |  3 ++-
 frontend/src/components/Card.vue     |  2 +-
 frontend/src/components/Lobby.vue    | 21 +++++++++++++++++++--
 frontend/src/components/TinyHand.vue |  2 +-
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/backend/game.py b/backend/game.py
index 93904b2..4677325 100644
--- a/backend/game.py
+++ b/backend/game.py
@@ -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)
 
diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index c2b549c..44272e1 100644
--- a/frontend/src/components/Card.vue
+++ b/frontend/src/components/Card.vue
@@ -1,5 +1,5 @@
 <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>
 		<div class="emoji">{{card.icon}}</div>
 		<div v-if="card.is_character" class="alt_text">{{card.alt_text}}</div>
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index a7161a2..c815381 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -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>
diff --git a/frontend/src/components/TinyHand.vue b/frontend/src/components/TinyHand.vue
index e623d41..e882dc3 100644
--- a/frontend/src/components/TinyHand.vue
+++ b/frontend/src/components/TinyHand.vue
@@ -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>