Started work on tabletop view

app/imports/api/campaign/Campaigns.js

@@ -1,11 +0,0 @@
-import SimpleSchema from 'simpl-schema';
-
-let Campaigns = new Mongo.Collection('campaigns');
-
-let CampaignSchema = new SimpleSchema({
-
-});
-
-Campaigns.attachSchema(CampaignSchema);
-
-export default Campaigns;

app/imports/api/campaign/Encounter.js

@@ -1,53 +0,0 @@
-import SimpleSchema from 'simpl-schema';
-
-let Encounters = new Mongo.Collection('encounters');
-
-const CreatureInitiativeSchema = new SimpleSchema({
-  name: {
-    type: String,
-    optional: true,
-  },
-  initiativeRoll: {
-    type: SimpleSchema.Integer,
-  },
-});
-
-const InitiativeSchema = new SimpleSchema({
-  // An ordered list of all creatures in the initiative order
-  creatures: {
-    type: Array,
-    defaultValue: [],
-  },
-  'creatures.$': {
-    type: CreatureInitiativeSchema,
-  },
-  active: {
-    type: Boolean,
-    defaultValue: false,
-  },
-  roundNumber: {
-    type: SimpleSchema.Integer,
-    defaultValue: 0,
-  },
-  initiativeNumber: {
-    type: SimpleSchema.Integer,
-    optional: true,
-  },
-});
-
-// A creature can be in one ecounter at a time.
-// All creatures in an encounter have a shared time and space.
-let EncounterSchema = new SimpleSchema({
-  name: {
-    type: String,
-    optional: true,
-  },
-  initiative: {
-    type: InitiativeSchema,
-    defaultValue: {},
-  },
-});
-
-Encounters.attachSchema(EncounterSchema);
-
-export default Encounters;

app/imports/api/creature/Creatures.js

@@ -5,7 +5,7 @@ import deathSaveSchema from '/imports/api/properties/subSchemas/DeathSavesSchema
 import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import SharingSchema from '/imports/api/sharing/SharingSchema.js';
 import {assertEditPermission} from '/imports/api/sharing/sharingPermissions.js';
-import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import { assertUserHasPaidBenefits } from '/imports/api/users/patreon/tiers.js';
 
 import '/imports/api/creature/removeCreature.js';
 import '/imports/api/creature/restCreature.js';
