Joining games works!

imports/api/methods/joinGame.js

@@ -20,6 +20,10 @@ Meteor.methods({
     }
 
     let roomId = room._id;
+    if (roomId === undefined) {
+      throw new Meteor.Error("room-id-undefined");
+    }
+
     try {
       let playerId = Players.insert({ roomId, name });
     } catch (e) {

imports/api/methods/newGame.js

@@ -5,17 +5,17 @@ import Rooms from "../collections/Rooms.js";
 import Players from "../collections/Players.js";
 
 Meteor.methods({
-  "newGame": async ({ name }) => {
+  "newGame": ({ name }) => {
     check(name, String);
     name = name.trim();
 
-    let roomId = null;
+    let roomId = undefined;
     let state = "waitingRoom";
 
     // attempt to get a valid room code 10 times
     let remainingAttempts = 10;
     let joinCode;
-    while (roomId === null && remainingAttempts > 0) {
+    while (roomId === undefined && remainingAttempts > 0) {
       joinCode = Random.hexString(6).toLowerCase();
       let started = new Date();
 
@@ -26,17 +26,18 @@ Meteor.methods({
       } catch (e) {
         // BulkWriteError
         if (e.code === 11000) {
-          remainingAttempts -= 1;
         } else {
           console.log("UNCAUGHT", e);
         }
       }
+      remainingAttempts -= 1;
     }
 
+    console.log("ROOM ID", roomId);
     let playerId = Players.insert({ roomId, name });
     Rooms.update(roomId, { $set: { owner: playerId } });
 
-    if (remainingAttempts == 0 && roomId === null) {
+    if (remainingAttempts == 0 && roomId === undefined) {
       throw new Meteor.Error("no-more-rooms");
     }
 

imports/api/publications/index.js

@@ -1 +1,2 @@
 import "./players";
+import "./rooms";

imports/api/publications/players.js

@@ -2,5 +2,8 @@ import { Meteor } from "meteor/meteor";
 import Players from "../collections/Players.js";
 
 Meteor.publish("players", (roomId) => {
+    if (roomId === undefined) {
+        return [];
+    }
     return Players.find({ roomId });
 });

imports/api/publications/rooms.js

@@ -0,0 +1,6 @@
+import { Meteor } from "meteor/meteor";
+import Rooms from "../collections/Rooms.js";
+
+Meteor.publish("currentRoom", (roomId) => {
+    return Rooms.find(roomId);
+});

imports/ui/App.vue

@@ -2,8 +2,9 @@
   <div>
     <component
       v-bind:is="whatScreen"
-      v-bind:currentRoom="currentRoom"
+      v-bind:roomInfo="roomInfo"
       v-bind:players="players"
+      v-bind:currentRoom="currentRoom"
       v-on:newGame="newGame"
       v-on:joinGame="joinGame"
       ></component>
@@ -14,6 +15,7 @@
 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: {
@@ -22,36 +24,38 @@ export default {
   },
 
   meteor: {
-    $subscribe: {
-      players: [],
-    },
     players() {
-      return Players.find({});
+      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 {
-      currentRoom: null,
+      roomInfo: null,
       whatScreen: Lobby,
     };    
   },
 
   methods: {
     newGame: function(args) {
-      this.currentRoom = args;
+      this.roomInfo = args;
       this.whatScreen = WaitingRoom;
-      Meteor.subscribe("players", args.roomId, () => {
+      Meteor.subscribe("players", args.roomId);
-        console.log("UPDATE", arguments);
+      Meteor.subscribe("currentRoom", args.roomId);
-      });
     },
 
     joinGame: function(args) {
-      this.currentRoom = args;
+      this.roomInfo = args;
       this.whatScreen = WaitingRoom;
-      Meteor.subscribe("players", args.roomId, () => {
+      Meteor.subscribe("players", args.roomId);
-        console.log("UPDATE", arguments);
+      Meteor.subscribe("currentRoom", args.roomId);
-      });
     },
   }
 }

imports/ui/components/Lobby.vue

@@ -59,6 +59,7 @@ export default {
       this.loading = true;
       let name = this.newGameName;
       Meteor.call("newGame", { name }, (err, res) => {
+      console.log(err, res);
         if (err !== undefined) {
           this.errorMessage = err.message;
           this.loading = false;

imports/ui/components/WaitingRoom.vue

@@ -1,14 +1,30 @@
 <template>
   <div>
     <h1>Waiting for players...</h1>
-    <p>Join code: {{ currentRoom.joinCode.toUpperCase() }}</p>
+    <p>Join code: {{ currentRoom.joinCode }}</p>
-    <p>Players: {{ players }}</p>
+    <p>State: {{ currentRoom.state }}
+    <p>Owner: {{ playerNames[currentRoom.owner] }}</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"],
+  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>