Custom health bar colors. Also works for setting mid and low health colors

app/imports/api/properties/Attributes.js

@@ -47,6 +47,18 @@ let AttributeSchema = createPropertySchema({
   spellSlotLevel: {
     type: 'fieldToCompute',
 		optional: true,
+  },
+  // For type healthBar midColor, and lowColor can be set separately from the
+  // property's color, which is used as the undamaged color
+  'healthBarColorMid': {
+		type: String,
+		regEx: /^#([a-f0-9]{3}){1,2}\b$/i,
+		optional: true,
+  },
+  'healthBarColorLow': {
+		type: String,
+		regEx: /^#([a-f0-9]{3}){1,2}\b$/i,
+		optional: true,
   },
 	// The starting value, before effects
 	baseValue: {

app/imports/ui/components/ColorPicker.vue

@@ -13,7 +13,10 @@
         v-on="on"
       >
         {{ label }}
-        <v-icon :right="!!label">
+        <v-icon
+          :right="!!label"
+          :color="!!label && value"
+        >
           mdi-format-paint
         </v-icon>
       </v-btn>

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

@@ -3,9 +3,9 @@
     wrap
     align-center
     justify-center
-    style="min-height: 48px;"
+    style="min-height: 42px;"
     :class="{ hover }"
-    class="my-3 health-bar"
+    class="my-1 health-bar"
     :data-id="_id"
   >
     <div
@@ -18,37 +18,55 @@
     </div>
     <v-flex
       style="
-        height: 20px;
+        height: 24px;
         flex-basis: 300px;
         flex-grow: 100;
       "
     >
-      <v-layout
+      <div
         column
         align-center
         style="cursor: pointer;"
         class="bar"
         @click="edit"
       >
-        <v-progress-linear
+        <div
-          :value="(value / maxValue) * 100"
+          style="height: 24px; width: 100%; position: relative; transition: background-color 0.5s ease;"
-          height="20"
+          :style="{
-          color="green lighten-1"
+            backgroundColor: barBackgroundColor
-          class="ma-0"
+          }"
-        />
-        <span
-          class="value"
-          style="
-            margin-top: -20px;
-            z-index: 1;
-            font-size: 15px;
-            font-weight: 600;
-            height: 20px;
-          "
         >
-          {{ value }} / {{ maxValue }}
+          <div
-        </span>
+            class="filler"
-      </v-layout>
+            style="height: 100%; transform-origin: left; transition: all 0.5s ease;"
+            :style="{
+              backgroundColor: barColor,
+              transform: `scaleX(${value / maxValue})`,
+            }"
+          />
+          <div
+            class="value"
+            :class="{
+              'white--text': isTextLight,
+              'black--text': !isTextLight,
+            }"
+            style="
+              font-size: 15px;
+              line-height: 24px;
+              font-weight: 600;
+              position: absolute;
+              left: 0;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              text-align: center;
+
+            "
+          >
+            {{ value }} / {{ maxValue }}
+          </div>
+        </div>
+      </div>
       <transition name="transition">
         <increment-menu
           v-show="editing"
@@ -71,6 +89,9 @@
 
 <script lang="js">
 import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+import chroma from 'chroma-js';
+
 	export default {
     components: {
       IncrementMenu
@@ -79,6 +100,18 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 			value: Number,
 			maxValue: Number,
 			name: String,
+      color: {
+        type: String,
+        default: '#66BB6A',
+      },
+      midColor: {
+        type: String,
+        default: undefined,
+      },
+      lowColor: {
+        type: String,
+        default: undefined,
+      },
 			_id: String,
 		},
 		data() {
@@ -87,6 +120,37 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 				hover: false,
 			};
 		},
