Refactor state to share player info

src/network/Client.ts

@@ -1,11 +1,11 @@
 import EventEmitter from "eventemitter3";
 import Vue from "vue";
 
-import { NetworkMessage, PasswordResponse, PeerMetadata, RoomInfo } from "./types";
+import { NetworkMessage, PasswordResponse, PeerMetadata, RoomInfo, RoomPlayer } from "./types";
 
 export abstract class Client extends EventEmitter {
   public metadata: PeerMetadata;
-  public players!: string[];
+  public players!: RoomPlayer[];
   public roomInfo!: RoomInfo;
 
   public constructor(metadata: PeerMetadata) {
@@ -15,6 +15,7 @@ export abstract class Client extends EventEmitter {
 
   protected _received(data: NetworkMessage) {
     this.emit("data", data);
+    console.log(data);
     switch (data.kind) {
       // Server is sending over player list and room info
       case "room-info":
@@ -33,13 +34,12 @@ export abstract class Client extends EventEmitter {
         // This is because rename messages can be received during the initial
         // handshake, to signal a forced name change before joining.
         if (this.players) {
-          let idx = this.players.indexOf(data.oldname);
+          let idx = this.players.findIndex(player => player.name == data.oldname);
           if (idx < 0) {
             // Weird
-            console.warn(
+            console.error(
               `Someone (${data.oldname}) changed name but wasn't on the player list`
             );
-            this.players.push(data.newname);
             break;
           }
           Vue.set(this.players, idx, data.newname);
@@ -48,11 +48,11 @@ export abstract class Client extends EventEmitter {
         break;
       // A new player joined the room (this includes us)
       case "player-joined":
-        this.players.push(data.name);
+        this.players.push(data.player);
-        this.emit("player-joined", data.name);
+        this.emit("player-joined", data.player);
         break;
       case "player-left": {
-        let idx = this.players.indexOf(data.name);
+        let idx = this.players.findIndex(player => player.name == data.name);
         if (idx < 0) {
           // Weird
           console.warn(

src/network/PeerServer.ts

@@ -18,6 +18,7 @@ import {
   Room,
   RoomInfo,
   RoomInfoMessage,
+  RoomPlayer,
 } from "./types";
 
 // Increment name, add number at the end if not present
@@ -56,6 +57,7 @@ export class PeerServer extends EventEmitter {
     // Add local player to server
     players[local.name] = {
       kind: "local",
+      ready: false,
       name: local.name,
       client: local
     };
@@ -66,7 +68,7 @@ export class PeerServer extends EventEmitter {
       players
     };
 
-    local.players = Object.keys(this.players);
+    local.players = this.playerList;
     local.roomInfo = this.room.info;
 
     // Setup peer
@@ -89,6 +91,7 @@ export class PeerServer extends EventEmitter {
     let player: NetworkPlayer = {
       kind: "remote",
       name: metadata.name,
+      ready: false,
       conn: conn
     };
 
@@ -154,7 +157,7 @@ export class PeerServer extends EventEmitter {
 
     // Hacky: Give player list before this player was added, so join
     // message doesn't mess things up later
-    const players = Object.keys(this.room.players);
+    const players = this.playerList;
 
     // Add player to room
     this.room.players[playerName] = player;
@@ -182,7 +185,10 @@ export class PeerServer extends EventEmitter {
     // Notify other players
     this.broadcast<JoinMessage>({
       kind: "player-joined",
-      name: playerName
+      player: {
+        name: player.name,
+        ready: player.ready
+      }
     });
   }
 
@@ -276,6 +282,13 @@ export class PeerServer extends EventEmitter {
   public get id(): string {
     return this.peer.id;
   }
+
+  public get playerList(): RoomPlayer[] {
+    return Object.keys(this.room.players).map(playerName => ({
+      name: playerName,
+      ready: this.room.players[playerName].ready
+    }));
+  }
 }
 
 export default PeerServer;

src/network/types.ts

@@ -1,15 +1,19 @@
 import { DataConnection } from "peerjs";
+
 import LocalClient from "./LocalClient";
 
-export interface LocalPlayer {
+export interface RoomPlayer {
-  kind: "local";
   name: string;
+  ready: boolean;
+}
+
+export interface LocalPlayer extends RoomPlayer {
+  kind: "local";
   client: LocalClient;
 }
 
-export interface NetworkPlayer {
+export interface NetworkPlayer extends RoomPlayer {
   kind: "remote";
-  name: string;
   conn: DataConnection;
 }
 
@@ -70,7 +74,8 @@ export type NetworkMessage =
   | LeaveMessage
   | RenameMessage
   | ChatMessage
-  | AckMessage;
+  | AckMessage
+  | ReadyMessage;
 
 export interface PasswordRequest {
   kind: "password-req";
@@ -84,7 +89,7 @@ export interface PasswordResponse {
 export interface RoomInfoMessage {
   kind: "room-info";
   room: RoomInfo;
-  players: string[];
+  players: RoomPlayer[];
 }
 
 export interface LeaveRequest {
@@ -93,7 +98,7 @@ export interface LeaveRequest {
 
 export interface JoinMessage {
   kind: "player-joined";
-  name: string;
+  player: RoomPlayer;
 }
 
 export interface LeaveMessage {
@@ -123,3 +128,8 @@ export interface ErrorMessage {
   kind: "error";
   error: string;
 }
+
+export interface ReadyMessage {
+  kind: "ready";
+  ready: boolean;
+}

src/store/network/getters.ts

@@ -1,4 +1,4 @@
-import { Client } from "@/network";
+import { Client, RoomPlayer } from "@/network";
 import { GetterTree } from "vuex";
 
 import { AppState } from "../types";
@@ -52,7 +52,7 @@ const getters: GetterTree<NetworkState, AppState> = {
     return false;
   },
 
-  players(state): string[] {
+  players(state): RoomPlayer[] {
     return state.players;
   }
 };

src/store/network/mutations.ts

@@ -1,4 +1,4 @@
-import { ChatMessage, LocalClient, PeerClient, PeerServer } from "@/network";
+import { ChatMessage, LocalClient, PeerClient, PeerServer, RoomPlayer } from "@/network";
 import Vue from "vue";
 import { MutationTree } from "vuex";
 
@@ -7,7 +7,7 @@ import { ClientNetworkState, ConnectionStatus, NetworkState, ServerNetworkState
 const mutations: MutationTree<NetworkState> = {
   becomeServer(state, payload: { local: LocalClient; server: PeerServer }) {
     state.peerType = "server";
-    state.players = [payload.local.name];
+    state.players = [{ name: payload.local.name, ready: true }];
     (state as ServerNetworkState).local = payload.local;
     (state as ServerNetworkState).server = payload.server;
   },
@@ -36,7 +36,7 @@ const mutations: MutationTree<NetworkState> = {
     state.serverID = id;
   },
 
-  playerListChanged(state, players: string[]) {
+  playerListChanged(state, players: RoomPlayer[]) {
     Vue.set(state, "players", players);
   }
 };

src/store/network/types.ts

@@ -1,4 +1,4 @@
-import { ChatMessage, LocalClient, PeerClient, PeerMetadata, PeerServer, RoomInfo } from "@/network";
+import { ChatMessage, LocalClient, PeerClient, PeerMetadata, PeerServer, RoomInfo, RoomPlayer } from "@/network";
 import Peer from "peerjs";
 
 export type ConnectionStatus =
@@ -10,7 +10,7 @@ export type ConnectionStatus =
 export interface SharedNetworkState {
   chatLog: ChatMessage[];
   serverID: string | null;
-  players: string[];
+  players: RoomPlayer[];
 }
 
 export interface NoNetworkState extends SharedNetworkState {

src/views/Lobby.vue

@@ -89,8 +89,8 @@
       <section class="players">
         <header>Players</header>
         <ul>
-          <li class="selectable" v-for="player in players" :key="player">
+          <li class="selectable" v-for="player in players" :key="player.name">
-            {{ player }}
+            {{ player.name }}
           </li>
         </ul>
       </section>
@@ -258,7 +258,11 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
-import { StartServerOptions, ConnectOptions } from "@/store/network/types";
+import {
+  StartServerOptions,
+  ConnectOptions,
+  PlayerEntry
+} from "@/store/network/types";
 import { Action, Getter } from "vuex-class";
 import { Client, NetworkMessage } from "@/network";
 
@@ -295,7 +299,7 @@ export default class Lobby extends Vue {
   private sessionID!: string | null;
 
   @Getter("players", networkNS)
-  private players!: string[];
+  private players!: PlayerEntry[];
 
   private data() {
     const playerName =
@@ -368,7 +372,10 @@ export default class Lobby extends Vue {
   }
 
   private get nameAvailable(): boolean {
-    return this.wantedName != "" && !this.players.includes(this.wantedName);
+    return (
+      this.wantedName != "" &&
+      !this.players.find(p => p.name == this.wantedName)
+    );
   }
 }
 </script>