Merge branch 'feature-tabletop' into develop

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

@@ -14,7 +14,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"
@@ -36,7 +36,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 :model="model" />
@@ -53,12 +53,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>
@@ -149,6 +157,10 @@ export default {
       type: Object,
       required: true,
     },
+    targets: {
+      type: Array,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -185,6 +197,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;
+    }
   },
   meteor: {
     children() {

app/imports/client/ui/properties/components/actions/AttributeConsumedView.vue

@@ -4,10 +4,11 @@
     :class="insufficient && 'error--text'"
   >
     <div
+      v-if="model.quantity && model.quantity.value !== 1"
       class="mr-2 text-no-wrap text-truncate"
       style="min-width: 24px; text-align: center;"
     >
-      {{ model.quantity && model.quantity.value }}
+      {{ model.quantity.value }}
     </div>
     <div
       v-if="model.quantity && (typeof model.quantity.value !== 'string')"
@@ -15,6 +16,12 @@
     >
       {{ model.statName || model.variableName }}
     </div>
+    <div
+      v-if="(typeof model.available) == 'number'"
+      class="text--disabled text-no-wrap text-truncate ml-1 flex-shrink-0"
+    >
+      ({{ model.available }})
+    </div>
   </div>
 </template>
 

app/imports/client/ui/properties/components/actions/ItemConsumedView.vue

@@ -27,28 +27,30 @@
             :color="model.itemColor"
           />
           <div
+            v-if="quantity !== 1"
             class="mr-2 text-no-wrap"
             style="min-width: 24px; text-align: center;"
           >
-            <template v-if="quantity !== 1">
-              {{ model.available }} / {{ quantity }}
-            </template>
-            <template v-else>
-              {{ model.available }}
-            </template>
+            {{ quantity }}
           </div>
-          <div
-            class="text-no-wrap text-truncate flex"
-          >
-            <template v-if="model.itemId">
-              {{ model.itemName }}
-            </template>
-            <span
-              v-else
-              class="error--text"
+          <template v-if="model.itemId">
+            <div
+              class="text-no-wrap text-truncate"
             >
-              Select item
-            </span>
+              {{ model.itemName }}
+            </div>
+            <div
+              v-if="(typeof model.available) == 'number'"
+              class="text--disabled text-no-wrap text-truncate ml-1 flex-shrink-0"
+            >
+              ({{ model.available }})
+            </div>
+          </template>
+          <div
+            v-else
+            class="error--text text-no-wrap text-truncate flex"
+          >
+            Select item
           </div>
           <v-icon
             v-if="context.editPermission"