@@ -107,6 +107,17 @@ let CreatureSchema = new SimpleSchema({
 		defaultValue: {}
 	},
 
+  // Tabletop
+  tabletop: {
+    type: String,
+    regEx: SimpleSchema.RegEx.id,
+    optional: true,
+  },
+  initiativeRoll: {
+    type: SimpleSchema.Integer,
+    optional: true,
+  },
+
 	// Settings
 	settings: {
 		type: CreatureSettingsSchema,
@@ -136,11 +147,7 @@ const insertCreature = new ValidatedMethod({
       throw new Meteor.Error('Creatures.methods.insert.denied',
       'You need to be logged in to insert a creature');
     }
-    let tier = getUserTier(this.userId);
-    if (!tier.paidBenefits){
-      throw new Meteor.Error('Creatures.methods.insert.denied',
-      `The ${tier.name} tier does not allow you to insert a creature`);
-    }
+    assertUserHasPaidBenefits(this.userId);
 
 		// Create the creature document
     let charId = Creatures.insert({

app/imports/api/tabletop/Tabletops.js

@@ -0,0 +1,189 @@
+import SimpleSchema from 'simpl-schema';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
+import { RateLimiterMixin } from 'ddp-rate-limiter-mixin';
+import { assertUserHasPaidBenefits } from '/imports/api/users/patreon/tiers.js';
+import Creatures from '/imports/api/creature/Creatures.js';
+
+let Tabletops = new Mongo.Collection('tabletops');
+
+const InitiativeSchema = new SimpleSchema({
+  active: {
+    type: Boolean,
+    defaultValue: false,
+  },
+  roundNumber: {
+    type: SimpleSchema.Integer,
+    defaultValue: 0,
+  },
+  initiativeNumber: {
+    type: SimpleSchema.Integer,
+    optional: true,
+  },
+  activeCreature: {
+    type: String,
+    regEx: SimpleSchema.RegEx.id,
+    optional: true,
+  },
+});
+
+// All creatures in a tabletop have a shared time and space.
+let TabletopSchema = new SimpleSchema({
+  name: {
+    type: String,
+    optional: true,
+  },
+  initiative: {
+    type: InitiativeSchema,
+    defaultValue: {},
+  },
+  gameMaster: {
+    type: String,
+    regEx: SimpleSchema.RegEx.id,
+  },
+  players: {
+    type: Array,
+    defaultValue: [],
+  },
+  'players.$': {
+    type: String,
+    regEx: SimpleSchema.RegEx.id,
+  },
+});
+
+Tabletops.attachSchema(TabletopSchema);
+
+function assertUserIsTabletopOwner(tabletopId, userId){
+  let tabletop = Tabletops.findOne(tabletopId);
+  if (!tabletop){
+    throw new Meteor.Error('Tabletop does not exist',
+    'No tabletop could be found for the given tabletop id');
+  }
+  if (tabletop.gameMaster !== userId){
+    throw new Meteor.Error('Not the owner',
+    'The user is not the owner of the given tabletop');
+  }
+}
+
+function assertUserInTabletop(tabletopId, userId){
+  let tabletop = Tabletops.findOne(tabletopId);
+  if (!tabletop){
+    throw new Meteor.Error('Tabletop does not exist',
+    'No tabletop could be found for the given tabletop id');
+  }
+  if (tabletop.gameMaster !== userId && !tabletop.players.includes(userId)){
+    throw new Meteor.Error('Not in tabletop',
+    'The user is not the gamemaster or a player in the given tabletop');
+  }
+}
+
+const insertTabletop = new ValidatedMethod({
+
+  name: 'tabletops.insert',
+
+  validate: null,
+
+  mixins: [RateLimiterMixin],
+  rateLimit: {
+    numRequests: 5,
+    timeInterval: 5000,
+  },
+
+  run() {
+    if (!this.userId) {
+      throw new Meteor.Error('tabletops.insert.denied',
+      'You need to be logged in to insert a tabletop');
+    }
+    assertUserHasPaidBenefits(this.userId);
+
+    return Tabletops.insert({
+			gameMaster: this.userId,
+		});
+  },
+
+});
+
+const removeTabletop = new ValidatedMethod({
+
+  name: 'tabletops.remove',
+
+  validate: new SimpleSchema({
+    tabletopId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.id,
+    },
+  }).validator(),
+
+  mixins: [RateLimiterMixin],
+  rateLimit: {
+    numRequests: 5,
+    timeInterval: 5000,
+  },
+
+  run({tabletopId}) {
+    if (!this.userId) {
+      throw new Meteor.Error('tabletops.remove.denied',
+      'You need to be logged in to remove a tabletop');
+    }
+    assertUserHasPaidBenefits(this.userId);
+    assertUserIsTabletopOwner(tabletopId, this.userId);
+    let removed = Tabletops.remove({
+			_id: tabletopId,
+		});
+    Creatures.update({
+      tabletop: tabletopId,
+    }, {
+      $unset: {tabletop: 1},
+    });
+    return removed;
+  },
+
+});
+
+const addCreaturesToTabletop = new ValidatedMethod({
+
+  name: 'tabletops.addCreatures',
+
+  validate: new SimpleSchema({
+    'creatureIds': {
+      type: Array,
+    },
+    'creatureIds.$': {
+      type: String,
+      regEx: SimpleSchema.RegEx.id,
+    },
+    tabletopId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.id,
+    },
+  }).validator(),
+
+  mixins: [RateLimiterMixin],
+  rateLimit: {
+    numRequests: 10,
+    timeInterval: 5000,
+  },
+
+  run({tabletopId, creatureIds}) {
+    if (!this.userId) {
+      throw new Meteor.Error('tabletops.addCreatures.denied',
+      'You need to be logged in to remove a tabletop');
+    }
+    assertUserHasPaidBenefits(this.userId);
+    assertUserInTabletop(tabletopId, this.userId);
+    Creatures.update({
+      _id: {$in: creatureIds},
+      $or: [
+        {writers: this.userId},
+        {owner: this.userId},
+      ],
+    }, {
+      $set: {tabletop: tabletopId},
+    }, {
+      multi: true,
+    });
+  },
+
+});
+
+export default Tabletops;
+export { insertTabletop, removeTabletop, addCreaturesToTabletop };

app/imports/api/users/patreon/tiers.js

@@ -77,5 +77,13 @@ export function getUserTier(user){
   }
 }
 
+export function assertUserHasPaidBenefits(user){
+  let tier = getUserTier(user);
+  if (!tier.paidBenefits){
+    throw new Meteor.Error('Creatures.methods.insert.denied',
+    `The ${tier.name} tier does not allow you to insert a creature`);
+  }
+}
+
 export default TIERS;
 export { GUEST_TIER };

app/imports/server/publications/characterList.js

@@ -1,5 +1,5 @@
 import Creatures from '/imports/api/creature/Creatures.js';
-import Parties from '/imports/api/campaign/Parties.js';
+import Parties from '/imports/api/creature/Parties.js';
 
 Meteor.publish('characterList', function(){
   this.autorun(function (){

app/imports/server/publications/index.js

@@ -5,3 +5,4 @@ import '/imports/server/publications/singleCharacter.js';
 import '/imports/server/publications/experiences.js';
 import '/imports/server/publications/users.js';
 import '/imports/server/publications/icons.js';
+import '/imports/server/publications/tabletops.js';

app/imports/server/publications/tabletops.js

@@ -0,0 +1,51 @@
+import Tabletops from '/imports/api/tabletop/Tabletops.js';
+import Creatures from '/imports/api/creature/Creatures.js';
+
+Meteor.publish('tabletops', function(){
+  var userId = this.userId;
+  if (!userId) {
+    return this.ready();
+  }
+  return Tabletops.find({
+    $or: [
+      {players: userId},
+      {gameMaster: userId},
+    ],
+  });
+});
+
+Meteor.publish('tabletop', function(tabletopId){
+  var userId = this.userId;
+  if (!userId) {
+    return this.ready();
+  }
+  this.autorun(function (){
+    let tabletopCursor = Tabletops.find({
+      _id: tabletopId,
+      $or: [
+        {players: userId},
+        {gameMaster: userId},
+      ]
+    });
+    let tabletop = tabletopCursor.fetch()[0];
+    if (!tabletop){
+      return this.ready();
+    }
+    // Warning, this leaks data to users of the same tabletop who may not have
+    // read permission of this specific creature, so publish as few fields as
+    // possible
+    let creatureSummaries = Creatures.find({
+      tabletop: tabletopId,
+    }, {
+      fields: {
+        name: 1,
+        picture: 1,
+        avatarPicture: 1,
+        variables: 1,
+        tabletop: 1,
+        initiativeRoll: 1,
+      },
+    });
+    return [ tabletopCursor, creatureSummaries]
+  })
+});

app/imports/ui/creature/CreatureListTile.vue

@@ -0,0 +1,47 @@
+<template
+  lang="html"
+  functional
+>
+  <v-list-tile>
+    <v-list-tile-avatar :color="model.color || 'grey'">
+      <img
+        v-if="model.avatarPicture"
+        :src="model.avatarPicture"
+        :alt="model.name"
+      >
+      <template v-else>
+        {{ model.initial }}
+      </template>
+    </v-list-tile-avatar>
+    <v-list-tile-content>
+      <v-list-tile-title>
+        {{ model.name }}
+      </v-list-tile-title>
+      <v-list-tile-sub-title>
+        {{ model.alignment }} {{ model.gender }} {{ model.race }}
+      </v-list-tile-sub-title>
+    </v-list-tile-content>
+    <v-list-tile-action v-if="selection">
+      <v-checkbox
+        :input-value="selected && selected.has(model._id)"
+        @change="$emit('select')"
+      />
+    </v-list-tile-action>
+  </v-list-tile>
+</template>
+
+<script type="text/javascript">
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+    selection: Boolean,
+    selected: {
+      type: Set,
+      default: () => new Set(),
+    },
+  }
+}
+</script>

app/imports/ui/creature/character/MiniCharacterSheet.vue

@@ -0,0 +1,11 @@
+<template lang="html">
+  <div class="mini-character-sheet" />
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -11,6 +11,7 @@ import LibraryEditDialog from '/imports/ui/library/LibraryEditDialog.vue';
 import LibraryNodeCreationDialog from '/imports/ui/library/LibraryNodeCreationDialog.vue';
 import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
 import MoveLibraryNodeDialog from '/imports/ui/library/MoveLibraryNodeDialog.vue'
+import SelectCreaturesDialog from '/imports/ui/tabletop/SelectCreaturesDialog.vue';
 import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
 import TierTooLowDialog from '/imports/ui/user/TierTooLowDialog.vue';
 import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
@@ -29,6 +30,7 @@ export default {
   LibraryNodeCreationDialog,
   LibraryNodeDialog,
   MoveLibraryNodeDialog,
+  SelectCreaturesDialog,
 	ShareDialog,
   TierTooLowDialog,
   UsernameDialog,

app/imports/ui/layouts/Sidebar.vue

@@ -115,7 +115,7 @@
 
 <script>
   import Creatures from '/imports/api/creature/Creatures.js';
-  import Parties from '/imports/api/campaign/Parties.js';
+  import Parties from '/imports/api/creature/Parties.js';
 
   export default {
     meteor: {
@@ -135,6 +135,7 @@
           {title: 'Home', icon: 'home', to: '/'},
           {title: 'Characters', icon: 'portrait', to: '/characterList', requireLogin: true},
           {title: 'Library', icon: 'book', to: '/library', requireLogin: true},
+          {title: 'Tabletops', icon: 'api', to: '/tabletops', requireLogin: true},
           //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
           {title: 'Feedback', icon: 'bug_report', to: '/feedback'},
           {title: 'About', icon: 'subject', to: '/about'},

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>

app/imports/ui/router.js

@@ -20,6 +20,9 @@ import InviteSuccess from '/imports/ui/pages/InviteSuccess.vue' ;
 import InviteError from '/imports/ui/pages/InviteError.vue' ;
 import NotImplemented from '/imports/ui/pages/NotImplemented.vue';
 import PatreonLevelTooLow from '/imports/ui/pages/PatreonLevelTooLow.vue';
+import Tabletops from '/imports/ui/pages/Tabletops.vue';
+import Tabletop from '/imports/ui/pages/Tabletop.vue';
+import TabletopToolbar from '/imports/ui/tabletop/TabletopToolbar.vue';
 
 let userSubscription = Meteor.subscribe('user');
 
@@ -143,6 +146,19 @@ RouterFactory.configure(factory => {
       meta: {
         title: 'Character Sheet',
       },
+    },{
+      path: '/tabletops',
+      name: 'tabletops',
+      component: Tabletops,
+      beforeEnter: ensureLoggedIn,
+    },{
+      path: '/tabletop/:id',
+      name: 'tabletop',
+      components: {
+        default: Tabletop,
+        toolbar: TabletopToolbar,
+      },
+      beforeEnter: ensureLoggedIn,
     },{
       path: '/friends',
       components: {

app/imports/ui/tabletop/SelectCreaturesDialog.vue

@@ -0,0 +1,63 @@
+<template lang="html">
+  <dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Add Characters
+    </v-toolbar-title>
+    <v-list>
+      <creature-list-tile
+        v-for="creature in creatures"
+        :key="creature._id"
+        :model="creature"
+        :selected="selected"
+        selection
+        @select="toggleSelect(creature._id)"
+      />
+    </v-list>
+    <template slot="actions">
+      <v-spacer />
+      <v-btn
+        flat
+        color="primary"
+        @click="$store.dispatch('popDialogStack', selected)"
+      >
+        Add characters
+      </v-btn>
+    </template>
+  </dialog-base>
+</template>
+
+<script>
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import Creatures from '/imports/api/creature/Creatures.js';
+import CreatureListTile from '/imports/ui/creature/CreatureListTile.vue';
+
+export default {
+  components: {
+    DialogBase,
+    CreatureListTile,
+  },
+  props: {
+    startingSelection: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data(){return {
+    selected: new Set(this.startingSelection),
+  }},
+  meteor: {
+    creatures(){
+      return Creatures.find({});
+    },
+  },
+  methods: {
+    toggleSelect(id){
+      let hadId = this.selected.delete(id);
+      if (!hadId) this.selected.add(id);
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/tabletop/TabletopActionCards.vue

@@ -0,0 +1,51 @@
+<template lang="html">
+  <div class="action-cards">
+    <action-card
+      v-for="action in actions"
+      :key="action._id"
+      :model="action"
+    />
+  </div>
+</template>
+
+<script>
+import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
+import ActionCard from '/imports/ui/properties/components/actions/ActionCard.vue';
+
+function getProperties(ancestorId, type){
+  if (!ancestorId) return [];
+  return getActiveProperties({
+    ancestorId,
+    filter: {type},
+  });
+}
+
+export default {
+  components: {
+    ActionCard,
+  },
+  props: {
+    creatureId: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data(){ return {
+    actionType: 'action',
+  }},
+  meteor: {
+    actions(){
+      return getProperties(this.creatureId, 'action');
+    },
+    attacks(){
+      return getProperties(this.creatureId, 'attack');
+    },
+    spells(){
+      return getProperties(this.creatureId, 'spell');
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/tabletop/TabletopComponent.vue

@@ -0,0 +1,100 @@
+<template lang="html">
+  <div class="tabletop">
+    <section class="initiative-row layout row center">
+      <tabletop-creature-card
+        v-for="creature in creatures"
+        :key="creature._id"
+        :model="creature"
+      />
+      <v-card
+        class="layout column justify-center align-center"
+        style="height: 162px; width: 100px;"
+        data-id="select-creatures"
+        hover
+        @click="addCreature"
+      >
+        <div class="flex layout row justify-center align-center">
+          <v-icon>add</v-icon>
+        </div>
+        <v-card-title>
+          Add creature
+        </v-card-title>
+      </v-card>
+    </section>
+    <section class="play-area">
+      <tabletop-map />
+      <tabletop-log />
+    </section>
+    <section class="action-row">
+      <mini-character-sheet />
+      <tabletop-action-cards />
+    </section>
+  </div>
+</template>
+
+<script>
+import { addCreaturesToTabletop } from '/imports/api/tabletop/Tabletops.js';
+
+import TabletopCreatureCard from '/imports/ui/tabletop/TabletopCreatureCard.vue';
+import TabletopMap from '/imports/ui/tabletop/TabletopMap.vue';
+import TabletopLog from '/imports/ui/tabletop/TabletopLog.vue';
+import Creatures from '/imports/api/creature/Creatures.js';
+import TabletopActionCards from '/imports/ui/tabletop/TabletopActionCards.vue';
+import MiniCharacterSheet from '/imports/ui/creature/character/MiniCharacterSheet.vue';
+
+export default {
+  components: {
+    TabletopCreatureCard,
+    TabletopMap,
+    TabletopLog,
+    TabletopActionCards,
+    MiniCharacterSheet,
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  data(){ return {
+    activeCreature: undefined,
+  }},
+  meteor: {
+    $subscribe:{
+      'tabletop'(){
+        return [this.model._id];
+      },
+    },
+    creatures(){
+      return Creatures.find({tabletop: this.model._id});
+    },
+  },
+  methods: {
+    addCreature(){
+      this.$store.commit('pushDialogStack', {
+				component: 'select-creatures-dialog',
+				elementId: 'select-creatures',
+        data: {
+          startingSelection: this.creatures.map(c => c._id),
+        },
+        callback: (characterSet) => {
+          if (!characterSet) return;
+          addCreaturesToTabletop.call({
+            tabletopId: this.model._id,
+            creatureIds: Array.from(characterSet),
+          });
+        },
+			});
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.initiative-row > .v-card {
+  flex-grow: 0;
+  height: 162px;
+  width: 100px;
+  margin: 4px;
+}
+</style>

app/imports/ui/tabletop/TabletopCreatureCard.vue

@@ -0,0 +1,24 @@
+<template lang="html">
+  <v-card>
+    <v-img
+      :src="model.picture"
+      aspect-ratio="1"
+      position="top center"
+    />
+    <v-card-title>{{ model.name }}</v-card-title>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/tabletop/TabletopLog.vue

@@ -0,0 +1,11 @@
+<template lang="html">
+  <div class="tabletop-log" />
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/tabletop/TabletopMap.vue

@@ -0,0 +1,11 @@
+<template lang="html">
+  <div class="tabletop-map" />
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/tabletop/TabletopToolbar.vue

@@ -0,0 +1,29 @@
+<template lang="html">
+  <v-toolbar
+    app
+    color="secondary"
+    dark
+    dense
+  >
+    <v-toolbar-side-icon @click="toggleDrawer" />
+    <v-toolbar-title>
+      Tabletop
+    </v-toolbar-title>
+    <v-spacer />
+  </v-toolbar>
+</template>
+
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+  methods: {
+    ...mapMutations([
+      'toggleDrawer',
+    ]),
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>