2019-10-16 08:31:04 +00:00
13 changed files with 595 additions and 108 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,18 +1,22 @@
 <!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>mcgvue</title>
-  </head>
-  <body>
-    <noscript>
-      <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>
+
+<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>
+</head>
+
+<body>
+  <noscript>
+    <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/mlpccg/set.ts
+++ b/src/mlpccg/set.ts
@ -19,6 +19,23 @@ export const allSets = [
  "Promo"
 ];

+export const setNames = {
+  PR: "Premiere",
+  CN: "Canterlot Nights",
+  RR: "Rock and Rave",
+  CS: "Celestial Solstice",
+  CG: "Crystal Games",
+  AD: "Absolute Discord",
+  EO: "Equestrian Odysseys",
+  HM: "High Magic",
+  MT: "Marks In Time",
+  DE: "Defenders of Equestria",
+  SB: "Seaquestria and Beyond",
+  FF: "Friends Forever",
+  GF: "Promotional",
+  ST: "Sands of Time"
+};
+
 export async function loadSets() {
  if (Database == null) {
    throw new Error("Database was not initialized, init with 'initDB()'");
--- a/src/network/Client.ts
+++ b/src/network/Client.ts
@ -1,10 +1,7 @@
-import {
-  PeerMetadata,
-  NetworkMessage,
-  PasswordResponse,
-  RoomInfo
-} from "./types";
 import EventEmitter from "eventemitter3";
+import Vue from "vue";
+
+import { NetworkMessage, PasswordResponse, PeerMetadata, RoomInfo } from "./types";

 export abstract class Client extends EventEmitter {
  public metadata: PeerMetadata;
@ -23,13 +20,19 @@ export abstract class Client extends EventEmitter {
      case "room-info":
        this.roomInfo = data.room;
        this.players = data.players;
+        this.emit("handshake");
        break;
      // Someone changed name (or was forced to)
      case "rename":
        if (data.oldname == this.metadata.name) {
          // We got a name change!
          this.metadata.name = data.newname;
-        } else {
+        }
+
+        // Only mutate player list if we have one
+        // 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);
          if (idx < 0) {
            // Weird
@ -39,7 +42,7 @@ export abstract class Client extends EventEmitter {
            this.players.push(data.newname);
            break;
          }
-          this.players[idx] = data.newname;
+          Vue.set(this.players, idx, data.newname);
        }
        this.emit("rename", data.oldname, data.newname);
        break;
--- a/src/network/PeerServer.ts
+++ b/src/network/PeerServer.ts
@ -1,23 +1,24 @@
+import EventEmitter from "eventemitter3";
 import Peer, { DataConnection } from "peerjs";
+
+import { LocalClient } from ".";
 import {
-  RoomInfo,
-  PasswordRequest,
-  Room,
+  AckMessage,
+  ChatMessage,
  ErrorMessage,
+  JoinMessage,
+  LeaveMessage,
+  NetworkMessage,
+  NetworkPlayer,
+  PasswordRequest,
  PasswordResponse,
  PeerMetadata,
-  JoinMessage,
-  RoomInfoMessage,
  Player,
-  NetworkMessage,
  RenameMessage,
-  LeaveMessage,
-  NetworkPlayer,
-  AckMessage,
-  ChatMessage
+  Room,
+  RoomInfo,
+  RoomInfoMessage,
 } from "./types";
-import { LocalClient } from ".";
-import EventEmitter from "eventemitter3";

 // Increment name, add number at the end if not present
 // Examples:
@ -34,6 +35,12 @@ function nextName(name: string): string {
  return name.substr(0, i) + (Number(name.slice(i)) + 1);
 }

+function connectionOpen(conn: DataConnection): Promise<void> {
+  return new Promise(resolve => {
+    conn.on("open", () => resolve());
+  });
+}
+
 export class PeerServer extends EventEmitter {
  protected peer: Peer;
  private room: Room;
@ -64,17 +71,21 @@ export class PeerServer extends EventEmitter {

    // Setup peer
    this.peer = customPeer ? customPeer : new Peer();
-    this.peer.on("open", function(id) {
+    this.peer.on("open", id => {
      console.info("Peer ID assigned: %s", id);
+      this.emit("open", id);
    });
    this.peer.on("connection", conn => {
      this._connection(conn);
    });
  }

-  private _connection(conn: DataConnection) {
+  private async _connection(conn: DataConnection) {
    const metadata = conn.metadata as PeerMetadata;

+    // Wait for connection to be open
+    await connectionOpen(conn);
+
    let player: NetworkPlayer = {
      kind: "remote",
      name: metadata.name,
@ -140,6 +151,12 @@ export class PeerServer extends EventEmitter {

  private addPlayer(player: NetworkPlayer) {
    const playerName = player.name;
+
+    // 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);
+
+    // Add player to room
    this.room.players[playerName] = player;

    // Start listening for new messages
@ -148,6 +165,10 @@ export class PeerServer extends EventEmitter {
      this._received.bind(this, this.room.players[playerName])
    );

+    player.conn.on("error", err => {
+      throw err;
+    });
+
    // Send the player info about the room
    this.send<RoomInfoMessage>(player, {
      kind: "room-info",
@ -155,7 +176,7 @@ export class PeerServer extends EventEmitter {
        ...this.room.info,
        password: ""
      },
-      players: Object.keys(this.room.players)
+      players
    });

    // Notify other players
@ -172,6 +193,9 @@ export class PeerServer extends EventEmitter {
    // Close connection with player
    player.conn.close();

+    // Remove player from player list
+    delete this.room.players[player.name];
+
    // Notify other players
    this.broadcast<LeaveMessage>({
      kind: "player-left",
@ -189,16 +213,30 @@ export class PeerServer extends EventEmitter {
          this.broadcast(data);
        } else {
          // Player is telling someone specifically
-          if (data.to in this.players) {
-            this.send<ChatMessage>(this.players[data.to], data);
-          } else {
+          if (!(data.to in this.players)) {
            this.send<ErrorMessage>(player, {
              kind: "error",
              error: `player not found: ${data.to}`
            });
+            return;
          }
+          this.send<ChatMessage>(this.players[data.to], data);
        }
        break;
+      // Player wants to change name
+      case "rename":
+        // Make sure new name is valid
+        data.oldname = player.name;
+        if (data.newname in this.players) {
+          this.send<ErrorMessage>(player, {
+            kind: "error",
+            error: "name not available"
+          });
+          return;
+        }
+        player.name = data.newname;
+        this.broadcast<RenameMessage>(data);
+        break;
      // Player is leaving!
      case "leave-req":
        // If we're leaving, end the server
--- a/src/router.ts
+++ b/src/router.ts
@ -1,12 +1,11 @@
+import DeckBuilder from "@/views/DeckBuilder.vue";
+import DraftView from "@/views/Draft.vue";
+import GameView from "@/views/Game.vue";
+import Home from "@/views/Home.vue";
+import Lobby from "@/views/Lobby.vue";
+import SettingsView from "@/views/Settings.vue";
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "@/views/Home.vue";
-import DeckBuilder from "@/views/DeckBuilder.vue";
-import GameView from "@/views/Game.vue";
-import DraftView from "@/views/Draft.vue";
-import Lobby from "@/views/Lobby.vue";
-import RoomView from "@/views/Room.vue";
-import SettingsView from "@/views/Settings.vue";

 Vue.use(Router);

@ -46,9 +45,12 @@ export default new Router({
      }
    },
    {
-      path: "/room",
-      name: "room",
-      component: RoomView
+      path: "/join/:id",
+      name: "lobby-join",
+      component: Lobby,
+      meta: {
+        topnav: "Lobby"
+      }
    },
    {
      path: "/settings",
--- a/src/store/network/actions.ts
+++ b/src/store/network/actions.ts
@ -1,28 +1,58 @@
-import { ActionTree } from "vuex";
+import { ChatMessage, Client, LocalClient, NetworkMessage, PeerClient, PeerServer } from "@/network";
+import { ActionTree, Commit } from "vuex";
+
 import { AppState } from "../types";
-import { NetworkState, StartServerOptions, ConnectOptions } from "./types";
-import { PeerServer, LocalClient, PeerClient } from "@/network";
+import { ConnectOptions, NetworkState, StartServerOptions } from "./types";
+
+function bindClientEvents(commit: Commit, client: Client) {
+  client.on("handshake", () => {
+    commit("playerListChanged", client.players);
+  });
+  client.on("player-joined", () => commit("playerListChanged", client.players));
+  client.on("player-left", () => commit("playerListChanged", client.players));
+  client.on("rename", () => commit("playerListChanged", client.players));
+}

 const actions: ActionTree<NetworkState, AppState> = {
  startServer({ commit }, options: StartServerOptions) {
    const local = new LocalClient(options.playerInfo);
    const server = new PeerServer(options.roomInfo, local, options._customPeer);
+    server.once("open", id => {
+      commit("serverAssignedID", id);
+    });
+    bindClientEvents(commit, local);
    commit("becomeServer", { local, server });
  },

  connect({ commit }, options: ConnectOptions) {
    const client = new PeerClient(options.playerInfo, options._customPeer);
-    commit("becomeClient", { peer: client });
+    commit("becomeClient", { peer: client, id: options.serverID });
    client.on("connected", () => {
-      commit("connected");
+      commit("connectionStatusChanged", "connected");
    });
    client.on("disconnected", () => {
-      commit("disconnected");
+      commit("connectionStatusChanged", "disconnected");
    });
    client.on("error", err => {
      commit("connectionError", err);
    });
+    bindClientEvents(commit, client);
    client.connect(options.serverID);
+  },
+
+  sendChatMessage({ commit, dispatch, getters }, message: ChatMessage) {
+    if (getters.connectionType == "none") {
+      throw new Error("not connected");
+    }
+    dispatch("sendMessage", message);
+    commit("receivedChatMessage", message);
+  },
+
+  sendMessage({ getters }, message: NetworkMessage) {
+    if (getters.connectionType == "none") {
+      throw new Error("not connected");
+    }
+    (getters.client as Client).send(message);
  }
 };

--- a/src/store/network/getters.ts
+++ b/src/store/network/getters.ts
@ -1,4 +1,6 @@
+import { Client } from "@/network";
 import { GetterTree } from "vuex";
+
 import { AppState } from "../types";
 import { NetworkState } from "./types";

@ -13,8 +15,45 @@ const getters: GetterTree<NetworkState, AppState> = {
    return null;
  },

+  sessionID(state): string | null {
+    return state.serverID;
+  },
+
+  client(state): Client | null {
+    switch (state.peerType) {
+      case "server":
+        return state.local;
+      case "client":
+        return state.peer;
+    }
+    return null;
+  },
+
  connectionType(state): "client" | "server" | "none" {
    return state.peerType;
+  },
+
+  busy(state): boolean {
+    if (state.peerType == "client") {
+      if (state.connectionStatus == "connecting") {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  inRoom(state): boolean {
+    if (state.peerType == "client") {
+      return state.connectionStatus == "connected";
+    }
+    if (state.peerType == "server") {
+      return true;
+    }
+    return false;
+  },
+
+  players(state): string[] {
+    return state.players;
  }
 };

--- a/src/store/network/index.ts
+++ b/src/store/network/index.ts
@ -10,6 +10,12 @@ const namespaced = true;

 export const state: NetworkState = {
  peerType: "none",
+  connectionStatus: null,
+  peer: null,
+  server: null,
+  local: null,
+  serverID: null,
+  players: [],
  chatLog: []
 };

--- a/src/store/network/mutations.ts
+++ b/src/store/network/mutations.ts
@ -1,37 +1,43 @@
+import { ChatMessage, LocalClient, PeerClient, PeerServer } from "@/network";
+import Vue from "vue";
 import { MutationTree } from "vuex";
-import { NetworkState, ServerNetworkState, ClientNetworkState } from "./types";
-import { LocalClient, PeerServer, PeerClient } from "@/network";
+
+import { ClientNetworkState, ConnectionStatus, NetworkState, ServerNetworkState } from "./types";

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

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

-  connected(state) {
-    (state as ClientNetworkState).connectionStatus = "connected";
-  },
-
-  disconnected(state) {
-    (state as ClientNetworkState).connectionStatus = "disconnected";
+  connectionStatusChanged(state, status: ConnectionStatus) {
+    (state as ClientNetworkState).connectionStatus = status;
  },

  connectionError(state, error) {
    (state as ClientNetworkState).connectionStatus = "error";
    (state as ClientNetworkState).connectionError = error;
+  },
+
+  receivedChatMessage(state, message: ChatMessage) {
+    state.chatLog.push(message);
+  },
+
+  serverAssignedID(state, id: string) {
+    state.serverID = id;
+  },
+
+  playerListChanged(state, players: string[]) {
+    Vue.set(state, "players", players);
  }
 };

--- a/src/store/network/types.ts
+++ b/src/store/network/types.ts
@ -1,29 +1,30 @@
-import {
-  PeerClient,
-  PeerServer,
-  LocalClient,
-  RoomInfo,
-  PeerMetadata
-} from "@/network";
+import { ChatMessage, LocalClient, PeerClient, PeerMetadata, PeerServer, RoomInfo } from "@/network";
 import Peer from "peerjs";

-export interface ChatMessage {
-  who: string;
-  to: string;
-  message: string;
-}
+export type ConnectionStatus =
+  | "connecting"
+  | "connected"
+  | "disconnected"
+  | "error";

 export interface SharedNetworkState {
  chatLog: ChatMessage[];
+  serverID: string | null;
+  players: string[];
 }

 export interface NoNetworkState extends SharedNetworkState {
  peerType: "none";
+  connectionStatus: null;
+  connectionError?: Error;
+  peer: null;
+  server: null;
+  local: null;
 }

 export interface ClientNetworkState extends SharedNetworkState {
  peerType: "client";
-  connectionStatus: "connecting" | "connected" | "disconnected" | "error";
+  connectionStatus: ConnectionStatus;
  connectionError?: Error;
  peer: PeerClient;
 }
--- a/src/views/Lobby.vue
+++ b/src/views/Lobby.vue
@ -1,26 +1,374 @@
 <template>
  <section class="lobby">
    <TopNav />
+    <section v-if="!inRoom" class="body">
+      <section id="info">
+        <b-field label="Your name">
+          <b-input :disabled="busy" v-model="playerName"></b-input>
+        </b-field>
+      </section>
+      <section id="join">
+        <header>
+          <h1>Join someone's session</h1>
+        </header>
+        <b-field label="Session ID" class="only-full">
+          <b-input :disabled="busy" v-model="joinSessionID"></b-input>
+        </b-field>
+        <div class="center submit only-full">
+          <b-button
+            type="is-primary"
+            @click="join"
+            class="wide"
+            :disabled="busy || !canJoin"
+          >
+            Join
+          </b-button>
+        </div>
+        <div class="only-mobile">
+          <b-field class="full">
+            <b-input
+              :disabled="busy"
+              placeholder="Session ID"
+              v-model="joinSessionID"
+            ></b-input>
+            <p class="control">
+              <b-button
+                type="is-primary"
+                @click="join"
+                :disabled="busy || !canJoin"
+              >
+                Join
+              </b-button>
+            </p>
+          </b-field>
+        </div>
+      </section>
+      <section id="host">
+        <header>
+          <h1>Host a new session</h1>
+        </header>
+        <div class="columns">
+          <div class="column">
+            <b-field label="Max players">
+              <b-numberinput
+                :disabled="busy"
+                controls-position="compact"
+                v-model="hostMaxPlayers"
+                min="2"
+                max="8"
+              ></b-numberinput>
+            </b-field>
+          </div>
+          <div class="column">
+            <b-field label="Password">
+              <b-input :disabled="busy" v-model="hostPassword"></b-input>
+            </b-field>
+          </div>
+        </div>
+
+        <div class="center">
+          <b-button
+            :disabled="busy"
+            type="is-primary"
+            @click="create"
+            class="wide"
+          >
+            Create
+          </b-button>
+        </div>
+      </section>
+    </section>
+    <section class="room" v-else>
+      <section class="info">
+        Invite your friends:
+        <span class="selectable"
+          ><a :href="inviteLink">{{ inviteLink }}</a></span
+        >
+      </section>
+      <section class="chat"></section>
+      <section class="players">
+        <header>Players</header>
+        <ul>
+          <li class="selectable" v-for="player in players" :key="player">
+            {{ player }}
+          </li>
+        </ul>
+      </section>
+      <section class="player-options">
+        <b-field>
+          <b-input :disabled="busy" v-model="wantedName"></b-input>
+          <p class="control">
+            <b-button
+              @click="changeName"
+              type="is-primary"
+              :disabled="!nameAvailable"
+              >Change name</b-button
+            >
+          </p>
+        </b-field>
+        <b-button type="is-danger">Leave room</b-button>
+      </section>
+    </section>
  </section>
 </template>

 <style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
 .lobby {
  background: url("../assets/images/backgrounds/menubg.webp") center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
+  display: flex;
+  flex-flow: column;
+}
+
+.body {
+  flex: 1;
+  display: grid;
+  padding: 10px;
+  padding-top: 0;
+  grid-template: 150px 1fr / 1fr 1fr;
+
+  #info {
+    grid-row: 1;
+    grid-column: 1 / end;
+  }
+
+  #join,
+  #host {
+    grid-row: 2;
+  }
+
+  #join {
+    grid-column: 2;
+  }
+  #host {
+    grid-column: 1;
+  }
+
+  section {
+    margin: 10px;
+    border: 1px solid rgba($white, 20%);
+    border-radius: 10px;
+    padding: 20px;
+    header {
+      font-family: $fantasy;
+      h1 {
+        text-align: center;
+        font-size: 18pt;
+      }
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.wide {
+  min-width: 30%;
+  margin: 10px auto;
+}
+
+.full {
+  width: 100%;
+  margin: 10px;
+}
+
+.center {
+  width: 100%;
+  text-align: center;
+}
+
+.full-btn {
+  flex: 1;
+  :global(.button) {
+    width: 100%;
+  }
+}
+
+.room {
+  padding: 10px 20px;
+  margin: 10px;
+  border: 1px solid rgba($white, 20%);
+  border-radius: 10px;
+  display: grid;
+  grid-template: 50px 1fr / 200px 1fr 300px;
+
+  .info {
+    grid-column: 1 / max;
+    grid-row: 1;
+  }
+
+  .players {
+    header {
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+    grid-row: 2 / max;
+    grid-column: 1;
+  }
+
+  .chat {
+    grid-row: 2 / max;
+    grid-column: 2;
+  }
+
+  .player-options {
+    grid-row: 2 / max;
+    grid-column: 3;
+  }
+}
+
+.only-mobile {
+  display: none;
+}
+
+.selectable {
+  user-select: all;
+}
+
+@media (max-width: 500px) {
+  .only-full {
+    display: none;
+  }
+  .only-mobile {
+    display: inherit;
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    section {
+      padding: 10px;
+      header h1 {
+        font-size: 14pt;
+      }
+    }
+  }
+
+  .room {
+    display: flex;
+    flex-flow: column;
+    & > * {
+      padding: 10px;
+    }
+  }
 }
 </style>

 <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 { Action, Getter } from "vuex-class";
+import { Client, NetworkMessage } from "@/network";
+
+const networkNS = { namespace: "network" };

@Component({
  components: {
    TopNav
  }
 })
-export default class Lobby extends Vue {}
+export default class Lobby extends Vue {
+  private playerName!: string;
+  private hostMaxPlayers!: number;
+  private hostPassword!: string;
+  private joinSessionID!: string;
+  private wantedName!: string;
+
+  @Action("startServer", networkNS)
+  private startServer!: (options: StartServerOptions) => void;
+
+  @Action("sendMessage", networkNS)
+  private sendMessage!: (message: NetworkMessage) => void;
+
+  @Action("connect", networkNS)
+  private connect!: (options: ConnectOptions) => void;
+
+  @Getter("inRoom", networkNS)
+  private inRoom!: boolean;
+
+  @Getter("busy", networkNS)
+  private busy!: boolean;
+
+  @Getter("sessionID", networkNS)
+  private sessionID!: string | null;
+
+  @Getter("players", networkNS)
+  private players!: string[];
+
+  private data() {
+    const playerName =
+      "Guest-" +
+      Math.random()
+        .toString()
+        .slice(2, 8);
+    return {
+      playerName,
+      hostMaxPlayers: 8,
+      hostPassword: "",
+      joinSessionID: "",
+      wantedName: playerName
+    };
+  }
+
+  private mounted() {
+    if ("id" in this.$route.params) {
+      this.joinSessionID = this.$route.params.id;
+      this.join();
+    }
+  }
+
+  private async create() {
+    this.wantedName = this.playerName;
+    this.startServer({
+      playerInfo: {
+        name: this.playerName
+      },
+      roomInfo: {
+        max_players: this.hostMaxPlayers,
+        password: this.hostPassword
+      }
+    });
+  }
+
+  private async join() {
+    this.wantedName = this.playerName;
+    this.connect({
+      serverID: this.joinSessionID,
+      playerInfo: {
+        name: this.playerName
+      }
+    });
+  }
+
+  private async changeName() {
+    this.sendMessage({
+      kind: "rename",
+      oldname: this.playerName,
+      newname: this.wantedName
+    });
+  }
+
+  private get canJoin(): boolean {
+    return this.joinSessionID != "";
+  }
+
+  private get inviteLink(): string {
+    let subpath = "";
+    const joinIndex = location.pathname.indexOf("/join");
+    if (joinIndex > 0) {
+      subpath = location.pathname.substring(0, joinIndex);
+    }
+    const lobbyIndex = location.pathname.indexOf("/lobby");
+    if (lobbyIndex > 0) {
+      subpath = location.pathname.substring(0, lobbyIndex);
+    }
+    return `${location.origin}${subpath}/join/${this.sessionID}`;
+  }
+
+  private get nameAvailable(): boolean {
+    return this.wantedName != "" && !this.players.includes(this.wantedName);
+  }
+}
 </script>
--- a/src/views/Room.vue
+++ b/src/views/Room.vue
@ -1,14 +0,0 @@
-<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>
--- a/vue.config.js
+++ b/vue.config.js
@ -1,5 +1,12 @@
 module.exports = {
-  publicPath: process.env.SUBPATH ? process.env.SUBPATH : "",
+  configureWebpack: {
+    devServer: {
+      disableHostCheck: true,
+      host: "0.0.0.0"
+    }
+  },
+
+  publicPath: process.env.SUBPATH ? process.env.SUBPATH : "/",

  pluginOptions: {
    gitDescribe: {