src/store/network/actions.ts

@@ -0,0 +1,23 @@
+import { ActionTree } from "vuex";
+import { AppState } from "../types";
+import { NetworkState, StartServerOptions, ConnectOptions } from "./types";
+import { PeerServer, LocalClient, PeerClient } from "@/network";
+
+const actions: ActionTree<NetworkState, AppState> = {
+  startServer({ commit }, options: StartServerOptions) {
+    const local = new LocalClient(options.playerInfo);
+    const server = new PeerServer(options.roomInfo, local, options._customPeer);
+    commit("becomeServer", { local, server });
+  },
+
+  connect({ commit }, options: ConnectOptions) {
+    const client = new PeerClient(options.playerInfo, options._customPeer);
+    commit("becomeClient", { peer: client });
+    client.once("connected", () => {
+      commit("connected");
+    });
+    client.connect(options.serverID);
+  }
+};
+
+export default actions;

src/store/network/getters.ts

@@ -4,14 +4,17 @@ import { NetworkState } from "./types";
 
 const getters: GetterTree<NetworkState, AppState> = {
   peerID(state): string | null {
-    if (!state.connected) {
+    switch (state.peerType) {
-      return null;
+      case "server":
-    }
+        return state.server.id;
-    if (state.peerType == "server") {
+      case "client":
-      return state.server.id;
+        return state.peer.id;
-    } else {
-      return state.peer.id;
     }
+    return null;
+  },
+
+  connectionType(state): "client" | "server" | "none" {
+    return state.peerType;
   }
 };
 

src/store/network/index.ts

@@ -2,21 +2,20 @@ import { NetworkState } from "./types";
 import { AppState } from "../types";
 import { Module } from "vuex";
 
+import actions from "./actions";
 import getters from "./getters";
 
 const namespaced = true;
 
 export const state: NetworkState = {
-  connecting: false,
+  peerType: "none",
-  connected: false,
-  name: "",
   chatLog: []
 };
 
 export const network: Module<NetworkState, AppState> = {
   namespaced,
   state,
-  //actions,
+  actions,
   //mutations,
   getters
 };

src/store/network/mutations.ts

@@ -0,0 +1,29 @@
+import { MutationTree } from "vuex";
+import { NetworkState, ServerNetworkState, ClientNetworkState } from "./types";
+import { LocalClient, PeerServer, PeerClient } from "@/network";
+
+const mutations: MutationTree<NetworkState> = {
+  becomeServer(state, payload: { local: LocalClient; server: PeerServer }) {
+    state = {
+      ...state,
+      peerType: "server",
+      local: payload.local,
+      server: payload.server
+    };
+  },
+
+  becomeClient(state, payload: { peer: PeerClient }) {
+    state = {
+      ...state,
+      connectionStatus: "connecting",
+      peerType: "client",
+      peer: payload.peer
+    };
+  },
+
+  connected(state) {
+    (state as ClientNetworkState).connectionStatus = "connected";
+  }
+};
+
+export default mutations;

src/store/network/types.ts

@@ -1,4 +1,11 @@
-import { PeerClient, PeerServer, LocalClient } from "@/network";
+import {
+  PeerClient,
+  PeerServer,
+  LocalClient,
+  RoomInfo,
+  PeerMetadata
+} from "@/network";
+import Peer from "peerjs";
 
 export interface ChatMessage {
   who: string;
@@ -7,23 +14,21 @@ export interface ChatMessage {
 }
 
 export interface SharedNetworkState {
-  name: string;
   chatLog: ChatMessage[];
 }
 
 export interface NoNetworkState extends SharedNetworkState {
-  connecting: boolean;
+  peerType: "none";
-  connected: false;
 }
 
 export interface ClientNetworkState extends SharedNetworkState {
-  connected: true;
   peerType: "client";
+  connectionStatus: "connecting" | "connected" | "error";
+  connectionError?: Error;
   peer: PeerClient;
 }
 
 export interface ServerNetworkState extends SharedNetworkState {
-  connected: true;
   peerType: "server";
   server: PeerServer;
   local: LocalClient;
@@ -33,3 +38,19 @@ export type NetworkState =
   | NoNetworkState
   | ClientNetworkState
   | ServerNetworkState;
+
+export interface StartServerOptions {
+  roomInfo: RoomInfo;
+  playerInfo: PeerMetadata;
+
+  // Testing utils
+  _customPeer?: Peer;
+}
+
+export interface ConnectOptions {
+  serverID: string;
+  playerInfo: PeerMetadata;
+
+  // Testing utils
+  _customPeer?: Peer;
+}