hand_visualizer

backend/game.py

@@ -134,6 +134,18 @@ class Game:
             p.notify_self()
         self.players_map = {c.name: i for i, c in enumerate(self.players)}
     
+    def notify_all(self):
+        data = [{
+            'name': p.name,
+            'ncards': len(p.hand),
+            'equipment': [e.__dict__ for e in p.equipment],
+            'lives': p.lives,
+            'max_lives': p.max_lives,
+            'is_sheriff': isinstance(p.role, roles.Sheriff)
+        } for p in self.players]
+        self.sio.emit('players_update', room=self.name, data=data)
+
+
 
 # game = Game()
 # p1 = players.Player('p1')

backend/players.py

@@ -80,6 +80,7 @@ class Player:
         ser.pop('expected_response')
         self.sio.emit('self', room=self.sid, data=json.dumps(ser, default=lambda o: o.__dict__))
         self.sio.emit('self_vis', room=self.sid, data=json.dumps(self.game.get_visible_players(self), default=lambda o: o.__dict__))
+        self.game.notify_all()
 
     def play_turn(self):
         if self.lives == 0:

frontend/src/components/Lobby.vue

@@ -3,11 +3,14 @@
 		<h1>Lobby: {{ lobbyName }}</h1>
 		<h3>Giocatori (tu sei {{username}})</h3>
 		<div style="display:flex">
+			<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
 			<!-- <div style="position: relative;width:260pt;height:400pt;"> -->
-				<Card v-for="p in playersTable" v-bind:key="p.card.name" :card="p.card"/>
+			<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
+				<Card :card="p.card"/>
+				<tiny-hand :ncards="p.ncards"/>
+			</div>
 				<!-- :style="p.style"/> -->
 			<!-- </div> -->
-			<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
 		</div>
 		<div v-if="started">
 			<deck/>
@@ -26,6 +29,7 @@ import Chooser from './Chooser.vue'
 import Chat from './Chat.vue'
 import Player from './Player.vue'
 import Deck from './Deck.vue'
+import TinyHand from './TinyHand.vue'
 
 export default {
 	name: 'Lobby',
@@ -35,6 +39,7 @@ export default {
 		Chat,
 		Player,
 		Deck,
+		TinyHand,
 	},
 	props: {
 		username: String
@@ -55,6 +60,7 @@ export default {
 			this.players = data.players.map(x => {
 				return {
 					name: x,
+					ncards: 0,
 				}
 			})
 		},
@@ -64,11 +70,15 @@ export default {
 		start() {
 			this.started = true;
 		},
-		self_vis(vis) {
+		players_update(data) {
-			console.log('received visibility update')
+			console.log(data)
-			console.log(vis)
+			this.players = data
-			this.players = JSON.parse(vis)
 		},
+		// self_vis(vis) {
+		// 	console.log('received visibility update')
+		// 	console.log(vis)
+		// 	this.players = JSON.parse(vis)
+		// },
 	},
 	computed: {
 		startGameCard() {
@@ -91,7 +101,11 @@ export default {
 				let offsetAngle = 360.0 / this.players.length
 				let rotateAngle = (i) * offsetAngle
 				let size = 130
-				return {card:this.getPlayerCard(x), style: `position:absolute;transform: rotate(${rotateAngle}deg) translate(0, -${size}pt) rotate(-${rotateAngle}deg) translate(${size}pt,${size}pt)`}
+				return {
+					card:this.getPlayerCard(x),
+					style: `position:absolute;transform: rotate(${rotateAngle}deg) translate(0, -${size}pt) rotate(-${rotateAngle}deg) translate(${size}pt,${size}pt)`,
+					...x
+				}
 			})
 		}
 	},

frontend/src/components/TinyHand.vue

@@ -0,0 +1,20 @@
+<template>
+	<div style="position:absolute;transform:scale(0.5);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>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'TinyHand',
+	props: {
+		ncards: Number,
+	},
+}
+</script>
+<style>
+
+</style>