<template>
  <div>
    <h1>Waiting for players...</h1>
    <p>Join code: {{ currentRoom.joinCode }}</p>
    <p>State: {{ currentRoom.state }}
    <p>Owner: {{ playerNames[currentRoom.owner] }}</p>
    <p>Rules: <br /><pre>{{ JSON.stringify(currentRoom.ruleset, null, 2) }}</pre></p>
    <p>
      Players:
      <ul>
        <li v-for="player in players" v-bind:key="player._id">{{ player.name }}</li>
      </ul>
    </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;
    },
  },
}
</script>

<style scoped>
</style>
