Add invite URL

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);
 
@@ -45,6 +44,14 @@ export default new Router({
         topnav: "Lobby"
       }
     },
+    {
+      path: "/join/:id",
+      name: "lobby-join",
+      component: Lobby,
+      meta: {
+        topnav: "Lobby"
+      }
+    },
     {
       path: "/settings",
       name: "settings",

src/store/network/mutations.ts

@@ -1,15 +1,12 @@
+import { ChatMessage, LocalClient, PeerClient, PeerServer } from "@/network";
 import { MutationTree } from "vuex";
-import {
-  NetworkState,
-  ServerNetworkState,
-  ClientNetworkState,
-  ConnectionStatus
-} from "./types";
-import { LocalClient, PeerServer, PeerClient, ChatMessage } from "@/network";
+
+import { ClientNetworkState, ConnectionStatus, NetworkState, ServerNetworkState } from "./types";
 
 const mutations: MutationTree<NetworkState> = {
   becomeServer(state, payload: { local: LocalClient; server: PeerServer }) {
     state.peerType = "server";
+    state.players = [payload.local.name];
     (state as ServerNetworkState).local = payload.local;
     (state as ServerNetworkState).server = payload.server;
   },

src/views/Lobby.vue

@@ -80,7 +80,10 @@
     </section>
     <section class="room" v-else>
       <section class="info">
-        Session ID: <span class="selectable">{{ sessionID }}</span>
+        Invite your friends:
+        <span class="selectable"
+          ><a :href="inviteLink">{{ inviteLink }}</a></span
+        >
       </section>
       <section class="players">
         Players:
@@ -251,6 +254,13 @@ export default class Lobby extends Vue {
     };
   }
 
+  private mounted() {
+    if ("id" in this.$route.params) {
+      this.joinSessionID = this.$route.params.id;
+      this.join();
+    }
+  }
+
   private async create() {
     this.busy = true;
     this.startServer({
@@ -277,5 +287,18 @@ export default class Lobby extends Vue {
   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}`;
+  }
 }
 </script>

vue.config.js

@@ -6,7 +6,7 @@ module.exports = {
     }
   },
 
-  publicPath: process.env.SUBPATH ? process.env.SUBPATH : "",
+  publicPath: process.env.SUBPATH ? process.env.SUBPATH : "/",
 
   pluginOptions: {
     gitDescribe: {