From ec8e9e16deaaea48f176f869435c28ccc039214a Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Mon, 30 Nov 2020 15:00:31 +0100
Subject: [PATCH] choose name on join via link

---
 backend/__init__.py                         |  15 ++-
 backend/bang/game.py                        |   1 +
 frontend/src/components/FullScreenInput.vue | 108 ++++++++++++++++++++
 frontend/src/components/Lobby.vue           |  14 +++
 4 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/FullScreenInput.vue

diff --git a/backend/__init__.py b/backend/__init__.py
index 14ced17..c0873f9 100644
--- a/backend/__init__.py
+++ b/backend/__init__.py
@@ -33,10 +33,16 @@ def connect(sid, environ):
 @sio.event
 def set_username(sid, username):
     global online_players
-    online_players += 1
-    sio.save_session(sid, Player(username, sid, sio))
-    print(f'{sid} is now {username}')
-    advertise_lobbies()
+    if not isinstance(sio.get_session(sid), Player):
+        online_players += 1
+        sio.save_session(sid, Player(username, sid, sio))
+        print(f'{sid} is now {username}')
+        advertise_lobbies()
+    elif sio.get_session(sid).game == None or not sio.get_session(sid).game.started:
+        print(f'{sid} changed username to {username}')
+        sio.get_session(sid).name = username
+        sio.emit('me', data=sio.get_session(sid).name, room=sid)
+        sio.get_session(sid).game.notify_room()
 
 @sio.event
 def get_me(sid, room):
@@ -55,6 +61,7 @@ def get_me(sid, room):
             sio.emit('me', data={'error':'Wrong password/Cannot connect'}, room=sid)
         else:
             sio.emit('me', data=sio.get_session(sid).name, room=sid)
+            sio.emit('change_username', room=sid)
 
 @sio.event
 def disconnect(sid):
diff --git a/backend/bang/game.py b/backend/bang/game.py
index db79c77..c790ebf 100644
--- a/backend/bang/game.py
+++ b/backend/bang/game.py
@@ -23,6 +23,7 @@ class Game:
         self.expansions = []
 
     def notify_room(self):
+        print([p.name for p in self.players])
         if len([p for p in self.players if p.character == None]) != 0:
             self.sio.emit('room', room=self.name, data={
                 'name': self.name,
diff --git a/frontend/src/components/FullScreenInput.vue b/frontend/src/components/FullScreenInput.vue
new file mode 100644
index 0000000..e76ac42
--- /dev/null
+++ b/frontend/src/components/FullScreenInput.vue
@@ -0,0 +1,108 @@
+<template>
+	<div id="overlay" class="center-stuff">
+		<h1>{{text}}</h1>
+		<form @submit="submit">
+			<input v-model="val" class="chooserInput"/>
+		</form>
+		<p v-if="hintText">{{hintText}}</p>
+		<div style="margin-top:6pt;" class="button center-stuff" v-if="showCancelBtn && val" @click="cancel(val)"><span>{{realCancelText}}</span></div>
+		<p v-if="desc" style="bottom:10pt;right:0;left:0;position:absolute;margin:16pt;font-size:18pt">{{desc}}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FullScreenInput',
+	components: {
+	},
+	props: {
+		cancel: Function,
+		cancelText: {
+			type: String,
+			default: '',
+		},
+		text: String,
+		hintText: String,
+	},
+	data: () => ({
+		val: '',
+		desc: '',
+		realCancelText: ''
+	}),
+	computed: {
+		showCancelBtn() {
+			if (this.cancel)
+				return true
+			return false
+		}
+	},
+	methods: {
+		showDesc(card) {
+			this.desc = (this.$i18n.locale=='it'?card.desc:card.desc_eng)
+		},
+		submit(e) {
+			e.preventDefault();
+			this.cancel(this.val);
+		}
+	},
+	mounted() {
+		this.realCancelText = this.cancelText
+		if (this.realCancelText == '') {
+			this.realCancelText = this.$t('cancel')
+		}
+	},
+}
+</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.7); /* 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;
+	flex-wrap: wrap;
+}
+.card {
+	width: 72pt;
+	min-width:72pt;
+	height: 120pt;
+}
+.card:hover {
+	transform: translate(0, -5px) scale(1.05, 1.05);
+}
+.button {
+	background-color: #0000;
+	color: white;
+	border: 2px solid white;
+	transition-duration: 0.2s;
+	width: 100pt;
+	height: 24pt;
+	border-radius: 12pt;
+	cursor: pointer;
+}
+
+.button:hover {
+	background-color: white; /* Green */
+	color: black;
+}
+.chooserInput {
+	background: none;
+	color: white;
+	font-size: 20pt;
+}
+</style>
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 90e35bf..be1e1e4 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -40,6 +40,7 @@
 		<Chooser v-if="selectedInfo" :text="$t('details')" :cards="selectedInfo" :cancelText="$t('ok')" :cancel="()=>{selectedInfo = null}" :select="()=>{selectedInfo = null}"/>
 		<transition name="bounce">
 			<Chooser v-if="hasToChoose" :text="`${$t('choose_card')}${target_p?$t('choose_card_from') + target_p:''}`" :cards="chooseCards" :select="chooseCard"/>
+			<full-screen-input v-if="hasToSetUsername" :text="$t('choose_username')" :val="username" :cancel="setUsername" :cancelText="$t('ok')"/>
 		</transition>
 	</div>
 </template>
@@ -52,6 +53,7 @@ import Chat from './Chat.vue'
 import Player from './Player.vue'
 import Deck from './Deck.vue'
 import TinyHand from './TinyHand.vue'
+import FullScreenInput from './FullScreenInput.vue'
 
 export default {
 	name: 'Lobby',
@@ -63,6 +65,7 @@ export default {
 		Deck,
 		TinyHand,
 		PrettyCheck,
+		FullScreenInput
 	},
 	data: () => ({
 		username: '',
@@ -80,6 +83,7 @@ export default {
 		privateRoom: false,
 		password: '',
 		useDodgeCity: false,
+		hasToSetUsername: false,
 	}),
 	sockets: {
 		room(data) {
@@ -109,6 +113,9 @@ export default {
 			}
 			this.username = username
 		},
+		change_username() {
+			this.hasToSetUsername = true
+		}
 	},
 	computed: {
 		isRoomOwner() {
@@ -196,6 +203,13 @@ export default {
 			console.log(name)
 			this.$socket.emit('draw', name)
 		},
+		setUsername(name){
+			if (name.trim().length > 0){
+				localStorage.setItem('username', name)
+				this.hasToSetUsername = false
+				this.$socket.emit('set_username', name)
+			}
+		},
 	},
 	watch: {
 		privateRoom() {