join by url

backend/__init__.py

@@ -38,8 +38,22 @@ def set_username(sid, username):
     advertise_lobbies()
 
 @sio.event
-def my_message(sid, data):
+def get_me(sid, room):
-    print('message ', data)
+    if isinstance(sio.get_session(sid), Player):
+        sio.emit('me', data=sio.get_session(sid).name, room=sid)
+        if sio.get_session(sid).game:
+            sio.get_session(sid).game.notify_room()
+    else:
+        sio.save_session(sid, Player('player', sid, sio))
+        de_games = [g for g in games if g.name == room['name']]
+        if len(de_games) == 1 and not de_games[0].started:
+            join_room(sid, room)
+        else:
+            create_room(sid, room['name'])
+        if sio.get_session(sid).game == None:
+            sio.emit('me', data={'error':'Wrong password/Cannot connect'}, room=sid)
+        else:
+            sio.emit('me', data=sio.get_session(sid).name, room=sid)
 
 @sio.event
 def disconnect(sid):

frontend/package.json

@@ -14,12 +14,14 @@
     "socket.io-client": "^3.0.3",
     "vue": "^2.6.11",
     "vue-i18n": "^8.22.2",
+    "vue-router": "^3.2.0",
     "vue-socket.io": "^3.0.10"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-pwa": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

frontend/src/App.vue

@@ -1,36 +1,7 @@
 <template>
 	<div id="app" class="dark-mode">
-		<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt;">
-			<h1 style="margin-bottom:0pt;">PewPew!</h1>
-			<i style="font-size: x-small;">{{$t("trademark")}}</i>
-		</div>
 		<div v-if="isConnected">
-			<div v-if="!didSetUsername">
+			<router-view></router-view>
-				<p>{{$t("choose_username")}}</p>
-				<form @submit="setUsername">
-					<input v-model="username" />
-					<input type="submit" :value="$t('submit')"/>
-				</form>
-				<p>{{$t("online_players")}}{{onlinePlayers}}</p>
-			</div>
-			<div v-else>
-				<div v-if="!isInLobby" >
-					<p>{{$t("online_players")}}{{onlinePlayers}}</p>
-					<Card :card="getSelfCard" style="position:absolute; top:10pt; left: 10pt;"/>
-					<h2>{{$t("available_lobbies")}}</h2>
-					<div style="display: flex">
-						<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>
-					<form @submit="createLobby">
-						<h2>{{$t("create_lobby")}}</h2>
-						<p>{{$t("lobby_name")}}</p>
-						<input v-model="lobbyName"/>
-						<input type="submit" :value="$t('submit')"/>
-					</form>
-				</div>
-				<Lobby v-show="isInLobby" :username="username" />
-			</div>
 		</div>
 		<div v-else class="center-stuff">
 			<h2>{{$t("warning")}}</h2>
@@ -48,96 +19,31 @@
 </template>
 
 <script>
