Add forms for hosting/joining sessions

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()'");

src/views/Lobby.vue

@@ -1,26 +1,201 @@
 <template>
   <section class="lobby">
     <TopNav />
+    <section class="body">
+      <section class="host">
+        <header>
+          <h1>Host a new session</h1>
+        </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">
+        <header>
+          <h1>Join someone's session</h1>
+        </header>
+        <b-field label="Session ID">
+          <b-input v-model="joinSessionID"></b-input>
+        </b-field>
+        <div class="center submit">
+          <b-button type="is-primary" class="wide" :disabled="!canJoin">
+            Join
+          </b-button>
+        </div>
+      </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: flex;
+  padding: 10px;
+  padding-top: 0;
+
+  section {
+    margin: 10px;
+    border: 1px solid rgba($white, 20%);
+    border-radius: 10px;
+    padding: 20px;
+    flex: 1;
+    header {
+      font-family: $fantasy;
+      h1 {
+        text-align: center;
+        font-size: 18pt;
+      }
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.wide {
+  min-width: 30%;
+  margin: 10px auto;
+}
+
+.center {
+  width: 100%;
+  text-align: center;
+}
+
+.full-btn {
+  flex: 1;
+  :global(.button) {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .body {
+    section {
+      padding: 10px;
+      header h1 {
+        font-size: 14pt;
+      }
+    }
+    flex-flow: column-reverse;
+  }
 }
 </style>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
+import { allSets, setNames } from "../mlpccg";
 
 @Component({
   components: {
     TopNav
   }
 })
-export default class Lobby extends Vue {}
+export default class Lobby extends Vue {
+  private hostType!: string;
+  private hostDraftType!: string;
+  private hostDraftSet!: string;
+  private hostDraftCubeURL!: string;
+  private joinSessionID!: string;
+  private sets!: string[];
+  private setNames!: Record<string, string>;
+
+  private data() {
+    return {
+      hostType: "game",
+      hostDraftType: "set",
+      hostDraftSet: "FF",
+      hostDraftCubeURL: "",
+      joinSessionID: "",
+      sets: allSets,
+      setNames: setNames
+    };
+  }
+
+  private get canHost(): boolean {
+    switch (this.hostType) {
+      case "game":
+        return true;
+      case "draft":
+        switch (this.hostDraftType) {
+          case "set":
+            if (!this.sets.includes(this.hostDraftSet)) {
+              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 get canJoin(): boolean {
+    return this.joinSessionID != "";
+  }
+}
 </script>