6 changed files with 65 additions and 62 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,22 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
-  <title>MLPCARDGAME</title>
+    <title>mcgvue</title>
  </head>
-
  <body>
    <noscript>
-    <strong>We're sorry but mcgvue doesn't work properly without JavaScript enabled. Please enable it to
-      continue.</strong>
+      <strong>We're sorry but mcgvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
-
 </html>
--- a/src/router.ts
+++ b/src/router.ts
@ -45,6 +45,11 @@ export default new Router({
        topnav: "Lobby"
      }
    },
+    {
+      path: "/room",
+      name: "room",
+      component: RoomView
+    },
    {
      path: "/settings",
      name: "settings",
--- a/src/store/network/getters.ts
+++ b/src/store/network/getters.ts
@ -15,16 +15,6 @@ const getters: GetterTree<NetworkState, AppState> = {

  connectionType(state): "client" | "server" | "none" {
    return state.peerType;
-  },
-
-  inRoom(state): boolean {
-    if (state.peerType == "client") {
-      return state.connectionStatus == "connected";
-    }
-    if (state.peerType == "server") {
-      return true;
-    }
-    return false;
  }
 };

--- a/src/store/network/mutations.ts
+++ b/src/store/network/mutations.ts
@ -4,15 +4,21 @@ import { LocalClient, PeerServer, PeerClient } from "@/network";

 const mutations: MutationTree<NetworkState> = {
  becomeServer(state, payload: { local: LocalClient; server: PeerServer }) {
-    state.peerType = "server";
-    (state as ServerNetworkState).local = payload.local;
-    (state as ServerNetworkState).server = payload.server;
+    state = {
+      ...state,
+      peerType: "server",
+      local: payload.local,
+      server: payload.server
+    };
  },

  becomeClient(state, payload: { peer: PeerClient }) {
-    state.peerType = "client";
-    (state as ClientNetworkState).connectionStatus = "connecting";
-    (state as ClientNetworkState).peer = payload.peer;
+    state = {
+      ...state,
+      connectionStatus: "connecting",
+      peerType: "client",
+      peer: payload.peer
+    };
  },

  connected(state) {
--- a/src/views/Lobby.vue
+++ b/src/views/Lobby.vue
@ -1,7 +1,7 @@
 <template>
  <section class="lobby">
    <TopNav />
-    <section v-if="!inRoom" class="body">
+    <section class="body">
      <section id="info">
        <b-field label="Your name">
          <b-input :disabled="busy" v-model="playerName"></b-input>
@ -24,8 +24,7 @@
            Join
          </b-button>
        </div>
-        <div class="only-mobile">
-          <b-field class="full">
+        <b-field class="only-mobile full">
          <b-input
            :disabled="busy"
            placeholder="Session ID"
@ -41,7 +40,6 @@
            </b-button>
          </p>
        </b-field>
-        </div>
      </section>
      <section id="host">
        <header>
@ -78,9 +76,6 @@
        </div>
      </section>
    </section>
-    <section class="room" v-else>
-      <section class="info"></section>
-    </section>
  </section>
 </template>

@ -186,7 +181,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 { Action } from "vuex-class";

@Component({
  components: {
@ -206,9 +201,6 @@ export default class Lobby extends Vue {
  @Action("connect", { namespace: "network" })
  private connect!: (options: ConnectOptions) => void;

-  @Getter("inRoom", { namespace: "network" })
-  private inRoom!: boolean;
-
  private data() {
    return {
      playerName:
--- a/src/views/Room.vue
+++ b/src/views/Room.vue
@ -0,0 +1,14 @@
+<template>
+  <section class="room"></section>
+</template>
+
+<style lang="scss" scoped></style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {}
+})
+export default class RoomView extends Vue {}
+</script>