src/network/Client.ts

@@ -1,11 +1,11 @@
 import EventEmitter from "eventemitter3";
 import Vue from "vue";
 
-import { NetworkMessage, PasswordResponse, PeerMetadata, RoomInfo, RoomPlayer } from "./types";
+import { NetworkMessage, PasswordResponse, PeerMetadata, RoomInfo } from "./types";
 
 export abstract class Client extends EventEmitter {
   public metadata: PeerMetadata;
-  public players!: RoomPlayer[];
+  public players!: string[];
   public roomInfo!: RoomInfo;
 
   public constructor(metadata: PeerMetadata) {
@@ -15,7 +15,6 @@ 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":
@@ -34,12 +33,13 @@ 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.findIndex(player => player.name == data.oldname);
+          let idx = this.players.indexOf(data.oldname);
           if (idx < 0) {
             // Weird
-            console.error(
+            console.warn(
               `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.player);
+        this.players.push(data.name);
-        this.emit("player-joined", data.player);
+        this.emit("player-joined", data.name);
         break;
       case "player-left": {
-        let idx = this.players.findIndex(player => player.name == data.name);
+        let idx = this.players.indexOf(data.name);
         if (idx < 0) {
           // Weird
           console.warn(

src/network/PeerServer.ts

@@ -18,7 +18,6 @@ import {
   Room,
   RoomInfo,
   RoomInfoMessage,
-  RoomPlayer,
 } from "./types";
 
 // Increment name, add number at the end if not present
@@ -57,7 +56,6 @@ export class PeerServer extends EventEmitter {
     // Add local player to server
     players[local.name] = {
       kind: "local",
-      ready: false,
       name: local.name,
       client: local
     };
@@ -68,7 +66,7 @@ export class PeerServer extends EventEmitter {
       players
     };
 
-    local.players = this.playerList;
+    local.players = Object.keys(this.players);
     local.roomInfo = this.room.info;
 
     // Setup peer
@@ -91,7 +89,6 @@ export class PeerServer extends EventEmitter {
     let player: NetworkPlayer = {
       kind: "remote",
       name: metadata.name,
-      ready: false,
       conn: conn
     };
 
@@ -157,7 +154,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 = this.playerList;
+    const players = Object.keys(this.room.players);
 
     // Add player to room
     this.room.players[playerName] = player;
@@ -185,10 +182,7 @@ export class PeerServer extends EventEmitter {
     // Notify other players
     this.broadcast<JoinMessage>({
       kind: "player-joined",
-      player: {
+      name: playerName
-        name: player.name,
-        ready: player.ready
-      }
     });
   }
 
@@ -282,13 +276,6 @@ 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,19 +1,15 @@
 import { DataConnection } from "peerjs";
-
 import LocalClient from "./LocalClient";
 
-export interface RoomPlayer {
+export interface LocalPlayer {
-  name: string;
-  ready: boolean;
-}
-
-export interface LocalPlayer extends RoomPlayer {
   kind: "local";
+  name: string;
   client: LocalClient;
 }
 
-export interface NetworkPlayer extends RoomPlayer {
+export interface NetworkPlayer {
   kind: "remote";
+  name: string;
   conn: DataConnection;
 }
 
@@ -74,8 +70,7 @@ export type NetworkMessage =
   | LeaveMessage
   | RenameMessage
   | ChatMessage
-  | AckMessage
+  | AckMessage;
-  | ReadyMessage;
 
 export interface PasswordRequest {
   kind: "password-req";
@@ -89,7 +84,7 @@ export interface PasswordResponse {
 export interface RoomInfoMessage {
   kind: "room-info";
   room: RoomInfo;
-  players: RoomPlayer[];
+  players: string[];
 }
 
 export interface LeaveRequest {
@@ -98,7 +93,7 @@ export interface LeaveRequest {
 
 export interface JoinMessage {
   kind: "player-joined";
-  player: RoomPlayer;
+  name: string;
 }
 
 export interface LeaveMessage {
@@ -128,8 +123,3 @@ 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, RoomPlayer } from "@/network";
+import { Client } from "@/network";
 import { GetterTree } from "vuex";
 
 import { AppState } from "../types";
@@ -52,7 +52,7 @@ const getters: GetterTree<NetworkState, AppState> = {
     return false;
   },
 
-  players(state): RoomPlayer[] {
+  players(state): string[] {
     return state.players;
   }
 };

src/store/network/mutations.ts

@@ -1,4 +1,4 @@
-import { ChatMessage, LocalClient, PeerClient, PeerServer, RoomPlayer } from "@/network";
+import { ChatMessage, LocalClient, PeerClient, PeerServer } 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 = [{ name: payload.local.name, ready: true }];
+    state.players = [payload.local.name];
     (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: RoomPlayer[]) {
+  playerListChanged(state, players: string[]) {
     Vue.set(state, "players", players);
   }
 };

src/store/network/types.ts

@@ -1,4 +1,4 @@
-import { ChatMessage, LocalClient, PeerClient, PeerMetadata, PeerServer, RoomInfo, RoomPlayer } from "@/network";
+import { ChatMessage, LocalClient, PeerClient, PeerMetadata, PeerServer, RoomInfo } 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: RoomPlayer[];
+  players: string[];
 }
 
 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.name">
+          <li class="selectable" v-for="player in players" :key="player">
-            {{ player.name }}
+            {{ player }}
           </li>
         </ul>
       </section>
@@ -260,7 +260,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, NetworkMessage, RoomPlayer } from "@/network";
+import { Client, NetworkMessage } from "@/network";
 
 const networkNS = { namespace: "network" };
 
@@ -295,7 +295,7 @@ export default class Lobby extends Vue {
   private sessionID!: string | null;
 
   @Getter("players", networkNS)
-  private players!: RoomPlayer[];
+  private players!: string[];
 
   private data() {
     const playerName =
@@ -368,10 +368,7 @@ export default class Lobby extends Vue {
   }
 
   private get nameAvailable(): boolean {
-    return (
+    return this.wantedName != "" && !this.players.includes(this.wantedName);
-      this.wantedName != "" &&
-      !this.players.find(p => p.name == this.wantedName)
-    );
   }
 }
 </script>