Improved hexagon hb

app/imports/api/tabletop/methods/shared/tabletopPermissions.ts

@@ -12,9 +12,9 @@ export function assertUserInTabletop(tabletopId, userId) {
     fields: { gameMasters: 1, players: 1 }
   });
   assertTabletopExists(tabletop);
-  if (tabletop.gameMasters.includes(userId) && !tabletop.players.includes(userId)) {
+  if (!tabletop.gameMasters.includes(userId) && !tabletop.players.includes(userId)) {
     throw new Meteor.Error('Not in tabletop',
-      'The user is not the gamemaster or a player in the given tabletop');
+      'The user is not a game master or a player in the given tabletop');
   }
 }
 

app/imports/client/ui/components/HexagonProgress.vue

@@ -10,20 +10,50 @@
 </template>
 
 <script>
+import chroma from 'chroma-js';
 export default {
   props: {
-    percent: {
-      type: Number,
+    model: {
+      type: Object,
       required: true
-    }
+    },
   },
   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();
+    },
     fillStyle() {
       return {
-        '--p': `${this.percent}%`
+        '--p': `${100 - (this.fillFraction * 100)}%`,
+        background: `conic-gradient(#0000 var(--p), ${this.barColor} var(--p))`,
+        backgroundColor: this.barBackgroundColor,
       };
     }
-  }
+  },
 };
 </script>
 
@@ -38,8 +68,8 @@ export default {
     0% 75%,
     0% 25%
   );
-  background: conic-gradient(red var(--p),#0000 0);
-  background-color: #5e1010; /* adjust the color as needed */
+  background: conic-gradient(#0000 var(--p), red var(--p));
+  background-color: #5e1010;
 }
 
 .hexagon-content {

app/imports/client/ui/components/HexagonProgressStack.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="!bars.length"
+    class="hexagon-content"
+  >
+    <slot />
+  </div>
+  <hexagon-progress
+    v-else
+    :model="bars[0]"
+  >
+    <slot v-if="bars.length === 1" />
+    <hexagon-progress-stack
+      v-else
+      :bars="tail"
+      class="child"
+    >
+      <slot />
+    </hexagon-progress-stack>
+  </hexagon-progress>
+</template>
+
+<script>
+import { tail } from 'lodash';
+import HexagonProgress from '/imports/client/ui/components/HexagonProgress.vue';
+
+export default {
+  name: 'HexagonProgressStack',
+  components: {
+    HexagonProgress,
+  },
+  props: {
+    bars: {
+      type: Array,
+      required: true
+    },
+  },
+  computed: {
+    tail() {
+      return tail(this.bars);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.hexagon-content {
+  position: absolute;
+  inset: 4px;
+  background-color: #252525;
+  clip-path: polygon(
+    50% 0%,
+    100% 25%,
+    100% 75%,
+    50% 100%,
+    0% 75%,
+    0% 25%
+  );
+}
+
+.child {
+  width: 100%;
+  height: 100%;
+}
+</style>

app/imports/client/ui/tabletop/TabletopCreatureListItem.vue

@@ -2,44 +2,72 @@
   <div
     class="d-flex align-center"
   >
-    <hexagon-progress
-      :percent="66"
+    <hexagon-progress-stack
+      :bars="healthBars || []"
       style="z-index: 1; width: 60px; height: 60px; margin-right: -16px"
     >
-      <hexagon-progress
-        :percent="30"
-        style="width: 100%; height: 100%"
-      >
-        <v-img
-          contain
-          src="/images/paragons/kira.png"
-        />
-      </hexagon-progress>
-    </hexagon-progress>
+      <v-img
+        :src="model.picture || '/images/ui/missing-portrait.png'"
+        lazy-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAXdJREFUWEftlq1vAkEQxedSB7pYDklBNsgmyCa4Cv5GBI6k8tJKUglULrWcBlvySA4B+/HeAcV07O3t/ObtvNnNHsyc3TEyAGRm+T0Yfs3WFwE0mk3bbbe12WsDtDsda+e5PbZaR4C1c/a9XEowtQC6vZ499ftniaCECiEDoPLnwSBa5WdRWLnZUErIAK+jkeHcY4HkgGBCAmCqr5KyKkgAobP3VXoTAJw9VGBitVhQjpAUeBkOD7Zj4sc5+5rPk0slAOUIkBwQqZAAUD1UYOImALAfbMjE+2xGjWhJASRmGpFtQOwnAzAqTCcTRqTDGhkAP8UGklK9BIDKq9svZUVcShjHZVkmnUApoNjvVHvAfBRFsCGTAJckr2AAAVf4Igqg+D7VdaHJGAVQRm8KIKRCFOBtPE7tK3333ZBBAOXuZyl8Fv1TAF8fBAGYkctWXq3zPdWCANdswJgdgwDM41NVwOeEf4BoE6be/3WO4PSdeARQN7vm+j0BlQ9wWvLB6AAAAABJRU5ErkJggg=="
+        class="align-end"
+        :class="{placeholder: !model.picture}"
+        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+        position="top center"
+      />
+    </hexagon-progress-stack>
     <v-card
       class="flex-grow-1"
       style="margin: 16px 16px 16px 0px;"
     >
       <div style="margin: 8px 8px 8px 24px;">
-        {{ title }}
+        {{ model.name }}
       </div>
     </v-card>
   </div>
 </template>
 
 <script lang="js">
-import HexagonProgress from '/imports/client/ui/components/HexagonProgress.vue';
+import HexagonProgressStack from '/imports/client/ui/components/HexagonProgressStack.vue';
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties';
 
 export default {
   components: { 
-    HexagonProgress,
+    HexagonProgressStack,
   },
   props: {
-    title: {
-      type: String,
-      default: 'Title'
+    model: {
+      type: Object,
+      required: true,
     },
-  }
+  },
+  meteor: {
+    healthBars() {
+      const folderIds = CreatureProperties.find({
+        'root.id': this.model._id,
+        type: 'folder',
+        groupStats: true,
+        hideStatsGroup: true,
+        removed: { $ne: true },
+        inactive: { $ne: true },
+      }, { fields: { _id: 1 } }).map(folder => folder._id);
+      // Get the properties that need to be shown as a health bar
+      return CreatureProperties.find({
+        'root.id': this.model._id,
+        'parentId': {
+          $nin: folderIds,
+        },
+        type: 'attribute',
+        attributeType: 'healthBar',
+        healthBarNoDamage: { $ne: true },
+        inactive: { $ne: true },
+        removed: { $ne: true },
+      }, {
+        sort: {
+          order: 1,
+        },
+      });
+    }
+  },
 };
 </script>