Add some empty pages

src/assets/scss/app.scss

@@ -8,6 +8,7 @@
 html {
     scrollbar-color: #404245 #2f3132;
     background-color: #2a2c2e;
+    overflow: auto;
 }
 
 body {

src/router.ts

@@ -2,6 +2,9 @@ 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";
 
 Vue.use(Router);
 
@@ -18,6 +21,21 @@ export default new Router({
       path: "/build",
       name: "deck-editor",
       component: DeckBuilder
+    },
+    {
+      path: "/game",
+      name: "game",
+      component: GameView
+    },
+    {
+      path: "/draft",
+      name: "draft",
+      component: DraftView
+    },
+    {
+      path: "/lobby",
+      name: "lobby",
+      component: Lobby
     }
   ]
 });

src/views/DeckBuilder.vue

@@ -1,4 +1,8 @@
-<template> </template>
+<template>
+  <section class="deckbuilder">
+
+  </section>
+</template>
 
 <style lang="scss" scoped>
 </style>

src/views/Draft.vue

@@ -0,0 +1,62 @@
+<template>
+  <section class="draftview">
+    <section class="playerlist">
+      <b>Players</b>
+    </section>
+    <section class="pool"><b>Card pool</b></section>
+    <section class="cardlist"><b>Cards</b></section>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.draftview {
+  display: grid;
+  height: 100vh;
+  grid-gap: 10px;
+  grid-template-columns: 200px 1fr 250px;
+  section {
+    grid-row: 1;
+    border: 1px solid #555;
+  }
+}
+
+@media (max-width: 800px) {
+  .draftview {
+    grid-template-columns: 2fr 250px;
+    .playerlist {
+      grid-row: 1/2;
+      grid-column: 2;
+    }
+    .cardlist {
+      grid-row: 2/3;
+      grid-column: 2;
+    }
+    .pool {
+      grid-column: 1;
+      grid-row: 1/3;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .draftview {
+    grid-template-columns: auto;
+    grid-template-rows: 100px 3fr 1fr;
+    .playerlist,
+    .cardlist,
+    .pool {
+      grid-row: auto;
+      grid-column: auto;
+    }
+  }
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {}
+})
+export default class DraftView extends Vue {}
+</script>

src/views/Game.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="game"></section>
+</template>
+
+<style lang="scss" scoped>
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {}
+})
+export default class GameView extends Vue {}
+</script>

src/views/Lobby.vue

@@ -0,0 +1,13 @@
+<template></template>
+
+<style lang="scss" scoped>
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {}
+})
+export default class Lobby extends Vue {}
+</script>