Started work on tabletop view

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>