src/views/Lobby.vue

@@ -4,7 +4,7 @@
     <section class="body">
       <section id="info">
         <b-field label="Your name">
-          <b-input v-model="playerName"></b-input>
+          <b-input :disabled="busy" v-model="playerName"></b-input>
         </b-field>
       </section>
       <section id="join">
@@ -12,22 +12,30 @@
           <h1>Join someone's session</h1>
         </header>
         <b-field label="Session ID" class="only-full">
-          <b-input v-model="joinSessionID"></b-input>
+          <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="!canJoin"
+            :disabled="busy || !canJoin"
           >
             Join
           </b-button>
         </div>
         <b-field class="only-mobile full">
-          <b-input placeholder="Session ID" v-model="joinSessionID"></b-input>
+          <b-input
+            :disabled="busy"
+            placeholder="Session ID"
+            v-model="joinSessionID"
+          ></b-input>
           <p class="control">
-            <b-button type="is-primary" @click="join" :disabled="!canJoin">
+            <b-button
+              type="is-primary"
+              @click="join"
+              :disabled="busy || !canJoin"
+            >
               Join
             </b-button>
           </p>
@@ -41,20 +49,28 @@
           <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 v-model="hostPassword"></b-input>
+              <b-input :disabled="busy" v-model="hostPassword"></b-input>
             </b-field>
           </div>
         </div>
 
         <div class="center">
-          <b-button type="is-primary" @click="create" class="wide">
+          <b-button
+            :disabled="busy"
+            type="is-primary"
+            @click="create"
+            class="wide"
+          >
             Create
           </b-button>
         </div>
@@ -164,7 +180,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
-import { StartServerOptions } from "@/store/network/types";
+import { StartServerOptions, ConnectOptions } from "@/store/network/types";
 import { Action } from "vuex-class";
 
 @Component({
@@ -177,12 +193,14 @@ export default class Lobby extends Vue {
   private hostMaxPlayers!: number;
   private hostPassword!: string;
   private joinSessionID!: string;
-  private sets!: string[];
-  private setNames!: Record<string, string>;
+  private busy!: boolean;
 
   @Action("startServer", { namespace: "network" })
   private startServer!: (options: StartServerOptions) => void;
 
+  @Action("connect", { namespace: "network" })
+  private connect!: (options: ConnectOptions) => void;
+
   private data() {
     return {
       playerName:
@@ -190,6 +208,7 @@ export default class Lobby extends Vue {
         Math.random()
           .toString()
           .slice(2, 8),
+      busy: false,
       hostMaxPlayers: 8,
       hostPassword: "",
       joinSessionID: ""
@@ -197,18 +216,27 @@ export default class Lobby extends Vue {
   }
 
   private async create() {
+    this.busy = true;
     this.startServer({
       playerInfo: {
         name: this.playerName
       },
       roomInfo: {
-        max_players: 8,
-        password: ""
+        max_players: this.hostMaxPlayers,
+        password: this.hostPassword
       }
     });
   }
 
-  private async join() {}
+  private async join() {
+    this.busy = true;
+    this.connect({
+      serverID: this.joinSessionID,
+      playerInfo: {
+        name: this.playerName
+      }
+    });
+  }
 
   private get canJoin(): boolean {
     return this.joinSessionID != "";