Set up custom icons for most properties

app/imports/api/creature/CreatureProperties.js

@@ -17,6 +17,7 @@ import {
 	renewDocIds
 } from '/imports/api/parenting/parenting.js';
 import {setDocToLastOrder} from '/imports/api/parenting/order.js';
+import { storedIconsSchema } from '/imports/api/icons/Icons.js';
 
 let CreatureProperties = new Mongo.Collection('creatureProperties');
 
@@ -36,6 +37,10 @@ let CreaturePropertySchema = new SimpleSchema({
 		type: Boolean,
 		optional: true,
 	},
+  icon: {
+    type: storedIconsSchema,
+    optional: true,
+  }
 });
 
 for (let key in propertySchemasIndex){
@@ -259,6 +264,48 @@ const damageProperty = new ValidatedMethod({
   },
 });
 
+const adjustQuantity = new ValidatedMethod({
+  name: 'CreatureProperties.methods.adjustQuantity',
+  validate: new SimpleSchema({
+    _id: SimpleSchema.RegEx.Id,
+    operation: {
+      type: String,
+      allowedValues: ['set', 'increment']
+    },
+    value: Number,
+  }).validator(),
+  run({_id, operation, value}) {
+		let currentProperty = CreatureProperties.findOne(_id);
+		// Check permissions
+		assertPropertyEditPermission(currentProperty, this.userId);
+		// Check if property can take damage
+		let schema = CreatureProperties.simpleSchema(currentProperty);
+		if (!schema.allowsKey('quantity')){
+			throw new Meteor.Error(
+				'Adjust quantity failed',
+				`Property of type "${currentProperty.type}" doesn't have a quantity`
+			);
+		}
+		if (operation === 'set'){
+			CreatureProperties.update(_id, {
+				$set: {quantity: value}
+			}, {
+				selector: currentProperty
+			});
+		} else if (operation === 'increment'){
+      // value here is 'damage'
+      value = -value;
+			let currentQuantity = currentProperty.quantity;
+      if (currentQuantity + value < 0) value = -currentQuantity;
+			CreatureProperties.update(_id, {
+				$inc: {quantity: value}
+			}, {
+				selector: currentProperty
+			});
+		}
+  },
+});
+
 const pushToProperty = new ValidatedMethod({
 	name: 'CreatureProperties.methods.push',
 	validate: null,
@@ -312,6 +359,7 @@ export {
 	insertPropertyFromLibraryNode,
 	updateProperty,
 	damageProperty,
+  adjustQuantity,
 	pushToProperty,
 	pullFromProperty,
 	softRemoveProperty,

app/imports/api/creature/computation/combineStat.js

@@ -72,8 +72,11 @@ function combineSkill(stat, aggregator, memo){
   }
   // Multiply the proficiency bonus by the actual proficiency
   profBonus *= stat.proficiency;
+  // Base value
+  stat.baseValue = aggregator.statBaseValue;
+  stat.baseValueErrors = aggregator.baseValueErrors;
   // Combine everything to get the final result
-  let result = (stat.abilityMod + profBonus + aggregator.add) * aggregator.mul;
+  let result = (aggregator.base + stat.abilityMod + profBonus + aggregator.add) * aggregator.mul;
   if (result < aggregator.min) result = aggregator.min;
   if (result > aggregator.max) result = aggregator.max;
   if (aggregator.set !== undefined) {
@@ -103,6 +106,7 @@ function combineSkill(stat, aggregator, memo){
   stat.rollBonuses = aggregator.rollBonus;
   // Hide
   stat.hide = aggregator.hasNoEffects &&
+    stat.baseValue === undefined &&
     stat.proficiency == 0 ||
     undefined;
 }

app/imports/api/creature/computation/recomputeCreature.js

@@ -76,12 +76,12 @@ export function recomputeCreatureById(creatureId){
     ancestorId: creatureId,
     filter: {type: {$in: calculationPropertyTypes}},
     includeUntoggled: true,
+    // TODO filter out expensive fields, particularly icon field
   });
   let computationMemo = new ComputationMemo(props);
   computeMemo(computationMemo);
   writeAlteredProperties(computationMemo);
   writeCreatureVariables(computationMemo, creatureId);
-  // if(Meteor.isClient) console.log(computationMemo);
   recomputeDamageMultipliersById(creatureId);
   return computationMemo;
 }

app/imports/api/creature/restCreature.js

@@ -3,7 +3,8 @@ import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import getActiveProperties, { getActivePropertyFilter } from '/imports/api/creature/getActiveProperties.js';
-import {assertEditPermission} from '/imports/api/creature/creaturePermissions.js';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import { recomputeCreatureById } from '/imports/api/creature/computation/recomputeCreature.js';
 
 const restCreature = new ValidatedMethod({
   name: 'creature.methods.longRest',
@@ -87,7 +88,8 @@ const restCreature = new ValidatedMethod({
       let amountToRecover, resultingDamage;
       hitDice.forEach(hd => {
         if (!recoverableHd) return;
-        amountToRecover = Math.min(recoverableHd, hd.damage);
+        amountToRecover = Math.min(recoverableHd, hd.damage || 0);
+        if (!amountToRecover) return;
         recoverableHd -= amountToRecover;
         resultingDamage = hd.damage - amountToRecover;
         CreatureProperties.update(hd._id, {
@@ -97,6 +99,7 @@ const restCreature = new ValidatedMethod({
         });
       });
     }
+    recomputeCreatureById(creatureId);
   },
 });
 

app/imports/api/icons/Icons.js

@@ -1,8 +1,10 @@
 import SimpleSchema from 'simpl-schema';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
+import { assertAdmin } from '/imports/api/sharing/sharingPermissions.js';
 
 let Icons = new Mongo.Collection('icons');
 
-iconsSchema = new SimpleSchema({
+let iconsSchema = new SimpleSchema({
 	name: {
 		type: String,
     unique: true,
@@ -33,21 +35,57 @@ if (Meteor.isServer) {
   });
 }
 
+const storedIconsSchema = new SimpleSchema({
+  name: {
+    type: String,
+  },
+  shape: {
+    type: String,
+  },
+});
+
 Icons.attachSchema(iconsSchema);
 
-/*
-console.warn("Write Icons is not secure, disable before deployment")
+// This method does not validate icons against the schema, use wisely;
 const writeIcons = new ValidatedMethod({
-	name: 'writeIcons',
+	name: 'icons.methods.write',
 	validate: null,
 	run(icons){
+    assertAdmin(this.userId);
     if (Meteor.isServer){
       this.unblock();
       Icons.rawCollection().insert(icons, {ordered: false});
     }
 	}
 });
-*/
 
-export { writeIcons };
+const findIcons = new ValidatedMethod({
+  name: 'icons.methods.find',
+  validate: new SimpleSchema({
+    search: {
+      type: String,
+      max: 30,
+      optional: true,
+    },
+  }).validator(),
+  run({search}){
+    if (!search) return [];
+    if (!Meteor.isServer) return;
+    return Icons.find(
+      { $text: {$search: search} },
+      {
+        // relevant documents have a higher score.
+        fields: {
+          score: { $meta: 'textScore' }
+        },
+        // `score` property specified in the projection fields above.
+        sort: {
+          score: { $meta: 'textScore' }
+        }
+      }
+    ).fetch();
+  }
+})
+
+export { writeIcons, findIcons, storedIconsSchema };
 export default Icons;

app/imports/api/library/LibraryNodes.js

@@ -9,6 +9,7 @@ import Libraries from '/imports/api/library/Libraries.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
 import { softRemove } from '/imports/api/parenting/softRemove.js';
 import SoftRemovableSchema from '/imports/api/parenting/SoftRemovableSchema.js';
+import { storedIconsSchema } from '/imports/api/icons/Icons.js';
 
 let LibraryNodes = new Mongo.Collection('libraryNodes');
 
@@ -24,6 +25,10 @@ let LibraryNodeSchema = new SimpleSchema({
 	'tags.$': {
 		type: String,
 	},
+  icon: {
+    type: storedIconsSchema,
+    optional: true,
+  }
 });
 
 for (let key in propertySchemasIndex){

app/imports/api/properties/Containers.js

@@ -18,12 +18,12 @@ let ContainerSchema = new SimpleSchema({
 	weight: {
 		type: Number,
 		min: 0,
-		defaultValue: 0
+    optional: true,
 	},
 	value: {
 		type: Number,
 		min: 0,
-		defaultValue: 0
+    optional: true,
 	},
 	description: {
 		type: String,
@@ -32,4 +32,16 @@ let ContainerSchema = new SimpleSchema({
 	},
 });
 
-export { ContainerSchema };
+const ComputedOnlyContainerSchema = new SimpleSchema({
+  // Weight of all the contents, zero if `contentsWeightless` is true
+  contentsWeight:{
+    type: Number,
+    optional: true,
+  },
+});
+
+const ComputedContainerSchema = new SimpleSchema()
+	.extend(ComputedOnlyContainerSchema)
+	.extend(ContainerSchema);
+
+export { ContainerSchema, ComputedContainerSchema };

app/imports/api/properties/Items.js

@@ -24,13 +24,13 @@ const ItemSchema = new SimpleSchema({
 	weight: {
 		type: Number,
 		min: 0,
-		defaultValue: 0,
+    optional: true,
 	},
 	// Value per item in the stack, in gold pieces
 	value: {
 		type: Number,
 		min: 0,
-		defaultValue: 0,
+    optional: true,
 	},
 	// If this item is equipped, it requires attunement
 	// Being equipped is `enabled === true`

app/imports/api/properties/Skills.js

@@ -1,5 +1,6 @@
 import SimpleSchema from 'simpl-schema';
 import VARIABLE_NAME_REGEX from '/imports/constants/VARIABLE_NAME_REGEX.js';
+import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 
 /*
  * Skills are anything that results in a modifier to be added to a D20
@@ -37,9 +38,9 @@ let SkillSchema = new SimpleSchema({
     ],
     defaultValue: 'skill',
   },
-	// If the baseValue is higher than the computed value, it will be used as `value`
-	baseValue: {
-		type: Number,
+  // The starting value, before effects
+	baseValueCalculation: {
+		type: String,
 		optional: true,
 	},
 	// The base proficiency of this skill
@@ -59,6 +60,18 @@ let ComputedOnlySkillSchema = new SimpleSchema({
   value: {
     type: Number,
 		defaultValue: 0,
+  },
+  // The result of baseValueCalculation
+  baseValue: {
+    type: SimpleSchema.oneOf(Number, String, Boolean),
+    optional: true,
+  },
+  baseValueErrors: {
+    type: Array,
+    optional: true,
+  },
+  'baseValueErrors.$': {
+    type: ErrorSchema,
   },
 	// Computed value added by the ability
 	abilityMod: {

app/imports/api/sharing/sharingPermissions.js

@@ -113,3 +113,17 @@ export function assertDocViewPermission(doc, userId){
   let root = getRoot(doc);
   assertViewPermission(root, userId);
 }
+
+export function assertAdmin(userId){
+  assertIdValid(userId);
+  let user = Meteor.users.findOne(userId, {fields: {roles: 1}});
+  if (!user){
+    throw new Meteor.Error('Permission denied',
+      'UserId does not match any existing user');
+  }
+  let isAdmin = user.roles && user.roles.includes('admin')
+  if (!isAdmin){
+    throw new Meteor.Error('Permission denied',
+      'User does not have the admin role');
+  }
+}

app/imports/constants/PROPERTIES.js

@@ -1,42 +1,42 @@
 const PROPERTIES = Object.freeze({
   action: {
-    icon: 'offline_bolt',
+    icon: '$vuetify.icons.action',
     name: 'Action'
   },
   adjustment: {
-    icon: 'warning',
+    icon: '$vuetify.icons.attribute_damage',
     name: 'Attribute damage'
   },
   attack: {
-    icon: 'bolt',
+    icon: '$vuetify.icons.attack',
     name: 'Attack'
   },
   attribute: {
-    icon: 'donut_small',
+    icon: '$vuetify.icons.attribute',
     name: 'Attribute'
   },
   buff: {
-    icon: 'star',
+    icon: '$vuetify.icons.buff',
     name: 'Buff'
   },
   classLevel: {
-    icon: 'school',
+    icon: '$vuetify.icons.class_level',
     name: 'Class level'
   },
   damage: {
-    icon: 'report',
+    icon: '$vuetify.icons.damage',
     name: 'Damage'
   },
   damageMultiplier: {
-    icon: 'layers',
+    icon: '$vuetify.icons.damage_multiplier',
     name: 'Damage multiplier'
   },
   effect: {
-    icon: 'show_chart',
+    icon: '$vuetify.icons.effect',
     name: 'Effect'
   },
   experience: {
-    icon: 'add',
+    icon: '$vuetify.icons.experience',
     name: 'Experience'
   },
   feature: {
@@ -56,23 +56,23 @@ const PROPERTIES = Object.freeze({
     name: 'Proficiency'
   },
   roll: {
-    icon: 'flare',
+    icon: '$vuetify.icons.roll',
     name: 'Roll'
   },
   savingThrow: {
-    icon: 'all_out',
+    icon: '$vuetify.icons.saving_throw',
     name: 'Saving throw'
   },
   skill: {
-    icon: 'check_box',
+    icon: '$vuetify.icons.skill',
     name: 'Skill'
   },
   spellList: {
-    icon: 'list',
+    icon: '$vuetify.icons.spell_list',
     name: 'Spell list'
   },
   spell: {
-    icon: 'whatshot',
+    icon: '$vuetify.icons.spell',
     name: 'Spell'
   },
   container: {
@@ -80,11 +80,11 @@ const PROPERTIES = Object.freeze({
     name: 'Container'
   },
   item: {
-    icon: 'category',
+    icon: '$vuetify.icons.item',
     name: 'Item'
   },
   toggle: {
-    icon: 'power_settings_new',
+    icon: '$vuetify.icons.toggle',
     name: 'Toggle'
   },
 });

app/imports/ui/components/CoinValue.vue

@@ -0,0 +1,40 @@
+<template lang="html">
+  <div>
+    <span
+      v-if="coinValue.gp || value === 0"
+    >
+      {{ coinValue.gp }} gp
+    </span>
+    <span
+      v-if="coinValue.sp || (coinValue.gp && coinValue.cp)"
+    >
+      {{ coinValue.sp }} sp
+    </span>
+    <span
+      v-if="coinValue.cp"
+    >
+      {{ coinValue.cp }} cp
+    </span>
+  </div>
+</template>
+
+<script>
+import valueToCoins from '/imports/ui/utility/valueToCoins.js';
+
+export default {
+  props:{
+    value: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  computed:{
+    coinValue(){
+      return valueToCoins(this.value);
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/ColorPicker.vue

@@ -56,7 +56,7 @@
               <v-scroll-y-transition>
                 <v-icon
                   v-if="kebabShade === shadeOption"
-                  :class="{dark: isDark(color, shade)}"
+                  :class="isDark(color, shade) ? 'dark' : 'light'"
                 >
                   check
                 </v-icon>

app/imports/ui/components/IconSearch.vue

@@ -1,79 +0,0 @@
-<template lang="html">
-	<v-autocomplete
-		v-model="model"
-		:search-input.sync="searchString"
-		:items="items"
-		:loading="!$subReady.searchIcons || isLoading"
-		item-text="name"
-		item-value="_id"
-		label="Search icons"
-		hide-no-data
-		@input="input"
-	>
-		<template
-			slot="item"
-			slot-scope="{ item, tile }"
-		>
-			<v-list-tile-avatar>
-				<svg class="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path :d="item.shape"/></svg>
-			</v-list-tile-avatar>
-			<v-list-tile-content>
-				<v-list-tile-title v-text="item.name"></v-list-tile-title>
-			</v-list-tile-content>
-		</template>
-	</v-autocomplete>
-</template>
-
-<script>
-import Icons from '/imports/api/icons/Icons.js';
-
-export default {
-	data(){ return {
-		model: this.value,
-		searchString: null,
-		serverSearchString: null,
-		isLoading: false,
-	}},
-	props: {
-		value: String,
-	},
-	watch: {
-		searchString(string){
-			this.isLoading = true;
-			this.searchServer(string)
-		},
-		value(newValue){
-			this.model = newValue;
-		},
-	},
-	methods: {
-		searchServer: _.debounce(function(string){
-			this.serverSearchString = string;
-		}, 200),
-		input(e){
-			this.$emit('input', e);
-		}
-	},
-	meteor: {
-		$subscribe: {
-			searchIcons() {
-				this.isLoading = false;
-				return [this.serverSearchString];
-			},
-		},
-		items(){
-			return Icons.find({}, { sort: [['score', 'desc']] }).fetch();
-		},
-	},
-}
-</script>
-
-<style lang="css" scoped>
-	.avatar {
-		width: 100%;
-		height: 100%;
-	}
-	.theme--dark .avatar {
-		fill: white;
-	}
-</style>

app/imports/ui/components/IncrementButton.vue

@@ -0,0 +1,58 @@
+<template lang="html">
+  <v-menu
+    v-model="open"
+    origin="center center"
+    transition="scale-transition"
+    :nudge-left="130"
+    :min-width="305"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ on }">
+      <v-btn
+        v-bind="$attrs"
+        v-on="on"
+      >
+        <slot>
+          <v-icon>add</v-icon>
+        </slot>
+      </v-btn>
+    </template>
+    <v-card>
+      <increment-menu
+        flat
+        :value="value"
+        :open="open"
+        @change="changeIncrementMenu"
+        @close="open = false"
+      />
+    </v-card>
+  </v-menu>
+</template>
+
+<script>
+import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
+
+export default {
+  components: {
+    IncrementMenu,
+  },
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  data(){return {
+    open: false
+  }},
+  methods: {
+    changeIncrementMenu(e){
+      this.$emit('change', e);
+      this.open = false;
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/IncrementMenu.vue

@@ -0,0 +1,166 @@
+<template>
+  <v-layout
+    row
+    align-center
+    justify-center
+    class="increment-menu"
+  >
+    <v-spacer />
+    <v-btn-toggle
+      :value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
+      class="mx-2"
+      @click="$refs.editInput.focus()"
+    >
+      <v-btn
+        :disabled="context.editPermission === false"
+        class="filled"
+        @click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
+      >
+        <v-icon>add</v-icon>
+      </v-btn>
+      <v-btn
+        :disabled="context.editPermission === false"
+        class="filled"
+        @click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
+      >
+        <v-icon>remove</v-icon>
+      </v-btn>
+    </v-btn-toggle>
+    <v-text-field
+      ref="editInput"
+      :solo="!flat"
+      :class="flat && 'ma-0 pa-0'"
+      hide-details
+      type="number"
+      style="max-width: 120px;"
+      min="0"
+      :value="editValue"
+      :prepend-inner-icon="operationIcon(operation)"
+      :disabled="context.editPermission === false"
+      @focus="$event.target.select()"
+      @keypress="keypress"
+      @input="input"
+    />
+    <v-btn
+      :small="!flat"
+      :fab="!flat"
+      :flat="flat"
+      :icon="flat"
+      class="filled"
+      @click="commitEdit"
+    >
+      <v-icon>done</v-icon>
+    </v-btn>
+    <v-btn
+      :small="!flat"
+      :fab="!flat"
+      :flat="flat"
+      :icon="flat"
+      class="mx-0 filled"
+      @click="cancelEdit"
+    >
+      <v-icon>close</v-icon>
+    </v-btn>
+    <v-spacer />
+  </v-layout>
+</template>
+
+<script>
+	export default {
+    inject: {
+      context: { default: {} }
+    },
+		props: {
+			value: {
+        type: Number,
+        required: true,
+      },
+      open: Boolean,
+      flat: Boolean,
+		},
+		data() {
+			return {
+				editValue: 0,
+				operation: 'set',
+				hover: false,
+			};
+		},
+    watch: {
+      open(newValue){
+        if (newValue){
+          this.resetData();
+        }
+      }
+    },
+		methods: {
+      resetData(){
+        this.editValue = this.value;
+        this.operation = 'set';
+        // this.$nextTick didn't work, using timeout instead did
+        setTimeout(() => {
+          if (this.$refs.editInput){
+            this.$refs.editInput.focus();
+          }
+        }, 100);
+      },
+			cancelEdit() {
+				this.$emit('close');
+			},
+			commitEdit() {
+				this.editing = false;
+				let value = +this.$refs.editInput.lazyValue;
+				if (this.operation === 'add') {
+					value = -value;
+				}
+				let type = this.operation === 'set' ? 'set' : 'increment';
+				this.$emit('change', { type, value });
+			},
+			operationIcon(operation) {
+				switch (operation) {
+					case 'set':
+						return 'forward';
+					case 'add':
+            return 'add';
+					case 'subtract':
+						return 'remove';
+				}
+			},
+			toggleAdd(){
+				this.operation = (this.operation === 'add') ? 'set': 'add';
+			},
+			toggleSubtract(){
+				this.operation = (this.operation === 'subtract') ? 'set': 'subtract';
+			},
+			keypress(event) {
+				let digitsOnly = /[0-9]/;
+				let key = event.key;
+				if (key === '+') {
+					this.toggleAdd();
+					event.preventDefault();
+				} else if (key === '-') {
+					this.toggleSubtract();
+					event.preventDefault();
+				} else if (key === 'Enter') {
+					this.commitEdit();
+				} else if (!digitsOnly.test(key)){
+					event.preventDefault();
+				}
+			},
+      input(value){
+        if (+value < 0){
+          this.editValue = -value;
+          this.operation = 'subtract';
+        }
+      }
+		}
+	};
+</script>
+
+<style scoped>
+	.filled.theme--light {
+		background: #fff !important;
+	}
+	.filled.theme--dark {
+		background: #424242 !important;
+	}
+</style>

app/imports/ui/components/ToolbarCard.vue

@@ -9,6 +9,7 @@
       :style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
       :color="color"
       :dark="isDark"
+      :light="!isDark"
       @click="$emit('toolbarclick')"
     >
       <slot name="toolbar" />

app/imports/ui/components/global/IconPicker.vue

@@ -0,0 +1,131 @@
+<template lang="html">
+  <v-menu
+    v-model="menu"
+    :close-on-content-click="false"
+    lazy
+    transition="slide-y-transition"
+    min-width="290px"
+    style="overflow-y: auto;"
+  >
+    <template #activator="{ on }">
+      <div class="layout row align-center">
+        <v-label>{{ label }}</v-label>
+        <v-btn
+          :loading="loading"
+          large
+          icon
+          v-on="on"
+        >
+          <svg-icon
+            v-if="safeValue && safeValue.shape"
+            large
+            :shape="safeValue.shape"
+          />
+          <v-icon
+            v-else
+            large
+          >
+            highlight_alt
+          </v-icon>
+        </v-btn>
+      </div>
+    </template>
+    <v-card>
+      <v-card-text>
+        <div class="layout row">
+          <text-field
+            ref="iconSearchField"
+            label="Search icons"
+            append-icon="search"
+            clearable
+            :value="searchString"
+            @change="search"
+          />
+          <v-btn
+            icon
+            @click="select()"
+          >
+            <v-icon>
+              cancel
+            </v-icon>
+          </v-btn>
+        </div>
+        <v-layout
+          row
+          wrap
+          style="max-height: 400px; overflow-y: auto;"
+        >
+          <v-scale-transition
+            group
+            hide-on-leave
+          >
+            <v-btn
+              v-for="icon in icons"
+              :key="icon._id"
+              icon
+              large
+              @click="select(icon)"
+            >
+              <svg-icon
+                :shape="icon.shape"
+                x-large
+              />
+            </v-btn>
+          </v-scale-transition>
+        </v-layout>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script>
+import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
+import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+import { findIcons } from '/imports/api/icons/Icons.js';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  mixins: [SmartInput],
+	props: {
+    label: {
+      type: String,
+      default: 'Icon',
+    },
+	},
+	data(){return {
+		menu: false,
+    searchString: '',
+    icons: [],
+	};},
+  watch: {
+    menu(value){
+      if (value){
+        setTimeout(() => {
+          if (this.$refs.iconSearchField){
+            this.$refs.iconSearchField.$children[0].focus();
+          }
+        }, 100);
+      }
+    },
+  },
+	methods: {
+    search(value, ack){
+      this.searchString = value;
+      this.icons = [];
+      findIcons.call({search: value}, (error, result) => {
+        ack(error);
+        this.icons = result;
+      });
+    },
+    select(icon){
+      this.menu = false;
+      this.change(icon);
+    },
+	},
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/global/SmartInputMixin.js

@@ -23,7 +23,7 @@ export default {
     inputValue: this.value,
   };},
   props: {
-    value: [String, Number, Date, Array, Boolean],
+    value: [String, Number, Date, Array, Object, Boolean],
     errorMessages: [String, Array],
     disabled: Boolean,
   },

app/imports/ui/components/global/SvgIcon.vue

@@ -0,0 +1,97 @@
+<template lang="html">
+  <i
+    ref="icon"
+    aria-hidden
+    role="img"
+    class="v-icon"
+    :class="themeClasses"
+    :style="color && `color: ${color}`"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      :style="`height: ${size}; width: ${size}`"
+    >
+      <path
+        :d="shape"
+      />
+    </svg>
+  </i>
+</template>
+
+<script>
+const SIZE_MAP = {
+  xSmall: '12px',
+  small: '16px',
+  default: '24px',
+  medium: '28px',
+  large: '36px',
+  xLarge: '40px',
+}
+export default {
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
+  props: {
+    shape: {
+      type: String,
+      default: '',
+    },
+    color: {
+      type: String,
+      default: undefined,
+    },
+    xSmall: Boolean,
+    small: Boolean,
+    medium: Boolean,
+    large: Boolean,
+    xLarge: Boolean,
+  },
+  data(){return {
+    inheritedSize: undefined,
+  }},
+  computed: {
+    isDark () {
+      if (this.dark === true) {
+        // explicitly dark
+        return true
+      } else if (this.light === true) {
+        // explicitly light
+        return false
+      } else {
+        // inherit from parent, or default false if there is none
+        return this.theme.isDark
+      }
+    },
+    themeClasses() {
+      return {
+        'theme--dark': this.isDark,
+        'theme--light': !this.isDark,
+      }
+    },
+    size() {
+      if (this.inheritedSize) return this.inheritedSize;
+      if (this.xSmall) return SIZE_MAP['xSmall'];
+      if (this.small)  return SIZE_MAP['small'];
+      if (this.medium) return SIZE_MAP['medium'];
+      if (this.large)  return SIZE_MAP['large'];
+      if (this.xLarge) return SIZE_MAP['xLarge'];
+      return SIZE_MAP['default'];
+    },
+  },
+  mounted(){
+    this.inheritedSize = this.$refs.icon.style.fontSize;
+  }
+}
+</script>
+
+<style lang="css" scoped>
+  svg {
+    color: inherit;
+    fill: currentColor;
+  }
+</style>

app/imports/ui/components/global/globalIndex.js

@@ -1,17 +1,21 @@
 import Vue from 'vue';
 // Global components
 import DatePicker from '/imports/ui/components/global/DatePicker.vue';
+import IconPicker from '/imports/ui/components/global/IconPicker.vue';
 import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
 import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
 import SmartCheckbox from '/imports/ui/components/global/SmartCheckbox.vue';
 import SmartSwitch from '/imports/ui/components/global/SmartSwitch.vue';
+import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
 
 Vue.component('DatePicker', DatePicker);
+Vue.component('IconPicker', IconPicker);
 Vue.component('TextField', TextField);
 Vue.component('TextArea', TextArea);
 Vue.component('SmartSelect', SmartSelect);
 Vue.component('SmartCombobox', SmartCombobox);
 Vue.component('SmartCheckbox', SmartCheckbox);
 Vue.component('SmartSwitch', SmartSwitch);
+Vue.component('SvgIcon', SvgIcon);

app/imports/ui/components/propertyToolbar.vue

@@ -2,14 +2,15 @@
   <v-toolbar
     :color="color || 'secondary'"
     :dark="isDark"
+    :light="!isDark"
     :flat="flat"
   >
     <property-icon
-      :type="model && model.type"
+      :model="model"
       class="mr-2"
     />
     <v-toolbar-title v-if="model">
-      {{ model.name || getPropertyName(model.type) }}
+      {{ title }}
     </v-toolbar-title>
     <v-spacer />
     <v-slide-y-transition
@@ -141,13 +142,25 @@ export default {
     },
     color(){
       return this.model && this.model.color || this.$vuetify.theme.secondary;
+    },
+    title(){
+      let model = this.model;
+      if (model.quantity !== 1 && model.quantity !== undefined){
+        if (model.plural){
+          return `${model.quantity} ${model.plural}`;
+        } else if (model.name) {
+          return `${model.quantity} ${model.name}`;
+        } else {
+          return `${model.quantity} × ${getPropertyName(model.type)}`
+        }
+      }
+      return model.name || getPropertyName(model.type);
     }
   },
   methods: {
     colorChanged(value){
       this.$emit('color-changed', value);
     },
-    getPropertyName,
   }
 }
 </script>

app/imports/ui/creature/character/CharacterSheetToolbarItems.vue

@@ -53,7 +53,6 @@
 <script>
 import Creatures from '/imports/api/creature/Creatures.js';
 import removeCreature from '/imports/api/creature/removeCreature.js';
-import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { mapMutations } from 'vuex';
 import { theme } from '/imports/ui/theme.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
@@ -134,7 +133,6 @@ export default {
         }
       });
     },
-		isDarkColor,
   },
   meteor: {
     $subscribe: {

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -292,7 +292,7 @@
 
 <script>
   import Creatures from '/imports/api/creature/Creatures.js';
-	import CreatureProperties, { damageProperty } from '/imports/api/creature/CreatureProperties.js';
+	import { damageProperty } from '/imports/api/creature/CreatureProperties.js';
 	import AttributeCard from '/imports/ui/properties/components/attributes/AttributeCard.vue';
 	import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
 	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';

app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue

@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
-    <v-toolbar-title slot="toolbar">
-      Add {{ propertyName }}
-    </v-toolbar-title>
+  <dialog-base
+    :override-back-button="() => $emit('back')"
+    :color="model.color"
+  >
+    <template slot="toolbar">
+      <v-toolbar-title>
+        Add {{ propertyName }}
+      </v-toolbar-title>
+      <v-spacer />
+      <color-picker
+        :value="model.color"
+        @input="value => change({path: ['color'], value})"
+      />
+    </template>
     <component
       :is="type"
       v-if="type"
@@ -32,11 +42,14 @@
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
+
 export default {
 	components: {
 		...propertyFormIndex,
 		DialogBase,
+    ColorPicker,
 	},
 	mixins: [schemaFormMixin],
 	props: {

app/imports/ui/dialogStack/DialogBase.vue

@@ -10,6 +10,7 @@
       <v-toolbar
         :color="computedColor"
         :dark="isDark"
+        :light="!isDark"
         class="base-dialog-toolbar"
         :flat="!offsetTop"
       >

app/imports/ui/icons/IconAdmin.vue

@@ -8,47 +8,17 @@
             align-center
           >
             <upload-btn
-              :file-changed-callback="fileChanged"
+              title="Metadata JSON"
+              @file-update="metadataFileChanged"
             />
-            <v-text-field
-              ref="iconSearchField"
-              label="Search"
-              append-icon="search"
-              @click:append="updateSearchString"
-              @keydown.enter="updateSearchString"
+            <upload-btn
+              title="Sprite JSON"
+              @file-update="fileChanged"
+            />
+            <icon-picker
+              :value="testIcon"
+              @change="testIconChange"
             />
-            <v-container
-              grid-list-md
-              fill-height
-            >
-              <v-layout
-                row
-                wrap
-              >
-                <v-flex
-                  v-for="icon in icons"
-                  :key="icon._id._str || icon._id"
-                  xs3
-                  md2
-                  xl1
-                >
-                  <v-card>
-                    <v-card-title class="title">
-                      {{ icon.name }}
-                    </v-card-title>
-                    <v-card-text>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 512 512"
-                      ><path
-                        fill="#000"
-                        :d="icon.shape"
-                      /></svg>
-                    </v-card-text>
-                  </v-card>
-                </v-flex>
-              </v-layout>
-            </v-container>
           </v-layout>
         </v-card-text>
       </v-card>
@@ -57,29 +27,34 @@
 </template>
 
 <script>
-  import importIcons from '/imports/ui/icons/importIcons.js';
-  import Icons from '/imports/api/icons/Icons.js';
+  import {importIcons, importIconMetadata} from '/imports/ui/icons/importIcons.js';
+  import IconPicker from '/imports/ui/components/global/IconPicker.vue';
+  import UploadButton from 'vuetify-upload-button';
 
   export default {
+    components: {
+      IconPicker,
+      UploadBtn: UploadButton,
+    },
     data(){ return {
       searchString: '',
+      testIcon: undefined,
     }},
+    mounted(){
+      console.log(this.$vuetify);
+    },
     methods: {
       fileChanged (file) {
         importIcons(file);
       },
-      updateSearchString(){
-        this.searchString = this.$refs.iconSearchField.internalValue;
+      metadataFileChanged(file){
+        importIconMetadata(file);
       },
-    },
-    meteor: {
-      $subscribe: {
-        searchIcons() {
-          return [this.searchString];
-        },
-      },
-      icons(){
-        return Icons.find({}, { sort: [['score', 'desc']] });
+      testIconChange(value, ack){
+        setTimeout(() => {
+          this.testIcon = value;
+          ack();
+        }, 1000);
       },
     },
   };

app/imports/ui/icons/SvgIconByName.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <svg-icon
+    :shape="shape"
+  />
+</template>
+
+<script>
+import SvgIcon from '/imports/ui/components/global/SvgIcon.vue'
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    shape(){
+      return SVG_ICONS[this.name].shape;
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/icons/importIcons.js

@@ -1,31 +1,50 @@
 import { writeIcons } from '/imports/api/icons/Icons.js';
 
 /*
- * Import a SVG sprite file. All the icons must contain one id and one path with a
- * single 'd' attribute.
+ * Import a SVG sprite file.
  *
  * A svg sprite file can be created by downloading the entire archive of
  * https://game-icons.net/ then using the search function with *.svg to copy
- * all the individual files into a single directory, and then using the npm
- * sprite-generator to run `svg-sprite-generate -d icons -o sprite.svg` to save
- * the sprite file.
+ * all the individual files into a single directory, and then using
+ * `npm i -g svg-sprite-generator` `npm i -g xml-js`
+ * run `svg-sprite-generate -d icons -o sprite.xml`
+ * run `xml-js sprite.xml --out sprite.json --compact true `
+ * to save the sprite file as json.
 */
+let metadata;
 
-export default function importIcons(file){
-  let id, d, icons = [];
+export function importIcons(file){
   let reader = new FileReader();
+  if (! metadata) throw 'No metadata to build with';
 
   reader.onload = function(){
-    reader.result.match(/i?d="([^"])+"/gi).forEach(s => {
-      if (s[0] === 'i'){
-        id = s.slice(4, -1);
-      } else if (s[0] === 'd'){
-        d = s.slice(3, -1);
-        icons.push ({_id: Random.id(), name: id, shape: d});
-      }
+    let data = JSON.parse(reader.result);
+    let icons = [];
+    data.svg.symbol.forEach(iconData => {
+      let name = iconData._attributes.id;
+      let shape = iconData.path[1]._attributes.d;
+      let icon = metadata[name] || {};
+      icon._id = Random.id();
+      icon.name = name;
+      icon.shape = shape;
+      icons.push(icon);
     });
     writeIcons.call(icons);
   };
 
   reader.readAsText(file);
-};
+}
+
+// Get metadata here:
+// https://gist.github.com/ThaumRystra/ffb264dea8c32e15de95f775596194a4
+// It is probably out of date though
+export function importIconMetadata(file){
+  let reader = new FileReader();
+
+  reader.onload = function(){
+    metadata = JSON.parse(reader.result);
+    console.log(metadata);
+  };
+
+  reader.readAsText(file);
+}

app/imports/ui/library/LibraryAndNode.vue

@@ -14,7 +14,8 @@
       <v-toolbar
         flat
         :color="selectedNode && selectedNode.color || 'secondary'"
-        :dark="isDarkColor(selectedNode && selectedNode.color || $vuetify.theme.secondary)"
+        :dark="isToolbarDark"
+        :light="!isToolbarDark"
       >
         <v-spacer />
         <v-switch
@@ -67,6 +68,14 @@ export default {
     organize: false,
     selected: undefined,
   };},
+  computed: {
+    isToolbarDark(){
+      return isDarkColor(
+        this.selectedNode && this.selectedNode.color ||
+        this.$vuetify.theme.secondary
+      );
+    }
+  },
   watch:{
     selectedNode(val){
       this.$emit('selected', val)
@@ -101,7 +110,6 @@ export default {
       }
     },
     getPropertyName,
-    isDarkColor,
   },
   meteor: {
     $subscribe: {

app/imports/ui/library/LibraryNodeInsertForm.vue

@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
-    <v-toolbar-title slot="toolbar">
-      Add {{ propertyName }}
-    </v-toolbar-title>
+  <dialog-base
+    :override-back-button="() => $emit('back')"
+    :color="model.color"
+  >
+    <template slot="toolbar">
+      <v-toolbar-title>
+        Add {{ propertyName }}
+      </v-toolbar-title>
+      <v-spacer />
+      <color-picker
+        :value="model.color"
+        @input="value => change({path: ['color'], value})"
+      />
+    </template>
     <component
       :is="type"
       v-if="type"
@@ -32,12 +42,14 @@
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 
 export default {
 	components: {
 		...propertyFormIndex,
 		DialogBase,
+    ColorPicker,
 	},
 	mixins: [schemaFormMixin],
 	props: {

app/imports/ui/library/SingleLibrary.vue

@@ -41,7 +41,7 @@
         flat
       >
         <property-icon
-          :type="selectedNode && selectedNode.type"
+          :model="selectedNode"
           class="mr-2"
         />
         <div class="title">

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

@@ -17,7 +17,13 @@
     >
       {{ name }}
     </div>
-    <v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
+    <v-flex
+      style="
+        height: 20px;
+        flex-basis: 300px;
+        flex-grow: 100;
+      "
+    >
       <v-layout
         column
         align-center
@@ -33,87 +39,43 @@
         />
         <span
           class="value"
-          style="margin-top: -20px; z-index: 1; font-size: 15px; font-weight: 600; height: 20px;"
+          style="
+            margin-top: -20px;
+            z-index: 1;
+            font-size: 15px;
+            font-weight: 600;
+            height: 20px;
+          "
         >
           {{ value }} / {{ maxValue }}
         </span>
       </v-layout>
       <transition name="transition">
-        <v-toolbar
+        <increment-menu
+          v-show="editing"
+          :value="value"
+          :open="editing"
+          @change="changeIncrementMenu"
+          @close="cancelEdit"
+        />
+      </transition>
+      <transition name="background-transition">
+        <div
           v-if="editing"
-          justify-center
-          height="48"
-          flat
-          class="transparent toolbar"
-        >
-          <v-spacer />
-          <v-btn-toggle
-            :value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
-            class="mr-2"
-            @click="$refs.editInput.focus()"
-          >
-            <v-btn
-              :disabled="context.editPermission === false"
-              class="filled"
-              @click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
-            >
-              <v-icon>add</v-icon>
-            </v-btn>
-            <v-btn
-              :disabled="context.editPermission === false"
-              class="filled"
-              @click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
-            >
-              <v-icon>remove</v-icon>
-            </v-btn>
-          </v-btn-toggle>
-          <v-text-field
-            v-if="editing"
-            ref="editInput"
-            solo
-            hide-details
-            type="number"
-            style="max-width: 120px;"
-            min="0"
-            :value="editValue"
-            :prepend-inner-icon="operationIcon(operation)"
-            :disabled="context.editPermission === false"
-            @focus="$event.target.select()"
-            @keypress="keypress"
-          />
-          <v-btn
-            small
-            fab
-            class="filled"
-            color="red"
-            @click="commitEdit"
-          >
-            <v-icon>done</v-icon>
-          </v-btn>
-          <v-btn
-            small
-            fab
-            class="mx-0 filled"
-            @click="cancelEdit"
-          >
-            <v-icon>close</v-icon>
-          </v-btn>
-          <v-spacer />
-        </v-toolbar>
+          class="page-tint"
+          @click="cancelEdit"
+        />
       </transition>
     </v-flex>
-    <transition name="background-transition">
-      <div
-        v-if="editing"
-        class="page-tint"
-        @click="cancelEdit"
-      />
-    </transition>
   </v-layout>
 </template>
 
 <script>
+import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 	export default {
+    components: {
+      IncrementMenu
+    },
     inject: {
       context: { default: {} }
     },
@@ -126,67 +88,35 @@
 		data() {
 			return {
 				editing: false,
-				editValue: 0,
-				operation: 3,
 				hover: false,
 			};
 		},
 		methods: {
 			edit() {
 				this.editing = true;
-				this.operation = 'set';
-				this.editValue = this.value;
-				this.$nextTick(function() {
-					this.$refs.editInput.focus();
-				});
 			},
 			cancelEdit() {
 				this.editing = false;
 			},
-			commitEdit() {
-				this.editing = false;
-				let value = +this.$refs.editInput.lazyValue;
-				if (this.operation === 'add') {
-					value = -value;
-				}
-				let type = this.operation === 'set' ? 'set' : 'increment';
-				this.$emit('change', { type, value });
-			},
-			operationIcon(operation) {
-				switch (operation) {
-					case 'set':
-						return 'forward';
-					case 'add':
-            return 'add';
-					case 'subtract':
-						return 'remove';
-				}
-			},
-			toggleAdd(){
-				this.operation = (this.operation === 'add') ? 'set': 'add';
-			},
-			toggleSubtract(){
-				this.operation = (this.operation === 'subtract') ? 'set': 'subtract';
-			},
-			keypress(event) {
-				let digitsOnly = /[0-9]/;
-				let key = event.key;
-				if (key === '+') {
-					this.toggleAdd();
-					event.preventDefault();
-				} else if (key === '-') {
-					this.toggleSubtract();
-					event.preventDefault();
-				} else if (key === 'Enter') {
-					this.commitEdit();
-				} else if (!digitsOnly.test(key)){
-					event.preventDefault();
-				}
-			}
+      changeIncrementMenu(e){
+        this.$emit('change', e);
+        this.editing = false;
+      }
 		},
 	};
 </script>
 
+<style>
+.health-bar .increment-menu {
+  margin-left: -50%;
+  margin-right: -50%;
+  width: 200%;
+  margin-top: -34px !important;
+  z-index: 4;
+  position: relative;
+}
+</style>
+
 <style scoped>
 	.health-bar {
 		background: inherit;
@@ -209,13 +139,6 @@
 		box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
 			0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
 	}
-	.toolbar {
-		margin-left: -50%;
-		margin-right: -50%;
-		width: 200%;
-		margin-top: -34px !important;
-		z-index: 4;
-	}
 	.hover {
 		background: #f5f5f5 !important;
 	}

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

@@ -1,27 +1,27 @@
 <template lang="html">
-	<v-card class="pa-2">
-		<health-bar
-			v-for="attribute in attributes"
-			:key="attribute._id"
-			:value="attribute.value - (attribute.damage || 0)"
-			:maxValue="attribute.value"
-			:name="attribute.name"
-			:_id="attribute._id"
-			@change="e => $emit('change', {_id: attribute._id, change: e})"
-			@click="e => $emit('click', {_id: attribute._id})"
-		/>
-	</v-card>
+  <v-card class="pa-2">
+    <health-bar
+      v-for="attribute in attributes"
+      :key="attribute._id"
+      :value="attribute.currentValue"
+      :max-value="attribute.value"
+      :name="attribute.name"
+      :_id="attribute._id"
+      @change="e => $emit('change', {_id: attribute._id, change: e})"
+      @click="e => $emit('click', {_id: attribute._id})"
+    />
+  </v-card>
 </template>
 
 <script>
 	import HealthBar from '/imports/ui/properties/components/attributes/HealthBar.vue';
 
 	export default {
-		props: {
-			attributes: Array,
-		},
 		components: {
 			HealthBar,
 		},
+		props: {
+			attributes: Array,
+		},
 	}
 </script>

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

@@ -7,26 +7,40 @@
 </template>
 
 <script>
-	import CreatureProperties, { damageProperty } from '/imports/api/creature/CreatureProperties.js';
+  import Creatures from '/imports/api/creature/Creatures.js';
+	import { damageProperty } from '/imports/api/creature/CreatureProperties.js';
 	import HealthBarCard from '/imports/ui/properties/components/attributes/HealthBarCard.vue';
+  import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 
 	export default {
 		components: {
 			HealthBarCard,
 		},
 		props: {
-			creatureId: String,
+			creatureId: {
+        type: String,
+        required: true
+      },
 		},
 		meteor: {
+      creature(){
+        return Creatures.findOne(this.creatureId, {fields: {settings: 1}});
+      },
 			attributes(){
-				return CreatureProperties.find({
-					'ancestors.id': this.creatureId,
-					type: 'attribute',
+        let creature = this.creature;
+        if (!creature) return;
+        let filter = {
+          type: 'attribute',
 					attributeType: 'healthBar',
-          removed: {$ne: true},
-				}, {
-					sort: {order: 1},
-				});
+        };
+        if (creature.settings.hideUnusedStats){
+          filter.hide = {$ne: true};
+        }
+        return getActiveProperties({
+          ancestorId: creature._id,
+          filter,
+          options: {sort: {order: 1}},
+        });
 			},
 		},
 		methods: {

app/imports/ui/properties/components/persona/NoteCard.vue

@@ -1,16 +1,25 @@
 <template lang="html">
-	<v-card :color="model.color" :data-id="model._id" hover @click="clickProperty(model._id)">
-		<v-card-title class="title">
-			{{model.name}}
-		</v-card-title>
-		<v-card-text>
-			<property-description :value="model.description"/>
-		</v-card-text>
-	</v-card>
+  <v-card
+    :color="model.color"
+    :data-id="model._id"
+    hover
+    :dark="model.color && isDark"
+    :light="model.color && !isDark"
+    @click="clickProperty(model._id)"
+  >
+    <v-card-title class="title">
+      {{ model.name }}
+    </v-card-title>
+    <v-card-text>
+      <property-description :value="model.description" />
+    </v-card-text>
+  </v-card>
 </template>
 
 <script>
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+
 export default {
 	components: {
 		PropertyDescription,
@@ -18,6 +27,11 @@ export default {
 	props: {
 		model: Object,
 	},
+  computed: {
+    isDark(){
+      return isDarkColor(this.model.color);
+    },
+  },
 	methods: {
 		clickProperty(_id){
 			this.$store.commit('pushDialogStack', {

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

@@ -1,11 +1,22 @@
 <template lang="html">
   <div class="attribute-form">
-    <text-field
-      label="Name"
-      :value="model.name"
-      :error-messages="errors.name"
-      @change="change('name', ...arguments)"
-    />
+    <div class="layout row justify-space-between wrap">
+      <text-field
+        label="Name"
+        :value="model.name"
+        :error-messages="errors.name"
+        @change="change('name', ...arguments)"
+      />
+      <div>
+        <smart-switch
+          label="Carried"
+          class="mx-3"
+          :value="model.carried"
+          :error-messages="errors.carried"
+          @change="change('carried', ...arguments)"
+        />
+      </div>
+    </div>
     <div class="layout row wrap">
       <text-field
         label="Value"
@@ -15,17 +26,19 @@
         hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.two_coins"
         :value="model.value"
         :error-messages="errors.value"
         @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
-        suffix="lbs"
+        suffix="lb"
         type="number"
         min="0"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.weight"
         :value="model.weight"
         :error-messages="errors.weight"
         @change="change('weight', ...arguments)"
@@ -41,18 +54,16 @@
       name="Advanced"
       standalone
     >
-      <smart-switch
-        label="Carried"
-        :value="model.carried"
-        :error-messages="errors.carried"
-        @change="change('carried', ...arguments)"
-      />
-      <smart-switch
-        label="Contents are weightless"
-        :value="model.contentsWeightless"
-        :error-messages="errors.contentsWeightless"
-        @change="change('contentsWeightless', ...arguments)"
-      />
+      <div class="layout row justify-center">
+        <div>
+          <smart-switch
+            label="Contents are weightless"
+            :value="model.contentsWeightless"
+            :error-messages="errors.contentsWeightless"
+            @change="change('contentsWeightless', ...arguments)"
+          />
+        </div>
+      </div>
     </form-section>
   </div>
 </template>

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

@@ -1,13 +1,22 @@
 <template lang="html">
   <div class="item-form">
-    <div class="layout column align-center">
-      <smart-switch
-        label="Equipped"
-        class="no-flex"
-        :value="model.equipped"
-        :error-messages="errors.equipped"
-        @change="change('equipped', ...arguments)"
-      />
+    <div class="layout row justify-space-around">
+      <div>
+        <icon-picker
+          label="Icon"
+          :value="model.icon"
+          :error-messages="errors.icon"
+          @change="change('icon', ...arguments)"
+        />
+      </div>
+      <div>
+        <smart-switch
+          label="Equipped"
+          :value="model.equipped"
+          :error-messages="errors.equipped"
+          @change="change('equipped', ...arguments)"
+        />
+      </div>
     </div>
     <div class="layout row wrap">
       <text-field
@@ -32,17 +41,19 @@
         hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.two_coins"
         :value="model.value"
         :error-messages="errors.value"
         @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
-        suffix="lbs"
+        suffix="lb"
         type="number"
         min="0"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.weight"
         :value="model.weight"
         :error-messages="errors.weight"
         @change="change('weight', ...arguments)"
@@ -52,6 +63,7 @@
       label="Quantity"
       type="number"
       min="0"
+      prepend-inner-icon="$vuetify.icons.abacus"
       :value="model.quantity"
       :error-messages="errors.quantity"
       @change="change('quantity', ...arguments)"
@@ -67,7 +79,7 @@
       standalone
     >
       <smart-switch
-        label="Show increment buttons"
+        label="Show increment button"
         :value="model.showIncrement"
         :error-messages="errors.showIncrement"
         @change="change('showIncrement', ...arguments)"

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

@@ -46,12 +46,11 @@
       <div class="layout row justify-center">
         <text-field
           label="Base Value"
-          type="number"
-          class="base-value-field text-xs-center large-format no-flex"
-          :value="model.baseValue"
+          class="base-value-field no-flex"
+          :value="model.baseValueCalculation"
           hint="This is the value of the skill before effects are applied"
-          :error-messages="errors.baseValue"
-          @change="change('baseValue', ...arguments)"
+          :error-messages="errors.baseValueCalculation"
+          @change="change('baseValueCalculation', ...arguments)"
         />
         <proficiency-select
           style="flex-basis: 300px;"
@@ -61,6 +60,7 @@
           @change="change('baseProficiency', ...arguments)"
         />
       </div>
+      <calculation-error-list :errors="model.baseValueErrors" />
     </form-section>
   </div>
 </template>
@@ -70,11 +70,13 @@
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import createListOfProperties from '/imports/ui/properties/forms/shared/lists/createListOfProperties.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
 		components: {
 			ProficiencySelect,
 			FormSection,
+      CalculationErrorList,
 		},
     mixins: [propertyFormMixin],
 		data(){return{

app/imports/ui/properties/shared/PropertyIcon.vue

@@ -1,5 +1,13 @@
 <template lang="html">
-  <v-icon :color="color">
+  <svg-icon
+    v-if="model.icon"
+    :shape="model.icon.shape"
+    :color="color"
+  />
+  <v-icon
+    v-else
+    :color="color"
+  >
     {{ icon }}
   </v-icon>
 </template>
@@ -9,12 +17,18 @@ import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
 
 export default {
 	props: {
-		type: String,
-    color: String,
+		model: {
+      type: Object,
+      default: () => ({}),
+    },
+    color: {
+      type: String,
+      default: undefined,
+    },
 	},
 	computed: {
 		icon(){
-			return getPropertyIcon(this.type);
+			return getPropertyIcon(this.model && this.model.type);
 		},
 	},
 }

app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue

@@ -2,7 +2,7 @@
   <div class="layout row align-center justify-start">
     <property-icon
       class="mr-2"
-      :type="model.type"
+      :model="model"
       :class="selected && 'primary--text'"
       :color="model.color"
     />

app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue

@@ -2,7 +2,7 @@
   <div class="layout row align-center justify-start">
     <property-icon
       class="mr-2"
-      :type="model.type"
+      :model="model"
       :color="model.color"
       :class="selected && 'primary--text'"
     />

app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue

@@ -1,11 +1,18 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
+    <property-icon
+      class="mr-2"
+      :model="model"
+      :color="model.color"
+      :class="selected && 'primary--text'"
+    />
     <v-icon
+      v-if="model.equipped"
       class="mr-2"
       :class="selected && 'primary--text'"
-      :color="model.color"
+      small
     >
-      {{ model.equipped ? 'check_box' : 'check_box_outline_blank' }}
+      pan_tool
     </v-icon>
     <div
       class="text-no-wrap text-truncate"
@@ -18,9 +25,27 @@
 
 <script>
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
 
 export default {
   mixins: [treeNodeViewMixin],
+  computed: {
+    title(){
+      let model = this.model;
+      if (!model) return;
+      if (model.quantity !== 1){
+        if (model.plural){
+          return `${model.quantity} ${model.plural}`;
+        } else if (model.name){
+          return `${model.quantity} ${model.name}`;
+        }
+      } else if (model.name) {
+        return model.name;
+      }
+      let prop = PROPERTIES[model.type]
+      return prop && prop.name;
+    }
+  }
 }
 </script>
 

app/imports/ui/properties/viewers/AttributeViewer.vue

@@ -77,13 +77,9 @@
 			reset(){
 				let reset = this.model.reset
 				if (reset === 'shortRest'){
-					return `Reset${
-						this.model.resetMultiplier && ' x' + this.model.resetMultiplier
-					} on a short rest`;
+					return 'Reset on a short rest';
 				} else if (reset === 'longRest'){
-					return `Reset${
-						this.model.resetMultiplier && ' x' + this.model.resetMultiplier
-					} on a long rest`;
+					return 'Reset on a long rest';
 				}
         return undefined;
 			}

app/imports/ui/properties/viewers/ContainerViewer.vue

@@ -1,26 +1,48 @@
 <template lang="html">
   <div class="container-viewer">
-    <property-name :value="model.name" />
-    <div
-      v-if="!model.carried"
-      class="caption"
-    >
-      Not carried
+    <property-tags :tags="model.tags" />
+    <div class="layout row wrap justify-space-around">
+      <div
+        v-if="model.value !== undefined"
+        class="mr-3 my-3"
+      >
+        <v-layout
+          row
+          align-center
+        >
+          <v-icon
+            class="mr-2"
+            x-large
+          >
+            $vuetify.icons.two_coins
+          </v-icon>
+          <coin-value
+            class="title mr-2"
+            :value="model.value"
+          />
+        </v-layout>
+      </div>
+      <div
+        v-if="model.weight !== undefined"
+        class="my-3"
+      >
+        <v-layout
+          row
+          align-center
+          justify-end
+        >
+          <span class="title mr-2">
+            {{ model.weight }} lb
+          </span>
+          <v-icon
+            class="ml-2"
+            x-large
+          >
+            $vuetify.icons.weight
+          </v-icon>
+        </v-layout>
+      </div>
     </div>
-    <div
-      v-if="model.contentsWeightless"
-      class="caption"
-    >
-      Contents are weightless
-    </div>
-    <property-field
-      name="Weight"
-      :value="`${model.weight} lbs`"
-    />
-    <property-field
-      name="Value"
-      :value="`${model.value} gp`"
-    />
     <property-description
       v-if="model.description"
       :value="model.description"
@@ -29,8 +51,12 @@
 </template>
 
 <script>
+import CoinValue from '/imports/ui/components/CoinValue.vue';
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
+  components: {
+    CoinValue,
+  },
 	mixins: [propertyViewerMixin],
 }
 </script>

app/imports/ui/properties/viewers/ItemViewer.vue

@@ -1,22 +1,113 @@
 <template lang="html">
   <div class="item-viewer">
-    <property-name :value="model.name" />
-    <property-field
-      name="Plural name"
-      :value="model.plural"
-    />
-    <property-field
-      name="Quantity"
-      :value="model.quantity"
-    />
-    <property-field
-      name="Weight"
-      :value="`${model.weight} lbs`"
-    />
-    <property-field
-      name="Value"
-      :value="`${model.value} gp`"
-    />
+    <property-tags :tags="model.tags" />
+    <div
+      v-if="model.quantity > 1 || model.showIncrement"
+      class="layout row justify-center align-center wrap"
+    >
+      <div class="display-1">
+        {{ model.quantity }}
+      </div>
+      <increment-button
+        v-if="context.creature && model.showIncrement"
+        icon
+        large
+        outline
+        color="primary"
+        :value="model.quantity"
+        @change="changeQuantity"
+      >
+        <v-icon>$vuetify.icons.abacus</v-icon>
+      </increment-button>
+    </div>
+    <div class="layout row wrap justify-space-around">
+      <div
+        v-if="model.value !== undefined"
+        class="mr-3 my-3"
+      >
+        <v-layout
+          v-if="model.quantity > 1"
+          row
+          align-center
+          class="mb-2"
+        >
+          <v-icon
+            class="mr-2"
+            x-large
+          >
+            $vuetify.icons.cash
+          </v-icon>
+          <coin-value
+            class="title"
+            :value="totalValue"
+          />
+        </v-layout>
+        <v-layout
+          row
+          align-center
+        >
+          <v-icon
+            class="mr-2"
+            x-large
+          >
+            $vuetify.icons.two_coins
+          </v-icon>
+          <coin-value
+            class="title mr-2"
+            :value="model.value"
+          />
+          <span
+            v-if="model.quantity > 1"
+            class="title"
+          >
+            each
+          </span>
+        </v-layout>
+      </div>
+      <div
+        v-if="model.weight !== undefined"
+        class="my-3"
+      >
+        <v-layout
+          v-if="model.quantity > 1"
+          row
+          align-center
+          justify-end
+          class="mb-2"
+        >
+          <span class="title">
+            {{ totalWeight }} lb
+          </span>
+          <v-icon
+            class="ml-2"
+            x-large
+          >
+            $vuetify.icons.injustice
+          </v-icon>
+        </v-layout>
+        <v-layout
+          row
+          align-center
+          justify-end
+        >
+          <span class="title mr-2">
+            {{ model.weight }} lb
+          </span>
+          <span
+            v-if="model.quantity > 1"
+            class="title"
+          >
+            each
+          </span>
+          <v-icon
+            class="ml-2"
+            x-large
+          >
+            $vuetify.icons.weight
+          </v-icon>
+        </v-layout>
+      </div>
+    </div>
     <property-description
       v-if="model.description"
       :value="model.description"
@@ -25,9 +116,41 @@
 </template>
 
 <script>
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
+import CoinValue from '/imports/ui/components/CoinValue.vue';
+import IncrementButton from '/imports/ui/components/IncrementButton.vue';
+import { adjustQuantity } from '/imports/api/creature/CreatureProperties.js';
+
 export default {
+  components:{
+    IncrementButton,
+    CoinValue,
+  },
 	mixins: [propertyViewerMixin],
+  inject: {
+    context: { default: {} }
+  },
+  computed:{
+    totalValue(){
+      return this.model.value * this.model.quantity;
+    },
+    totalWeight(){
+      return this.model.weight * this.model.quantity;
+    },
+  },
+  methods: {
+    getIcon(name){
+      return SVG_ICONS[name];
+    },
+    changeQuantity({type, value}) {
+      adjustQuantity.call({
+        _id: this.model._id,
+        operation: type,
+        value: value
+      });
+    }
+  }
 }
 </script>
 

app/imports/ui/properties/viewers/shared/PropertyTags.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <div
+    v-if="tagString"
+    class="tags ma-3 "
+  >
+    {{ tagString }}
+  </div>
+</template>
+
+<script>
+export default {
+  props:{
+    tags: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  computed:{
+    tagString(){
+      return this.tags.join(', ');
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.tags {
+  font-style: italic;
+}
+</style>

app/imports/ui/properties/viewers/shared/propertyViewerMixin.js

@@ -2,6 +2,7 @@ import PropertyName from '/imports/ui/properties/viewers/shared/PropertyName.vue
 import PropertyVariableName from '/imports/ui/properties/viewers/shared/PropertyVariableName.vue';
 import PropertyField from '/imports/ui/properties/viewers/shared/PropertyField.vue';
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import PropertyTags from '/imports/ui/properties/viewers/shared/PropertyTags.vue';
 
 const propertyViewerMixin = {
   components: {
@@ -9,6 +10,7 @@ const propertyViewerMixin = {
     PropertyVariableName,
     PropertyField,
     PropertyDescription,
+    PropertyTags,
   },
   props: {
 		model: {

app/imports/ui/router.js

@@ -14,7 +14,8 @@ import CharacterSheetToolbarItems from '/imports/ui/creature/character/Character
 import CharacterSheetToolbarExtension from '/imports/ui/creature/character/CharacterSheetToolbarExtension.vue';
 import SignIn from '/imports/ui/pages/SignIn.vue' ;
 import Register from '/imports/ui/pages/Register.vue';
-import Friends from '/imports/ui/pages/Friends.vue' ;
+import IconAdmin from '/imports/ui/icons/IconAdmin.vue';
+//import Friends from '/imports/ui/pages/Friends.vue' ;
 import Feedback from '/imports/ui/pages/Feedback.vue' ;
 import Account from '/imports/ui/pages/Account.vue' ;
 import InviteSuccess from '/imports/ui/pages/InviteSuccess.vue' ;
@@ -48,6 +49,24 @@ function ensureLoggedIn(to, from, next){
   });
 }
 
+function ensureAdmin(to, from, next){
+  Tracker.autorun((computation) => {
+    if (userSubscription.ready()){
+      computation.stop();
+      const user = Meteor.user();
+      if (user){
+        if (user.roles && user.roles.includes('admin')){
+          next()
+        } else {
+          next({name: 'home'});
+        }
+      } else {
+        next({ name: 'signIn', query: { redirect: to.path} });
+      }
+    }
+  });
+}
+
 function claimInvite(to, from, next){
   Tracker.autorun((computation) => {
     if (userSubscription.ready()){
@@ -222,19 +241,13 @@ RouterFactory.configure(factory => {
       meta: {
         title: 'Patreon Tier Too Low',
       },
+    },{
+      path: '/icon-admin',
+      name: 'iconAdmin',
+      component: IconAdmin,
+      beforeEnter: ensureAdmin,
     },
   ]);
-  // Icon admin routes
-  if (Meteor.isDevelopment){
-    let IconAdmin = require('/imports/ui/icons/IconAdmin.vue').default;
-    factory.addRoutes([
-      {
-        path: '/icon-admin',
-        name: 'iconAdmin',
-        component: IconAdmin,
-      },
-    ]);
-  }
 });
 
 // Not found route has lowest priority

app/imports/ui/utility/isDarkColor.js

@@ -12,7 +12,7 @@ function hexToRgb(hex) {
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
     } : null;
-};
+}
 
 export default function isDarkColor(hexColor){
   let rgb = hexToRgb(hexColor);
@@ -22,4 +22,4 @@ export default function isDarkColor(hexColor){
     / 1000
   );
   return brightness <= 125;
-};
+}

app/imports/ui/utility/valueToCoins.js

@@ -0,0 +1,8 @@
+export default function valueToCoins(value = 0){
+  let totalCopperValue = Math.round(value * 100);
+  let copper = totalCopperValue % 10;
+  let totalSilverValue = Math.floor(totalCopperValue / 10);
+  let silver = (totalSilverValue % 10);
+  let totalGoldValue = Math.floor(totalSilverValue / 10);
+  return {gp: totalGoldValue, sp: silver, cp: copper};
+}

app/imports/ui/vueSetup.js

@@ -1,20 +1,35 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import Vuetify from "vuetify";
-import store from "/imports/ui/vuexStore.js";
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import store from '/imports/ui/vuexStore.js';
 import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import ReactiveProvide from 'vue-reactive-provide';
-import router from "/imports/ui/router.js";
+import router from '/imports/ui/router.js';
 import { theme } from '/imports/ui/theme.js';
-import "vuetify/dist/vuetify.min.css";
+import 'vuetify/dist/vuetify.min.css';
 import '/imports/ui/components/global/globalIndex.js';
+import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+
+let icons = {};
+
+for (const name in SVG_ICONS) {
+  let icon = SVG_ICONS[name];
+  icons[icon.name] = {
+    component: SvgIconByName,
+    props: {
+      name: name,
+    }
+  }
+}
+console.log(icons);
 
 Vue.use(VueMeteorTracker);
 Vue.config.meteor.freeze = true
 Vue.use(Vuetify, {
   theme,
-  iconfont: "md",
+  iconfont: 'md',
+  icons,
 });
 Vue.use(ReactiveProvide, {
   name: 'reactiveProvide', // default value
@@ -27,5 +42,5 @@ Meteor.startup(() => {
     router,
     store,
     ...AppLayout,
-  }).$mount("#app");
+  }).$mount('#app');
 });

app/package.json

@@ -41,7 +41,7 @@
     "vue-router": "^3.1.6",
     "vuedraggable": "^2.23.2",
     "vuetify": "^1.5.24",
-    "vuetify-upload-button": "^1.2.2",
+    "vuetify-upload-button": "^2.0.2",
     "vuex": "^3.1.3"
   },
   "devDependencies": {