src/views/Lobby.vue

@@ -2,7 +2,30 @@
   <section class="lobby">
     <TopNav />
     <section class="body">
-      <section class="host">
+      <section id="info">
+        <b-field label="Your name">
+          <b-input v-model="playerName"></b-input>
+        </b-field>
+      </section>
+      <section id="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"
+            @click="join"
+            class="wide"
+            :disabled="!canJoin"
+          >
+            Join
+          </b-button>
+        </div>
+      </section>
+      <section id="host">
         <header>
           <h1>Host a new session</h1>
         </header>
@@ -49,24 +72,16 @@
           </b-field>
         </div>
         <div class="center">
-          <b-button type="is-primary" class="wide" :disabled="!canHost">
+          <b-button
+            type="is-primary"
+            @click="create"
+            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>
@@ -85,16 +100,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 {
@@ -125,13 +157,19 @@
 
 @media (max-width: 500px) {
   .body {
+    grid-template: 120px 1fr 1fr /1fr;
+    #info,
+    #join,
+    #host {
+      grid-row: auto;
+      grid-column: auto;
+    }
     section {
       padding: 10px;
       header h1 {
         font-size: 14pt;
       }
     }
-    flex-flow: column-reverse;
   }
 }
 </style>
@@ -147,6 +185,7 @@ import { allSets, setNames } from "../mlpccg";
   }
 })
 export default class Lobby extends Vue {
+  private playerName!: string;
   private hostType!: string;
   private hostDraftType!: string;
   private hostDraftSet!: string;
@@ -157,6 +196,11 @@ export default class Lobby extends Vue {
 
   private data() {
     return {
+      playerName:
+        "Guest-" +
+        Math.random()
+          .toString()
+          .slice(2, 8),
       hostType: "game",
       hostDraftType: "set",
       hostDraftSet: "FF",
@@ -167,6 +211,10 @@ export default class Lobby extends Vue {
     };
   }
 
+  private async create() {}
+
+  private async join() {}
+
   private get canHost(): boolean {
     switch (this.hostType) {
       case "game":