Actually get both sides to update

imports/api/collections/Players.js

@@ -2,7 +2,12 @@ import { Mongo } from "meteor/mongo";
 
 let Players = new Mongo.Collection("players");
 
+// TODO: there's probably a better way to do this
+try {
   let collection = Players.rawCollection();
   collection.ensureIndex({ name: 1, roomId: 1, }, { unique: true });
+} catch (e) {
+
+}
 
 export default Players;

imports/api/collections/Rooms.js

@@ -2,7 +2,11 @@ import { Mongo } from "meteor/mongo";
 
 let Rooms = new Mongo.Collection("rooms");
 
+try {
   let collection = Rooms.rawCollection();
   collection.ensureIndex({ joinCode: 1 }, { unique: true });
+} catch (e) {
+
+}
 
 export default Rooms;

imports/api/methods/joinGame.js

@@ -10,7 +10,7 @@ Meteor.methods({
     check(name, String);
     name = name.trim();
 
-    let room = Rooms.findOne({ joinCode: code });
+    let room = Rooms.findOne({ joinCode: code.toLowerCase() });
     if (room === undefined) {
       throw new Meteor.Error("room-not-found");
     }

imports/api/methods/newGame.js

@@ -16,7 +16,7 @@ Meteor.methods({
     let remainingAttempts = 10;
     let joinCode;
     while (roomId === null && remainingAttempts > 0) {
-      joinCode = Random.hexString(6);
+      joinCode = Random.hexString(6).toLowerCase();
       let started = new Date();
 
       try {

imports/api/publications/index.js

@@ -1 +1 @@
-// import './links'
+import "./players";

imports/api/publications/players.js

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

imports/ui/App.vue

@@ -2,7 +2,8 @@
   <div>
     <component
       v-bind:is="whatScreen"
-      v-bind="currentRoom"
+      v-bind:currentRoom="currentRoom"
+      v-bind:players="players"
       v-on:newGame="newGame"
       v-on:joinGame="joinGame"
       ></component>
@@ -10,8 +11,9 @@
 </template>
 
 <script>
-import Lobby from './components/Lobby.vue'
+import Lobby from "./components/Lobby.vue"
-import WaitingRoom from './components/WaitingRoom.vue'
+import WaitingRoom from "./components/WaitingRoom.vue"
+import Players from "../api/collections/Players";
 
 export default {
   components: {
@@ -19,6 +21,15 @@ export default {
     WaitingRoom,
   },
 
+  meteor: {
+    $subscribe: {
+      players: [],
+    },
+    players() {
+      return Players.find({});
+    },
+  },
+
   data() {
     return {
       currentRoom: null,
@@ -30,11 +41,17 @@ export default {
     newGame: function(args) {
       this.currentRoom = args;
       this.whatScreen = WaitingRoom;
+      Meteor.subscribe("players", args.roomId, () => {
+        console.log("UPDATE", arguments);
+      });
     },
 
     joinGame: function(args) {
       this.currentRoom = args;
       this.whatScreen = WaitingRoom;
+      Meteor.subscribe("players", args.roomId, () => {
+        console.log("UPDATE", arguments);
+      });
     },
   }
 }

imports/ui/components/WaitingRoom.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <h1>Waiting for players...</h1>
-    <p>Join code: {{ joinCode.toUpperCase() }}</p>
+    <p>Join code: {{ currentRoom.joinCode.toUpperCase() }}</p>
     <p>Players: {{ players }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["joinCode", "players"],
+  props: ["currentRoom", "players"],
 }
 </script>