Tabletop targeted actions now work

app/imports/client/ui/tabletop/TabletopActionCard.vue

@@ -53,7 +53,11 @@
           :loading="doActionLoading"
           :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
           v-on="active ? {
-            'click.stop': doAction
+            click: e => {
+              if (!active) return;
+              e.stopPropagation();
+              doAction({});
+            }
           } : {}"
         >
           <template v-if="rollBonus && !rollBonusTooLong">
@@ -224,12 +228,14 @@ export default {
     actionTypeIcon() {
       return `$vuetify.icons.${this.model.actionType}`;
     },
-    targetingError(){
-      // Can always do an action without a target
-      if (!this.targets || !this.targets.length) return undefined;
-      if (this.targets.length > 1 && this.model.target !== 'multipleTargets'){
-        return 'Single target';
-      } else if (this.model.target === 'self' && this.targets[0] !== this.model.ancestors[0]._id){
+    targetingError() {
+      if (!this.active) return;
+      const targets = this.targets || [];
+      if (this.model.target === 'singleTarget' && targets.length === 0) {
+        return 'Select target';
+      } else if (targets.length > 1 && this.model.target !== 'multipleTargets'){
+        return 'Single target only';
+      } else if (this.model.target === 'self' && targets.length > 0){
         return 'Can only target self';
       }
       return undefined;
@@ -280,6 +286,7 @@ export default {
         }
       }, error => {
         this.doActionLoading = false;
+        this.$emit('deactivate');
         if (error) {
           console.error(error);
           snackbar({ text: error.reason });

app/imports/client/ui/tabletop/TabletopComponent.vue

@@ -28,20 +28,22 @@
           :model="creature"
           :active="activeCreatureId === creature._id"
           :targeted="targets.includes(creature._id)"
-          :show-target-btn="!!activeActionId"
-          @click="() => {
-            if (activeActionId) {
-              if (targets.includes(creature._id)) {
-                untarget(creature._id)
+          :show-target-btn="targets.includes(creature._id) || moreTargets"
+          v-on="(!activeActionId || (targets.includes(creature._id) || moreTargets)) ? {
+            click: () => {
+              if (activeActionId) {
+                if (targets.includes(creature._id)) {
+                  untarget(creature._id)
+                } else {
+                  if (moreTargets) targets.push(creature._id);
+                }
               } else {
-                targets.push(creature._id);
+                activeCreatureId = creature._id;
+                targets = [];
+                activeActionId = undefined;
               }
-            } else {
-              activeCreatureId = creature._id;
-              targets = [];
-              activeActionId = undefined;
             }
-          }"
+          } : {}"
           @target="targets.push(creature._id)"
           @untarget="untarget(creature._id)"
         />
@@ -95,6 +97,7 @@
             :key="action._id"
             :model="action"
             :active="activeActionId === action._id"
+            :targets="targets"
             @activate="activeActionId = action._id"
             @deactivate="activeActionId = undefined; targets = [];"
           />
@@ -157,6 +160,11 @@ export default {
       targets: [],
     }
   },
+  watch: {
+    activeCreatureId(id) {
+      this.$root.$emit('active-tabletop-character-change', id);
+    }
+  },
   meteor: {
     $subscribe: {
       'tabletop'() {
@@ -169,6 +177,15 @@ export default {
     actions(){
       return getProperties(this.activeCreatureId, { type: 'action', actionType: { $ne: 'event'} });
     },
+    moreTargets(){
+      const activeAction = CreatureProperties.findOne(this.activeActionId);
+      if (!activeAction) return;
+      if (activeAction.target === 'singleTarget') {
+        return this.targets.length === 0;
+      } else if (activeAction.target === 'multipleTargets') {
+        return true;
+      }
+    },
     editPermission(){
       try {
         assertEditPermission(this.activeCreatureId, Meteor.userId());

app/imports/client/ui/tabletop/TabletopCreatureCard.vue

@@ -2,12 +2,12 @@
   <v-card
     style="height: 100px; width: 70px;"
     class="tabletop-creature-card"
-    :color="active ? 'accent' : ''"
-    hover
+    :class="{ active }"
+    :hover="hasClickListener"
     :elevation="active ? 8 : 2"
-    @mouseover="hover = true"
+    @mouseover="() => { if (hasClickListener) hover = true; }"
     @mouseleave="hover = false"
-    @click="$emit('click')"
+    v-on="hasClickListener ? {click: () => $emit('click')} : {}"
   >
     <v-progress-linear
       v-if="variables.hitPoints"
@@ -25,16 +25,18 @@
     </div>
     <card-highlight :active="hover" />
     <div class="d-flex justify-center">
-      <v-btn
-        v-if="showTargetBtn"
-        :color="targeted ? 'accent' : ''"
-        :elevation="targeted ? 8 : 2"
-        fab
-        small
-        @click.stop="targeted ? $emit('untarget') : $emit('target')"
-      >
-        <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
-      </v-btn>
+      <v-scale-transition>
+        <v-btn
+          v-if="showTargetBtn"
+          :color="targeted ? 'accent' : ''"
+          :elevation="targeted ? 8 : 2"
+          fab
+          small
+          @click.stop="targeted ? $emit('untarget') : $emit('target')"
+        >
+          <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
+        </v-btn>
+      </v-scale-transition>
     </div>
   </v-card>
 </template>
@@ -60,6 +62,11 @@ export default {
     hover: false,
   }
   },
+  computed: {
+    hasClickListener() {
+      return this.$listeners && !!this.$listeners.click;
+    },
+  },
   // @ts-ignore
   meteor: {
     variables() {

app/imports/client/ui/tabletop/TabletopLog.vue

@@ -1,17 +1,17 @@
 <template lang="html">
-  <log-component
-    :creature-id="tabletopId"
+  <character-log
+    :tabletop-id="tabletopId"
+    :creature-id="activeCreatureId"
   />
 </template>
 
 <script lang="js">
-import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
-import insertTabletopLog from '/imports/api/creature/log/CreatureLogs.js';
-import LogComponent from '/imports/client/ui/log/CharacterLog.vue';
+import { insertTabletopLog } from '/imports/api/creature/log/CreatureLogs.js';
+import CharacterLog from '/imports/client/ui/log/CharacterLog.vue';
 
 export default {
   components: {
-    LogComponent,
+    CharacterLog,
   },
   inject: {
     context: {
@@ -21,18 +21,18 @@ export default {
   props: {
     tabletopId: {
       type: String,
-      required: true,
+      default: undefined,
     },
   },
-  methods: {
-    submit(){
-      insertTabletopLog.call({
-        content: this.logContent,
-        tabletopId: this.tabletopId,
-      }, (error) => {
-        if (error) console.error(error);
-      });
-    },
+  data() {
+    return {
+      activeCreatureId: undefined,
+    }
+  },
+  mounted() {
+    this.$root.$on('active-tabletop-character-change', (id) => {
+      this.activeCreatureId = id;
+    });
   },
 }
 </script>