-import Vue from 'vue'
+// import Vue from 'vue'
-import Card from './components/Card.vue'
-import Lobby from './components/Lobby.vue'
 
 export default {
 	name: 'App',
-	components: {
-		Card,
-		Lobby,
-	},
 	data: () => ({
 		isConnected: false,
-		didSetUsername: false,
-		username: '',
-		openLobbies: [],
-		lobbyName: '',
-		isInLobby: false,
-		onlinePlayers: 0,
 	}),
 	computed: {
-		noLobbyAvailable() {
-			return this.openLobbies && this.openLobbies.length == 0
-		},
-		getSelfCard() {
-			return {
-				name: this.username,
-				number: this.$t('you'),
-				icon: '🤠',
-				is_character: true,
-			}
-		},
 	},
 	sockets: {
 		connect() {
 			this.isConnected = true;
 			document.title = 'PewPew!'
-			if (Vue.config.devtools) {
-				setTimeout(function(){
-					this.username =(1+Math.random() * 100 % 100).toFixed(2).toString();
-					this.setUsername();
-				}.bind(this), 1000)
-			}
 		},
 		disconnect() {
 			this.isConnected = false;
 		},
-		lobbies(data) {
+		room(data) {
-			this.openLobbies = data;
-		},
-		room() {
 			this.isInLobby = true;
+			this.$router.push({path:'game', query: { code: data.name, pwd: data.password }})
 		},
-		players(num) {
-			this.onlinePlayers = num;
-		}
 	},
 	methods: {
-		setUsername(e){
-			if (this.username.trim().length > 0){
-				this.didSetUsername = true
-				localStorage.setItem('username', this.username)
-				this.$socket.emit('set_username', this.username)
-				e.preventDefault();
-			}
-		},
-		getLobbyCard(lobby) {
-			return {
-				name: lobby.name,
-				icon: "💥",
-				number: `${lobby.players}🤠 ${lobby.locked?'🔐':''}`,
-				is_equipment: true,
-			}
-		},
-		createLobby(e) {
-			if (this.lobbyName.trim().length > 0) {
-				this.$socket.emit('create_room', this.lobbyName)
-			}
-			e.preventDefault();
-		},
-		joinLobby(lobby) {
-			let password = lobby.locked ? prompt(this.$t("room_password_prompt"), "") : '';
-			this.$socket.emit('join_room', {name:lobby.name,password:password})
-		},
-		init() {
-			location.reload();
-		},
 	},
 	mounted() {
-		if (localStorage.getItem('username'))
-			this.username = localStorage.getItem('username')
 	},
 }
 </script>

frontend/src/components/Lobby.vue

@@ -64,10 +64,8 @@ export default {
 		TinyHand,
 		PrettyCheck,
 	},
-	props: {
-		username: String
-	},
 	data: () => ({
+		username: '',
 		lobbyName: '',
 		started: false,
 		players: [],
@@ -104,15 +102,17 @@ export default {
 			console.log(data)
 			this.players = data
 		},
-		// self_vis(vis) {
+		me(username) {
-		// 	console.log('received visibility update')
+			if (username.error) { 
-		// 	console.log(vis)
+				alert(username.error)
-		// 	this.players = JSON.parse(vis)
+				this.$router.push('/')
-		// },
+			}
+			this.username = username
+		},
 	},
 	computed: {
 		isRoomOwner() {
-			return this.players[0].name == this.username
+			return this.players.length > 0 && this.players[0].name == this.username
 		},
 		startGameCard() {
 			if (!this.started && this.players.length > 2 && this.isRoomOwner) {
@@ -201,7 +201,11 @@ export default {
 		privateRoom() {
 			this.$socket.emit('private')
 		}
-	}
+	},
+	mounted() {
+		console.log('mounted lobby')
+		this.$socket.emit('get_me', {name:this.$route.query.code, password:this.$route.query.pwd})
+	},
 }
 </script>
 

frontend/src/components/Menu.vue

@@ -0,0 +1,121 @@
+<template>
+	<div id="app" class="dark-mode">
+		<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt;">
+			<h1 style="margin-bottom:0pt;">PewPew!</h1>
+			<i style="font-size: x-small;">{{$t("trademark")}}</i>
+		</div>
+		<div>
+			<div v-if="!didSetUsername">
+				<p>{{$t("choose_username")}}</p>
+				<form @submit="setUsername">
+					<input v-model="username" />
+					<input type="submit" :value="$t('submit')"/>
+				</form>
+				<p>{{$t("online_players")}}{{onlinePlayers}}</p>
+			</div>
+			<div v-else>
+				<div v-if="!isInLobby" >
+					<p>{{$t("online_players")}}{{onlinePlayers}}</p>
+					<Card :card="getSelfCard" style="position:absolute; top:10pt; left: 10pt;"/>
+					<h2>{{$t("available_lobbies")}}</h2>
+					<div style="display: flex">
+						<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>
+					<form @submit="createLobby">
+						<h2>{{$t("create_lobby")}}</h2>
+						<p>{{$t("lobby_name")}}</p>
+						<input v-model="lobbyName"/>
+						<input type="submit" :value="$t('submit')"/>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+// import Vue from 'vue'
+import Card from '@/components/Card.vue'
+// import Lobby from './components/Lobby.vue'
+
+export default {
+	name: 'App',
+	components: {
+		Card,
+		// Lobby,
+	},
+	data: () => ({
+		isConnected: false,
+		didSetUsername: false,
+		username: '',
+		openLobbies: [],
+		lobbyName: '',
+		isInLobby: false,
+		onlinePlayers: 0,
+	}),
+	computed: {
+		noLobbyAvailable() {
+			return this.openLobbies && this.openLobbies.length == 0
+		},
+		getSelfCard() {
+			return {
+				name: this.username,
+				number: this.$t('you'),
+				icon: '🤠',
+				is_character: true,
+			}
+		},
+	},
+	sockets: {
+		lobbies(data) {
+			this.openLobbies = data;
+		},
+		room(data) {
+			this.isInLobby = true;
+			this.$router.push({path:'game', query: { code: data.name }})
+		},
+		players(num) {
+			this.onlinePlayers = num;
+		}
+	},
+	methods: {
+		setUsername(e){
+			if (this.username.trim().length > 0){
+				this.didSetUsername = true
+				localStorage.setItem('username', this.username)
+				this.$socket.emit('set_username', this.username)
+				e.preventDefault();
+			}
+		},
+		getLobbyCard(lobby) {
+			return {
+				name: lobby.name,
+				icon: "💥",
+				number: `${lobby.players}🤠 ${lobby.locked?'🔐':''}`,
+				is_equipment: true,
+			}
+		},
+		createLobby(e) {
+			if (this.lobbyName.trim().length > 0) {
+				this.$socket.emit('create_room', this.lobbyName)
+			}
+			e.preventDefault();
+		},
+		joinLobby(lobby) {
+			let password = lobby.locked ? prompt(this.$t("room_password_prompt"), "") : '';
+			this.$socket.emit('join_room', {name:lobby.name,password:password})
+		},
+		init() {
+			location.reload();
+		},
+	},
+	mounted() {
+		if (localStorage.getItem('username'))
+			this.username = localStorage.getItem('username')
+	},
+}
+</script>
+
+<style>
+</style>

frontend/src/main.js

@@ -16,6 +16,7 @@ Vue.use(VueI18n)
 
 import { languages, defaultLocale } from './i18n';
 import './registerServiceWorker'
+import router from './router'
 const messages = Object.assign(languages)
 
 const i18n = new VueI18n({
@@ -25,5 +26,6 @@ const i18n = new VueI18n({
 
 new Vue({
   i18n,
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')

frontend/src/router/index.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [
+	{
+		path: '/game',
+		name: 'Game',
+		component: () => import(/* webpackChunkName: "game" */ '../components/Lobby.vue')
+	},
+	{
+		path: '/',
+		name: 'Home',
+		component: () => import(/* webpackChunkName: "game" */ '../components/Menu.vue')
+	},
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

frontend/yarn.lock

@@ -1263,7 +1263,7 @@
     webpack "^4.0.0"
     workbox-webpack-plugin "^4.3.1"
 
-"@vue/cli-plugin-router@^4.5.9":
+"@vue/cli-plugin-router@^4.5.9", "@vue/cli-plugin-router@~4.5.0":
   version "4.5.9"
   resolved "https://registry.npm.taobao.org/@vue/cli-plugin-router/download/@vue/cli-plugin-router-4.5.9.tgz?cache=0&sync_timestamp=1605594512666&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-router%2Fdownload%2F%40vue%2Fcli-plugin-router-4.5.9.tgz#b3d23a8083d26a81bd09bf9c8d010a3e4e4b13d0"
   integrity sha1-s9I6gIPSaoG9Cb+cjQEKPk5LE9A=
@@ -8475,6 +8475,11 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.2.0:
+  version "3.4.9"
+  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1606723745188&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
+  integrity sha1-wBb0IDCuKTLxTkdIs5odmg4lDmY=
+
 vue-socket.io@^3.0.10:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/vue-socket.io/-/vue-socket.io-3.0.10.tgz#76135bf5043baf484c648636a7a9822b4c11c084"