zhao/imports/ui/components/WaitingRoom.vue

<template>
  <div>
    <h1>Waiting for players...</h1>
    <p>Join code: {{ currentRoom.joinCode }}</p>
    <p>Owner: {{ playerNames[currentRoom.owner] }}</p>
    <p>Info: <br /><pre>{{ JSON.stringify(roomInfo, null, 2) }}</pre></p>
    <p>Room: <br /><pre>{{ JSON.stringify(currentRoom, null, 2) }}</pre></p>
    <p>
      Players:
      <ul>
        <li v-for="player in players" v-bind:key="player._id">
          {{ player.name }} (level {{ player.level }})
        </li>
      </ul>
    </p>
    <p><button v-if="isOwner" :disabled="!canStart">Start Game</button></p>
  </div>
</template>

<script>
export default {
  props: [
    "currentRoom",
    "players",
    "roomInfo",
  ],

  computed: {
    playerNames: function() {
      let names = new Map();
      for (let player of this.players) {
        names[player._id] = player.name;
      }
      return names;
    },

    isOwner: function() {
      return this.currentRoom.owner === this.roomInfo.playerId;
    },

    canStart: function() {
      let val = 
        // only the owner can start the game
        this.isOwner
        // TODO: actually calculate number of players based on decks?
        && this.players.length === 4;
      return val;
    },
  },
}
</script>

<style scoped>
</style>