Sync player list and player ID with vuex

src/network/Client.ts

@@ -23,6 +23,7 @@ export abstract class Client extends EventEmitter {
       case "room-info":
         this.roomInfo = data.room;
         this.players = data.players;
+        this.emit("handshake");
         break;
       // Someone changed name (or was forced to)
       case "rename":

src/store/network/actions.ts

@@ -1,4 +1,4 @@
-import { ActionTree } from "vuex";
+import { ActionTree, Commit } from "vuex";
 import { AppState } from "../types";
 import { NetworkState, StartServerOptions, ConnectOptions } from "./types";
 import {
@@ -10,10 +10,23 @@ import {
   ChatMessage
 } from "@/network";
 
+function bindClientEvents(commit: Commit, client: Client) {
+  client.on("handshake", () => {
+    commit("playerListChanged", client.players);
+  });
+  client.on("player-joined", () => commit("playerListChanged", client.players));
+  client.on("player-left", () => commit("playerListChanged", client.players));
+  client.on("rename", () => commit("playerListChanged", client.players));
+}
+
 const actions: ActionTree<NetworkState, AppState> = {
   startServer({ commit }, options: StartServerOptions) {
     const local = new LocalClient(options.playerInfo);
     const server = new PeerServer(options.roomInfo, local, options._customPeer);
+    server.once("open", id => {
+      commit("serverAssignedID", id);
+    });
+    bindClientEvents(commit, local);
     commit("becomeServer", { local, server });
   },
 
@@ -29,6 +42,7 @@ const actions: ActionTree<NetworkState, AppState> = {
     client.on("error", err => {
       commit("connectionError", err);
     });
+    bindClientEvents(commit, client);
     client.connect(options.serverID);
   },
 

src/store/network/getters.ts

@@ -15,13 +15,7 @@ const getters: GetterTree<NetworkState, AppState> = {
   },
 
   sessionID(state): string | null {
-    switch (state.peerType) {
-      case "server":
-        return state.server.id;
-      case "client":
-        return state.serverID;
-    }
-    return null;
+    return state.serverID;
   },
 
   client(state): Client | null {
@@ -46,6 +40,10 @@ const getters: GetterTree<NetworkState, AppState> = {
       return true;
     }
     return false;
+  },
+
+  players(state): string[] {
+    return state.players;
   }
 };
 

src/store/network/index.ts

@@ -15,6 +15,7 @@ export const state: NetworkState = {
   server: null,
   local: null,
   serverID: null,
+  players: [],
   chatLog: []
 };
 

src/store/network/mutations.ts

@@ -32,6 +32,14 @@ const mutations: MutationTree<NetworkState> = {
 
   receivedChatMessage(state, message: ChatMessage) {
     state.chatLog.push(message);
+  },
+
+  serverAssignedID(state, id: string) {
+    state.serverID = id;
+  },
+
+  playerListChanged(state, players: string[]) {
+    state.players = players;
   }
 };
 

src/store/network/types.ts

@@ -16,6 +16,8 @@ export type ConnectionStatus =
 
 export interface SharedNetworkState {
   chatLog: ChatMessage[];
+  serverID: string | null;
+  players: string[];
 }
 
 export interface NoNetworkState extends SharedNetworkState {
@@ -25,7 +27,6 @@ export interface NoNetworkState extends SharedNetworkState {
   peer: null;
   server: null;
   local: null;
-  serverID: null;
 }
 
 export interface ClientNetworkState extends SharedNetworkState {
@@ -33,7 +34,6 @@ export interface ClientNetworkState extends SharedNetworkState {
   connectionStatus: ConnectionStatus;
   connectionError?: Error;
   peer: PeerClient;
-  serverID: string;
 }
 
 export interface ServerNetworkState extends SharedNetworkState {

src/views/Lobby.vue

@@ -80,7 +80,15 @@
     </section>
     <section class="room" v-else>
       <section class="info">
-        Session ID: {{ sessionID }}
+        Session ID: <span class="selectable">{{ sessionID }}</span>
+      </section>
+      <section class="players">
+        Players:
+        <ul>
+          <li class="selectable" v-for="player in players" :key="player">
+            {{ player }}
+          </li>
+        </ul>
       </section>
     </section>
   </section>
@@ -160,10 +168,21 @@
   }
 }
 
+.room {
+  padding: 10px 20px;
+  margin: 10px;
+  border: 1px solid rgba($white, 20%);
+  border-radius: 10px;
+}
+
 .only-mobile {
   display: none;
 }
 
+.selectable {
+  user-select: all;
+}
+
 @media (max-width: 500px) {
   .only-full {
     display: none;
@@ -189,6 +208,7 @@ import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
 import { StartServerOptions, ConnectOptions } from "@/store/network/types";
 import { Action, Getter } from "vuex-class";
+import { Client } from "@/network";
 
 @Component({
   components: {
@@ -211,9 +231,12 @@ export default class Lobby extends Vue {
   @Getter("inRoom", { namespace: "network" })
   private inRoom!: boolean;
 
-  @Getter("sessionID", { namespace: "network"} )
+  @Getter("sessionID", { namespace: "network" })
   private sessionID!: string | null;
 
+  @Getter("players", { namespace: "network" })
+  private players!: string[];
+
   private data() {
     return {
       playerName: