From f08c101555bbe4617348910cdf4d0ac63b608547 Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Wed, 4 Sep 2019 12:19:29 +0200
Subject: [PATCH] Add some empty pages

---
 src/assets/scss/app.scss  |  1 +
 src/router.ts             | 18 ++++++++++++
 src/views/DeckBuilder.vue |  6 +++-
 src/views/Draft.vue       | 62 +++++++++++++++++++++++++++++++++++++++
 src/views/Game.vue        | 15 ++++++++++
 src/views/Lobby.vue       | 13 ++++++++
 6 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Draft.vue
 create mode 100644 src/views/Game.vue
 create mode 100644 src/views/Lobby.vue

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 04c592c..c0100c5 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -8,6 +8,7 @@
 html {
     scrollbar-color: #404245 #2f3132;
     background-color: #2a2c2e;
+    overflow: auto;
 }
 
 body {
diff --git a/src/router.ts b/src/router.ts
index 915038f..e3ce22f 100644
--- a/src/router.ts
+++ b/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
     }
   ]
 });
diff --git a/src/views/DeckBuilder.vue b/src/views/DeckBuilder.vue
index eb708ae..f6ccc0f 100644
--- a/src/views/DeckBuilder.vue
+++ b/src/views/DeckBuilder.vue
@@ -1,4 +1,8 @@
-<template> </template>
+<template>
+  <section class="deckbuilder">
+
+  </section>
+</template>
 
 <style lang="scss" scoped>
 </style>
diff --git a/src/views/Draft.vue b/src/views/Draft.vue
new file mode 100644
index 0000000..43c6e78
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Game.vue b/src/views/Game.vue
new file mode 100644
index 0000000..c368b4c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Lobby.vue b/src/views/Lobby.vue
new file mode 100644
index 0000000..f724671
--- /dev/null
+++ b/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>
\ No newline at end of file