82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<component
|
|
v-bind:is="whatScreen"
|
|
v-bind:roomInfo="roomInfo"
|
|
v-bind:players="players"
|
|
v-bind:currentRoom="currentRoom"
|
|
v-on:newGame="newGame"
|
|
v-on:joinGame="joinGame"
|
|
></component>
|
|
|
|
User ID: {{ userId }}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Lobby from "./components/Lobby.vue"
|
|
import WaitingRoom from "./components/WaitingRoom.vue"
|
|
import Players from "../api/collections/Players";
|
|
import Rooms from "../api/collections/Rooms";
|
|
|
|
export default {
|
|
components: {
|
|
Lobby,
|
|
WaitingRoom,
|
|
},
|
|
|
|
meteor: {
|
|
players() {
|
|
if (this.roomInfo === null)
|
|
return [];
|
|
return Players.find({ roomId: this.roomInfo.roomId });
|
|
},
|
|
currentRoom() {
|
|
if (this.roomInfo === null)
|
|
return null;
|
|
return Rooms.findOne(this.roomInfo.roomId);
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
roomInfo: null,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
whatScreen: function() {
|
|
if (this.roomInfo === null)
|
|
return Lobby;
|
|
else if (this.currentRoom === null || this.currentRoom.state === "waitingRoom")
|
|
return WaitingRoom;
|
|
},
|
|
|
|
userId: function() {
|
|
console.log("userId", Meteor.userId());
|
|
return Meteor.userId();
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
newGame: function(args) {
|
|
this.roomInfo = args;
|
|
Meteor.subscribe("players", args.roomId);
|
|
Meteor.subscribe("currentRoom", args.roomId);
|
|
},
|
|
|
|
joinGame: function(args) {
|
|
this.roomInfo = args;
|
|
Meteor.subscribe("players", args.roomId);
|
|
Meteor.subscribe("currentRoom", args.roomId);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
padding: 10px;
|
|
}
|
|
</style>
|