+    computed: {
+      barColor() {
+        const fraction = this.value / this.maxValue;
+        if (!Number.isFinite(fraction)) return this.color;
+        if (fraction > 0.5){
+          return this.color;
+        } else if (this.midColor && this.lowColor) {
+          return chroma.mix(this.lowColor, this.midColor, fraction * 2).hex();
+        } else if (this.midColor){
+          return this.midColor;
+        }
+        return this.color;
+      },
+      barBackgroundColor(){
+        return chroma(this.barColor)
+        .darken(1.5)
+        .desaturate(1.5)
+        .hex();
+      },
+      isTextLight(){
+        return isDarkColor(this.barBackgroundColor);
+        /* Change color at the halfway mark
+        const fraction = this.value / this.maxValue;
+        if (fraction >= 0.5){
+          return isDarkColor(this.barColor);
+        } else {
+          return isDarkColor(this.barBackgroundColor);
+        }
+        */
+      }
+    },
 		methods: {
 			edit() {
 				this.editing = true;

app/imports/ui/properties/components/attributes/HealthBarCard.vue

@@ -6,6 +6,9 @@
       :value="attribute.value"
       :max-value="attribute.total"
       :name="attribute.name"
+      :color="attribute.color"
+      :mid-color="attribute.healthBarColorMid"
+      :low-color="attribute.healthBarColorLow"
       :_id="attribute._id"
       @change="e => $emit('change', {_id: attribute._id, change: e})"
       @click="e => $emit('click', {_id: attribute._id})"

app/imports/ui/properties/forms/AttributeForm.vue

@@ -47,23 +47,25 @@
       :hint="attributeTypeHints[model.attributeType]"
       @change="change('attributeType', ...arguments)"
     />
-    <smart-select
+    <v-expand-transition>
-      v-if="model.attributeType === 'hitDice'"
+      <smart-select
-      label="Hit Dice Size"
+        v-if="model.attributeType === 'hitDice'"
-      :items="['d4', 'd6', 'd8', 'd10', 'd12', 'd20']"
+        label="Hit Dice Size"
-      :value="model.hitDiceSize"
+        :items="['d4', 'd6', 'd8', 'd10', 'd12', 'd20']"
-      :error-messages="errors.hitDiceSize"
+        :value="model.hitDiceSize"
-      :menu-props="{auto: true, lazy: true}"
+        :error-messages="errors.hitDiceSize"
-      @change="change('hitDiceSize', ...arguments)"
+        :menu-props="{auto: true, lazy: true}"
-    />
+        @change="change('hitDiceSize', ...arguments)"
-    <computed-field
+      />
-      v-if="model.attributeType === 'spellSlot'"
+      <computed-field
-      label="Spell slot level"
+        v-if="model.attributeType === 'spellSlot'"
-      :model="model.spellSlotLevel"
+        label="Spell slot level"
-      :error-messages="errors.spellSlotLevel"
+        :model="model.spellSlotLevel"
-      @change="({path, value, ack}) =>
+        :error-messages="errors.spellSlotLevel"
-        $emit('change', {path: ['spellSlotLevel', ...path], value, ack})"
+        @change="({path, value, ack}) =>
-    />
+          $emit('change', {path: ['spellSlotLevel', ...path], value, ack})"
+      />
+    </v-expand-transition>
     <inline-computation-field
       label="Description"
       :model="model.description"
@@ -71,70 +73,94 @@
       @change="({path, value, ack}) =>
         $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <form-section
+    <form-sections>
-      name="Advanced"
+      <v-expand-transition>
-      standalone
+        <form-section
-    >
+          v-if="model.attributeType === 'healthBar'"
-      <smart-combobox
+          name="Health Bar Settings"
-        label="Tags"
+          standalone
-        multiple
-        chips
-        deletable-chips
-        hint="Used to let slots find this property in a library, should otherwise be left blank"
-        :value="model.tags"
-        @change="change('tags', ...arguments)"
-      />
-      <div class="layout column align-center">
-        <smart-switch
-          v-if="model.attributeType !== 'hitDice'"
-          label="Allow decimal values"
-          class="no-flex"
-          :value="model.decimal"
-          :error-messages="errors.decimal"
-          @change="change('decimal', ...arguments)"
-        />
-        <div
-          class="layout justify-center"
-          style="align-self: stretch;"
         >
-          <text-field
+          <color-picker
-            label="Damage"
+            :value="model.healthBarColorMid"
-            type="number"
+            label="Half-filled color"
-            class="damage-field text-center"
+            @input="value => $emit('change', {path: ['healthBarColorMid'], value})"
-            style="max-width: 300px;"
+          />
-            hint="The attribute's final value is reduced by this amount. Attribute damage can increase this value until it matches the attribute's computed value. Should mostly be left blank."
+          <color-picker
-            :disabled="!context.isLibraryForm"
+            :value="model.healthBarColorLow"
-            :value="model.damage"
+            label="Empty color"
-            :error-messages="errors.damage"
+            @input="value => $emit('change', {path: ['healthBarColorLow'], value})"
-            @change="change('damage', ...arguments)"
+          />
+        </form-section>
+      </v-expand-transition>
+
+      <form-section
+        name="Advanced"
+      >
+        <smart-combobox
+          label="Tags"
+          multiple
+          chips
+          deletable-chips
+          hint="Used to let slots find this property in a library, should otherwise be left blank"
+          :value="model.tags"
+          @change="change('tags', ...arguments)"
+        />
+        <div class="layout column align-center">
+          <smart-switch
+            v-if="model.attributeType !== 'hitDice'"
+            label="Allow decimal values"
+            class="no-flex"
+            :value="model.decimal"
+            :error-messages="errors.decimal"
+            @change="change('decimal', ...arguments)"
+          />
+          <div
+            class="layout justify-center"
+            style="align-self: stretch;"
+          >
+            <text-field
+              label="Damage"
+              type="number"
+              class="damage-field text-center"
+              style="max-width: 300px;"
+              hint="The attribute's final value is reduced by this amount. Attribute damage can increase this value until it matches the attribute's computed value. Should mostly be left blank."
+              :disabled="!context.isLibraryForm"
+              :value="model.damage"
+              :error-messages="errors.damage"
+              @change="change('damage', ...arguments)"
+            />
+          </div>
+        </div>
+        <div class="layout wrap">
+          <smart-select
+            v-if="model.attributeType !== 'hitDice'"
+            label="Reset"
+            clearable
+            style="flex-basis: 300px;"
+            hint="When damage should be reset to zero"
+            :items="resetOptions"
+            :value="model.reset"
+            :error-messages="errors.reset"
+            :menu-props="{auto: true, lazy: true}"
+            @change="change('reset', ...arguments)"
           />
         </div>
-      </div>
+      </form-section>
-      <div class="layout wrap">
+    </form-sections>
-        <smart-select
-          v-if="model.attributeType !== 'hitDice'"
-          label="Reset"
-          clearable
-          style="flex-basis: 300px;"
-          hint="When damage should be reset to zero"
-          :items="resetOptions"
-          :value="model.reset"
-          :error-messages="errors.reset"
-          :menu-props="{auto: true, lazy: true}"
-          @change="change('reset', ...arguments)"
-        />
-      </div>
-    </form-section>
   </div>
 </template>
 
 <script lang="js">
-	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+  import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+	import FormSections from '/imports/ui/properties/forms/shared/FormSections.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 
 	export default {
 		components: {
 			FormSection,
+      FormSections,
+      ColorPicker,
 		},
     mixins: [propertyFormMixin],
     inject: {

app/package-lock.json

@@ -508,6 +508,11 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2783,7 +2788,7 @@
     },
     "signal-exit": {
       "version": "3.0.2",
-      "resolved": false,
+      "resolved": "",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "simpl-schema": {

app/package.json

@@ -23,6 +23,7 @@
     "animejs": "^2.2.0",
     "aws-sdk": "^2.1059.0",
     "bcrypt": "^5.0.0",
+    "chroma-js": "^2.4.2",
     "core-js": "^2.6.11",
     "css-box-shadow": "^1.0.0-3",
     "date-fns": "^1.30.1",