From 07df5d708165c4ba78c1f677fdb2739d3e09f300 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Fri, 20 Nov 2020 15:15:36 +0100
Subject: [PATCH] character chooser

---
 backend/__init__.py                 | 12 +++++++-
 backend/game.py                     |  3 +-
 backend/players.py                  | 12 +++++---
 frontend/src/App.vue                |  5 +--
 frontend/src/components/Card.vue    |  1 +
 frontend/src/components/Chooser.vue | 47 +++++++++++++++++++++++++++++
 frontend/src/components/Lobby.vue   | 46 +++++++++++++++++++---------
 7 files changed, 103 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/Chooser.vue

diff --git a/backend/__init__.py b/backend/__init__.py
index ff4a655..5fd5bbe 100644
--- a/backend/__init__.py
+++ b/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)
diff --git a/backend/game.py b/backend/game.py
index ac24620..f2025ac 100644
--- a/backend/game.py
+++ b/backend/game.py
@@ -35,11 +35,10 @@ 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)):
-            self.players[i].set_available_character(char_cards[i*2:i*2+2])
+            self.players[i].set_available_character(char_cards[i * 2 : i * 2 + 2])
 
     def start_game(self):
         print('GAME IS STARING')
diff --git a/backend/players.py b/backend/players.py
index b69c32a..1ed0003 100644
--- a/backend/players.py
+++ b/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')
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8e398e9..4938b09 100644
--- a/frontend/src/App.vue
+++ b/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>
diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index 6340c56..60d043d 100644
--- a/frontend/src/components/Card.vue
+++ b/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;
diff --git a/frontend/src/components/Chooser.vue b/frontend/src/components/Chooser.vue
new file mode 100644
index 0000000..a54dd42
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 54147da..4143d89 100644
--- a/frontend/src/components/Lobby.vue
+++ b/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>