diff --git a/src/network/Client.ts b/src/network/Client.ts index f22e05c..4a497dc 100644 --- a/src/network/Client.ts +++ b/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.emit("player-joined", data.name); + this.players.push(data.player); + 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( diff --git a/src/network/PeerServer.ts b/src/network/PeerServer.ts index 099d614..7e8e36e 100644 --- a/src/network/PeerServer.ts +++ b/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({ 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; diff --git a/src/network/types.ts b/src/network/types.ts index a01b192..76feb63 100644 --- a/src/network/types.ts +++ b/src/network/types.ts @@ -1,15 +1,19 @@ import { DataConnection } from "peerjs"; + import LocalClient from "./LocalClient"; -export interface LocalPlayer { - kind: "local"; +export interface RoomPlayer { 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; +} \ No newline at end of file diff --git a/src/store/network/getters.ts b/src/store/network/getters.ts index 76f509c..a9b84be 100644 --- a/src/store/network/getters.ts +++ b/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 = { return false; }, - players(state): string[] { + players(state): RoomPlayer[] { return state.players; } }; diff --git a/src/store/network/mutations.ts b/src/store/network/mutations.ts index 6832f2c..842747a 100644 --- a/src/store/network/mutations.ts +++ b/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 = { 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 = { state.serverID = id; }, - playerListChanged(state, players: string[]) { + playerListChanged(state, players: RoomPlayer[]) { Vue.set(state, "players", players); } }; diff --git a/src/store/network/types.ts b/src/store/network/types.ts index e810edf..016a665 100644 --- a/src/store/network/types.ts +++ b/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 { diff --git a/src/views/Lobby.vue b/src/views/Lobby.vue index 1750002..f250e74 100644 --- a/src/views/Lobby.vue +++ b/src/views/Lobby.vue @@ -89,8 +89,8 @@
Players
    -
  • - {{ player }} +
  • + {{ player.name }}
@@ -258,7 +258,11 @@