Home and sidebar implemented

app/imports/ui/components/Sidebar.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="sidebar">
+    <v-parallax src="/png/paper-dice-crown.png" height="140"></v-parallax>
+    <v-list>
+      <v-list-tile
+        v-for="(link, i) in links"
+        :href="link.href"
+        :key="i"
+      >
+        <v-list-tile-action>
+          <v-icon>{{link.icon}}</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-title>
+          {{link.title}}
+        </v-list-tile-title>
+      </v-list-tile>
+      <v-divider></v-divider>
+    </v-list>
+    <v-list dense>
+      <v-list-tile
+        v-for="character in charactersWithNoParty"
+        :href="character.url"
+        :key="character._id"
+      >
+        <v-list-tile-title>
+          {{character.name}}
+        </v-list-tile-title>
+      </v-list-tile>
+      <v-list-group
+        v-for="party in parties"
+        :key="party._id"
+      >
+        <v-list-tile slot="activator">
+          <v-list-tile-title>
+            {{party.name}}
+          </v-list-tile-title>
+        </v-list-tile>
+        <v-list-tile
+          v-for="character in characterDocs"
+          :href="character.url"
+          :key="character._id"
+        >
+          <v-list-tile-title>
+            {{character.name}}
+          </v-list-tile-title>
+        </v-list-tile>
+      </v-list-group>
+    </v-list>
+  </div>
+</template>
+
+<script>
+  export default {
+    data(){
+      return {
+        links: [
+          {title: "Home", icon: "home", href: "/"},
+          {title: "Characters", icon: "group", href: "/characterList"},
+          {title: "Send Feedback", icon: "bug_report", href: "/feedback"},
+          {title: "Patreon", icon: "", href: "https://www.patreon.com/dicecloud"},
+          {title: "Github", icon: "", href: "https://github.com/ThaumRystra/DiceCloud1"},
+        ],
+      };
+    },
+    meteor: {
+      $subscribe: {
+        "characterList": [],
+      },
+      parties(){
+        let parties =  Parties.find(
+    			{owner: Meteor.userId()},
+    			{sort: {name: 1}},
+    		).map(party => {
+          party.characterDocs = Characters.find(
+      			{
+      				_id: {$in: party.characters},
+      				$or: [{readers: userId}, {writers: userId}, {owner: userId}],
+      			}, {
+              sort: {name: 1},
+              fields: {name: 1, urlName: 1},
+            }
+      		).map(char => {
+            char.url = `\/character\/${char._id}\/${char.urlName || "-"}`;
+            return char;
+          });
+          return party;
+        });
+      },
+    	charactersWithNoParty() {
+    		var userId = Meteor.userId();
+    		var charArrays = Parties.find({owner: userId}).map(p => p.characters);
+    		var partyChars = _.uniq(_.flatten(charArrays));
+    		return Characters.find(
+    			{
+    				_id: {$nin: partyChars},
+    				$or: [{readers: userId}, {writers: userId}, {owner: userId}],
+    			},
+    			{sort: {name: 1}}
+    		).map(char => {
+          char.url = `\/character\/${char._id}\/${char.urlName || "-"}`;
+          return char;
+        });
+    	},
+    },
+  };
+</script>

app/imports/ui/layouts/AppLayout.vue

@@ -1,12 +1,14 @@
 <template>
   <v-app light>
     <v-navigation-drawer app v-model="drawer">
+      <Sidebar></Sidebar>
     </v-navigation-drawer>
     <router-view></router-view>
   </v-app>
 </template>
 
 <script>
+  import Sidebar from "/imports/ui/components/Sidebar.vue";
   export default {
     computed: {
       drawer: {
@@ -17,7 +19,10 @@
           this.$store.commit('setDrawer', value);
         },
       }
-    }
+    },
+    components: {
+      Sidebar,
+    },
   };
 </script>
 

app/imports/ui/layouts/ToolbarLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-toolbar app>
+    <v-toolbar app color="primary" dark>
       <v-btn flat icon @click="toggleDrawer">
         <v-icon>menu</v-icon>
       </v-btn>

app/imports/ui/pages/Home.vue

@@ -5,10 +5,10 @@
     </div>
     <div class="content">
       <section>
-        <v-parallax src="/png/paper-dice-crown.png" height="600">
+        <v-parallax src="/png/paper-dice-crown.png" height="300">
           <v-layout column align-center justify-center class="white--text">
             <h1 class="white--text mb-2 display-1 text-xs-center">
-              DiceCloud - Auditable, real-time character tracking for 5th edition
+              DiceCloud - Free, Auditable, real-time character tracking for 5th edition
             </h1>
             <div class="subheading mb-3 text-xs-center">
               Spend less time shuffling paper, and more time playing the game
@@ -16,27 +16,112 @@
           </v-layout>
         </v-parallax>
       </section>
