Merge branch 'feature-tabletop' into develop

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>