character chooser

backend/__init__.py

@@ -21,7 +21,7 @@ def connect(sid, environ):
 
 @sio.event
 def set_username(sid, username):
-    sio.save_session(sid, Player(username, sid))
+    sio.save_session(sid, Player(username, sid, sio))
     print(f'{sid} is now {username}')
     advertise_lobbies()
 
@@ -60,5 +60,15 @@ def chat_message(sid, msg):
     ses = sio.get_session(sid)
     sio.emit('chat_message', room=ses.game.name, data=f'[{ses.name}]: {msg}')
 
+@sio.event
+def start_game(sid):
+    ses = sio.get_session(sid)
+    ses.game.start_game()
+
+@sio.event
+def set_character(sid, name):
+    ses = sio.get_session(sid)
+    ses.set_character(name)
+
 if __name__ == '__main__':
     eventlet.wsgi.server(eventlet.listen(('', 5001)), app)

backend/game.py

@@ -35,7 +35,6 @@ class Game:
         self.sio.emit('room', room=self.name, data={'name': self.name, 'started': self.started, 'players': [p.name for p in self.players]})
         self.sio.emit('chat_message', room=self.name, data=f'{player.name} è entrato nella lobby.')
 
-
     def choose_characters(self):
         char_cards = random.sample(all_characters(), len(self.players)*2)
         for i in range(len(self.players)):

backend/players.py

@@ -14,10 +14,11 @@ class PendingAction(IntEnum):
     WAIT = 4
 
 class Player:
-    def __init__(self, name, sid):
+    def __init__(self, name, sid, sio):
         super().__init__()
         self.name = name
         self.sid = sid
+        self.sio = sio
         self.hand: cards.Card = []
         self.equipment: cards.Card = []
         self.role: roles.Role = None
@@ -43,10 +44,12 @@ class Player:
         self.role = role
         print(f'I {self.name} am a {role.name}, my goal is "{role.goal}"')
 
-    def set_character(self, character: characters.Character):
+    def set_character(self, character: str):
+        print(self.available_characters, character)
+        self.character = next(x for x in self.available_characters if x.name==character)
         self.available_characters = []
-        self.character = character
-        print(f'I {self.name} chose character {character.name}')
+        print(f'I {self.name} chose character {self.character.name}')
+        self.sio.emit('chat_message', room=self.game.name, data=f'{self.name} ha scelto il personaggio.')
 
     def prepare(self):
         self.max_lives = self.character.max_lives + self.role.health_mod
@@ -57,6 +60,7 @@ class Player:
     def set_available_character(self, available):
         self.available_characters = available
         print(f'I {self.name} have to choose between {available}')
+        self.sio.emit('characters', room=self.sid, data=json.dumps(available, default=lambda o: o.__dict__))
 
     def play_turn(self):
         print(f'I {self.name} was notified that it is my turn')

frontend/src/App.vue

@@ -104,8 +104,9 @@ export default {
 			this.$socket.emit('join_room', lobby.name)
 			this.isInLobby = true;
 		},
-		// room() {
-		// },
+		init() {
+			location.reload();
+		},
 	}
 }
 </script>

frontend/src/components/Card.vue

@@ -30,6 +30,7 @@ export default {
   border-radius: 6pt;
   position: relative;
   transition: all 0.5s ease-in-out;
+	color: #333;
 }
 .card.back{
   color:white;

frontend/src/components/Chooser.vue

@@ -0,0 +1,47 @@
+<template>
+	<div id="overlay" class="center-stuff">
+		<h1>Scegli il tuo personaggio</h1>
+		<div>
+			<Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)"/>
+		</div>
+	</div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue'
+
+export default {
+	name: 'Chooser',
+	components: {
+		Card,
+	},
+	props: {
+		cards: Array,
+		select: Function
+	},
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#overlay {
+	position: fixed; /* Sit on top of the page content */
+	width: 100%; /* Full width (cover the whole page) */
+	height: 100%; /* Full height (cover the whole page) */
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.8); /* Black background with opacity */
+	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+	display: flex;
+	color: white;
+	flex-direction: column;
+	justify-content: center;
+}
+#overlay div {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>

frontend/src/components/Lobby.vue

@@ -3,7 +3,7 @@
 		<h1>Lobby: {{ lobbyName }}</h1>
 		<h3>Giocatori</h3>
 		<div style="display:flex">
-			<Card v-if="startGameCard" :card="startGameCard"/>
+			<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
 			<Card v-for="p in players" v-bind:key="p" :card="getPlayerCard(p)"/>
 		</div>
 		<h3>Chat</h3>
@@ -14,16 +14,19 @@
 			<input v-model="text"/>
 			<input type="submit"/>
 		</form>
+		<Chooser v-if="showChooser" :cards="availableCharacters" :select="setCharacter"/>
 	</div>
 </template>
 
 <script>
 import Card from '@/components/Card.vue'
+import Chooser from './Chooser.vue'
 
 export default {
 	name: 'Lobby',
 	components: {
 		Card,
+		Chooser,
 	},
 	props: {
 		username: String
@@ -33,6 +36,7 @@ export default {
 		started: false,
 		players: [],
 		messages: [],
+		availableCharacters: [],
 		text: ''
 	}),
 	sockets: {
@@ -47,6 +51,25 @@ export default {
 			let container = this.$el.querySelector("#chatbox");
 			container.scrollTop = container.scrollHeight;
 		},
+		characters(data){
+			this.availableCharacters = JSON.parse(data)
+		},
+	},
+	computed: {
+		startGameCard() {
+			if (!this.started && this.players.length > 2 && this.players[0] == this.username) {
+				return {
+					name: 'Start',
+					icon: '▶️',
+					is_equipment: true,
+					number: `${this.players.length}🤠`
+				}
+			}
+			return null;
+		},
+		showChooser() {
+			return this.availableCharacters.length > 0;
+		}
 	},
 	methods: {
 		sendChatMessage(e) {
@@ -64,20 +87,15 @@ export default {
 				is_character: true,
 			}
 		},
+		startGame() {
+			this.started = true;
+			this.$socket.emit('start_game')
+		},
+		setCharacter(char) {
+			this.availableCharacters = []
+			this.$socket.emit('set_character', char.name)
+		},
 	},
-	computed: {
-		startGameCard() {
-			if (this.players.length > 2 && this.players[0] == this.username) {
-				return {
-					name: 'Start',
-					icon: '▶️',
-					is_equipment: true,
-					number: `${this.players.length}🤠`
-				}
-			}
-			return null;
-		}
-	}
 }
 </script>