Disable host check for ngrok support

src/views/Lobby.vue

@@ -2,70 +2,62 @@
   <section class="lobby">
     <TopNav />
     <section class="body">
-      <section class="host">
+      <section id="info">
-        <header>
+        <b-field label="Your name">
-          <h1>Host a new session</h1>
+          <b-input v-model="playerName"></b-input>
-        </header>
-        <b-field label="Session type" />
-        <b-field>
-          <b-radio-button
-            class="full-btn"
-            v-model="hostType"
-            native-value="game"
-          >
-            <span>Game</span>
-          </b-radio-button>
-          <b-radio-button
-            class="full-btn"
-            v-model="hostType"
-            native-value="draft"
-          >
-            <span>Draft</span>
-          </b-radio-button>
         </b-field>
-        <div v-if="hostType == 'game'">
-          <!--TODO-->
-        </div>
-        <div v-if="hostType == 'draft'">
-          <b-field label="Draft type">
-            <b-select v-model="hostDraftType" placeholder="Select type">
-              <option value="set">Set draft</option>
-              <option value="cube">Cube (random) draft</option>
-              <option value="i8pcube">Cube (seeded) draft</option>
-            </b-select>
-          </b-field>
-          <b-field label="Set" v-if="hostDraftType == 'set'">
-            <b-select v-model="hostDraftSet" placeholder="Select set">
-              <option v-for="set in sets" :key="set" :value="set">
-                {{ setNames[set] }}
-              </option>
-            </b-select>
-          </b-field>
-          <b-field
-            label="Cube URL"
-            v-if="hostDraftType == 'cube' || hostDraftType == 'i8pcube'"
-          >
-            <b-input v-model="hostDraftCubeURL"></b-input>
-          </b-field>
-        </div>
-        <div class="center">
-          <b-button type="is-primary" class="wide" :disabled="!canHost">
-            Create
-          </b-button>
-        </div>
       </section>
-      <section class="join">
+      <section id="join">
         <header>
           <h1>Join someone's session</h1>
         </header>
-        <b-field label="Session ID">
+        <b-field label="Session ID" class="only-full">
           <b-input v-model="joinSessionID"></b-input>
         </b-field>
-        <div class="center submit">
+        <div class="center submit only-full">
-          <b-button type="is-primary" class="wide" :disabled="!canJoin">
+          <b-button
+            type="is-primary"
+            @click="join"
+            class="wide"
+            :disabled="!canJoin"
+          >
             Join
           </b-button>
         </div>
+        <b-field class="only-mobile full">
+          <b-input placeholder="Session ID" v-model="joinSessionID"></b-input>
+          <p class="control">
+            <b-button type="is-primary" @click="join" :disabled="!canJoin">
+              Join
+            </b-button>
+          </p>
+        </b-field>
+      </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
+                controls-position="compact"
+                v-model="hostMaxPlayers"
+              ></b-numberinput>
+            </b-field>
+          </div>
+          <div class="column">
+            <b-field label="Password">
+              <b-input v-model="hostPassword"></b-input>
+            </b-field>
+          </div>
+        </div>
+
+        <div class="center">
+          <b-button type="is-primary" @click="create" class="wide">
+            Create
+          </b-button>
+        </div>
       </section>
     </section>
   </section>
@@ -85,16 +77,33 @@
 
 .body {
   flex: 1;
-  display: flex;
+  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;
-    flex: 1;
     header {
       font-family: $fantasy;
       h1 {
@@ -111,6 +120,11 @@
   margin: 10px auto;
 }
 
+.full {
+  width: 100%;
+  margin: 10px;
+}
+
 .center {
   width: 100%;
   text-align: center;
@@ -123,15 +137,26 @@
   }
 }
 
+.only-mobile {
+  display: none;
+}
+
 @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;
       }
     }
-    flex-flow: column-reverse;
   }
 }
 </style>
@@ -139,7 +164,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
-import { allSets, setNames } from "../mlpccg";
+import { StartServerOptions } from "@/store/network/types";
+import { Action } from "vuex-class";
 
 @Component({
   components: {
@@ -147,53 +173,43 @@ import { allSets, setNames } from "../mlpccg";
   }
 })
 export default class Lobby extends Vue {
-  private hostType!: string;
+  private playerName!: string;
-  private hostDraftType!: string;
+  private hostMaxPlayers!: number;
-  private hostDraftSet!: string;
+  private hostPassword!: string;
-  private hostDraftCubeURL!: string;
   private joinSessionID!: string;
   private sets!: string[];
   private setNames!: Record<string, string>;
 
+  @Action("startServer", { namespace: "network" })
+  private startServer!: (options: StartServerOptions) => void;
+
   private data() {
     return {
-      hostType: "game",
+      playerName:
-      hostDraftType: "set",
+        "Guest-" +
-      hostDraftSet: "FF",
+        Math.random()
-      hostDraftCubeURL: "",
+          .toString()
-      joinSessionID: "",
+          .slice(2, 8),
-      sets: allSets,
+      hostMaxPlayers: 8,
-      setNames: setNames
+      hostPassword: "",
+      joinSessionID: ""
     };
   }
 
-  private get canHost(): boolean {
+  private async create() {
-    switch (this.hostType) {
+    this.startServer({
-      case "game":
+      playerInfo: {
-        return true;
+        name: this.playerName
-      case "draft":
+      },
-        switch (this.hostDraftType) {
+      roomInfo: {
-          case "set":
+        max_players: 8,
-            if (!this.sets.includes(this.hostDraftSet)) {
+        password: ""
-              return false;
+      }
-            }
+    });
-            return true;
-          case "block":
-            //TODO
-            return false;
-          case "cube":
-          case "i8pcube":
-            if (this.hostDraftCubeURL == "") {
-              return false;
-            }
-            return true;
-        }
-        return false;
-      default:
-        return false;
-    }
   }
 
+  private async join() {}
+
   private get canJoin(): boolean {
     return this.joinSessionID != "";
   }

vue.config.js

@@ -1,4 +1,11 @@
 module.exports = {
+  configureWebpack: {
+    devServer: {
+      disableHostCheck: true,
+      host: "0.0.0.0"
+    }
+  },
+
   publicPath: process.env.SUBPATH ? process.env.SUBPATH : "",
 
   pluginOptions: {