From 247353f0ed919cf15649a5ae090141b7e789d2b0 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sat, 16 Oct 2021 19:05:35 +0200
Subject: [PATCH] Small progress on tabletop

---
 .../computeByType/computeAction.js            |  4 +-
 app/imports/api/properties/Buffs.js           |  2 +-
 .../subSchemas/AttributeConsumedSchema.js     | 54 ----------------
 .../subSchemas/ItemConsumedSchema.js          | 64 -------------------
 app/imports/api/tabletop/Tabletops.js         |  4 ++
 .../api/tabletop/methods/removeTabletop.js    |  2 +-
 .../creature/character/CharacterSheetFab.vue  |  2 +-
 .../AddCreaturePropertyDialog.vue             | 10 +--
 app/imports/ui/pages/Tabletop.vue             | 53 +++++++++------
 app/imports/ui/pages/Tabletops.vue            |  7 +-
 .../ui/properties/forms/ActionForm.vue        |  2 -
 .../forms/AttributeConsumedForm.vue           | 48 ++++++++------
 .../forms/AttributesConsumedListForm.vue      |  1 +
 .../ui/properties/forms/ItemConsumedForm.vue  | 48 ++++++++------
 .../forms/ItemsConsumedListForm.vue           |  1 +
 .../ui/properties/forms/ResourcesForm.vue     | 12 ++--
 app/imports/ui/router.js                      |  2 +
 .../ui/tabletop/SelectCreaturesDialog.vue     | 14 ++--
 app/imports/ui/tabletop/TabletopComponent.vue | 38 ++++++-----
 .../ui/tabletop/TabletopCreatureCard.vue      | 17 ++++-
 .../ui/tabletop/TabletopRightDrawer.vue       | 32 ++++++++++
 app/imports/ui/tabletop/TabletopToolbar.vue   |  9 ++-
 22 files changed, 202 insertions(+), 224 deletions(-)
 delete mode 100644 app/imports/api/properties/subSchemas/AttributeConsumedSchema.js
 delete mode 100644 app/imports/api/properties/subSchemas/ItemConsumedSchema.js
 create mode 100644 app/imports/ui/tabletop/TabletopRightDrawer.vue

diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js b/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js
index 70cdae63..c52dec00 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js
@@ -10,13 +10,13 @@ export default function computeAction(computation, node){
   if (!prop.resources) return;
   prop.resources.itemsConsumed.forEach(itemConsumed => {
     if (!itemConsumed.itemId) return;
-    if (itemConsumed.available < itemConsumed.quantity.value){
+    if (itemConsumed.available < itemConsumed.quantity?.value){
       prop.insufficientResources = true;
     }
   });
   prop.resources.attributesConsumed.forEach(attConsumed => {
     if (!attConsumed.variableName) return;
-    if (attConsumed.available < attConsumed.quantity.value){
+    if (attConsumed.available < attConsumed.quantity?.value){
       prop.insufficientResources = true;
     }
   });
diff --git a/app/imports/api/properties/Buffs.js b/app/imports/api/properties/Buffs.js
index 2c169972..4fc01a7a 100644
--- a/app/imports/api/properties/Buffs.js
+++ b/app/imports/api/properties/Buffs.js
@@ -28,7 +28,7 @@ let BuffSchema = createPropertySchema({
       'self',
       'target',
     ],
-		defaultValue: 'every',
+		defaultValue: 'target',
 	},
 });
 
diff --git a/app/imports/api/properties/subSchemas/AttributeConsumedSchema.js b/app/imports/api/properties/subSchemas/AttributeConsumedSchema.js
deleted file mode 100644
index 9acc8931..00000000
--- a/app/imports/api/properties/subSchemas/AttributeConsumedSchema.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import SimpleSchema from 'simpl-schema';
-import { Random } from 'meteor/random';
-import STORAGE_LIMITS from '/imports/constants/STORAGE_LIMITS.js';
-import createPropertySchema from '/imports/api/properties/subSchemas/createPropertySchema.js';
-
-const AttributeConsumedSchema = createPropertySchema({
-  _id: {
-    type: String,
-    regEx: SimpleSchema.RegEx.Id,
-    autoValue(){
-      if (!this.isSet) return Random.id();
-    }
-  },
-  variableName: {
-    type: String,
-    optional: true,
-    max: STORAGE_LIMITS.variableName,
-  },
-  quantity: {
-    type: 'fieldToCompute',
-    optional: true,
-  },
-});
-
-const ComputedOnlyAttributeConsumedSchema = createPropertySchema({
-  quantity: {
-    type: 'computedOnlyField',
-    optional: true,
-  },
-  available: {
-    type: Number,
-    optional: true,
-  },
-  statId: {
-    type: String,
-    regEx: SimpleSchema.RegEx.Id,
-    optional: true,
-  },
-  statName: {
-    type: String,
-    optional: true,
-    max: STORAGE_LIMITS.name,
-  },
-});
-
-const ComputedAttributeConsumedSchema = new SimpleSchema()
-  .extend(AttributeConsumedSchema)
-  .extend(ComputedOnlyAttributeConsumedSchema);
-
-export {
-  AttributeConsumedSchema,
-  ComputedOnlyAttributeConsumedSchema,
-  ComputedAttributeConsumedSchema
-};
diff --git a/app/imports/api/properties/subSchemas/ItemConsumedSchema.js b/app/imports/api/properties/subSchemas/ItemConsumedSchema.js
deleted file mode 100644
index 2290649d..00000000
--- a/app/imports/api/properties/subSchemas/ItemConsumedSchema.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import SimpleSchema from 'simpl-schema';
-import { Random } from 'meteor/random';
-import { storedIconsSchema } from '/imports/api/icons/Icons.js';
-import STORAGE_LIMITS from '/imports/constants/STORAGE_LIMITS.js';
-import createPropertySchema from '/imports/api/properties/subSchemas/createPropertySchema.js';
-
-const ItemConsumedSchema = createPropertySchema({
-  _id: {
-    type: String,
-    regEx: SimpleSchema.RegEx.Id,
-    autoValue(){
-      if (!this.isSet) return Random.id();
-    }
-  },
-  tag: {
-    type: String,
-    optional: true,
-  },
-  quantity: {
-    type: 'fieldToCompute',
-    optional: true,
-  },
-  itemId: {
-    type: String,
-    regEx: SimpleSchema.RegEx.Id,
-    optional: true,
-  },
-});
-
-const ComputedOnlyItemConsumedSchema = new SimpleSchema({
-  available: {
-    type: Number,
-    optional: true,
-  },
-  quantity: {
-    type: 'computedOnlyField',
-    optional: true,
-  },
-  itemName: {
-    type: String,
-    max: STORAGE_LIMITS.name,
-    optional: true,
-  },
-  itemIcon: {
-    type: storedIconsSchema,
-    optional: true,
-    max: STORAGE_LIMITS.icon,
-  },
-  itemColor: {
-    type: String,
-    optional: true,
-    regEx: /^#([a-f0-9]{3}){1,2}\b$/i,
-  },
-});
-
-const ComputedItemConsumedSchema = new SimpleSchema()
-  .extend(ItemConsumedSchema)
-  .extend(ComputedOnlyItemConsumedSchema);
-
-export {
-  ItemConsumedSchema,
-  ComputedOnlyItemConsumedSchema,
-  ComputedItemConsumedSchema
-};
diff --git a/app/imports/api/tabletop/Tabletops.js b/app/imports/api/tabletop/Tabletops.js
index 59ad1de9..5c81986c 100644
--- a/app/imports/api/tabletop/Tabletops.js
+++ b/app/imports/api/tabletop/Tabletops.js
@@ -48,4 +48,8 @@ let TabletopSchema = new SimpleSchema({
 
 Tabletops.attachSchema(TabletopSchema);
 
+import '/imports/api/tabletop/methods/removeTabletop.js';
+import '/imports/api/tabletop/methods/insertTabletop.js';
+import '/imports/api/tabletop/methods/addCreaturesToTabletop.js';
+
 export default Tabletops;
diff --git a/app/imports/api/tabletop/methods/removeTabletop.js b/app/imports/api/tabletop/methods/removeTabletop.js
index 8341e73b..633cc6d0 100644
--- a/app/imports/api/tabletop/methods/removeTabletop.js
+++ b/app/imports/api/tabletop/methods/removeTabletop.js
@@ -4,7 +4,7 @@ import { RateLimiterMixin } from 'ddp-rate-limiter-mixin';
 import Tabletops from '../Tabletops.js';
 import { assertAdmin } from '/imports/api/sharing/sharingPermissions.js';
 import { assertUserHasPaidBenefits } from '/imports/api/users/patreon/tiers.js';
-import { assertUserIsTabletopOwner } from './shared/tabletopPermissions/js';
+import { assertUserIsTabletopOwner } from './shared/tabletopPermissions.js';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
 
 const removeTabletop = new ValidatedMethod({
diff --git a/app/imports/ui/creature/character/CharacterSheetFab.vue b/app/imports/ui/creature/character/CharacterSheetFab.vue
index 13948fca..b9e789b2 100644
--- a/app/imports/ui/creature/character/CharacterSheetFab.vue
+++ b/app/imports/ui/creature/character/CharacterSheetFab.vue
@@ -130,7 +130,7 @@
         return this.speedDialsByTab[tabs[this.tabNumber]];
       },
       speedDialsByTab() { return {
-        'stats': ['attribute', 'skill', 'action', 'attack', 'buff'],
+        'stats': ['attribute', 'skill', 'action', 'buff'],
         'features': ['feature'],
         'inventory': ['item', 'container'],
         'spells': ['spellList', 'spell'],
diff --git a/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
index 14f8715f..9ca7838a 100644
--- a/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
@@ -17,7 +17,7 @@
           @change="propertyHelpChanged"
         />
         <text-field
-          v-if="tab === 1"
+          v-if="tab === 2"
           prepend-inner-icon="mdi-magnify"
           regular
           hide-details
@@ -183,8 +183,6 @@
   import PropertySelector from '/imports/ui/properties/shared/PropertySelector.vue';
   import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
-  const SKIP_LIBRARY_PROP_TYPES = ['note', 'damage', 'adjustment']
-
   export default {
     components: {
       PropertySelector,
@@ -274,11 +272,7 @@
       changeType(type){
         this._subs.searchLibraryNodes.setData('type', type);
         if (!type) return;
-        if (SKIP_LIBRARY_PROP_TYPES.includes(type)){
-          this.tab = 1;
-        } else {
-          this.tab = 2;
-        }
+        this.tab = 1;
         this.schema = propertySchemasIndex[type];
         this.validationContext = this.schema.newContext();
         let model = this.schema.clean({});
diff --git a/app/imports/ui/pages/Tabletop.vue b/app/imports/ui/pages/Tabletop.vue
index 55998eca..fd1f17ac 100644
--- a/app/imports/ui/pages/Tabletop.vue
+++ b/app/imports/ui/pages/Tabletop.vue
@@ -1,27 +1,40 @@
 <template lang="html">
-  <div
-    class="tabletop-page"
-    style="height: 100%;"
+  <v-container
+    v-if="!$subReady.tabletop"
+    fluid
+    class="fill-height"
+    align="center"
+    justify="center"
   >
-    <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
+    <v-row>
+      <v-col cols="1">
+        <v-progress-circular indeterminate />
+      </v-col>
+    </v-row>
+  </v-container>
+  <tabletop-component
+    v-else-if="tabletop"
+    :model="tabletop"
+  />
+  <v-container
+    v-else
+    fluid
+    class="fill-height"
+    align="center"
+    justify="center"
+  >
+    <v-row
       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>
+      <v-col
+        cols="12"
+        md="8"
+      >
+        <p>This tabletop was not found</p>
+        <p>Either it does not exist, or you do not have permission to view it</p>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script lang="js">
diff --git a/app/imports/ui/pages/Tabletops.vue b/app/imports/ui/pages/Tabletops.vue
index 24f68157..fca7d1c6 100644
--- a/app/imports/ui/pages/Tabletops.vue
+++ b/app/imports/ui/pages/Tabletops.vue
@@ -35,7 +35,9 @@
 
 <script lang="js">
 import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue'
-import Tabletops, { insertTabletop } from '/imports/api/tabletop/Tabletops.js';
+import Tabletops from '/imports/api/tabletop/Tabletops.js';
+import insertTabletop from '/imports/api/tabletop/methods/insertTabletop.js';
+import snackbar from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components: {
@@ -55,7 +57,8 @@ export default {
   methods: {
     addTabletop(){
       this.addTabletopLoading = true;
-      insertTabletop.call(() => {
+      insertTabletop.call(error => {
+        if (error) snackbar(error.message);
         this.addTabletopLoading = false;
       });
     }
diff --git a/app/imports/ui/properties/forms/ActionForm.vue b/app/imports/ui/properties/forms/ActionForm.vue
index 52156a5d..a340d19e 100644
--- a/app/imports/ui/properties/forms/ActionForm.vue
+++ b/app/imports/ui/properties/forms/ActionForm.vue
@@ -97,7 +97,6 @@
           :value="model.tags"
           @change="change('tags', ...arguments)"
         />
-        <!--
         <smart-select
           label="Target"
           style="flex-basis: 300px;"
@@ -107,7 +106,6 @@
           :menu-props="{auto: true, lazy: true}"
           @change="change('target', ...arguments)"
         />
-        -->
         <v-row dense>
           <v-col
             cols="12"
diff --git a/app/imports/ui/properties/forms/AttributeConsumedForm.vue b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
index 9436d399..b7f0421c 100644
--- a/app/imports/ui/properties/forms/AttributeConsumedForm.vue
+++ b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
@@ -1,23 +1,33 @@
 <template lang="html">
-  <div class="layout">
-    <smart-combobox
-      label="Attribute"
-      hint="The attribute variable name that will be consumed"
-      style="flex-basis: 300px;"
-      :items="attributeList"
-      :value="model.variableName"
-      :error-messages="errors.variableName"
-      @change="change('variableName', ...arguments)"
-    />
-    <computed-field
-      label="Quantity"
-      hint="How much of the attribute will be consumed. If this amount is not available in the attribute, the action can't be taken"
-      :model="model.quantity"
-      :error-messages="errors.quantity"
-      @change="({path, value, ack}) =>
-        $emit('change', {path: ['quantity', ...path], value, ack})"
-    />
-  </div>
+  <v-row dense>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <smart-combobox
+        label="Attribute"
+        hint="The attribute variable name that will be consumed"
+        style="flex-basis: 300px;"
+        :items="attributeList"
+        :value="model.variableName"
+        :error-messages="errors.variableName"
+        @change="change('variableName', ...arguments)"
+      />
+    </v-col>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <computed-field
+        label="Quantity"
+        hint="How much of the attribute will be consumed. If this amount is not available in the attribute, the action can't be taken"
+        :model="model.quantity"
+        :error-messages="errors.quantity"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['quantity', ...path], value, ack})"
+      />
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="js">
diff --git a/app/imports/ui/properties/forms/AttributesConsumedListForm.vue b/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
index d86652bc..b0a847de 100644
--- a/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
+++ b/app/imports/ui/properties/forms/AttributesConsumedListForm.vue
@@ -17,6 +17,7 @@
             icon
             large
             class="ma-3"
+            style="margin-bottom: 30px !important;"
             @click="$emit('pull', {path: [i]})"
           >
             <v-icon>mdi-delete</v-icon>
diff --git a/app/imports/ui/properties/forms/ItemConsumedForm.vue b/app/imports/ui/properties/forms/ItemConsumedForm.vue
index 4a7d5b3c..d65fd6bc 100644
--- a/app/imports/ui/properties/forms/ItemConsumedForm.vue
+++ b/app/imports/ui/properties/forms/ItemConsumedForm.vue
@@ -1,23 +1,33 @@
 <template lang="html">
-  <div class="layout">
-    <text-field
-      label="Item"
-      hint="The item tag that will be consumed"
-      style="flex-basis: 300px;"
-      :value="model.tag"
-      :error-messages="errors.tag"
-      @change="change('tag', ...arguments)"
-    />
-    <computed-field
-      label="Quantity"
-      hint="How many will be consumed"
-      style="flex-basis: 300px;"
-      :model="model.quantity"
-      :error-messages="errors.quantity"
-      @change="({path, value, ack}) =>
-        $emit('change', {path: ['quantity', ...path], value, ack})"
-    />
-  </div>
+  <v-row dense>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <text-field
+        label="Item"
+        hint="The item tag that will be consumed"
+        style="flex-basis: 300px;"
+        :value="model.tag"
+        :error-messages="errors.tag"
+        @change="change('tag', ...arguments)"
+      />
+    </v-col>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <computed-field
+        label="Quantity"
+        hint="How many will be consumed"
+        style="flex-basis: 300px;"
+        :model="model.quantity"
+        :error-messages="errors.quantity"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['quantity', ...path], value, ack})"
+      />
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="js">
diff --git a/app/imports/ui/properties/forms/ItemsConsumedListForm.vue b/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
index 69d05fcd..80069155 100644
--- a/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
+++ b/app/imports/ui/properties/forms/ItemsConsumedListForm.vue
@@ -17,6 +17,7 @@
             icon
             large
             class="ma-3"
+            style="margin-bottom: 30px !important;"
             @click="$emit('pull', {path: [i]})"
           >
             <v-icon>mdi-delete</v-icon>
diff --git a/app/imports/ui/properties/forms/ResourcesForm.vue b/app/imports/ui/properties/forms/ResourcesForm.vue
index c50c1a03..886ba8c4 100644
--- a/app/imports/ui/properties/forms/ResourcesForm.vue
+++ b/app/imports/ui/properties/forms/ResourcesForm.vue
@@ -12,6 +12,12 @@
       @push="({path, value, ack}) => $emit('push', {path: ['attributesConsumed', ...path], value, ack})"
       @pull="({path, ack}) => $emit('pull', {path: ['attributesConsumed', ...path], ack})"
     />
+    <div
+      v-if="model.itemsConsumed && model.itemsConsumed.length"
+      class="subheading"
+    >
+      Ammo
+    </div>
     <items-consumed-list-form
       :model="model.itemsConsumed"
       @change="({path, value, ack}) => $emit('change', {path: ['itemsConsumed', ...path], value, ack})"
@@ -53,8 +59,6 @@
 <script lang="js">
   import AttributesConsumedListForm from '/imports/ui/properties/forms/AttributesConsumedListForm.vue';
   import ItemsConsumedListForm from '/imports/ui/properties/forms/ItemsConsumedListForm.vue';
-  import ItemConsumedSchema from '/imports/api/properties/subSchemas/ItemConsumedSchema.js';
-  import AttributeConsumedSchema from '/imports/api/properties/subSchemas/AttributeConsumedSchema.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
   export default {
@@ -86,7 +90,7 @@
 				this.addResourceLoading = true;
 				this.$emit('push', {
 					path: ['attributesConsumed'],
-          value: AttributeConsumedSchema.clean({}),
+          value: {_id: Random.id()},
 					ack: this.acknowledgeAddResult,
 				});
 			},
@@ -94,7 +98,7 @@
 				this.addResourceLoading = true;
 				this.$emit('push', {
 					path: ['itemsConsumed'],
-          value: ItemConsumedSchema.clean({}),
+          value: {_id: Random.id()},
 					ack: this.acknowledgeAddResult,
 				});
 			},
diff --git a/app/imports/ui/router.js b/app/imports/ui/router.js
index d4ed9fb6..43e73d03 100644
--- a/app/imports/ui/router.js
+++ b/app/imports/ui/router.js
@@ -24,6 +24,7 @@ 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';
+import TabletopRightDrawer from '/imports/ui/tabletop/TabletopRightDrawer.vue';
 import Admin from '/imports/ui/pages/Admin.vue';
 
 let userSubscription = Meteor.subscribe('user');
@@ -153,6 +154,7 @@ RouterFactory.configure(factory => {
       components: {
         default: Tabletop,
         toolbar: TabletopToolbar,
+        rightDrawer: TabletopRightDrawer,
       },
       beforeEnter: ensureLoggedIn,
     },{
diff --git a/app/imports/ui/tabletop/SelectCreaturesDialog.vue b/app/imports/ui/tabletop/SelectCreaturesDialog.vue
index 9488101e..939b0d27 100644
--- a/app/imports/ui/tabletop/SelectCreaturesDialog.vue
+++ b/app/imports/ui/tabletop/SelectCreaturesDialog.vue
@@ -11,9 +11,9 @@
         v-for="creature in creatures"
         :key="creature._id"
         :model="creature"
-        :selected="selected"
+        :is-selected="selected.includes(creature._id)"
         selection
-        @select="toggleSelect(creature._id)"
+        @click="toggleSelect(creature._id)"
       />
     </v-list>
     <template slot="actions">
@@ -46,7 +46,7 @@ export default {
     },
   },
   data(){return {
-    selected: new Set(),
+    selected: [],
   }},
   meteor: {
     creatures(){
@@ -55,8 +55,12 @@ export default {
   },
   methods: {
     toggleSelect(id){
-      let hadId = this.selected.delete(id);
-      if (!hadId) this.selected.add(id);
+      const index = this.selected.indexOf(id);
+      if (index === -1){
+        this.selected.push(id);
+      } else {
+        this.selected.splice(index, 1);
+      }
     },
   }
 }
diff --git a/app/imports/ui/tabletop/TabletopComponent.vue b/app/imports/ui/tabletop/TabletopComponent.vue
index f4297bc6..81e4318c 100644
--- a/app/imports/ui/tabletop/TabletopComponent.vue
+++ b/app/imports/ui/tabletop/TabletopComponent.vue
@@ -1,6 +1,13 @@
 <template lang="html">
-  <div class="tabletop">
-    <section class="initiative-row layout center">
+  <v-container
+    class="tabletop"
+    fluid
+  >
+    <v-row
+      dense
+      class="initiative-row"
+      style="flex-wrap: nowrap; overflow-x: auto;"
+    >
       <tabletop-creature-card
         v-for="creature in creatures"
         :key="creature._id"
@@ -8,7 +15,7 @@
       />
       <v-card
         class="layout column justify-center align-center"
-        style="height: 162px; width: 100px;"
+        style="height: 150px; min-width: 120px;"
         data-id="select-creatures"
         hover
         @click="addCreature"
@@ -17,36 +24,31 @@
           <v-icon>mdi-plus</v-icon>
         </div>
         <v-card-title>
-          Add creature
+          Add<br>creature
         </v-card-title>
       </v-card>
-    </section>
-    <section class="play-area">
-      <tabletop-map />
-      <tabletop-log :tabletop-id="model._id" />
-    </section>
+    </v-row>
+    <tabletop-map class="play-area" />
     <section class="action-row">
       <mini-character-sheet />
       <tabletop-action-cards />
     </section>
-  </div>
+  </v-container>
 </template>
 
 <script lang="js">
-import { addCreaturesToTabletop } from '/imports/api/tabletop/Tabletops.js';
-
+import addCreaturesToTabletop from '/imports/api/tabletop/methods/addCreaturesToTabletop.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/Creatures.js';
 import TabletopActionCards from '/imports/ui/tabletop/TabletopActionCards.vue';
 import MiniCharacterSheet from '/imports/ui/creature/character/MiniCharacterSheet.vue';
+import snackbar from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components: {
     TabletopCreatureCard,
     TabletopMap,
-    TabletopLog,
     TabletopActionCards,
     MiniCharacterSheet,
   },
@@ -77,11 +79,13 @@ export default {
         data: {
           startingSelection: this.creatures.map(c => c._id),
         },
-        callback: (characterSet) => {
-          if (!characterSet) return;
+        callback: (charIds) => {
+          if (!charIds) return;
           addCreaturesToTabletop.call({
             tabletopId: this.model._id,
-            creatureIds: Array.from(characterSet),
+            creatureIds: charIds,
+          }, error => {
+            if (error) snackbar(error.message);
           });
         },
 			});
diff --git a/app/imports/ui/tabletop/TabletopCreatureCard.vue b/app/imports/ui/tabletop/TabletopCreatureCard.vue
index afa9cbe1..80c1561b 100644
--- a/app/imports/ui/tabletop/TabletopCreatureCard.vue
+++ b/app/imports/ui/tabletop/TabletopCreatureCard.vue
@@ -1,11 +1,17 @@
 <template lang="html">
-  <v-card>
+  <v-card
+    style="height: 150px; min-width: 120px;"
+  >
     <v-img
       :src="model.picture"
       aspect-ratio="1"
       position="top center"
     />
-    <v-card-title>{{ model.name }}</v-card-title>
+    <div
+      class="small-title"
+    >
+      {{ model.name }}
+    </div>
   </v-card>
 </template>
 
@@ -21,4 +27,11 @@ export default {
 </script>
 
 <style lang="css" scoped>
+.small-title {
+  font-size: 14px;
+  padding: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/app/imports/ui/tabletop/TabletopRightDrawer.vue b/app/imports/ui/tabletop/TabletopRightDrawer.vue
new file mode 100644
index 00000000..9d5fc55f
--- /dev/null
+++ b/app/imports/ui/tabletop/TabletopRightDrawer.vue
@@ -0,0 +1,32 @@
+<template lang="html">
+  <v-navigation-drawer
+    v-model="drawer"
+    app
+    right
+    clipped
+  >
+    <tabletop-log :tabletop-id="$route.params.id" />
+  </v-navigation-drawer>
+</template>
+
+<script lang="js">
+import TabletopLog from '/imports/ui/tabletop/TabletopLog.vue';
+export default {
+  components: {
+    TabletopLog,
+  },
+  computed: {
+    drawer: {
+      get () {
+        return this.$store.state.rightDrawer;
+      },
+      set (value) {
+        this.$store.commit('setRightDrawer', value);
+      },
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/tabletop/TabletopToolbar.vue b/app/imports/ui/tabletop/TabletopToolbar.vue
index 6d735619..6c0d0af3 100644
--- a/app/imports/ui/tabletop/TabletopToolbar.vue
+++ b/app/imports/ui/tabletop/TabletopToolbar.vue
@@ -1,16 +1,18 @@
 <template lang="html">
-  <v-toolbar
+  <v-app-bar
     app
-    color="secondary"
     dark
+    clipped-right
     dense
+    color="secondary"
   >
     <v-app-bar-nav-icon @click="toggleDrawer" />
     <v-toolbar-title>
       Tabletop
     </v-toolbar-title>
     <v-spacer />
-  </v-toolbar>
+    <v-app-bar-nav-icon @click="toggleRightDrawer" />
+  </v-app-bar>
 </template>
 
 <script lang="js">
@@ -20,6 +22,7 @@ export default {
   methods: {
     ...mapMutations([
       'toggleDrawer',
+      'toggleRightDrawer',
     ]),
   }
 }