From 7f6912f07eda68f5b85abba708fc465a995b0f1c Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Wed, 20 Jan 2021 11:53:51 +0100
Subject: [PATCH] show spectator count

---
 backend/bang/game.py              | 2 ++
 frontend/src/components/Chat.vue  | 7 ++++++-
 frontend/src/components/Lobby.vue | 2 +-
 frontend/src/i18n/en.json         | 1 +
 frontend/src/i18n/it.json         | 1 +
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/backend/bang/game.py b/backend/bang/game.py
index 5a2ca92..ef43364 100644
--- a/backend/bang/game.py
+++ b/backend/bang/game.py
@@ -50,6 +50,7 @@ class Game:
                 'expansions': self.expansions,
                 'available_expansions': self.available_expansions,
             })
+        self.sio.emit('spectators', room=self.name, data=len(self.spectators))
 
     def toggle_expansion(self, expansion_name):
         if not self.started:
@@ -368,6 +369,7 @@ class Game:
         print(f'player {player.name} left the game {self.name}')
         if player in self.spectators:
             self.spectators.remove(player)
+            self.sio.emit('spectators', room=self.name, data=len(self.spectators))
             return False
         if player.is_bot and not self.started:
             player.game = None
diff --git a/frontend/src/components/Chat.vue b/frontend/src/components/Chat.vue
index eba8765..2a3ec20 100644
--- a/frontend/src/components/Chat.vue
+++ b/frontend/src/components/Chat.vue
@@ -1,5 +1,6 @@
 <template>
 	<div class="chat">
+		<h4 v-if="spectators > 0">{{$tc("chat.spectators", spectators)}}</h4>
 		<h3>{{$t("chat.chat")}}</h3>
 		<div id="chatbox">
 			<p style="margin:1pt;" class="chat-message" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color}`">{{msg.text}}</p>
@@ -17,7 +18,8 @@ export default {
 	name: 'Chat',
 	data: () => ({
 		messages: [],
-		text: ''
+		text: '',
+		spectators: 0,
 	}),
 	sockets: {
 		chat_message(msg) {
@@ -32,6 +34,9 @@ export default {
 			let container = this.$el.querySelector("#chatbox");
 			container.scrollTop = container.scrollHeight;
 		},
+		spectators(val) {
+			this.spectators = val
+		}
 	},
 	methods: {
 		sendChatMessage(e) {
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 5cdd8af..ddc8ce5 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -140,7 +140,7 @@ export default {
 		},
 		change_username() {
 			this.hasToSetUsername = true
-		}
+		},
 	},
 	computed: {
 		inviteLink() {
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index fae443b..f5356fd 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -63,6 +63,7 @@
 	"copy": "Copy invite",
 	"no_players_in_range": "You can't see the other players, equip a weapon or a scope!",
 	"chat": {
+		"spectators": " | A spectator is watching the game | {n} spectators are watching the game",
 		"chat": "Chat",
 		"joined": "{0} joined the lobby",
 		"died": "{0} died",
diff --git a/frontend/src/i18n/it.json b/frontend/src/i18n/it.json
index d6710b2..dbe71cb 100644
--- a/frontend/src/i18n/it.json
+++ b/frontend/src/i18n/it.json
@@ -63,6 +63,7 @@
 	"copy": "Copia invito",
 	"no_players_in_range": "Non vedi nessun giocatore, equipaggia un arma o un mirino!",
 	"chat": {
+		"spectators": " | Uno spettatore sta guardando la partita | {n} spettatori stanno guardando la partita",
 		"chat": "Chat",
 		"joined": "{0} è entrato nella stanza",
 		"died": "{0} è morto",