+      <section class="text-xs-center">
+        <v-layout row wrap justify-space-around class="selling-points">
+          <v-layout column align-center>
+            <v-icon x-large class="ma-2">
+              money_off
+            </v-icon>
+            <h3 class="mb-2">
+              Free, open source, community funded
+            </h3>
+            <p>
+              DiceCloud is free to use. Its hosting is funded via Patreon,
+              and the source code is available on Github under a GPL license.
+            </p>
+          </v-layout>
+          <v-layout column align-center>
+            <v-icon x-large class="ma-2">
+              ballot
+            </v-icon>
+            <h3 class="mb-2">
+              Character sheets optimised for one ruleset
+            </h3>
+            <p>
+              By having a narrrow scope, DiceCloud can be the best at what it
+              does: being a fully automated character tracker
+            </p>
+          </v-layout>
+          <v-layout column align-center>
+            <v-icon x-large class="ma-2">
+              scatter_plot
+            </v-icon>
+            <h3 class="mb-2">
+              Inventory manager
+            </h3>
+            <p>
+              Equiping items changes your characters stats automatically. Drag
+              items to other characters, or between sheets open on different
+              tabs.
+            </p>
+          </v-layout>
+        </v-layout>
+      </section>
+      <section class="ma-5">
+        <v-layout row align-center justify-space-around>
+          <v-btn color="accent" round large>
+            Sign up
+          </v-btn>
+        </v-layout>
+      </section>
       <section>
         <h1 class="mb-2 text-xs-center">
           Check out the example characters
         </h1>
-        <v-layout row align-center justify-space-around>
-          <v-card>
-            <v-card-text>
-              Starter set archer
-            </v-card-text>
-          </v-card>
-          <v-card>
-            <v-card-text>
-              Starter set wizard
-            </v-card-text>
-          </v-card>
+        <v-layout row align-center justify-space-around class="pa-4">
+          <a href="/character/yBWwt5XQTTHZiRQxq">
+            <v-hover>
+                <v-card
+                  slot-scope="{ hover }"
+                  :class="`elevation-${hover ? 12 : 2}`"
+                >
+                  <v-card-text>
+                    Starter set archer
+                  </v-card-text>
+                </v-card>
+            </v-hover>
+          </a>
+          <a href="/character/yBWwt5XQTTHZiRQxq">
+            <v-hover>
+                <v-card
+                  slot-scope="{ hover }"
+                  :class="`elevation-${hover ? 12 : 2}`"
+                >
+                  <v-card-text>
+                    Starter set wizard
+                  </v-card-text>
+                </v-card>
+            </v-hover>
+          </a>
         </v-layout>
       </section>
-      <section>
-        <!-- social links -->
+      <section class="text-xs-center grey darken-3 white--text pa-5">
+        <h1>
+          Get involved in the DiceCloud community
+        </h1>
+        <v-layout row wrap align-center justify-space-around class="pa-4">
+          <v-btn href="https://reddit.com/r/dicecloud" flat large color="secondary">
+            Reddit
+          </v-btn>
+          <v-flex>
+            <v-btn href="https://discord.gg/qEvdfeB" flat large color="secondary">
+              Discord
+            </v-btn>
+          </v-flex>
+          <v-flex>
+            <v-btn href="https://www.patreon.com/dicecloud" flat large color="secondary">
+              Patreon
+            </v-btn>
+          </v-flex>
+          <v-flex>
+            <v-btn href="https://github.com/ThaumRystra/DiceCloud" flat large color="secondary">
+              Github
+            </v-btn>
+          </v-flex>
+        </v-layout>
       </section>
     </div>
+    <v-footer></v-footer>
   </toolbar-layout>
 </template>
 
@@ -49,5 +134,8 @@
   };
 </script>
 
-<style>
+<style scoped>
+  .selling-points > * {
+    max-width: 400px;
+  }
 </style>

app/imports/ui/route.js

@@ -3,6 +3,7 @@ import Vue from "vue";
 
 // Components
 import Home from '/imports/ui/pages/Home.vue';
+import CharacterList from "/imports/ui/pages/CharacterList.vue"
 
 // Not found
 import NotFound from '/imports/ui/pages/NotFound.vue';
@@ -22,7 +23,10 @@ RouterFactory.configure(factory => {
       path: '/',
       name: 'home',
       component: Home,
-    },
+    },{
+      path: "/characterList",
+      component: CharacterList,
+    }
   ]);
 });
 

app/imports/ui/vueSetup.js

@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import Vuetify from "vuetify";
 import routerFactory from "/imports/ui/route.js";
 import store from "/imports/ui/vuexStore.js";
+import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import "vuetify/dist/vuetify.min.css";
 
@@ -19,6 +20,8 @@ Vue.use(Vuetify, {
   iconfont: "mdi",
 });
 
+Vue.use(VueMeteorTracker);
+
 // App start
 Meteor.startup(() => {
   // Create the router instance

app/imports/ui/vuexStore.js

@@ -5,7 +5,7 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state: {
-    drawer: false,
+    drawer: undefined,
   },
   mutations: {
     toggleDrawer (state) {