Fixed soft removed documents never getting permanently removed

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/Creatures.js

@@ -7,6 +7,7 @@ import {assertEditPermission} from '/imports/api/sharing/sharingPermissions.js';
 import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
 import '/imports/api/creature/removeCreature.js';
+import '/imports/api/creature/restCreature.js';
 
 //set up the collection for creatures
 let Creatures = new Mongo.Collection('creatures');
@@ -27,6 +28,18 @@ let CreatureSettingsSchema = new SimpleSchema({
 		type: Boolean,
 		optional: true,
 	},
+  // Hide all the unused stats
+  hideUnusedStats: {
+    type: Boolean,
+    optional: true,
+  },
+  // How much each hitDice resets on a long rest
+  hitDiceResetMultiplier: {
+    type: Number,
+    optional: true,
+    min: 0,
+    max: 1,
+  }
 });
 
 let CreatureSchema = new SimpleSchema({
@@ -52,24 +65,31 @@ let CreatureSchema = new SimpleSchema({
     type: String,
     optional: true,
   },
-
 	// Mechanics
 	deathSave: {
 		type: deathSaveSchema,
 		defaultValue: {},
 	},
-	xp: {
+  // Stats that are computed and denormalised outside of recomputation
+  denormalizedStats: {
+    type: Object,
+    defaultValue: {},
+  },
+  // Sum of all XP gained by this character
+	'denormalizedStats.xp': {
 		type: SimpleSchema.Integer,
 		defaultValue: 0,
 	},
-	weightCarried: {
+  // Sum of all levels granted by milestone XP
+  'denormalizedStats.milestoneLevels': {
+    type: SimpleSchema.Integer,
+    defaultValue: 0,
+  },
+  // Sum of all weights of items and containers that are carried
+	'denormalizedStats.weightCarried': {
 		type: Number,
 		defaultValue: 0,
 	},
-	level: {
-		type: SimpleSchema.Integer,
-		defaultValue: 0,
-	},
 	type: {
 		type: String,
 		defaultValue: 'pc',
@@ -130,7 +150,15 @@ const updateCreature = new ValidatedMethod({
   validate({_id, path}){
 		if (!_id) return false;
 		// Allowed fields
-		let allowedFields = ['name', 'alignment', 'gender', 'picture', 'avatarPicture', 'settings'];
+		let allowedFields = [
+      'name',
+      'alignment',
+      'gender',
+      'picture',
+      'avatarPicture',
+      'color',
+      'settings',
+    ];
 		if (!allowedFields.includes(path[0])){
 			throw new Meteor.Error('Creatures.methods.update.denied',
       'This field can\'t be updated using this method');
@@ -139,9 +167,15 @@ const updateCreature = new ValidatedMethod({
   run({_id, path, value}) {
 		let creature = Creatures.findOne(_id);
     assertEditPermission(creature, this.userId);
-		Creatures.update(_id, {
+    if (value === undefined || value === null){
-			$set: {[path.join('.')]: value},
+      Creatures.update(_id, {
-		});
+        $unset: {[path.join('.')]: 1},
+      });
+    } else {
+      Creatures.update(_id, {
+        $set: {[path.join('.')]: value},
+      });
+    }
   },
 });
 

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

@@ -3,7 +3,7 @@ import { includes, cloneDeep } from 'lodash';
 // The computation memo is an in-memory data structure used only during the
 // computation process
 export default class ComputationMemo {
-  constructor(props){
+  constructor(props, creature){
     this.statsByVariableName = {};
     this.extraStatsByVariableName = {};
     this.statsById = {};
@@ -51,6 +51,15 @@ export default class ComputationMemo {
         this.addClassLevel(prop);
       }
     });
+    for (let name in creature.denormalizedStats){
+      if (!this.statsByVariableName[name]){
+        this.statsByVariableName[name] = {
+          variableName: name,
+          value: creature.denormalizedStats[name],
+          computationDetails: propDetailsByType.denormalizedStat(),
+        }
+      }
+    }
   }
   registerProperty(prop){
     this.originalPropsById[prop._id] = cloneDeep(prop);
@@ -63,46 +72,6 @@ export default class ComputationMemo {
     });
     return prop;
   }
-  /*
-  storeHighestClassLevel(name, prop, isBaseClass){
-    // Only store the highest level classLevel
-    let stat = this.statsByVariableName[name]
-    if (!stat){
-      this.statsByVariableName[name] = prop;
-      if (isBaseClass){
-        this.classes[name] = prop;
-      }
-    } else if (!has(stat, 'level')){
-      // Stat is overriden by an attribute
-      return;
-    } else if (stat.level < prop.level) {
-      this.statsByVariableName[name] = prop;
-      if (isBaseClass){
-        this.classes[name] = prop;
-      }
-    }
-    this.updateLevel();
-  }
-  updateLevel(){
-    let currentLevel = this.statsByVariableName['level'];
-    if (!currentLevel){
-      currentLevel = {
-        value: 0,
-        computationDetails: {
-          builtIn: true,
-          computed: true,
-        }
-      };
-      this.statsByVariableName['level'] = currentLevel;
-    }
-    // bail out if overriden by an attribute
-    if (!currentLevel.computationDetails.builtIn) return;
-    let level = 0;
-    for (let name in this.classes){
-      level += this.classes[name].level || 0;
-    }
-    this.statsByVariableName['level'].value = level;
-  }*/
   addToggle(prop){
     prop = this.registerProperty(prop);
     this.togglesById[prop._id] = prop;
@@ -291,4 +260,10 @@ const propDetailsByType = {
       disabledByToggle: false,
     };
   },
+  denormalizedStat(){
+    return {
+      toggleAncestors: [],
+      disabledByToggle: false,
+    };
+  }
 }

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

@@ -2,9 +2,14 @@ import evaluateCalculation from '/imports/api/creature/computation/evaluateCalcu
 
 export default class EffectAggregator{
   constructor(stat, memo){
+    delete this.baseValueErrors;
     if (stat.baseValueCalculation){
-      this.statBaseValue = evaluateCalculation(stat.baseValueCalculation, memo);
+      let {value, errors} = evaluateCalculation(stat.baseValueCalculation, memo);
-      this.base = +this.statBaseValue;
+      this.statBaseValue = value;
+      if (errors.length){
+        this.baseValueErrors = errors;
+      }
+      this.base = this.statBaseValue;
     } else {
       this.base = 0;
     }
@@ -16,17 +21,22 @@ export default class EffectAggregator{
     this.disadvantage = 0;
     this.passiveAdd = 0;
     this.fail = 0;
+    this.set = undefined;
     this.conditional = [];
     this.rollBonus = [];
+    this.hasNoEffects = true;
   }
   addEffect(effect){
     let result = effect.result;
+    if (this.hasNoEffects) this.hasNoEffects = false;
     switch(effect.operation){
       case 'base':
         // Take the largest base value
         this.base = result > this.base ? result : this.base;
         if (effect.statBase){
-          this.statBaseValue = result > this.statBaseValue ? result : this.statBaseValue;
+          if (this.statBaseValue === undefined || result > this.statBaseValue){
+            this.statBaseValue = result;
+          }
         }
         break;
       case 'add':
@@ -45,6 +55,10 @@ export default class EffectAggregator{
         // Take the smallest max value
         this.max = result < this.max ? result : this.max;
         break;
+      case 'set':
+        // Take the highest set value
+        this.set = this.set === undefined || result > this.set ? result : this.set;
+        break;
       case 'advantage':
         // Sum number of advantages
         this.advantage++;

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

@@ -11,17 +11,34 @@ export default function combineStat(stat, aggregator, memo){
   }
 }
 
-function combineAttribute(stat, aggregator){
+function getAggregatorResult(stat, aggregator){
   let result = (aggregator.base + aggregator.add) * aggregator.mul;
-  if (result < aggregator.min) result = aggregator.min;
+  if (result < aggregator.min) {
-  if (result > aggregator.max) result = aggregator.max;
+    result = aggregator.min;
-  if (!stat.decimal) result = Math.floor(result);
+  }
-  stat.value = result;
+  if (result > aggregator.max) {
+    result = aggregator.max;
+  }
+  if (aggregator.set !== undefined) {
+    result = aggregator.set;
+  }
+  if (!stat.decimal && Number.isFinite(result)){
+    result = Math.floor(result);
+  }
+  return result;
+}
+
+function combineAttribute(stat, aggregator){
+  stat.value = getAggregatorResult(stat, aggregator);
   stat.baseValue = aggregator.statBaseValue;
+  stat.baseValueErrors = aggregator.baseValueErrors;
   if (stat.attributeType === 'ability') {
-    stat.modifier = Math.floor((result - 10) / 2);
+    stat.modifier = Math.floor((stat.value - 10) / 2);
   }
   stat.currentValue = stat.value - (stat.damage || 0);
+  stat.hide = aggregator.hasNoEffects &&
+    stat.baseValue === undefined ||
+    undefined
 }
 
 function combineSkill(stat, aggregator, memo){
@@ -55,11 +72,19 @@ 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;
-  result = Math.floor(result);
+  if (aggregator.set !== undefined) {
+    result = aggregator.set;
+  }
+  if (Number.isFinite(result)){
+    result = Math.floor(result);
+  }
   stat.value = result;
   // Advantage/disadvantage
   if (aggregator.advantage && !aggregator.disadvantage){
@@ -79,6 +104,11 @@ function combineSkill(stat, aggregator, memo){
   stat.fail = aggregator.fail;
   // Rollbonus
   stat.rollBonuses = aggregator.rollBonus;
+  // Hide
+  stat.hide = aggregator.hasNoEffects &&
+    stat.baseValue === undefined &&
+    stat.proficiency == 0 ||
+    undefined;
 }
 
 function combineDamageMultiplier(stat){

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

@@ -20,9 +20,12 @@ export default function computeEffect(effect, memo){
   applyToggles(effect, memo);
 
   // Determine result of effect calculation
+  delete effect.errors;
   if (!effect.calculation){
     if(effect.operation === 'add' || effect.operation === 'base'){
       effect.result = 0;
+    } else {
+      delete effect.result
     }
   } else if (Number.isFinite(+effect.calculation)){
     effect.result = +effect.calculation;
@@ -31,7 +34,11 @@ export default function computeEffect(effect, memo){
   } else if(_.contains(['advantage', 'disadvantage', 'fail'], effect.operation)){
     effect.result = 1;
   } else {
-    effect.result = evaluateCalculation(effect.calculation, memo);
+    let {value, errors} = evaluateCalculation(effect.calculation, memo);
+    effect.result = value;
+    if (errors.length){
+      effect.errors = errors;
+    }
   }
   effect.computationDetails.computed = true;
   effect.computationDetails.busyComputing = false;

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

@@ -16,6 +16,7 @@ export default function computeToggle(toggle, memo){
   toggle.computationDetails.busyComputing = true;
 
   // Do work
+  delete toggle.errors;
   if (toggle.enabled){
     toggle.toggleResult = true;
   } else if (toggle.disabled){
@@ -25,7 +26,11 @@ export default function computeToggle(toggle, memo){
   } else if (Number.isFinite(+toggle.condition)){
     toggle.toggleResult = !!+toggle.condition;
   } else {
-    toggle.toggleResult = evaluateCalculation(toggle.condition, memo);
+    let {value, errors} = evaluateCalculation(toggle.condition, memo);
+    toggle.toggleResult = value;
+    if (errors.length){
+      toggle.errors = errors;
+    }
   }
   toggle.computationDetails.computed = true;
   toggle.computationDetails.busyComputing = false;

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

@@ -1,15 +1,20 @@
-import bareSymbolSubtitutor from '/imports/api/creature/computation/utility/bareSymbolSubtitutor.js';
 import computeStat from '/imports/api/creature/computation/computeStat.js';
 import math from '/imports/math.js';
 
+/* Convert a calculation into a constant output and errors*/
 export default function evaluateCalculation(string, memo){
   if (!string) return string;
+  let errors = [];
   // Parse the string using mathjs
   let calc;
   try {
     calc = math.parse(string);
   } catch (e) {
-    return string;
+    errors.push({
+      type: 'parsing',
+      message: e.message || e
+    });
+    return {errors, value: string};
   }
   // Ensure all symbol nodes are defined and coputed
   calc.traverse(node => {
@@ -20,12 +25,74 @@ export default function evaluateCalculation(string, memo){
       }
     }
   });
-  // Ensure any bare symbols are value accessors instead
+  // Replace all symbols with their subtitution
-  let substitutedCalc = calc.transform(bareSymbolSubtitutor(memo.statsByVariableName));
+  let substitutedCalc = calc.transform(
+    symbolSubtitutor(memo.statsByVariableName, errors)
+  );
   // Evaluate the expression to a number or return with substitutions
   try {
-    return substitutedCalc.evaluate(memo.statsByVariableName);
+    let value = substitutedCalc.evaluate(memo.statsByVariableName);
+    if (typeof value === 'object') value = value.toString();
+    return {errors, value};
   } catch (e){
-    return substitutedCalc.toString();
+    errors.push({
+      type: 'evaluation',
+      message: e.message || e
+    });
+    let value = substitutedCalc.toString();
+    return {errors, value};
+  }
+}
+
+// returns a function to replace all symbols with either their resolved value
+// or zero, keeping the errors
+function symbolSubtitutor(scope, errors){
+  return function(node){
+    // mark symbol nodes that are children of function nodes to be skipped
+    if (node.isFunctionNode){
+      let fn = node.fn;
+      if (fn && fn.isSymbolNode){
+        fn.skipReplacement = true;
+      }
+      return node;
+    } else if (node.isSymbolNode && node.skipReplacement !== true){
+      //bare symbols of name "stat", should search for stat.value
+      let stat = scope[node.name];
+      if (stat){
+        if (stat.value === undefined){
+          errors.push({
+            type: 'subsitution',
+            message: `${node.name} does not have a value, set to 0`
+          });
+          return new math.ConstantNode(0);
+        } else {
+          return new math.ConstantNode(stat.value);
+        }
+      } else {
+        try {
+          return new math.ConstantNode(node.evaluate(scope));
+        } catch (e) {
+          errors.push({
+            type: 'subsitution',
+            message: `${node.name} not found, set to 0`
+          });
+          return new math.ConstantNode(0);
+        }
+      }
+    } else if (node.isAccessorNode){
+      try {
+        let value = node.evaluate(scope);
+        if (value === undefined) throw 'Not found';
+        return new math.ConstantNode(value);
+      } catch (e) {
+        errors.push({
+          type: 'subsitution',
+          message: `${node.toString()} not found, set to 0`
+        });
+        return new math.ConstantNode(0);
+      }
+    } else {
+      return node;
+    }
   }
 }

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

@@ -6,7 +6,8 @@ import computeMemo from '/imports/api/creature/computation/computeMemo.js';
 import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 import writeAlteredProperties from '/imports/api/creature/computation/writeAlteredProperties.js';
 import writeCreatureVariables from '/imports/api/creature/computation/writeCreatureVariables.js';
-import { recomputeDamageMultipliersById } from '/imports/api/creature/damageMultiplierDenormalise/recomputeDamageMultipliers.js'
+import { recomputeDamageMultipliersById } from '/imports/api/creature/damageMultiplierDenormalise/recomputeDamageMultipliers.js';
+import Creatures from '/imports/api/creature/Creatures.js';
 
 export const recomputeCreature = new ValidatedMethod({
 
@@ -17,8 +18,9 @@ export const recomputeCreature = new ValidatedMethod({
   }).validator(),
 
   run({charId}) {
+    let creature = Creatures.findOne(charId);
     // Permission
-    assertEditPermission(charId, this.userId);
+    assertEditPermission(creature, this.userId);
     // Work, call this direcly if you are already in a method that has checked
     // for permission to edit a given character
     recomputeCreatureById(charId);
@@ -35,6 +37,11 @@ const calculationPropertyTypes = [
   'toggle',
 ];
 
+export function recomputeCreatureById(creatureId){
+  let creature = Creatures.findOne(creatureId);
+  recomputeCreatureByDoc(creature);
+}
+
 /**
  * This function is the heart of DiceCloud. It recomputes a creature's stats,
  * distilling down effects and proficiencies into the final stats that make up
@@ -71,17 +78,18 @@ const calculationPropertyTypes = [
  *   - Mark the stat as computed
  * - Write the computed results back to the database
  */
-export function recomputeCreatureById(creatureId){
+function recomputeCreatureByDoc(creature){
+  const creatureId = creature._id;
   let props = getActiveProperties({
     ancestorId: creatureId,
     filter: {type: {$in: calculationPropertyTypes}},
     includeUntoggled: true,
+    // TODO filter out expensive fields, particularly icon field
   });
-  let computationMemo = new ComputationMemo(props);
+  let computationMemo = new ComputationMemo(props, creature);
   computeMemo(computationMemo);
   writeAlteredProperties(computationMemo);
   writeCreatureVariables(computationMemo, creatureId);
-  // if(Meteor.isClient) console.log(computationMemo);
   recomputeDamageMultipliersById(creatureId);
   return computationMemo;
 }

app/imports/api/creature/experience/Experiences.js

@@ -0,0 +1,181 @@
+import SimpleSchema from 'simpl-schema';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import Creatures from '/imports/api/creature/Creatures.js';
+import { recomputeCreatureById } from '/imports/api/creature/computation/recomputeCreature.js';
+
+let Experiences = new Mongo.Collection('experiences');
+
+let ExperienceSchema = new SimpleSchema({
+	name: {
+		type: String,
+		optional: true,
+	},
+	// The amount of XP this experience gives
+	xp: {
+		type: SimpleSchema.Integer,
+		optional: true,
+    min: 0,
+	},
+  // Setting levels instead of value grants whole levels
+  levels: {
+    type: SimpleSchema.Integer,
+    optional: true,
+    min: 0,
+    index: 1,
+  },
+	// The real-world date that it occured, usually sorted by date
+	date: {
+		type: Date,
+		autoValue: function() {
+			// If the date isn't set, set it to now
+			if (!this.isSet) {
+				return new Date();
+			}
+		},
+    index: 1,
+	},
+  creatureId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+    index: 1,
+  },
+});
+
+Experiences.attachSchema(ExperienceSchema);
+
+const insertExperienceForCreature = function({experience, creatureId, userId}){
+  assertEditPermission(creatureId, userId);
+  if (experience.xp){
+    Creatures.update(creatureId, {$inc: {
+      'denormalizedStats.xp': experience.xp
+    }});
+  }
+  if (experience.levels) {
+    Creatures.update(creatureId, {$inc: {
+      'denormalizedStats.milestoneLevels': experience.levels
+    }});
+  }
+  experience.creatureId = creatureId;
+  let id = Experiences.insert(experience);
+  recomputeCreatureById(creatureId);
+  return id;
+};
+
+const insertExperience = new ValidatedMethod({
+  name: 'Experiences.methods.insert',
+  validate: new SimpleSchema({
+    experience: {
+      type: ExperienceSchema.omit('creatureId'),
+    },
+    creatureIds: {
+      type: Array,
+      max: 12,
+    },
+    'creatureIds.$': {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+  }).validator(),
+  run({experience, creatureIds}) {
+    let userId = this.userId;
+    if (!userId) {
+      throw new Meteor.Error('Experiences.methods.insert.denied',
+      'You need to be logged in to insert an experience');
+    }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Experiences.methods.insert.denied',
+      `The ${tier.name} tier does not allow you to grant experience`);
+    }
+    let insertedIds = [];
+    creatureIds.forEach(creatureId => {
+      let id = insertExperienceForCreature({experience, creatureId, userId});
+      insertedIds.push(id);
+    });
+    return insertedIds;
+  },
+});
+
+const removeExperience = new ValidatedMethod({
+  name: 'Experiences.methods.remove',
+  validate: new SimpleSchema({
+    experienceId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+  }).validator(),
+  run({experienceId}) {
+    let userId = this.userId;
+    if (!userId) {
+      throw new Meteor.Error('Experiences.methods.remove.denied',
+      'You need to be logged in to remove an experience');
+    }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Experiences.methods.remove.denied',
+      `The ${tier.name} tier does not allow you to remove  an experience`);
+    }
+    let experience = Experiences.findOne(experienceId);
+    if (!experience) return;
+    let creatureId = experience.creatureId
+    assertEditPermission(creatureId, userId);
+    if (experience.xp){
+      Creatures.update(creatureId, {$inc: {
+        'denormalizedStats.xp': -experience.xp
+      }});
+    }
+    if (experience.levels) {
+      Creatures.update(creatureId, {$inc: {
+        'denormalizedStats.milestoneLevels': -experience.levels
+      }});
+    }
+    experience.creatureId = creatureId;
+    let numRemoved = Experiences.remove(experienceId);
+    recomputeCreatureById(creatureId);
+    return numRemoved;
+  },
+});
+
+const recomputeExperiences = new ValidatedMethod({
+  name: 'Experiences.methods.recompute',
+  validate: new SimpleSchema({
+    creatureId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+  }).validator(),
+  run({creatureId}) {
+    let userId = this.userId;
+    if (!userId) {
+      throw new Meteor.Error('Experiences.methods.recompute.denied',
+      'You need to be logged in to recompute a creature\'s experiences');
+    }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Experiences.methods.recompute.denied',
+      `The ${tier.name} tier does not allow you to recompute a creature's experiences`);
+    }
+    assertEditPermission(creatureId, userId);
+
+    let xp = 0;
+    let milestoneLevels = 0;
+    Experiences.find({
+      creatureId
+    }, {
+      fields: {xp: 1, levels: 1}
+    }).forEach(experience => {
+      xp += experience.xp || 0;
+      milestoneLevels += experience.levels || 0;
+    });
+    Creatures.update(creatureId, {$set: {
+      'denormalizedStats.xp': xp,
+      'denormalizedStats.milestoneLevels': milestoneLevels
+    }});
+    recomputeCreatureById(creatureId);
+  },
+});
+
+export default Experiences;
+export { ExperienceSchema, insertExperience, removeExperience, recomputeExperiences };

app/imports/api/creature/getActiveProperties.js

@@ -6,6 +6,15 @@ export default function getActiveProperties({
   filter = {},
   options,
   includeUntoggled = false
+}){
+  filter = getActivePropertyFilter({ancestorId, filter, includeUntoggled});
+  return CreatureProperties.find(filter, options).fetch();
+}
+
+export function getActivePropertyFilter({
+  ancestorId,
+  filter = {},
+  includeUntoggled = false
 }){
   if (!ancestorId){
     throw 'Ancestor Id is required to get active properties'
@@ -14,9 +23,9 @@ export default function getActiveProperties({
   let disabledAncestorsFilter = {
     'ancestors.id': ancestorId,
     $or: [
-      {disabled: true},
+      {disabled: true}, // Everything can be disabled
-      {equipped: false},
+      {equipped: false}, // Items can be equipped
-      {applied: false},
+      {applied: false}, // Buffs can be applied
     ],
   };
   if (!includeUntoggled){
@@ -48,5 +57,5 @@ export default function getActiveProperties({
   filter._id = {
     $nin: disabledAncestorIds,
   }
-  return CreatureProperties.find(filter, options).fetch();
+  return filter;
 }

app/imports/api/creature/journal/JournalEntry.js

@@ -1,7 +1,7 @@
 import SimpleSchema from 'simpl-schema';
 
 let ExperienceSchema = new SimpleSchema({
-	name: {
+	title: {
 		type: String,
 		optional: true,
 	},
@@ -10,11 +10,6 @@ let ExperienceSchema = new SimpleSchema({
 		type: String,
 		optional: true,
 	},
-	// The amount of XP this experience gives
-	value: {
-		type: SimpleSchema.Integer,
-		optional: true,
-	},
 	// The real-world date that it occured
 	date: {
 		type: Date,
@@ -30,6 +25,20 @@ let ExperienceSchema = new SimpleSchema({
 		type: String,
 		optional: true,
 	},
+  // Tags to better find this entry later
+  tags: {
+    type: Array,
+    defaultValue: [],
+  },
+  'tags.$': {
+    type: String,
+  },
+  // ID of the journal this entry belongs to
+  journalId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+    index: 1,
+  }
 });
 
 export { ExperienceSchema };

app/imports/api/creature/removeCreature.js

@@ -1,14 +1,17 @@
 import SimpleSchema from 'simpl-schema';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js'
 import { assertOwnership } from '/imports/api/creature/creaturePermissions.js';
+import Experiences from '/imports/api/creature/experience/Experiences.js';
 
-function removeRelatedDocuments(charId){
+function removeRelatedDocuments(creatureId){
-  CreatureProperties.remove({'ancestors.id': charId});
+  CreatureProperties.remove({'ancestors.id': creatureId});
-};
+  Experiences.remove({creatureId});
+}
 
 const removeCreature = new ValidatedMethod({
-  name: "Creatures.methods.removeCreature", // DDP method name
+  name: 'Creatures.methods.removeCreature', // DDP method name
   validate: new SimpleSchema({
     charId: {
       type: String,

app/imports/api/creature/restCreature.js

@@ -0,0 +1,106 @@
+import SimpleSchema from 'simpl-schema';
+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 { recomputeCreatureById } from '/imports/api/creature/computation/recomputeCreature.js';
+
+const restCreature = new ValidatedMethod({
+  name: 'creature.methods.longRest',
+  validate: new SimpleSchema({
+    creatureId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+    restType: {
+      type: String,
+      allowedValues: ['shortRest', 'longRest'],
+    },
+  }).validator(),
+  run({creatureId, restType}) {
+    let creature = Creatures.findOne(creatureId, {
+      fields: {
+        owner: 1,
+        writers: 1,
+        settings: 1,
+      }
+    }) ;
+    // Need edit permissions
+    assertEditPermission(creature, this.userId);
+
+    // Long rests reset short rest properties as well
+    let resetFilter;
+    if (restType === 'shortRest'){
+      resetFilter = 'shortRest'
+    } else {
+      resetFilter = {$in: ['shortRest', 'longRest']}
+    }
+    // Only apply to active properties
+    let filter = getActivePropertyFilter({
+      filter: {reset: resetFilter},
+      ancestorId: creatureId,
+      includeUntoggled: true,
+    });
+    // update all attribute's damage
+    filter.type = 'attribute';
+    CreatureProperties.update(filter, {
+      $set: {damage: 0}
+    }, {
+      selector: {type: 'attribute'},
+      multi: true,
+    });
+    // Update all action-like properties' usesUsed
+    filter.type = {$in: [
+      'action',
+      'attack',
+      'spell'
+    ]};
+    CreatureProperties.update(filter, {
+      $set: {usesUsed: 0}
+    }, {
+      selector: {type: 'action'},
+      multi: true,
+    });
+    // Reset half hit dice on a long rest, starting with the highest dice
+    if (restType === 'longRest'){
+      let hitDice = getActiveProperties({
+        ancestorId: creatureId,
+        filter: {type: 'attribute', attributeType: 'hitDice'},
+        options: {fields: {
+          hitDiceSize: 1,
+          damage: 1,
+          value: 1,
+        }},
+      });
+      // Use a collator to do sorting in natural order
+      let collator = new Intl.Collator('en', {
+        numeric: true, sensitivity: 'base'
+      });
+      // Get the hit dice in decending order of hitDiceSize
+      let compare = (a, b) => collator.compare(b.hitDiceSize, a.hitDiceSize)
+      hitDice.sort(compare);
+      // Get the total number of hit dice that can be recovered this rest
+      let totalHd = hitDice.reduce((sum, hd) => sum + (hd.value || 0), 0);
+      let resetMultiplier = creature.settings.hitDiceResetMultiplier || 0.5;
+      let recoverableHd = Math.max(Math.floor(totalHd*resetMultiplier), 1);
+      // recover each hit dice in turn until the recoverable amount is used up
+      let amountToRecover, resultingDamage;
+      hitDice.forEach(hd => {
+        if (!recoverableHd) return;
+        amountToRecover = Math.min(recoverableHd, hd.damage || 0);
+        if (!amountToRecover) return;
+        recoverableHd -= amountToRecover;
+        resultingDamage = hd.damage - amountToRecover;
+        CreatureProperties.update(hd._id, {
+          $set: {damage: resultingDamage}
+        }, {
+          selector: {type: 'attribute'},
+        });
+      });
+    }
+    recomputeCreatureById(creatureId);
+  },
+});
+
+export default restCreature;

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);
 
-/*
+// This method does not validate icons against the schema, use wisely;
-console.warn("Write Icons is not secure, disable before deployment")
 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/Attributes.js

@@ -1,4 +1,5 @@
 import SimpleSchema from 'simpl-schema';
+import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 import VARIABLE_NAME_REGEX from '/imports/constants/VARIABLE_NAME_REGEX.js';
 
 /*
@@ -13,7 +14,7 @@ let AttributeSchema = new SimpleSchema({
   variableName: {
     type: String,
 		regEx: VARIABLE_NAME_REGEX,
-    min: 3,
+    min: 2,
     defaultValue: 'newAttribute',
   },
 	// How it is displayed and computed is determined by type
@@ -73,18 +74,36 @@ let ComputedOnlyAttributeSchema = new SimpleSchema({
   baseValue: {
     type: SimpleSchema.oneOf(Number, String, Boolean),
     optional: true,
+  },
+  baseValueErrors: {
+    type: Array,
+    optional: true,
+  },
+  'baseValueErrors.$': {
+    type: ErrorSchema,
   },
 	// The computed value of the attribute
   value: {
     type: SimpleSchema.oneOf(Number, String, Boolean),
 		defaultValue: 0,
     optional: true,
+  },
+  // The computed value of the attribute minus the damage
+  currentValue: {
+    type: SimpleSchema.oneOf(Number, String, Boolean),
+		defaultValue: 0,
+    optional: true,
   },
 	// The computed modifier, provided the attribute type is `ability`
 	modifier: {
 		type: SimpleSchema.Integer,
 		optional: true,
 	},
+  // Should this attribute hide
+  hide: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 const ComputedAttributeSchema = new SimpleSchema()

app/imports/api/properties/ClassLevels.js

@@ -9,6 +9,7 @@ let ClassLevelSchema = new SimpleSchema({
 	// The name of this class level's variable
 	variableName: {
     type: String,
+    min: 2,
 		regEx: VARIABLE_NAME_REGEX,
   },
 	level: {

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/DamageMultipliers.js

@@ -34,11 +34,11 @@ let DamageMultiplierSchema = new SimpleSchema({
     type: String,
   },
   // Tags which must be present to be affected by this multiplier (AND)
-  targetTags: {
+  includeTags: {
     type: Array,
     defaultValue: [],
   },
-  'targetTags.$': {
+  'includeTags.$': {
     type: String,
   },
 });

app/imports/api/properties/Effects.js

@@ -1,5 +1,5 @@
 import SimpleSchema from 'simpl-schema';
-
+import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 /*
  * Effects are reason-value attached to skills and abilities
  * that modify their final value or presentation in some way
@@ -18,6 +18,7 @@ let EffectSchema = new SimpleSchema({
 			'mul',
 			'min',
 			'max',
+      'set',
 			'advantage',
 			'disadvantage',
 			'passiveAdd',
@@ -47,7 +48,15 @@ const ComputedOnlyEffectSchema = new SimpleSchema({
 		type: SimpleSchema.oneOf(Number, String, Boolean),
 		optional: true,
 	},
-})
+  // The errors encountered while computing the result
+  errors: {
+    type: Array,
+    optional: true,
+  },
+  'errors.$':{
+    type: ErrorSchema,
+  },
+});
 
 const ComputedEffectSchema = new SimpleSchema()
 	.extend(ComputedOnlyEffectSchema)

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/SavingThrows.js

@@ -3,6 +3,10 @@ import SimpleSchema from 'simpl-schema';
 // These are the rolls made when saves are called for
 // For the saving throw bonus or proficiency, see ./Skills.js
 let SavingThrowSchema = new SimpleSchema ({
+  name: {
+    type: String,
+    optional: true,
+  },
   dc: {
     type: String,
     optional: true,

app/imports/api/properties/Skills.js

@@ -1,4 +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
@@ -13,7 +15,8 @@ let SkillSchema = new SimpleSchema({
   // Ignored for skilltype = save
   variableName: {
     type: String,
-		regEx: /^\w*[a-z]\w*$/i,
+    regEx: VARIABLE_NAME_REGEX,
+    min: 2,
   },
 	// The variable name of the ability this skill relies on
   ability: {
@@ -35,9 +38,9 @@ let SkillSchema = new SimpleSchema({
     ],
     defaultValue: 'skill',
   },
-	// If the baseValue is higher than the computed value, it will be used as `value`
+  // The starting value, before effects
-	baseValue: {
+	baseValueCalculation: {
-		type: Number,
+		type: String,
 		optional: true,
 	},
 	// The base proficiency of this skill
@@ -57,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: {
@@ -101,6 +116,11 @@ let ComputedOnlySkillSchema = new SimpleSchema({
     type: SimpleSchema.Integer,
     optional: true,
   },
+  // Should this attribute hide
+  hide: {
+    type: Boolean,
+    optional: true,
+  },
 })
 
 const ComputedSkillSchema = new SimpleSchema()

app/imports/api/properties/Toggles.js

@@ -1,4 +1,5 @@
 import SimpleSchema from 'simpl-schema';
+import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 
 const ToggleSchema = new SimpleSchema({
   name: {
@@ -27,6 +28,14 @@ const ComputedOnlyToggleSchema = new SimpleSchema({
 		type: SimpleSchema.oneOf(Number, String, Boolean),
 		optional: true,
 	},
+  // The errors encountered while computing the result
+  errors: {
+    type: Array,
+    optional: true,
+  },
+  'errors.$': {
+    type: ErrorSchema,
+  },
 });
 
 const ComputedToggleSchema = new SimpleSchema()

app/imports/api/properties/computedPropertySchemasIndex.js

@@ -9,7 +9,6 @@ import { ContainerSchema } from '/imports/api/properties/Containers.js';
 import { DamageSchema } from '/imports/api/properties/Damages.js';
 import { DamageMultiplierSchema } from '/imports/api/properties/DamageMultipliers.js';
 import { ComputedEffectSchema } from '/imports/api/properties/Effects.js';
-import { ExperienceSchema } from '/imports/api/properties/Experiences.js';
 import { FeatureSchema } from '/imports/api/properties/Features.js';
 import { FolderSchema } from '/imports/api/properties/Folders.js';
 import { ItemSchema } from '/imports/api/properties/Items.js';
@@ -33,7 +32,6 @@ const propertySchemasIndex = {
   damage: DamageSchema,
   damageMultiplier: DamageMultiplierSchema,
   effect: ComputedEffectSchema,
-  experience: ExperienceSchema,
   feature: FeatureSchema,
   folder: FolderSchema,
   note: NoteSchema,

app/imports/api/properties/propertySchemasIndex.js

@@ -8,7 +8,6 @@ import { ClassLevelSchema } from '/imports/api/properties/ClassLevels.js';
 import { DamageSchema } from '/imports/api/properties/Damages.js';
 import { DamageMultiplierSchema } from '/imports/api/properties/DamageMultipliers.js';
 import { EffectSchema } from '/imports/api/properties/Effects.js';
-import { ExperienceSchema } from '/imports/api/properties/Experiences.js';
 import { FeatureSchema } from '/imports/api/properties/Features.js';
 import { FolderSchema } from '/imports/api/properties/Folders.js';
 import { NoteSchema } from '/imports/api/properties/Notes.js';
@@ -33,7 +32,6 @@ const propertySchemasIndex = {
   damage: DamageSchema,
   damageMultiplier: DamageMultiplierSchema,
   effect: EffectSchema,
-  experience: ExperienceSchema,
   feature: FeatureSchema,
   folder: FolderSchema,
   note: NoteSchema,

app/imports/api/properties/subSchemas/ErrorSchema.js

@@ -0,0 +1,14 @@
+import SimpleSchema from 'simpl-schema';
+
+const ErrorSchema = new SimpleSchema({
+	// The roll that determines how much to change the attribute
+  message: {
+    type: String,
+  },
+	// Who this adjustment applies to
+	type: {
+    type: String,
+	},
+});
+
+export default ErrorSchema;

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/DAMAGE_TYPES.js

@@ -1,17 +1,18 @@
 const DAMAGE_TYPES = Object.freeze([
-  "bludgeoning",
+  'healing',
-  "piercing",
+  'bludgeoning',
-  "slashing",
+  'piercing',
-  "acid",
+  'slashing',
-  "cold",
+  'acid',
-  "fire",
+  'cold',
-  "force",
+  'fire',
-  "lightning",
+  'force',
-  "necrotic",
+  'lightning',
-  "poison",
+  'necrotic',
-  "psychic",
+  'poison',
-  "radiant",
+  'psychic',
-  "thunder",
+  'radiant',
+  'thunder',
 ]);
 
 export default DAMAGE_TYPES;

app/imports/constants/PROPERTIES.js

@@ -1,44 +1,44 @@
 const PROPERTIES = Object.freeze({
   action: {
-    icon: 'offline_bolt',
+    icon: '$vuetify.icons.action',
     name: 'Action'
   },
-  adjustment: {
-    icon: 'warning',
-    name: 'Attribute damage'
-  },
   attack: {
-    icon: 'bolt',
+    icon: '$vuetify.icons.attack',
     name: 'Attack'
   },
   attribute: {
-    icon: 'donut_small',
+    icon: '$vuetify.icons.attribute',
     name: 'Attribute'
   },
+  adjustment: {
+    icon: '$vuetify.icons.attribute_damage',
+    name: 'Attribute damage'
+  },
   buff: {
-    icon: 'star',
+    icon: '$vuetify.icons.buff',
     name: 'Buff'
   },
   classLevel: {
-    icon: 'school',
+    icon: '$vuetify.icons.class_level',
     name: 'Class level'
   },
+  container: {
+    icon: 'work',
+    name: 'Container'
+  },
   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',
-    name: 'Experience'
-  },
   feature: {
     icon: 'subject',
     name: 'Feature'
@@ -47,6 +47,10 @@ const PROPERTIES = Object.freeze({
     icon: 'folder',
     name: 'Folder'
   },
+  item: {
+    icon: '$vuetify.icons.item',
+    name: 'Item'
+  },
   note: {
     icon: 'note',
     name: 'Note'
@@ -56,35 +60,27 @@ 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: {
-    icon: 'work',
-    name: 'Container'
-  },
-  item: {
-    icon: 'category',
-    name: 'Item'
-  },
   toggle: {
-    icon: 'power_settings_new',
+    icon: '$vuetify.icons.toggle',
     name: 'Toggle'
   },
 });

app/imports/server/cron/deleteSoftRemovedDocuments.js

@@ -1,11 +1,18 @@
+import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
+import { assertAdmin } from '/imports/api/sharing/sharingPermissions.js';
+import { SyncedCron } from 'meteor/percolate:synced-cron';
 
-let collections = [LibraryNodes];
+Meteor.startup(() => {
+	const collections = [
+		CreatureProperties,
+    LibraryNodes,
+	];
 
-if (Meteor.isServer) Meteor.startup(() => {
 	/**
 	 * Deletes all soft removed documents that were removed more than 30 minutes ago
 	 * and were not restored
+	 * @return {Number} Number of documents removed
 	 */
 	const deleteOldSoftRemovedDocs = function(){
 		const now = new Date();
@@ -14,30 +21,30 @@ if (Meteor.isServer) Meteor.startup(() => {
 			collection.remove({
 				removed: true,
 				removedAt: {$lt: thirtyMinutesAgo} // dates *before* 30 minutes ago
-			}, error => {
+			}, function(error){
-				if (error) console.error(error);
+				if (error){
+					console.error(error);
+				}
 			});
 		});
-		return;
 	};
 
 	SyncedCron.add({
-		name: "Delete all soft removed items that haven't been restored",
+		name: 'deleteSoftRemovedDocs',
 		schedule: function(parser) {
-			return parser.text('every 6 hours');
+			return parser.text('every 2 hours');
 		},
-		job: function() {
+		job: deleteOldSoftRemovedDocs,
-			deleteOldSoftRemovedDocs();
-		}
 	});
 
+	SyncedCron.start();
+
 	// Add a method to manually trigger removal
 	Meteor.methods({
 		deleteOldSoftRemovedDocs() {
-			const user = Meteor.users.findOne(this.userId);
+      assertAdmin(this.userId);
-			if (user && _.contains(user.roles, "admin")){
+			this.unblock();
-				return deleteOldSoftRemovedDocs();
+			deleteOldSoftRemovedDocs();
-			}
 		},
 	});
 });

app/imports/server/publications/experiences.js

@@ -0,0 +1,32 @@
+import SimpleSchema from 'simpl-schema';
+import Creatures from '/imports/api/creature/Creatures.js';
+import Experiences from '/imports/api/creature/experience/Experiences.js';
+
+let schema = new SimpleSchema({
+  creatureId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  },
+});
+
+Meteor.publish('experiences', function(creatureId){
+  schema.validate({ creatureId });
+  this.autorun(function (){
+    let userId = this.userId;
+    let creatureCursor = Creatures.find({
+      _id: creatureId,
+      $or: [
+        {readers: userId},
+        {writers: userId},
+        {owner: userId},
+        {public: true},
+      ],
+    });
+    if (!creatureCursor.count()) return this.ready();
+    return [
+      Experiences.find({
+        creatureId,
+      }),
+    ];
+  });
+});

app/imports/server/publications/index.js

@@ -1,5 +1,6 @@
 import '/imports/server/publications/characterList.js';
 import '/imports/server/publications/library.js';
 import '/imports/server/publications/singleCharacter.js';
+import '/imports/server/publications/experiences.js';
 import '/imports/server/publications/users.js';
 import '/imports/server/publications/icons.js';

app/imports/server/publications/library.js

@@ -40,16 +40,23 @@ let libraryIdSchema = new SimpleSchema({
 Meteor.publish('library', function(libraryId){
   libraryIdSchema.validate({libraryId});
   this.autorun(function (){
-    if (!this.userId) return [];
+    let libraryCursor
-    let libraryCursor = Libraries.find({
+    if (this.userId) {
-      _id: libraryId,
+      libraryCursor = Libraries.find({
-      $or: [
+        _id: libraryId,
-        {owner: this.userId},
+        $or: [
-        {writers: this.userId},
+          {owner: this.userId},
-        {readers: this.userId},
+          {writers: this.userId},
-        {public: true},
+          {readers: this.userId},
-      ],
+          {public: true},
-    });
+        ],
+      });
+    } else {
+      libraryCursor = Libraries.find({
+        _id: libraryId,
+        public: true,
+      });
+    }
     if (!libraryCursor.count()) return this.ready();
     return [
       libraryCursor,

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,
   },
@@ -93,6 +93,9 @@ export default {
       this.safeValue = null;
       this.$nextTick(() => this.safeValue = this.value);
     },
+    focus(){
+      this.$refs.input.focus();
+    }
   },
   computed: {
     errors(){

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/TextField.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <v-text-field
+    ref="input"
     v-bind="$attrs"
     :loading="loading"
     :error-messages="errors"

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/components/tree/TreeNodeList.vue

@@ -107,7 +107,6 @@
 				let allowed = isParentAllowed({parentType, childType});
 				return allowed;
 			},
-      log: console.log,
 		},
 	};
 </script>

app/imports/ui/creature/CreatureForm.vue

@@ -42,9 +42,28 @@
       :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
     />
-    <!--
+    <form-sections>
-		<form-sections>
+      <form-section name="settings">
-			<form-section name="settings">
+        <v-switch
+          label="Hide redundant stats"
+          :input-value="model.settings.hideUnusedStats"
+          :disabled="disabled"
+          @change="value => $emit('change', {path: ['settings','hideUnusedStats'], value: !!value})"
+        />
+        <text-field
+          label="Hit Dice reset multiplier"
+          hint="What fraction of your hit dice are reset every long rest"
+          placeholder="0.5"
+          type="number"
+          min="0"
+          max="1"
+          step="0.1"
+          :value="model.settings.hitDiceResetMultiplier"
+          :debounce-time="debounceTime"
+          :disabled="disabled"
+          @change="(value, ack) => $emit('change', {path: ['settings','hitDiceResetMultiplier'], value, ack})"
+        />
+      <!--
 				<v-switch
 					label="Use variant encumbrance"
 					:input-value="model.settings.useVariantEncumbrance"
@@ -66,9 +85,9 @@
           :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','swapStatAndModifier'], value})"
 				/>
-			</form-section>
+        -->
-		</form-sections>
+      </form-section>
-    -->
+    </form-sections>
   </div>
 </template>
 

app/imports/ui/creature/CreatureFormDialog.vue

@@ -1,8 +1,15 @@
 <template lang="html">
-  <dialog-base>
+  <dialog-base :color="model.color">
-    <v-toolbar-title slot="toolbar">
+    <template slot="toolbar">
-      Creature Form Dialog
+      <v-toolbar-title>
-    </v-toolbar-title>
+        Creature Form Dialog
+      </v-toolbar-title>
+      <v-spacer />
+      <color-picker
+        :value="model.color"
+        @input="value => change({path: ['color'], value})"
+      />
+    </template>
     <div>
       <creature-form
         :model="model"
@@ -27,11 +34,13 @@ import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import CreatureForm from '/imports/ui/creature/CreatureForm.vue'
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 
 export default {
 	components: {
 		DialogBase,
 		CreatureForm,
+    ColorPicker,
 	},
 	props: {
 		_id: String,
@@ -52,8 +61,16 @@ export default {
 	},
 	methods: {
 		change({path, value, ack}){
-			updateCreature.call({_id: this._id, path, value}, (error, result) =>{
+			updateCreature.call({_id: this._id, path, value}, (error) =>{
-				ack && ack(error && error.reason || error);
+        if (error){
+          if(ack){
+            ack(error && error.reason || error)
+          } else {
+            console.error(error)
+          }
+        } else if (ack) {
+          ack();
+        }
 			});
 		},
 	}

app/imports/ui/creature/RestButton.vue

@@ -0,0 +1,51 @@
+<template lang="html">
+  <v-btn
+    :loading="loading"
+    :disabled="loading"
+    outline
+    style="width: 160px;"
+    @click="rest"
+  >
+    <v-icon left>
+      {{ type === 'shortRest' ? 'snooze' : 'bedtime' }}
+    </v-icon>
+    {{ type === 'shortRest' ? 'Short Rest' : 'Long Rest' }}
+  </v-btn>
+</template>
+
+<script>
+import restCreature from '/imports/api/creature/restCreature.js';
+
+export default {
+  props:{
+    type: {
+      type: String,
+      required: true,
+    },
+    creatureId: {
+      type: String,
+      required: true,
+    },
+  },
+  data(){return {
+    loading: false,
+  }},
+  methods: {
+    rest(){
+      this.loading = true;
+      restCreature.call({
+        creatureId: this.creatureId,
+        restType: this.type,
+      }, error => {
+        this.loading = false;
+        if (error){
+          console.error(error);
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

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

@@ -0,0 +1,247 @@
+<template lang="html">
+  <v-toolbar
+    app
+    class="character-sheet-toolbar"
+    :color="toolbarColor"
+    :dark="isDark"
+    :light="!isDark"
+    tabs
+    dense
+  >
+    <v-toolbar-side-icon @click="toggleDrawer" />
+    <v-toolbar-title>
+      <v-fade-transition
+        mode="out-in"
+      >
+        <div :key="$store.state.pageTitle">
+          {{ $store.state.pageTitle }}
+        </div>
+      </v-fade-transition>
+    </v-toolbar-title>
+    <v-spacer />
+    <v-fade-transition
+      mode="out-in"
+    >
+      <div :key="$route.meta.title">
+        <v-toolbar-items v-if="creature">
+          <v-btn
+            v-if="editPermission"
+            flat
+            icon
+            @click="recompute(creature._id)"
+          >
+            <v-icon>refresh</v-icon>
+          </v-btn>
+          <v-menu
+            bottom
+            left
+            transition="slide-y-transition"
+            data-id="creature-menu"
+          >
+            <template #activator="{ on }">
+              <v-btn
+                icon
+                v-on="on"
+              >
+                <v-icon>more_vert</v-icon>
+              </v-btn>
+            </template>
+            <v-list v-if="editPermission">
+              <v-list-tile @click="deleteCharacter">
+                <v-list-tile-title>
+                  <v-icon>delete</v-icon> Delete
+                </v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="showCharacterForm">
+                <v-list-tile-title>
+                  <v-icon>create</v-icon> Edit details
+                </v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="showShareDialog">
+                <v-list-tile-title>
+                  <v-icon>share</v-icon> Sharing
+                </v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+            <v-list v-else>
+              <v-list-tile @click="unshareWithMe">
+                <v-list-tile-title>
+                  <v-icon>delete</v-icon> Unshare with me
+                </v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
+        </v-toolbar-items>
+      </div>
+    </v-fade-transition>
+    <v-fade-transition
+      slot="extension"
+      mode="out-in"
+    >
+      <div
+        :key="$route.meta.title"
+        style="width: 100%"
+      >
+        <v-tabs
+          v-if="creature"
+          slot="extension"
+          :value="value"
+          centered
+          grow
+          max="100px"
+          @change="e => $emit('input', e)"
+        >
+          <v-tab>
+            Stats
+          </v-tab>
+          <v-tab>
+            Features
+          </v-tab>
+          <v-tab>
+            Inventory
+          </v-tab>
+          <v-tab>
+            Spells
+          </v-tab>
+          <v-tab>
+            Persona
+          </v-tab>
+          <v-tab>
+            Tree
+          </v-tab>
+        </v-tabs>
+      </div>
+    </v-fade-transition>
+  </v-toolbar>
+</template>
+
+<script>
+import Creatures from '/imports/api/creature/Creatures.js';
+import removeCreature from '/imports/api/creature/removeCreature.js';
+import { mapMutations } from 'vuex';
+import { theme } from '/imports/ui/theme.js';
+import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  data(){return {
+    theme,
+  }},
+  computed: {
+    creatureId(){
+      return this.$route.params.id;
+    },
+    toolbarColor(){
+      if (this.creature && this.creature.color){
+        return this.creature.color;
+      } else {
+        return this.$vuetify.theme.secondary;
+      }
+    },
+    isDark(){
+      return isDarkColor(this.toolbarColor);
+    },
+  },
+  methods: {
+    ...mapMutations([
+      'toggleDrawer',
+    ]),
+		recompute(charId){
+			recomputeCreature.call({charId});
+		},
+		showCharacterForm(){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-form-dialog',
+				elementId: 'creature-menu',
+				data: {
+					_id: this.creatureId,
+				},
+			});
+		},
+		showShareDialog(){
+			this.$store.commit('pushDialogStack', {
+				component: 'share-dialog',
+				elementId: 'creature-menu',
+				data: {
+					docRef: {
+						id: this.creatureId,
+						collection: 'creatures',
+					}
+				},
+			});
+		},
+		deleteCharacter(){
+			let that = this;
+			this.$store.commit('pushDialogStack', {
+				component: 'delete-confirmation-dialog',
+				elementId: 'creature-menu',
+				data: {
+					name: this.creature.name,
+					typeName: 'Character'
+				},
+				callback(confirmation){
+					if(!confirmation) return;
+					removeCreature.call({charId: that.creatureId}, (error) => {
+						if (error) {
+							console.error(error);
+						} else {
+							that.$router.push('/characterList');
+						}
+					});
+				}
+			});
+		},
+    unshareWithMe(){
+      updateUserSharePermissions.call({
+        docRef: {
+          collection: 'creatures',
+          id: this.creatureId,
+        },
+        userId: Meteor.userId(),
+        role: 'none',
+      }, (error) => {
+        if (error) {
+          console.error(error);
+        } else {
+          this.$router.push('/characterList');
+        }
+      });
+    },
+  },
+  meteor: {
+    $subscribe: {
+      'singleCharacter'(){
+        return [this.creatureId];
+      },
+    },
+    creature(){
+      return Creatures.findOne(this.creatureId);
+    },
+    editPermission(){
+      try {
+        assertEditPermission(this.creature, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="css">
+.character-sheet-toolbar .v-tabs__container--grow .v-tabs__div {
+  max-width: 120px !important;
+}
+.character-sheet-toolbar .v-tabs__bar {
+  background: none !important;
+}
+</style>

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/InventoryTab.vue

@@ -2,7 +2,7 @@
   <div class="inventory">
     <column-layout>
       <div>
-        <toolbar-card color="">
+        <toolbar-card :color="$vuetify.theme.secondary">
           <v-spacer slot="toolbar" />
           <v-switch
             v-if="context.editPermission !== false"

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

@@ -20,6 +20,70 @@
           </v-card-text>
         </v-card>
       </div>
+      <div>
+        <v-card class="class-details">
+          <v-card-title
+            v-if="creature.variables.level"
+            class="title"
+          >
+            Level {{ creature.variables.level.value }}
+          </v-card-title>
+          <v-list>
+            <v-list-tile>
+              <v-list-tile-content>
+                <v-list-tile-title
+                  v-if="
+                    creature.variables.milestoneLevels &&
+                      creature.variables.milestoneLevels.value
+                  "
+                >
+                  {{ creature.variables.milestoneLevels.value }} Milestone levels
+                </v-list-tile-title>
+                <v-list-tile-title v-else>
+                  {{
+                    creature.variables.xp &&
+                      creature.variables.xp.value ||
+                      0
+                  }} XP
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-btn
+                  flat
+                  icon
+                  data-id="experience-info-button"
+                  @click="showExperienceList"
+                >
+                  <v-icon>info</v-icon>
+                </v-btn>
+              </v-list-tile-action>
+              <v-list-tile-action>
+                <v-btn
+                  flat
+                  icon
+                  data-id="experience-add-button"
+                  @click="addExperience"
+                >
+                  <v-icon>add</v-icon>
+                </v-btn>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-list-tile
+              v-for="classLevel in highestClassLevels"
+              :key="classLevel._id"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  {{ classLevel.name }}
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-avatar>
+                {{ classLevel.level }}
+              </v-list-tile-avatar>
+            </v-list-tile>
+          </v-list>
+        </v-card>
+      </div>
       <div
         v-for="note in notes"
         :key="note._id"
@@ -37,6 +101,7 @@ import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import NoteCard from '/imports/ui/properties/components/persona/NoteCard.vue';
+import getActiveProperties from '/imports/api/creature/getActiveProperties.js'
 
 export default {
 	components: {
@@ -44,7 +109,10 @@ export default {
 		NoteCard,
 	},
 	props: {
-		creatureId: String,
+		creatureId: {
+      type: String,
+      required: true,
+    },
 	},
 	meteor: {
 		notes(){
@@ -58,8 +126,34 @@ export default {
 		},
 		creature(){
 			return Creatures.findOne(this.creatureId);
-		}
+		},
+    classLevels(){
+      return getActiveProperties({
+        ancestorId: this.creatureId,
+        filter: {type: 'classLevel'},
+      });
+    },
 	},
+  computed: {
+    highestClassLevels(){
+      let highestLevels = {};
+      let highestLevelsList = [];
+      this.classLevels.forEach(classLevel => {
+        let name = classLevel.vairableName;
+        if (
+          !highestLevels[name] ||
+          highestLevels[name].level < classLevel.level
+        ){
+          highestLevels[name] = classLevel;
+        }
+      });
+      for (let name in highestLevels){
+        highestLevelsList.push(highestLevels[name]);
+      }
+      highestLevelsList.sort((a, b) => a.level - b.level);
+      return highestLevelsList;
+    },
+  },
 	methods: {
 		showCharacterForm(){
 			this.$store.commit('pushDialogStack', {
@@ -70,6 +164,28 @@ export default {
 				},
 			});
 		},
+    addExperience(){
+      this.$store.commit('pushDialogStack', {
+				component: 'experience-insert-dialog',
+				elementId: 'experience-add-button',
+				data: {
+					creatureIds: [this.creatureId],
+          startAsMilestone: this.creature.variables.milestoneLevels &&
+            !!this.creature.variables.milestoneLevels.value,
+				},
+			});
+    },
+    showExperienceList(){
+      this.$store.commit('pushDialogStack', {
+				component: 'experience-list-dialog',
+				elementId: 'experience-info-button',
+				data: {
+					creatureId: this.creatureId,
+          startAsMilestone: this.creature.variables.milestoneLevels &&
+            !!this.creature.variables.milestoneLevels.value,
+				},
+			});
+    },
 	},
 };
 </script>

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

@@ -1,10 +1,26 @@
 <template lang="html">
-  <div class="stats-tab ma-2">
+  <div
+    class="stats-tab ma-2"
+  >
     <div class="px-2 pt-2">
       <health-bar-card-container :creature-id="creatureId" />
     </div>
 
     <column-layout>
+      <div class="character-buttons">
+        <v-card>
+          <v-card-text class="layout column align-center">
+            <rest-button
+              :creature-id="creatureId"
+              type="shortRest"
+            />
+            <rest-button
+              :creature-id="creatureId"
+              type="longRest"
+            />
+          </v-card-text>
+        </v-card>
+      </div>
       <div class="ability-scores">
         <v-card>
           <v-list>
@@ -276,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';
@@ -288,25 +304,30 @@
 	import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
   import ActionListTile from '/imports/ui/properties/components/actions/ActionListTile.vue';
   import AttackListTile from '/imports/ui/properties/components/actions/AttackListTile.vue';
+  import RestButton from '/imports/ui/creature/RestButton.vue';
   import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 
-  const getProperties = function(creatureId, filter){
+  const getProperties = function(creature, filter,){
+    if (!creature) return;
+    if (creature.settings.hideUnusedStats){
+      filter.hide = {$ne: true};
+    }
     return getActiveProperties({
-      ancestorId: creatureId,
+      ancestorId: creature._id,
       filter,
       options: {sort: {order: 1}},
     });
   };
 
-	const getAttributeOfType = function(creatureId, type){
+	const getAttributeOfType = function(creature, type){
-    return getProperties(creatureId, {
+    return getProperties(creature, {
       type: 'attribute',
       attributeType: type,
     });
 	};
 
-  const getSkillOfType = function(creatureId, type){
+  const getSkillOfType = function(creature, type){
-    return getProperties(creatureId, {
+    return getProperties(creature, {
       type: 'skill',
       skillType: type,
     });
@@ -314,6 +335,7 @@
 
 	export default {
 		components: {
+      RestButton,
 			AbilityListTile,
 			AttributeCard,
 			ColumnLayout,
@@ -337,49 +359,49 @@
         return Creatures.findOne(this.creatureId);
       },
 			abilities(){
-				return getAttributeOfType(this.creatureId, 'ability');
+				return getAttributeOfType(this.creature, 'ability');
 			},
 			stats(){
-				return getAttributeOfType(this.creatureId, 'stat');
+				return getAttributeOfType(this.creature, 'stat');
 			},
 			modifiers(){
-				return getAttributeOfType(this.creatureId, 'modifier');
+				return getAttributeOfType(this.creature, 'modifier');
 			},
 			resources(){
-				return getAttributeOfType(this.creatureId, 'resource');
+				return getAttributeOfType(this.creature, 'resource');
 			},
 			spellSlots(){
-				return getAttributeOfType(this.creatureId, 'spellSlot');
+				return getAttributeOfType(this.creature, 'spellSlot');
 			},
 			hitDice(){
-        return getAttributeOfType(this.creatureId, 'hitDice');
+        return getAttributeOfType(this.creature, 'hitDice');
 			},
 			checks(){
-        return getSkillOfType(this.creatureId, 'check');
+        return getSkillOfType(this.creature, 'check');
 			},
 			savingThrows(){
-        return getSkillOfType(this.creatureId, 'save');
+        return getSkillOfType(this.creature, 'save');
 			},
 			skills(){
-        return getSkillOfType(this.creatureId, 'skill');
+        return getSkillOfType(this.creature, 'skill');
 			},
       tools(){
-        return getSkillOfType(this.creatureId, 'tool');
+        return getSkillOfType(this.creature, 'tool');
 			},
       weapons(){
-        return getSkillOfType(this.creatureId, 'weapon');
+        return getSkillOfType(this.creature, 'weapon');
 			},
       armors(){
-        return getSkillOfType(this.creatureId, 'armor');
+        return getSkillOfType(this.creature, 'armor');
 			},
       languages(){
-        return getSkillOfType(this.creatureId, 'language');
+        return getSkillOfType(this.creature, 'language');
 			},
       actions(){
-        return getProperties(this.creatureId, {type: 'action'});
+        return getProperties(this.creature, {type: 'action'});
 			},
       attacks(){
-        return getProperties(this.creatureId, {type: 'attack'});
+        return getProperties(this.creature, {type: 'attack'});
 			},
 		},
 		methods: {

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

@@ -175,7 +175,11 @@ export default {
 		},
 		remove(){
 			softRemoveProperty.call({_id: this._id});
-			this.$store.dispatch('popDialogStack');
+      if (this.embedded){
+        this.$emit('removed');
+      } else {
+        this.$store.dispatch('popDialogStack');
+      }
 		},
 		selectSubProperty(_id){
 			this.$store.commit('pushDialogStack', {

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

@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
+  <dialog-base
-    <v-toolbar-title slot="toolbar">
+    :override-back-button="() => $emit('back')"
-      Add {{ propertyName }}
+    :color="model.color"
-    </v-toolbar-title>
+  >
+    <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/creature/experiences/ExperienceForm.vue

@@ -0,0 +1,68 @@
+<template lang="html">
+  <div class="experience-form">
+    <div class="layout column align-center">
+      <smart-switch
+        label="Milestone"
+        class="mx-3"
+        :value="milestone"
+        @change="makeMilestone"
+      />
+      <text-field
+        v-if="milestone"
+        label="Levels"
+        type="number"
+        class="base-value-field text-xs-center large-format no-flex"
+        :value="model.levels"
+        :error-messages="errors.levels"
+        @change="change('levels', ...arguments)"
+      />
+      <text-field
+        v-else
+        type="number"
+        class="base-value-field text-xs-center large-format no-flex"
+        suffix="XP"
+        autofocus
+        :value="model.xp"
+        :error-messages="errors.xp"
+        @change="change('xp', ...arguments)"
+      />
+    </div>
+    <text-field
+      label="Name"
+      :autofocus="milestone"
+      :value="model.name"
+      :error-messages="errors.name"
+      @change="change('name', ...arguments)"
+    />
+  </div>
+</template>
+
+<script>
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
+export default {
+  mixins: [propertyFormMixin],
+  props: {
+    startAsMilestone: {
+      type: Boolean,
+    },
+  },
+  data(){return {
+    milestone: this.startAsMilestone,
+  }},
+  methods: {
+    makeMilestone(milestone, ack){
+      this.milestone = milestone;
+      if (milestone){
+        this.change('xp', undefined);
+        this.change('levels', 1, ack);
+      } else {
+        this.change('levels', undefined, ack);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/creature/experiences/ExperienceInsertDialog.vue

@@ -0,0 +1,83 @@
+<template lang="html">
+  <dialog-base>
+    <experience-form
+      :start-as-milestone="startAsMilestone"
+      :model="model"
+      :errors="errors"
+      @change="change"
+      @push="push"
+      @pull="pull"
+    />
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        :disabled="!valid"
+        @click="insertExperience"
+      >
+        Insert
+      </v-btn>
+    </div>
+  </dialog-base>
+</template>
+
+<script>
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import ExperienceForm from '/imports/ui/creature/experiences/ExperienceForm.vue';
+import { ExperienceSchema, insertExperience } from '/imports/api/creature/experience/Experiences.js';
+import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
+
+export default {
+  components: {
+		DialogBase,
+    ExperienceForm,
+	},
+  mixins: [schemaFormMixin],
+  provide: {
+    context: {
+      debounceTime: 0,
+    },
+  },
+  props: {
+    creatureIds: {
+      type: Array,
+      required: true,
+    },
+    startAsMilestone: {
+      type: Boolean,
+    },
+  },
+  data(){
+    let schema = ExperienceSchema.omit('creatureId');
+    let startingModel = {};
+    if (this.startAsMilestone){
+      startingModel.levels = 1;
+    }
+    return {
+      model: schema.clean(startingModel),
+      schema: schema,
+      validationContext: schema.newContext(),
+      debounceTime: 0,
+    };
+  },
+  methods:{
+    insertExperience(){
+      let experience = this.schema.clean(this.model);
+      let id = insertExperience.call({
+        experience,
+        creatureIds: this.creatureIds,
+      }, (error) =>  {
+        if (error){
+          console.error(error);
+        }
+      });
+      this.$store.dispatch('popDialogStack', id);
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/creature/experiences/ExperienceListDialog.vue

@@ -0,0 +1,174 @@
+<template lang="html">
+  <dialog-base>
+    <template slot="toolbar">
+      <v-toolbar-title>
+        Experiences
+      </v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        icon
+        flat
+        data-id="experience-add-button"
+        @click="addExperience"
+      >
+        <v-icon>add</v-icon>
+      </v-btn>
+      <v-btn
+        icon
+        flat
+        @click="recompute"
+      >
+        <v-icon>refresh</v-icon>
+      </v-btn>
+    </template>
+    <div
+      v-if="!$subReady.experiences"
+      class="layout column align-center justify-center fill-height"
+    >
+      <v-progress-circular
+        indeterminate
+        size="240"
+      />
+    </div>
+    <div
+      v-else-if="experiences.length === 0"
+      class="layout column align-center justify-center fill-height"
+    >
+      <v-icon style="font-size: 240px; width: 240px; height: 240px;">
+        $vuetify.icons.baby_face
+      </v-icon>
+      <p class="headline">
+        No experiences
+      </p>
+    </div>
+    <v-list v-else>
+      <v-slide-x-transition
+        group
+        mode="out"
+      >
+        <v-list-tile
+          v-for="experience in experiences"
+          :key="experience._id"
+          :data-id="experience._id"
+        >
+          <v-list-tile-action class="mr-3">
+            <v-list-tile-action-text>
+              {{ formatDate(experience.date) }}
+            </v-list-tile-action-text>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <template v-if="experience.name">
+              <v-list-tile-title>
+                {{ experience.name }}
+              </v-list-tile-title>
+              <v-list-tile-sub-title>
+                {{ xpText(experience) }}
+              </v-list-tile-sub-title>
+            </template>
+            <template v-else>
+              <v-list-tile-title>
+                {{ xpText(experience) }}
+              </v-list-tile-title>
+            </template>
+          </v-list-tile-content>
+          <v-list-tile-action>
+            <v-btn
+              icon
+              flat
+              :loading="experiencesRemovalLoading.has(experience._id)"
+              @click="removeExperience(experience._id)"
+            >
+              <v-icon>delete</v-icon>
+            </v-btn>
+          </v-list-tile-action>
+        </v-list-tile>
+      </v-slide-x-transition>
+    </v-list>
+  </dialog-base>
+</template>
+
+<script>
+import { format } from 'date-fns';
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import Experiences, { removeExperience, recomputeExperiences } from '/imports/api/creature/experience/Experiences.js';
+
+export default {
+  components: {
+    DialogBase,
+  },
+  props: {
+    creatureId: {
+      type: String,
+      required: true,
+    },
+    startAsMilestone: {
+      type: Boolean,
+    },
+  },
+  data(){ return {
+    experiencesRemovalLoading: new Set(),
+    recomputeLoading: false,
+  }},
+  meteor: {
+    $subscribe: {
+      'experiences'(){
+        return [this.creatureId];
+      },
+    },
+    experiences(){
+      return Experiences.find({
+        creatureId: this.creatureId
+      }, {
+        sort: {date: 1}
+      });
+    }
+  },
+  methods: {
+    xpText(experience){
+      let xpText = [];
+      if (experience.levels === 1){
+        xpText.push('1 Milestone level');
+      } else if (experience.levels){
+        xpText.push(`${experience.levels} Milestone levels`);
+      }
+      if (experience.xp || !experience.levels){
+        xpText.push(`${experience.xp || 0} XP`);
+      }
+      return xpText.join(', ');
+    },
+    formatDate(date){
+      return format(date, 'YYYY-MM-DD');
+    },
+    removeExperience(experienceId){
+      this.experiencesRemovalLoading.add(experienceId);
+      removeExperience.call({experienceId}, (error) => {
+        this.experiencesRemovalLoading.delete(experienceId);
+        if (error) console.error(error);
+      });
+    },
+    recompute(){
+      this.recomputeLoading = true;
+      recomputeExperiences.call({creatureId: this.creatureId}, error => {
+        this.recomputeLoading = false;
+        if (error) console.error(error);
+      });
+    },
+    addExperience(){
+      this.$store.commit('pushDialogStack', {
+        component: 'experience-insert-dialog',
+        elementId: 'experience-add-button',
+        data: {
+          creatureIds: [this.creatureId],
+          startAsMilestone: this.startAsMilestone,
+        },
+        callback(id){
+          return id;
+        }
+      });
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

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/dialogStack/DialogComponentIndex.js

@@ -3,6 +3,8 @@ import CreaturePropertyCreationDialog from '/imports/ui/creature/creaturePropert
 import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue'
 import CreaturePropertyFromLibraryDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue'
 import DeleteConfirmationDialog from '/imports/ui/dialogStack/DeleteConfirmationDialog.vue';
+import ExperienceInsertDialog from  '/imports/ui/creature/experiences/ExperienceInsertDialog.vue';
+import ExperienceListDialog from  '/imports/ui/creature/experiences/ExperienceListDialog.vue';
 import InviteDialog from '/imports/ui/user/InviteDialog.vue';
 import LibraryCreationDialog from '/imports/ui/library/LibraryCreationDialog.vue';
 import LibraryEditDialog from '/imports/ui/library/LibraryEditDialog.vue';
@@ -13,13 +15,14 @@ import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
 import TierTooLowDialog from '/imports/ui/user/TierTooLowDialog.vue';
 import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
 
-
 export default {
   CreatureFormDialog,
   CreaturePropertyCreationDialog,
   CreaturePropertyDialog,
   CreaturePropertyFromLibraryDialog,
   DeleteConfirmationDialog,
+  ExperienceInsertDialog,
+  ExperienceListDialog,
   InviteDialog,
   LibraryCreationDialog,
   LibraryEditDialog,

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
+            <upload-btn
-              ref="iconSearchField"
+              title="Sprite JSON"
-              label="Search"
+              @file-update="fileChanged"
-              append-icon="search"
+            />
-              @click:append="updateSearchString"
+            <icon-picker
-              @keydown.enter="updateSearchString"
+              :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,31 @@
 </template>
 
 <script>
-  import importIcons from '/imports/ui/icons/importIcons.js';
+  import {importIcons, importIconMetadata} from '/imports/ui/icons/importIcons.js';
-  import Icons from '/imports/api/icons/Icons.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,
     }},
     methods: {
       fileChanged (file) {
         importIcons(file);
       },
-      updateSearchString(){
+      metadataFileChanged(file){
-        this.searchString = this.$refs.iconSearchField.internalValue;
+        importIconMetadata(file);
       },
-    },
+      testIconChange(value, ack){
-    meteor: {
+        setTimeout(() => {
-      $subscribe: {
+          this.testIcon = value;
-        searchIcons() {
+          ack();
-          return [this.searchString];
+        }, 1000);
-        },
-      },
-      icons(){
-        return Icons.find({}, { sort: [['score', 'desc']] });
       },
     },
   };

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
+ * Import a SVG sprite file.
- * single 'd' attribute.
  *
  * 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
+ * all the individual files into a single directory, and then using
- * sprite-generator to run `svg-sprite-generate -d icons -o sprite.svg` to save
+ * `npm i -g svg-sprite-generator` `npm i -g xml-js`
- * the sprite file.
+ * 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){
+export function importIcons(file){
-  let id, d, icons = [];
   let reader = new FileReader();
+  if (! metadata) throw 'No metadata to build with';
 
   reader.onload = function(){
-    reader.result.match(/i?d="([^"])+"/gi).forEach(s => {
+    let data = JSON.parse(reader.result);
-      if (s[0] === 'i'){
+    let icons = [];
-        id = s.slice(4, -1);
+    data.svg.symbol.forEach(iconData => {
-      } else if (s[0] === 'd'){
+      let name = iconData._attributes.id;
-        d = s.slice(3, -1);
+      let shape = iconData.path[1]._attributes.d;
-        icons.push ({_id: Random.id(), name: id, shape: 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/layouts/AppLayout.vue

@@ -4,14 +4,17 @@
     :light="!darkMode"
   >
     <v-navigation-drawer
-      v-if="$route.path !== '/countdown'"
       v-model="drawer"
       app
     >
       <Sidebar />
     </v-navigation-drawer>
+    <router-view
+      v-model="tabs"
+      name="toolbar"
+    />
     <v-toolbar
-      v-if="$route.path !== '/countdown'"
+      v-if="!$route.matched[0].components.toolbar"
       app
       color="secondary"
       dark

app/imports/ui/layouts/Sidebar.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="sidebar">
     <v-alert
-      v-if="$route.path !== '/countdown'"
       icon="priority_high"
       type="error"
       dismissible
@@ -136,8 +135,9 @@
           {title: 'Home', icon: 'home', to: '/'},
           {title: 'Characters', icon: 'portrait', to: '/characterList', requireLogin: true},
           {title: 'Library', icon: 'book', to: '/library', requireLogin: true},
-          {title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
+          //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
-          {title: 'Send Feedback', icon: 'bug_report', to: '/feedback'},
+          {title: 'Feedback', icon: 'bug_report', to: '/feedback'},
+          {title: 'About', icon: 'subject', to: '/about'},
           {title: 'Patreon', icon: '', href: 'https://www.patreon.com/dicecloud'},
           {title: 'Github', icon: '', href: 'https://github.com/ThaumRystra/DiceCloud/tree/version-2'},
         ];

app/imports/ui/layouts/SingleCardLayout.vue

@@ -0,0 +1,15 @@
+<template
+  lang="html"
+  functional
+>
+  <div
+    class="pa-4 layout column align-center"
+    style="height: calc(100vh - 96px); display: flex;"
+  >
+    <v-card
+      style="height: 100%; width: 100%; max-width: 1800px;"
+    >
+      <slot />
+    </v-card>
+  </div>
+</template>

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)
@@ -92,7 +101,6 @@ export default {
             selection: this.selection,
           },
           callback: result => {
-            console.log(result)
             if (result){
               this.selected = id;
             }
@@ -101,7 +109,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')">
+  <dialog-base
-    <v-toolbar-title slot="toolbar">
+    :override-back-button="() => $emit('back')"
-      Add {{ propertyName }}
+    :color="model.color"
-    </v-toolbar-title>
+  >
+    <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/library/SingleLibraryToolbarItems.vue

@@ -29,7 +29,6 @@ export default {
   }},
   meteor: {
     library(){
-      console.log(this.$route);
       return Libraries.findOne(this.$route.params.id);
     },
     subscribed(){
@@ -41,7 +40,6 @@ export default {
       let userId = Meteor.userId();
       let library = this.library;
       if (!library) return;
-      console.log({library, userId});
       if (
         library.readers.includes(userId) ||
         library.writers.includes(userId) ||
@@ -55,10 +53,8 @@ export default {
     canEdit(){
       try {
         assertDocEditPermission(this.library, Meteor.userId());
-        console.log('can edit');
         return true
       } catch (e) {
-        console.log(e);
         return false;
       }
     }

app/imports/ui/pages/About.vue

@@ -0,0 +1,88 @@
+<template lang="html">
+  <div>
+    <section>
+      <v-parallax
+        src="/images/paper-dice-crown-with-candy.png"
+        height="400"
+      >
+        <v-layout
+          column
+          align-center
+          justify-center
+          class="white--text"
+        >
+          <p
+            class="white--text ma-2 headline text-xs-center"
+            style="max-width: 1200px;"
+          >
+            DiceCloud is a single-developer project started in 2014 with the aim of
+            being a character sheet that stayed in sync between the DM and their
+            players, and made it clear where every value in the sheet came from, and
+            how it was calculated.
+          </p>
+        </v-layout>
+      </v-parallax>
+    </section>
+    <section class="layout column align-center ma-2 mt-4">
+      <div>
+        <h3 class="headline mb-2">
+          Special Thanks
+        </h3>
+        <p>
+          <b>Sam</b> My fiancée, without whom DiceCloud could not hope to exist
+        </p><p>
+          <b>The "Heroes" of Asaea</b> The D&amp;D party whose joy was the fuel
+          with which DiceCloud was powered
+        </p>
+        <h3 class="title">
+          Paragon tier Patrons
+        </h3>
+        <v-list
+          avatar
+          two-line
+          style="background: inherit;"
+        >
+          <v-list-tile
+            v-for="paragon in paragons"
+            :key="paragon.name"
+          >
+            <v-list-tile-avatar>
+              <v-img :src="`/images/paragons/${paragon.avatar}.png`" />
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{ paragon.name }}
+              </v-list-tile-title>
+              <v-list-tile-sub-title>
+                {{ paragon.title }}
+              </v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){ return {
+    paragons:[{
+      name: 'Kira Ametrine',
+      title: 'Cleric of Lewd',
+      avatar: 'kira'
+    },{
+      name: 'Satherian',
+      title: 'Defender of Naptime',
+      avatar: 'satherian'
+    },{
+      name: 'Vinton',
+      title: 'The Gravekeeper',
+      avatar: 'vinton'
+    }],
+  }},
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/pages/Home.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <section>
         <v-parallax
-          src="/png/paper-dice-crown.png"
+          src="/images/paper-dice-crown.png"
           height="300"
         >
           <v-layout
@@ -78,9 +78,7 @@
               Inventory manager
             </h3>
             <p>
-              Equiping items changes your characters stats automatically. Drag
+              Equiping items changes your characters stats automatically.
-              items to other characters, or between sheets open on different
-              tabs.
             </p>
           </v-layout>
         </v-layout>
@@ -117,7 +115,6 @@
         >
           <v-btn
             v-for="btn in [
-              {link: 'https://reddit.com/r/dicecloud', name: 'Reddit'},
               {link: 'https://discord.gg/qEvdfeB', name: 'Discord'},
               {link: 'https://www.patreon.com/dicecloud', name: 'Patreon'},
               {link: 'https://github.com/ThaumRystra/DiceCloud', name: 'Github'},

app/imports/ui/pages/Library.vue

@@ -1,20 +1,15 @@
 <template lang="html">
-  <div
+  <single-card-layout>
-    class="pa-4 layout column align-center"
+    <library-and-node />
-    style="height: calc(100vh - 96px); display: flex;"
+  </single-card-layout>
-  >
-    <v-card
-      style="height: 100%; width: 100%; max-width: 1800px;"
-    >
-      <library-and-node />
-    </v-card>
-  </div>
 </template>
 
 <script>
+  import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue';
 	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
 	export default {
 		components: {
+      SingleCardLayout,
 			LibraryAndNode,
 		},
 	};

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
+          class="page-tint"
-          height="48"
+          @click="cancelEdit"
-          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>
       </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() {
+      changeIncrementMenu(e){
-				this.editing = false;
+        this.$emit('change', e);
-				let value = +this.$refs.editInput.lazyValue;
+        this.editing = false;
-				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();
-				}
-			}
 		},
 	};
 </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">
+  <v-card class="pa-2">
-		<health-bar
+    <health-bar
-			v-for="attribute in attributes"
+      v-for="attribute in attributes"
-			:key="attribute._id"
+      :key="attribute._id"
-			:value="attribute.value - (attribute.damage || 0)"
+      :value="attribute.currentValue"
-			:maxValue="attribute.value"
+      :max-value="attribute.value"
-			:name="attribute.name"
+      :name="attribute.name"
-			:_id="attribute._id"
+      :_id="attribute._id"
-			@change="e => $emit('change', {_id: attribute._id, change: e})"
+      @change="e => $emit('change', {_id: attribute._id, change: e})"
-			@click="e => $emit('click', {_id: attribute._id})"
+      @click="e => $emit('click', {_id: attribute._id})"
-		/>
+    />
-	</v-card>
+  </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({
+        let creature = this.creature;
-					'ancestors.id': this.creatureId,
+        if (!creature) return;
-					type: 'attribute',
+        let filter = {
+          type: 'attribute',
 					attributeType: 'healthBar',
-          removed: {$ne: true},
+        };
-				}, {
+        if (creature.settings.hideUnusedStats){
-					sort: {order: 1},
+          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
-		<v-card-title class="title">
+    :color="model.color"
-			{{model.name}}
+    :data-id="model._id"
-		</v-card-title>
+    hover
-		<v-card-text>
+    :dark="model.color && isDark"
-			<property-description :value="model.description"/>
+    :light="model.color && !isDark"
-		</v-card-text>
+    @click="clickProperty(model._id)"
-	</v-card>
+  >
+    <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/ActionForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div :class="attackForm ? 'attack-form' : 'action-form'">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout column align-center">
       <text-field
+        ref="focusFirst"
         label="Base Value"
         class="base-value-field"
         hint="This is the value of the attribute before effects are applied"
@@ -11,6 +12,7 @@
         @change="change('baseValueCalculation', ...arguments)"
       />
     </div>
+    <calculation-error-list :errors="model.baseValueErrors" />
     <div class="layout row wrap">
       <text-field
         label="Name"
@@ -100,10 +102,12 @@
 <script>
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
 		components: {
 			FormSection,
+      CalculationErrorList,
 		},
     mixins: [propertyFormMixin],
 		data(){

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

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="buff-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -12,6 +12,7 @@
     </div>
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"

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

@@ -1,11 +1,23 @@
 <template lang="html">
   <div class="attribute-form">
-    <text-field
+    <div class="layout row justify-space-between wrap">
-      label="Name"
+      <text-field
-      :value="model.name"
+        ref="focusFirst"
-      :error-messages="errors.name"
+        label="Name"
-      @change="change('name', ...arguments)"
+        :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 +27,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 +55,16 @@
       name="Advanced"
       standalone
     >
-      <smart-switch
+      <div class="layout row justify-center">
-        label="Carried"
+        <div>
-        :value="model.carried"
+          <smart-switch
-        :error-messages="errors.carried"
+            label="Contents are weightless"
-        @change="change('carried', ...arguments)"
+            :value="model.contentsWeightless"
-      />
+            :error-messages="errors.contentsWeightless"
-      <smart-switch
+            @change="change('contentsWeightless', ...arguments)"
-        label="Contents are weightless"
+          />
-        :value="model.contentsWeightless"
+        </div>
-        :error-messages="errors.contentsWeightless"
+      </div>
-        @change="change('contentsWeightless', ...arguments)"
-      />
     </form-section>
   </div>
 </template>

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

@@ -2,6 +2,7 @@
   <div>
     <div class="layout row">
       <text-field
+        ref="focusFirst"
         label="Damage"
         style="flex-basis: 300px;"
         :value="model.amount"

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

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="attribute-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -1,53 +1,41 @@
 <template lang="html">
   <div class="effect-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <div class="layout row wrap justify-start">
+    <smart-select
-      <smart-select
+      label="Operation"
-        label="Operation"
+      append-icon="arrow_drop_down"
-        append-icon="arrow_drop_down"
+      class="mx-2"
-        class="mx-2"
+      :error-messages="errors.operation"
-        :error-messages="errors.operation"
+      :menu-props="{transition: 'slide-y-transition', lazy: true}"
-        :menu-props="{transition: 'slide-y-transition', lazy: true}"
+      :items="operations"
-        :items="operations"
+      :value="model.operation"
-        :value="model.operation"
+      @change="change('operation', ...arguments)"
-        @change="change('operation', ...arguments)"
+    >
+      <v-icon
+        slot="prepend"
+        class="icon"
+        :class="iconClass"
+      >
+        {{ displayedIcon }}
+      </v-icon>
+      <template
+        slot="item"
+        slot-scope="item"
       >
         <v-icon
-          slot="prepend"
+          class="icon mr-2"
-          class="icon"
-          :class="iconClass"
         >
-          {{ displayedIcon }}
+          {{ getEffectIcon(item.item.value, 1) }}
         </v-icon>
-        <template
+        {{ item.item.text }}
-          slot="item"
+      </template>
-          slot-scope="item"
+    </smart-select>
-        >
-          <v-icon
-            class="icon mr-2"
-          >
-            {{ getEffectIcon(item.item.value, 1) }}
-          </v-icon>
-          {{ item.item.text }}
-        </template>
-      </smart-select>
-
-      <text-field
-        label="Value"
-        class="mr-2"
-        :persistent-hint="needsValue"
-        :value="needsValue ? (model.calculation) : ' '"
-        :disabled="!needsValue"
-        :error-messages="errors.calculation"
-        :hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
-        @change="change('calculation', ...arguments)"
-      />
-    </div>
     <smart-combobox
       label="Stats"
       class="mr-2"
@@ -59,6 +47,17 @@
       :error-messages="errors.stats"
       @change="change('stats', ...arguments)"
     />
+    <text-field
+      label="Value"
+      class="mr-2"
+      :persistent-hint="needsValue"
+      :value="needsValue ? (model.calculation) : ' '"
+      :disabled="!needsValue"
+      :error-messages="errors.calculation"
+      :hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
+      @change="change('calculation', ...arguments)"
+    />
+    <calculation-error-list :errors="model.errors" />
   </div>
 </template>
 
@@ -66,9 +65,13 @@
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	const ICON_SPIN_DURATION = 300;
 	export default {
+    components: {
+      CalculationErrorList,
+    },
     mixins: [propertyFormMixin, attributeListMixin],
 		data(){ return {
 			displayedIcon: 'add',
@@ -78,7 +81,8 @@
 				{value: 'add', text: 'Add'},
 				{value: 'mul', text: 'Multiply'},
 				{value: 'min', text: 'Minimum'},
-				{value: 'max', text: 'Maximum'},
+        {value: 'max', text: 'Maximum'},
+				{value: 'set', text: 'Set'},
 				{value: 'advantage', text: 'Advantage'},
 				{value: 'disadvantage', text: 'Disadvantage'},
 				{value: 'passiveAdd', text: 'Passive Bonus'},
@@ -93,7 +97,8 @@
 					case 'add': return true;
 					case 'mul': return true;
 					case 'min': return true;
-					case 'max': return true;
+          case 'max': return true;
+					case 'set': return true;
 					case 'advantage': return false;
 					case 'disadvantage': return false;
 					case 'passiveAdd': return true;

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

@@ -1,57 +0,0 @@
-<template lang="html">
-  <div class="class-form">
-    <div class="layout row wrap">
-      <text-field
-        label="Title"
-        style="flex-basis: 300px;"
-        :value="model.name"
-        :error-messages="errors.name"
-        @change="change('name', ...arguments)"
-      />
-      <text-field
-        label="In-World date"
-        :value="model.worldDate"
-        style="flex-basis: 300px;"
-        hint="The date in-game that the experience occured"
-        :error-messages="errors.worldDate"
-        @change="change('worldDate', ...arguments)"
-      />
-      <date-picker
-        label="Real date"
-        :value="model.date"
-        style="flex-basis: 300px;"
-        hint="Real life date"
-        :error-messages="errors.date"
-        @change="change('date', ...arguments)"
-      />
-    </div>
-    <text-area
-      label="Description"
-      :value="model.description"
-      :error-messages="errors.description"
-      @change="change('description', ...arguments)"
-    />
-    <div class="layout column align-end">
-      <text-field
-        label="XP gained"
-        type="number"
-        class="base-value-field text-xs-center large-format no-flex"
-        hint="The number of experience points gained from this entry"
-        :value="model.value"
-        :error-messages="errors.value"
-        @change="change('value', ...arguments)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
-
-export default {
-  mixins: [propertyFormMixin],
-};
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -2,6 +2,7 @@
   <div class="folder-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         style="flex-basis: 300px;"
         :value="model.name"

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

@@ -1,16 +1,26 @@
 <template lang="html">
   <div class="item-form">
-    <div class="layout column align-center">
+    <div class="layout row justify-space-around">
-      <smart-switch
+      <div>
-        label="Equipped"
+        <icon-picker
-        class="no-flex"
+          label="Icon"
-        :value="model.equipped"
+          :value="model.icon"
-        :error-messages="errors.equipped"
+          :error-messages="errors.icon"
-        @change="change('equipped', ...arguments)"
+          @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
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
@@ -32,17 +42,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 +64,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 +80,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/NoteForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -1,6 +1,7 @@
 <template lang="html">
   <div>
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="roll-form">
     <text-field
+      ref="focusFirst"
       label="Roll"
       :value="model.roll"
       :error-messages="errors.roll"

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

@@ -1,5 +1,12 @@
 <template lang="html">
   <div class="saving-throw-form">
+    <text-field
+      ref="focusFirst"
+      label="Name"
+      :value="model.name"
+      :error-messages="errors.name"
+      @change="change('name', ...arguments)"
+    />
     <text-field
       label="DC"
       :value="model.dc"
@@ -9,10 +16,10 @@
     <smart-combobox
       label="Save"
       hint="Which save the saving throw targets"
-      :value="model.ability"
+      :value="model.stat"
       :items="saveList"
-      :error-messages="errors.ability"
+      :error-messages="errors.stat"
-      @change="change('ability', ...arguments)"
+      @change="change('stat', ...arguments)"
     />
   </div>
 </template>

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

@@ -2,6 +2,7 @@
   <div class="skill-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
@@ -46,12 +47,11 @@
       <div class="layout row justify-center">
         <text-field
           label="Base Value"
-          type="number"
+          class="base-value-field no-flex"
-          class="base-value-field text-xs-center large-format no-flex"
+          :value="model.baseValueCalculation"
-          :value="model.baseValue"
           hint="This is the value of the skill before effects are applied"
-          :error-messages="errors.baseValue"
+          :error-messages="errors.baseValueCalculation"
-          @change="change('baseValue', ...arguments)"
+          @change="change('baseValueCalculation', ...arguments)"
         />
         <proficiency-select
           style="flex-basis: 300px;"
@@ -61,6 +61,7 @@
           @change="change('baseProficiency', ...arguments)"
         />
       </div>
+      <calculation-error-list :errors="model.baseValueErrors" />
     </form-section>
   </div>
 </template>
@@ -70,11 +71,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/forms/SpellForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="attribute-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

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

@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"