Create settings page

src/components/Navigation/TopNav.vue

@@ -1,18 +1,36 @@
 <template>
   <nav>
+    <section class="pages">
       <router-link
         :class="routeClass(route)"
-      v-for="route in routes"
+        v-for="route in mainRoutes"
         :key="route"
         :to="{ name: route }"
         >{{ prettyTitle(route) }}</router-link
       >
+    </section>
+    <section class="icons">
+      <router-link
+        :class="routeClass(route)"
+        v-for="route in iconRoutes"
+        :key="route"
+        :to="{ name: route }"
+        ><b-icon
+          :icon="prettyTitle(route)"
+          class="route-icon"
+          custom-size="mdi-36px"
+      /></router-link>
+    </section>
   </nav>
 </template>
 
 <style lang="scss" scoped>
 @import "@/assets/scss/_variables.scss";
 
+.route-icon {
+  width: 50px;
+}
+
 nav {
   margin-bottom: 1rem;
   display: flex;
@@ -22,13 +40,23 @@ nav {
     rgba(100, 180, 255, 0.1)
   );
 
+  .pages {
+    flex: 1;
+    display: flex;
+  }
+
+  .icons {
+    flex-grow: 0;
+    display: flex;
+  }
+
   .entry {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 50px;
-    max-width: 300px;
+    max-width: 250px;
     text-align: center;
     color: $grey-lighter;
 
@@ -61,17 +89,20 @@ nav {
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
-const routes = ["lobby", "deck-editor"];
+const mainRoutes = ["lobby", "deck-editor"];
+const iconRoutes = ["settings"];
 
 @Component({
   components: {}
 })
 export default class TopNav extends Vue {
-  private routes!: string[];
+  private mainRoutes!: string[];
+  private iconRoutes!: string[];
 
   private data() {
     return {
-      routes
+      mainRoutes,
+      iconRoutes
     };
   }
 

src/router.ts

@@ -6,6 +6,7 @@ import GameView from "@/views/Game.vue";
 import DraftView from "@/views/Draft.vue";
 import Lobby from "@/views/Lobby.vue";
 import RoomView from "@/views/Room.vue";
+import SettingsView from "@/views/Settings.vue";
 
 Vue.use(Router);
 
@@ -48,6 +49,14 @@ export default new Router({
       path: "/room",
       name: "room",
       component: RoomView
+    },
+    {
+      path: "/settings",
+      name: "settings",
+      component: SettingsView,
+      meta: {
+        topnav: "settings"
+      }
     }
   ]
 });

src/views/Lobby.vue

@@ -16,30 +16,11 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import TopNav from "@/components/Navigation/TopNav.vue";
-import { TaskRunner } from "@/workers";
 
 @Component({
   components: {
     TopNav
   }
 })
-export default class Lobby extends Vue {
+export default class Lobby extends Vue {}
-  private mounted() {
-    const worker = new TaskRunner("downloadCardImages");
-    worker.on("dl-progress", progress => {
-      console.log(
-        `Download progress: ${progress.progress}/${
-          progress.total
-        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
-      );
-    });
-    worker.on("ex-progress", progress => {
-      console.log(
-        `Extraction progress: ${progress.progress}/${
-          progress.total
-        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
-      );
-    });
-  }
-}
 </script>

src/views/Settings.vue

@@ -0,0 +1,36 @@
+<template>
+  <section class="settings">
+    <TopNav />
+  </section>
+</template>
+
+<style lang="scss" scoped></style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import TopNav from "@/components/Navigation/TopNav.vue";
+import { TaskRunner } from "@/workers";
+
+@Component({
+  components: { TopNav }
+})
+export default class SettingsView extends Vue {
+  private downloadSets() {
+    const worker = new TaskRunner("downloadCardImages");
+    worker.on("dl-progress", progress => {
+      console.log(
+        `Download progress: ${progress.progress}/${
+          progress.total
+        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
+      );
+    });
+    worker.on("ex-progress", progress => {
+      console.log(
+        `Extraction progress: ${progress.progress}/${
+          progress.total
+        }b (${Math.round((progress.progress * 100) / progress.total)}%)`
+      );
+    });
+  }
+}
+</script>