Started work on tabletop view

app/imports/ui/pages/CharacterList.vue

@@ -2,30 +2,12 @@
   <div>
     <v-card class="ma-4">
       <v-list v-if="CreaturesWithNoParty.length">
-        <v-list-tile
+        <creature-list-tile
           v-for="character in CreaturesWithNoParty"
           :key="character._id"
           :to="character.url"
-        >
-          <v-list-tile-avatar :color="character.color || 'grey'">
-            <img
-              v-if="character.avatarPicture"
-              :src="character.avatarPicture"
-              :alt="character.name"
-            >
-            <template v-else>
-              {{ character.initial }}
-            </template>
-          </v-list-tile-avatar>
-          <v-list-tile-content>
-            <v-list-tile-title>
-              {{ character.name }}
-            </v-list-tile-title>
-            <v-list-tile-sub-title>
-              {{ character.alignment }} {{ character.gender }} {{ character.race }}
-            </v-list-tile-sub-title>
-          </v-list-tile-content>
-        </v-list-tile>
+          :model="character"
+        />
       </v-list>
       <v-expansion-panel popout>
         <v-expansion-panel-content
@@ -98,9 +80,10 @@
 
 <script>
   import Creatures, {insertCreature} from '/imports/api/creature/Creatures.js';
-  import Parties from '/imports/api/campaign/Parties.js';
+  import Parties from '/imports/api/creature/Parties.js';
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
   import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+  import CreatureListTile from '/imports/ui/creature/CreatureListTile.vue';
 
   const characterTransform = function(char){
     char.url = `/character/${char._id}/${char.urlName || '-'}`;
@@ -110,6 +93,7 @@
   export default {
     components: {
       LabeledFab,
+      CreatureListTile,
     },
     data(){ return{
       fab: false,

app/imports/ui/pages/Tabletop.vue

@@ -0,0 +1,46 @@
+<template lang="html">
+  <div
+    class="tabletop-page"
+    style="height: 100%;"
+  >
+    <div
+      v-if="!this.$subReady.tabletop"
+      class="layout column align-center justify-center"
+      style="height: 100%;"
+    >
+      <v-progress-circular indeterminate />
+    </div>
+    <tabletop-component
+      v-else-if="tabletop"
+      :model="tabletop"
+    />
+    <div
+      v-else
+      class="pa-4"
+    >
+      <p>This tabletop was not found</p>
+      <p>Either it does not exist, or you do not have permission to view it</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tabletops from '/imports/api/tabletop/Tabletops.js';
+import TabletopComponent from '/imports/ui/tabletop/TabletopComponent.vue';
+
+export default {
+  components: {
+    TabletopComponent,
+  },
+  meteor: {
+    tabletop(){
+      return Tabletops.findOne(this.$route.params.id);
+    },
+    $subscribe: {
+      'tabletop'(){
+        return [this.$route.params.id];
+      },
+    }
+  }
+}
+</script>

app/imports/ui/pages/Tabletops.vue

@@ -0,0 +1,67 @@
+<template lang="html">
+  <single-card-layout class="tabletops">
+    <v-list
+      v-if="tabletops.length"
+      class="tabletops"
+    >
+      <v-list-tile
+        v-for="tabletop in tabletops"
+        :key="tabletop._id"
+        :to="`/tabletop/${tabletop._id}`"
+      >
+        <v-list-tile-content>
+          <v-list-tile-title>
+            {{ tabletop.name || 'Unnamed Tabletop' }}
+          </v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+    </v-list>
+    <v-card-text v-else>
+      You don't own or belong to any tabletops yet
+    </v-card-text>
+    <v-btn
+      color="primary"
+      fab
+      fixed
+      bottom
+      right
+      :loading="addTabletopLoading"
+      @click="addTabletop"
+    >
+      <v-icon>add</v-icon>
+    </v-btn>
+  </single-card-layout>
+</template>
+
+<script>
+import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue'
+import Tabletops, { insertTabletop } from '/imports/api/tabletop/Tabletops.js';
+
+export default {
+  components: {
+    SingleCardLayout,
+  },
+  data(){return {
+    addTabletopLoading: false,
+  }},
+  meteor: {
+    tabletops(){
+      return Tabletops.find();
+    },
+    $subscribe: {
+      'tabletops': [],
+    },
+  },
+  methods: {
+    addTabletop(){
+      this.addTabletopLoading = true;
+      insertTabletop.call(() => {
+        this.addTabletopLoading = false;
+      });
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>