Iterated on tabletop

app/imports/api/engine/actions/applyPropertyByType/applyDamage.js

@@ -104,7 +104,6 @@ export default function applyDamage(node, {
           log: {
             creatureId: target._id,
             content: [{
-              name,
               value: `Recieved **${damageDealt}** ${suffix}`,
             }],
           }

app/imports/ui/properties/components/actions/ActionCard.vue

@@ -13,7 +13,7 @@
           class="mr-2"
           :color="model.color || 'primary'"
           :loading="doActionLoading"
-          :disabled="model.insufficientResources || !context.editPermission"
+          :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
           :roll-text="rollBonus"
           :name="model.name"
           :advantage="model.attackRoll && model.attackRoll.advantage"
@@ -35,7 +35,7 @@
           class="mr-2"
           :color="model.color || 'primary'"
           :loading="doActionLoading"
-          :disabled="model.insufficientResources || !context.editPermission"
+          :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
           @click.stop="doAction"
         >
           <property-icon
@@ -56,12 +56,20 @@
           {{ model.name || propertyName }}
         </div>
         <div class="action-sub-title layout align-center">
-          <div class="flex">
-            {{ model.actionType }}
-          </div>
-          <div v-if="Number.isFinite(model.usesLeft)">
-            {{ model.usesLeft }} uses
+          <div
+            v-if="targetingError"
+            class="flex error--text"
+          >
+            {{ targetingError }}
           </div>
+          <template v-else>
+            <div class="flex">
+              {{ model.actionType }}
+            </div>
+            <div v-if="Number.isFinite(model.usesLeft)">
+              {{ model.usesLeft }} uses
+            </div>
+          </template>
         </div>
       </div>
     </div>
@@ -134,6 +142,10 @@ export default {
       type: Object,
       required: true,
     },
+    targets: {
+      type: Array,
+      default: undefined,
+    },
   },
   data(){return {
     activated: undefined,
@@ -163,6 +175,16 @@ 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){
+        return 'Can only target self';
+      }
+      return undefined;
+    }
 	},
   methods: {
     click(e){
@@ -173,6 +195,7 @@ export default {
       this.shwing();
       doAction.call({
         actionId: this.model._id,
+        targetIds: this.targets,
         scope: {
           $attackAdvantage: advantage,
         }

app/imports/ui/tabletop/TabletopComponent.vue

@@ -14,7 +14,10 @@
         :key="creature._id"
         :model="creature"
         :active="activeCreature === creature._id"
-        @click="activeCreature = creature._id"
+        :targeted="targets.includes(creature._id)"
+        @click="activeCreature = creature._id; targets = []"
+        @target="targets.push(creature._id)"
+        @untarget="untarget(creature._id)"
       />
       <div
         class="layout column ma-1"
@@ -64,6 +67,7 @@
             :key="action._id"
             :model="action"
             :data-id="action._id"
+            :targets="targets"
             @click="clickProperty({_id: action._id})"
           />
         </v-row>
@@ -114,6 +118,7 @@ export default {
   },
   data(){ return {
     activeCreature: undefined,
+    targets: [],
   }},
   meteor: {
     $subscribe:{
@@ -180,6 +185,12 @@ export default {
       }
       event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
       event.preventDefault();
+    },
+    untarget(id){
+      const index = this.targets.indexOf(id);
+      if (index > -1) {
+        this.targets.splice(index, 1);
+      }
     }
   }
 }

app/imports/ui/tabletop/TabletopCreatureCard.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <v-card
     style="height: 150px; min-width: 120px;"
-    :color="active ? 'primary' : ''"
+    :color="active ? 'accent' : ''"
     hover
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -18,6 +18,15 @@
       {{ model.name }}
     </div>
     <card-highlight :active="hover" />
+    <v-btn
+      :color="targeted ? 'accent' : ''"
+      fab
+      small
+      style="position: fixed;"
+      @click.stop="targeted ? $emit('untarget') : $emit('target')"
+    >
+      <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
+    </v-btn>
   </v-card>
 </template>
 
@@ -33,6 +42,7 @@ export default {
       required: true,
     },
     active: Boolean,
+    targeted: Boolean,
   },
   data(){return {
     hover: false,

app/imports/ui/tabletop/TabletopMap.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script lang="js">
+// TODO use Pixi.js to render a map
 export default {
 }
 </script>