zhao/imports/ui/App.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>