Merge branch 'feature-tabletop' into develop

app/imports/client/ui/properties/components/PropertyCard.vue

@@ -0,0 +1,30 @@
+<template
+  lang="html"
+  functional
+>
+  <component
+    :is="model.type"
+    v-if="model && components[model.type]"
+  />
+  <v-card v-else-if="model">
+    <v-card-title class="text--error">
+      A property card for the {{ model.type }} isn't defined. You should report this error.
+    </v-card-title>
+  </v-card>
+</template>
+
+<script lang="js">
+import ActionCard from '/imports/client/ui/properties/components/actions/ActionCard.vue';
+
+export default {
+  components: {
+    action: ActionCard,
+  },
+  props: {
+    model: {
+      type: Object,
+      default: undefined,
+    },
+  },
+}
+</script>

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"

app/imports/client/ui/properties/components/attributes/HealthBar.vue

@@ -19,34 +19,18 @@
     <v-flex
       style="height: 24px; flex-basis: 300px; flex-grow: 100;"
     >
-      <div
-        column
-        align-center
+      <health-bar-progress
+        :model="model"
         style="cursor: pointer;"
-        class="bar"
         @click="edit"
       >
         <div
-          style="height: 24px; width: 100%; position: relative; transition: background-color 0.5s ease;"
-          :style="{
-            backgroundColor: barBackgroundColor
+          class="value"
+          :class="{
+            'white--text': isTextLight,
+            'black--text': !isTextLight,
           }"
-        >
-          <div
-            class="filler"
-            style="height: 100%; transform-origin: left; transition: all 0.5s ease;"
-            :style="{
-              backgroundColor: barColor,
-              transform: `scaleX(${fillFraction})`,
-            }"
-          />
-          <div
-            class="value"
-            :class="{
-              'white--text': isTextLight,
-              'black--text': !isTextLight,
-            }"
-            style="font-size: 15px;
+          style="font-size: 15px;
               line-height: 24px;
               font-weight: 600;
               position: absolute;
@@ -55,11 +39,10 @@
               right: 0;
               bottom: 0;
               text-align: center;"
-          >
-            {{ model.value }} / {{ model.total }}
-          </div>
+        >
+          {{ model.value }} / {{ model.total }}
         </div>
-      </div>
+      </health-bar-progress>
       <v-menu
         v-model="editing"
         absolute
@@ -85,11 +68,13 @@
 <script lang="js">
 import IncrementMenu from '/imports/client/ui/components/IncrementMenu.vue';
 import isDarkColor from '/imports/client/ui/utility/isDarkColor';
+import HealthBarProgress from '/imports/client/ui/properties/components/attributes/HealthBarProgress.vue';
 import chroma from 'chroma-js';
 
 export default {
   components: {
-    IncrementMenu
+    IncrementMenu,
+    HealthBarProgress,
   },
   inject: {
     theme: {

app/imports/client/ui/properties/components/attributes/HealthBarProgress.vue

@@ -0,0 +1,69 @@
+<template lang="html">
+  <div
+    class="bar"
+    @click="e => $emit('click', e)"
+  >
+    <div
+      style="width: 100%; position: relative; transition: background-color 0.5s ease;"
+      :style="{
+        backgroundColor: barBackgroundColor,
+        height: `${height}px`,
+      }"
+    >
+      <div
+        class="filler"
+        style="height: 100%; transform-origin: left; transition: all 0.5s ease;"
+        :style="{
+          backgroundColor: barColor,
+          transform: `scaleX(${fillFraction})`,
+        }"
+      />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+import chroma from 'chroma-js';
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+    height: {
+      type: Number,
+      default: 24,
+    },
+  },
+  computed: {
+    fillFraction() {
+      let fraction = this.model.value / this.model.total;
+      if (fraction < 0) fraction = 0;
+      if (fraction > 1) fraction = 1;
+      return fraction;
+    },
+    color() {
+      return this.model.color || this.$vuetify.theme.currentTheme.primary
+    },
+    barColor() {
+      const fraction = this.model.value / this.model.total;
+      if (!Number.isFinite(fraction)) return this.color;
+      if (fraction > 0.5) {
+        return this.color;
+      } else if (this.model.healthBarColorMid && this.model.healthBarColorLow) {
+        return chroma.mix(this.model.healthBarColorLow, this.model.healthBarColorMid, fraction * 2).hex();
+      } else if (this.model.healthBarColorMid) {
+        return this.model.healthBarColorMid;
+      }
+      return this.color;
+    },
+    barBackgroundColor() {
+      return chroma(this.barColor)
+        .darken(1.5)
+        .desaturate(1.5)
+        .hex();
+    },
+  },
+}
+</script>