spectate rooms

backend/__init__.py

@@ -32,6 +32,7 @@ online_players = 0
 
 def advertise_lobbies():
     sio.emit('lobbies', room='lobby', data=[{'name': g.name, 'players': len(g.players), 'locked': g.password != ''} for g in games if not g.started and len(g.players) < 10])
+    sio.emit('spectate_lobbies', room='lobby', data=[{'name': g.name, 'players': len(g.players), 'locked': g.password != ''} for g in games if g.started])
 
 @sio.event
 def connect(sid, environ):
@@ -160,10 +161,11 @@ def toggle_replace_with_bot(sid):
 @sio.event
 def join_room(sid, room):
     room_name = room['name']
-    print(f'{sid} joined a room named {room_name}')
     i = [g.name for g in games].index(room_name)
+    if not games[i].started:
         if games[i].password != '' and games[i].password != room['password'].upper():
             return
+        print(f'{sid} joined a room named {room_name}')
         sio.leave_room(sid, 'lobby')
         sio.enter_room(sid, room_name)
         while len([p for p in games[i].players if p.name == sio.get_session(sid).name]):
@@ -171,6 +173,15 @@ def join_room(sid, room):
         sio.emit('me', data=sio.get_session(sid).name, room=sid)
         games[i].add_player(sio.get_session(sid))
         advertise_lobbies()
+    else:
+        games[i].spectators.append(sio.get_session(sid))
+        sio.get_session(sid).game = games[i]
+        sio.get_session(sid).pending_action = PendingAction.WAIT
+        sio.enter_room(sid, games[0].name)
+        games[i].notify_room(sid)
+        eventlet.sleep(0.5)
+        games[i].notify_room(sid)
+        games[i].notify_all()
 
 @sio.event
 def chat_message(sid, msg):

frontend/src/components/Menu.vue

@@ -28,6 +28,11 @@
 						<Card v-for="lobby in openLobbies" v-bind:key="lobby.name" :card="getLobbyCard(lobby)" @click.native="joinLobby(lobby)"/>
 						<p v-if="noLobbyAvailable">{{$t("no_lobby_available")}}</p>
 					</div>
+					<h2>{{$t("spectate_lobbies")}}</h2>
+					<div style="display: flex">
+						<Card v-for="lobby in spectateLobbies" v-bind:key="lobby.name" :card="getSpectateLobbyCard(lobby)" @click.native="joinLobby(lobby)"/>
+						<p v-if="noSpectateLobbyAvailable">{{$t("no_lobby_available")}}</p>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -52,6 +57,7 @@ export default {
 		didSetUsername: false,
 		username: '',
 		openLobbies: [],
+		spectateLobbies: [],
 		lobbyName: '',
 		isInLobby: false,
 		onlinePlayers: 0,
@@ -60,6 +66,9 @@ export default {
 		noLobbyAvailable() {
 			return this.openLobbies && this.openLobbies.length == 0
 		},
+		noSpectateLobbyAvailable() {
+			return this.spectateLobbies && this.spectateLobbies.length == 0
+		},
 		getSelfCard() {
 			return {
 				name: this.username,
@@ -73,6 +82,9 @@ export default {
 		lobbies(data) {
 			this.openLobbies = data;
 		},
+		spectate_lobbies(data) {
+			this.spectateLobbies = data;
+		},
 		room(data) {
 			this.isInLobby = true;
 			this.$router.push({path:'game', query: { code: data.name }})
@@ -99,6 +111,14 @@ export default {
 				is_equipment: true,
 			}
 		},
+		getSpectateLobbyCard(lobby) {
+			return {
+				name: lobby.name,
+				icon: "👁️",
+				number: `${lobby.players}🤠 ${lobby.locked?'🔐':''}`,
+				usable_next_turn: true,
+			}
+		},
 		createLobby(e) {
 			if (this.lobbyName.trim().length > 0) {
 				this.$socket.emit('create_room', this.lobbyName)

frontend/src/components/Player.vue

@@ -85,7 +85,7 @@ export default {
 		lives: 0,
 		max_lives: 0,
 		hint: '',
-		pending_action: null,
+		pending_action: 4,
 		card_against: null,
 		card_with: null,
 		has_played_bang: false,

frontend/src/i18n/en.json

@@ -3,6 +3,7 @@
 	"online_players": "Online players: ",
 	"choose_username": "Pick an username:",
 	"available_lobbies": "Available Lobbies:",
+	"spectate_lobbies": "Spectate ongoing games:",
 	"no_lobby_available": "No lobbies available",
 	"create_lobby": "Open a lobby:",
 	"lobby_name": "Name:",

frontend/src/i18n/it.json

@@ -3,6 +3,7 @@
 	"online_players": "Giocatori online: ",
 	"choose_username": "Scegli un username:",
 	"available_lobbies": "Stanze disponibili:",
+	"spectate_lobbies": "Osserva le partite in corso:",
 	"no_lobby_available": "Nessuna stanza disponibile",
 	"create_lobby": "Crea una stanza:",
 	"lobby_name": "Nome:",