join by url
This commit is contained in:
Alberto Xamin
parent
2fd7dbb516
commit
90959bcc62
@ -38,8 +38,22 @@ def set_username(sid, username):
|
||||
advertise_lobbies()
|
||||
|
||||
@sio.event
|
||||
def my_message(sid, data):
|
||||
print('message ', data)
|
||||
def get_me(sid, room):
|
||||
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):
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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">
|
||||
<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>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div v-else class="center-stuff">
|
||||
<h2>{{$t("warning")}}</h2>
|
||||
@ -48,96 +19,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Card from './components/Card.vue'
|
||||
import Lobby from './components/Lobby.vue'
|
||||
// import Vue from '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) {
|
||||
this.openLobbies = data;
|
||||
},
|
||||
room() {
|
||||
room(data) {
|
||||
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>
|
||||
|
||||
@ -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) {
|
||||
// console.log('received visibility update')
|
||||
// console.log(vis)
|
||||
// this.players = JSON.parse(vis)
|
||||
// },
|
||||
me(username) {
|
||||
if (username.error) {
|
||||
alert(username.error)
|
||||
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>
|
||||
|
||||
|
||||
121
frontend/src/components/Menu.vue
Normal file
121
frontend/src/components/Menu.vue
Normal file
@ -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>
|
||||
@ -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({
|
||||
@ -24,6 +25,7 @@ const i18n = new VueI18n({
|
||||
})
|
||||
|
||||
new Vue({
|
||||
i18n,
|
||||
render: h => h(App),
|
||||
i18n,
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
25
frontend/src/router/index.js
Normal file
25
frontend/src/router/index.js
Normal file
@ -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
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user