zhao/imports/ui/components/Lobby.vue

94 lines
1.9 KiB
Vue
Raw Normal View History

2020-11-27 05:33:53 +00:00
<template>
<div>
<h1>LOBBY</h1>
2020-11-27 07:16:15 +00:00
<div id="error">{{ errorMessage }}</div>
2020-11-27 05:59:25 +00:00
<form v-on:submit.prevent="newGame">
2020-11-27 06:36:02 +00:00
<input
type="text"
autocomplete="off"
required
placeholder="what's your name?"
v-model="newGameName"
:disabled="loading"
/>
2020-11-27 07:16:15 +00:00
<button type="submit" :disabled="loading">new game</button>
2020-11-27 05:59:25 +00:00
</form>
<p>or</p>
2020-11-27 07:16:15 +00:00
<form v-on:submit.prevent="joinGame">
<input
type="text"
autocomplete="off"
required
placeholder="join code"
v-model="joinGameCode"
:disabled="loading"
/>
<input
type="text"
autocomplete="off"
required
placeholder="what's your name?"
v-model="joinGameName"
:disabled="loading"
/>
<button type="submit" :disabled="loading">join game</button>
</form>
2020-11-27 05:33:53 +00:00
</div>
</template>
<script>
export default {
2020-11-27 05:59:25 +00:00
name: "Lobby",
data() {
return {
2020-11-27 06:36:02 +00:00
loading: false,
2020-11-27 05:59:25 +00:00
newGameName: "",
2020-11-27 07:16:15 +00:00
joinGameName: "",
joinGameCode: "",
errorMessage: "",
2020-11-27 05:59:25 +00:00
};
},
methods: {
2020-11-27 07:16:15 +00:00
newGame: function(evt) {
this.loading = true;
2020-11-27 05:59:25 +00:00
let name = this.newGameName;
2020-11-27 06:36:02 +00:00
Meteor.call("newGame", { name }, (err, res) => {
2020-11-27 08:18:29 +00:00
console.log(err, res);
2020-11-27 07:16:15 +00:00
if (err !== undefined) {
this.errorMessage = err.message;
this.loading = false;
return;
}
this.$emit("newGame", res);
});
},
joinGame: function(evt) {
this.loading = true;
let name = this.joinGameName;
let code = this.joinGameCode;
Meteor.call("joinGame", { code, name }, (err, res) => {
if (err !== undefined) {
this.errorMessage = err.message;
this.loading = false;
return;
}
this.$emit("joinGame", res);
2020-11-27 06:36:02 +00:00
});
2020-11-27 07:16:15 +00:00
},
2020-11-27 05:59:25 +00:00
}
2020-11-27 05:33:53 +00:00
}
</script>
<style scoped>
2020-11-27 07:16:15 +00:00
#error {
color: red;
}
2020-11-27 05:33:53 +00:00
</style>