Added short and long rest buttons, closes #87

app/imports/api/creature/CreatureProperties.js

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { Mongo } from 'meteor/mongo';
 import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
+import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import ChildSchema, { RefSchema } from '/imports/api/parenting/ChildSchema.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
@@ -41,6 +42,7 @@ for (let key in propertySchemasIndex){
 	let schema = new SimpleSchema({});
 	schema.extend(propertySchemasIndex[key]);
 	schema.extend(CreaturePropertySchema);
+  schema.extend(ColorSchema);
 	schema.extend(ChildSchema);
 	schema.extend(SoftRemovableSchema);
 	CreatureProperties.attachSchema(schema, {
@@ -72,6 +74,7 @@ const insertProperty = new ValidatedMethod({
   name: 'CreatureProperties.methods.insert',
 	validate: null,
   run({creatureProperty}) {
+    delete creatureProperty._id;
     assertPropertyEditPermission(creatureProperty, this.userId);
 		let _id = CreatureProperties.insert(creatureProperty);
 		let property = CreatureProperties.findOne(_id);
@@ -79,6 +82,23 @@ const insertProperty = new ValidatedMethod({
   },
 });
 
+const duplicateProperty = new ValidatedMethod({
+  name: 'CreatureProperties.methods.duplicate',
+  validate: new SimpleSchema({
+    _id: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    }
+  }).validator(),
+  run({_id}) {
+    let creatureProperty = CreatureProperties.findOne(_id);
+    assertPropertyEditPermission(creatureProperty, this.userId);
+    delete creatureProperty._id;
+		CreatureProperties.insert(creatureProperty);
+    recomputeCreatures(creatureProperty);
+  },
+});
+
 const insertPropertyFromLibraryNode = new ValidatedMethod({
 	name: 'CreatureProperties.methods.insertPropertyFromLibraryNode',
 	validate: new SimpleSchema({
@@ -288,6 +308,7 @@ export default CreatureProperties;
 export {
 	CreaturePropertySchema,
 	insertProperty,
+  duplicateProperty,
 	insertPropertyFromLibraryNode,
 	updateProperty,
 	damageProperty,

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({

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

@@ -63,46 +63,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;

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);
-      this.base = +this.statBaseValue;
+      let {value, errors} = evaluateCalculation(stat.baseValueCalculation, memo);
+      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.max) result = aggregator.max;
-  if (!stat.decimal) result = Math.floor(result);
-  stat.value = result;
+  if (result < aggregator.min) {
+    result = aggregator.min;
+  }
+  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){
@@ -51,7 +68,7 @@ function combineSkill(stat, aggregator, memo){
 
   if (typeof profBonus !== 'number' && memo.statsByVariableName['level']){
     let level = memo.statsByVariableName['level'].value;
-    profBonus = Math.floor(level / 4 + 1.75);
+    profBonus = Math.ceil(level / 4) + 1;
   }
   // Multiply the proficiency bonus by the actual proficiency
   profBonus *= stat.proficiency;
@@ -59,8 +76,12 @@ function combineSkill(stat, aggregator, memo){
   let result = (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.base > result) result = aggregator.base;
+  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){
@@ -80,6 +101,10 @@ function combineSkill(stat, aggregator, memo){
   stat.fail = aggregator.fail;
   // Rollbonus
   stat.rollBonuses = aggregator.rollBonus;
+  // Hide
+  stat.hide = aggregator.hasNoEffects &&
+    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
-  let substitutedCalc = calc.transform(bareSymbolSubtitutor(memo.statsByVariableName));
+  // Replace all symbols with their subtitution
+  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/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},
-      {equipped: false},
-      {applied: false},
+      {disabled: true}, // Everything can be disabled
+      {equipped: false}, // Items can be equipped
+      {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/restCreature.js

@@ -0,0 +1,103 @@
+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';
+
+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);
+        recoverableHd -= amountToRecover;
+        resultingDamage = hd.damage - amountToRecover;
+        CreatureProperties.update(hd._id, {
+          $set: {damage: resultingDamage}
+        }, {
+          selector: {type: 'attribute'},
+        });
+      });
+    }
+  },
+});
+
+export default restCreature;

app/imports/api/library/LibraryNodes.js

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { Mongo } from 'meteor/mongo';
 import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
+import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import ChildSchema from '/imports/api/parenting/ChildSchema.js';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import Libraries from '/imports/api/library/Libraries.js';
@@ -28,6 +29,7 @@ let LibraryNodeSchema = new SimpleSchema({
 for (let key in propertySchemasIndex){
 	let schema = new SimpleSchema({});
 	schema.extend(LibraryNodeSchema);
+  schema.extend(ColorSchema);
 	schema.extend(propertySchemasIndex[key]);
 	schema.extend(ChildSchema);
 	schema.extend(SoftRemovableSchema);
@@ -52,11 +54,28 @@ const insertNode = new ValidatedMethod({
   name: 'LibraryNodes.methods.insert',
 	validate: null,
   run(libraryNode) {
+    delete libraryNode._id;
     assertNodeEditPermission(libraryNode, this.userId);
 		return LibraryNodes.insert(libraryNode);
   },
 });
 
+const duplicateNode = new ValidatedMethod({
+  name: 'LibraryNodes.methods.duplicate',
+	validate: new SimpleSchema({
+    _id: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    }
+  }).validator(),
+  run({_id}) {
+    let libraryNode = LibraryNodes.findOne(_id);
+    assertNodeEditPermission(libraryNode, this.userId);
+    delete libraryNode._id;
+		return LibraryNodes.insert(libraryNode);
+  },
+})
+
 const updateLibraryNode = new ValidatedMethod({
   name: 'LibraryNodes.methods.update',
   validate({_id, path}){
@@ -132,6 +151,7 @@ export default LibraryNodes;
 export {
 	LibraryNodeSchema,
 	insertNode,
+  duplicateNode,
 	updateLibraryNode,
 	pullFromLibraryNode,
 	pushToLibraryNode,

app/imports/api/parenting/ChildSchema.js

@@ -22,6 +22,7 @@ let ChildSchema = new SimpleSchema({
   ancestors: {
     type: Array,
     defaultValue: [],
+    max: 100,
   },
   'ancestors.$': {
     type: RefSchema,

app/imports/api/parenting/order.js

@@ -133,7 +133,7 @@ export function reorderDocs({collection, ancestorId}){
       });
     }
   });
-  if (Meteor.isServer){
+  if (Meteor.isServer && bulkWrite.length){
     collection.rawCollection().bulkWrite(
       bulkWrite,
       {ordered : false},

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/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/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,5 @@
 import SimpleSchema from 'simpl-schema';
+import VARIABLE_NAME_REGEX from '/imports/constants/VARIABLE_NAME_REGEX.js';
 
 /*
  * Skills are anything that results in a modifier to be added to a D20
@@ -13,7 +14,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: {
@@ -101,6 +103,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/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/users/Users.js

@@ -80,6 +80,7 @@ const userSchema = new SimpleSchema({
   profile: {
     type: Object,
     blackbox: true,
+    optional: true,
   },
 });
 

app/imports/constants/DAMAGE_TYPES.js

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

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 = Libraries.find({
-      _id: libraryId,
-      $or: [
-        {owner: this.userId},
-        {writers: this.userId},
-        {readers: this.userId},
-        {public: true},
-      ],
-    });
+    let libraryCursor
+    if (this.userId) {
+      libraryCursor = Libraries.find({
+        _id: libraryId,
+        $or: [
+          {owner: this.userId},
+          {writers: this.userId},
+          {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/ColorPicker.vue

@@ -1,193 +1,230 @@
 <template lang="html">
-	<v-menu
-		:close-on-content-click="false"
+  <v-menu
+    v-model="opened"
+    :close-on-content-click="false"
     transition="slide-y-transition"
-		lazy
-		v-model="opened"
-	>
-		<v-btn
-		  slot="activator"
-			icon
-		>
-		  <v-icon>format_paint</v-icon>
-		</v-btn>
-		<v-card class="overflow-hidden">
-			<v-card-text>
-				<v-item-group v-model="color" mandatory>
-		      <v-layout row wrap>
-	          <v-item
-							v-for="kebabColorOption in colors"
-		          :key="kebabColorOption"
-							:value="kebabToCamelCase(kebabColorOption)"
-						>
-	            <div
-	              slot-scope="{ active, toggle }"
-	              :class="[kebabColorOption, kebabShade]"
-								class="color-swatch d-flex align-center"
-	              @click="toggle"
-	            >
-	              <v-scroll-y-transition>
-	                <v-icon
-	                  v-if="active"
-										:class="{dark: isDark(kebabColorOption, kebabShade)}"
-	                >check</v-icon>
-	              </v-scroll-y-transition>
-	            </div>
-	          </v-item>
-						<div class="spacer" v-for="i in 8"/>
-		      </v-layout>
-			  </v-item-group>
-				<v-item-group class="mt-2" v-model="shade" mandatory>
-		      <v-layout wrap>
-	          <v-item
-							v-for="kebabShadeOption in shades"
-							:key="kebabShadeOption"
-							:value="kebabToCamelCase(kebabShadeOption)"
-						>
-	            <div
-	              slot-scope="{ active, toggle }"
-	              :class="[kebabColor, kebabShadeOption]"
-								class="shade-swatch d-flex align-center"
-	              @click="toggle"
-	            >
-	              <v-scroll-y-transition>
-	                <v-icon
-	                  v-if="active"
-										:class="{dark: isDark(kebabColor, kebabShadeOption)}"
-	                >check</v-icon>
-	              </v-scroll-y-transition>
-	            </div>
-	          </v-item>
-						<div class="spacer" v-for="i in 8"/>
-		      </v-layout>
-			  </v-item-group>
-			</v-card-text>
-			<v-card-actions>
-				<v-spacer/>
-				<v-btn flat @click="opened = false">Done</v-btn>
-			</v-card-actions>
-		</v-card>
+    lazy
+    left
+  >
+    <v-btn
+      slot="activator"
+      icon
+    >
+      <v-icon>format_paint</v-icon>
+    </v-btn>
+    <v-card class="overflow-hidden">
+      <v-card-text>
+        <v-layout
+          row
+          wrap
+        >
+          <div
+            v-for="colorOption in colors"
+            :key="colorOption"
+            :class="[colorOption, shade]"
+            class="color-swatch d-flex align-center"
+            @click="color = colorOption"
+          >
+            <v-scroll-y-transition>
+              <v-icon
+                v-if="kebabColor === colorOption"
+                :class="{dark: isDark(colorOption, shade)}"
+              >
+                check
+              </v-icon>
+            </v-scroll-y-transition>
+          </div>
+          <div
+            v-for="i in 8"
+            :key="i"
+            class="spacer"
+          />
+        </v-layout>
+        <v-fade-transition>
+          <v-layout
+            v-show="color"
+            wrap
+            class="mt-2"
+          >
+            <div
+              v-for="shadeOption in shades"
+              :key="shadeOption"
+              :class="[kebabColor, shadeOption]"
+              class="shade-swatch d-flex align-center"
+              @click="shade = shadeOption"
+            >
+              <v-scroll-y-transition>
+                <v-icon
+                  v-if="kebabShade === shadeOption"
+                  :class="{dark: isDark(color, shade)}"
+                >
+                  check
+                </v-icon>
+              </v-scroll-y-transition>
+            </div>
+            <div
+              v-for="i in 8"
+              :key="i"
+              class="spacer"
+            />
+          </v-layout>
+        </v-fade-transition>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          flat
+          @click="$emit('input')"
+        >
+          Clear
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          flat
+          @click="opened = false"
+        >
+          Done
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </v-menu>
 </template>
 
 <script>
-	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
-	import vuetifyColors from 'vuetify/es5/util/colors';
-	import { kebabToCamelCase, camelToKebabCase } from '/imports/ui/utility/swapCase.js';
+  import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+  import vuetifyColors from 'vuetify/es5/util/colors';
+  import { kebabToCamelCase, camelToKebabCase } from '/imports/ui/utility/swapCase.js';
 
-	function colorToHex(color, shade = 'base'){
-		color = kebabToCamelCase(color);
-		shade = kebabToCamelCase(shade);
-		return vuetifyColors[color][shade];
-	};
+  function colorToHex(color, shade = 'base'){
+    if (!color) return;
+    color = kebabToCamelCase(color);
+    shade = kebabToCamelCase(shade);
+    return vuetifyColors[color] && vuetifyColors[color][shade];
+  }
 
-	// Create an index of hex colors and what color/shade combination makes them
-	let colorIndex = {};
-	for (let color in vuetifyColors){
-		for (let shade in vuetifyColors[color]){
-			colorIndex[vuetifyColors[color][shade]] = {color, shade};
-		}
-	}
-	function hexToColor(hex){
-		return colorIndex[hex.toLowerCase()];
-	};
+  // Create an index of hex colors and what color/shade combination makes them
+  let colorIndex = {};
+  for (let color in vuetifyColors){
+    color = kebabToCamelCase(color);
+    for (let shade in vuetifyColors[color]){
+      shade = kebabToCamelCase(shade);
+      colorIndex[vuetifyColors[color][shade]] = {color, shade};
+    }
+  }
+  function hexToColor(hex){
+    if (!hex) return undefined;
+    return colorIndex[hex.toLowerCase()];
+  }
 
-	export default {
-		props: {
-			value: String, //hex string
-		},
-		data(){ return {
-			colors: [
-				'red',
-				'pink',
-				'purple',
-				'deep-purple',
-				'indigo',
-				'blue',
-				'light-blue',
-				'cyan',
-				'teal',
-				'green',
-				'light-green',
-				'lime',
-				'yellow',
-				'amber',
-				'orange',
-				'deep-orange',
-				'brown',
-				'grey',
-			],
-			shades: [
-				'lighten-4',
-				'lighten-3',
-				'lighten-2',
-				'lighten-1',
-				'base',
-				'darken-1',
-				'darken-2',
-				'darken-3',
-				'darken-4',
-			],
-			opened: false,
-		}},
-		methods: {
-			isDark(kebabColor, kebabShade){
-				color = colorToHex(kebabColor, kebabShade);
-				return isDarkColor(color);
-			},
-			kebabToCamelCase,
-		},
-		computed: {
-			combination (){
-				return hexToColor(this.value) || {};
-			},
-			color: {
-				get(){
-					return this.combination.color;
-				},
-				set(newColor){
-					this.$emit('input', colorToHex(newColor, this.shade));
-				},
-			},
-			shade: {
-				get(){
-					return this.combination.shade;
-				},
-				set(newShade){
-					this.$emit('input', colorToHex(this.color, newShade));
-				},
-			},
-			kebabColor(){
-				return camelToKebabCase(this.color);
-			},
-			kebabShade(){
-				return camelToKebabCase(this.shade);
-			},
-		},
-	};
+  export default {
+    props: {
+     //hex string
+      value: {
+        type: String,
+        default: undefined,
+      },
+    },
+    data(){ return {
+      colors: [
+        'red',
+        'pink',
+        'purple',
+        'deep-purple',
+        'indigo',
+        'blue',
+        'light-blue',
+        'cyan',
+        'teal',
+        'green',
+        'light-green',
+        'lime',
+        'yellow',
+        'amber',
+        'orange',
+        'deep-orange',
+        'brown',
+        'grey',
+      ],
+      shades: [
+        'lighten-4',
+        'lighten-3',
+        'lighten-2',
+        'lighten-1',
+        'base',
+        'darken-1',
+        'darken-2',
+        'darken-3',
+        'darken-4',
+      ],
+      opened: false,
+    }},
+    computed: {
+      combination (){
+        if (!this.value) return;
+        return hexToColor(this.value) || {};
+      },
+      color: {
+        get(){
+          return this.combination && this.combination.color;
+        },
+        set(newColor){
+          this.$emit('input', colorToHex(newColor, this.shade));
+        },
+      },
+      shade: {
+        get(){
+          return this.combination && this.combination.shade;
+        },
+        set(newShade){
+          this.$emit('input', colorToHex(this.color, newShade));
+        },
+      },
+      kebabColor(){
+        return camelToKebabCase(this.color);
+      },
+      kebabShade(){
+        return camelToKebabCase(this.shade);
+      },
+    },
+    methods: {
+      isDark(kebabColor, kebabShade){
+        let color = colorToHex(kebabColor, kebabShade);
+        return isDarkColor(color);
+      },
+      kebabToCamelCase,
+    },
+  };
 </script>
 
 <style lang="css" scoped>
-	.color-swatch, .shade-swatch {
-		height: 30px;
-		width: 30px;
-		flex-grow: 1;
-	}
-	.v-icon {
-		height: 30px;
-	}
-	.v-icon {
-		color: black;
-	}
-	.dark.v-icon {
-		color: white;
-	}
-	.layout {
-		max-width: 270px;
-	}
-	.spacer {
-		width: 30px;
-		height: 0;
-		flex-grow: 1;
-	}
+  .color-swatch, .shade-swatch {
+    height: 30px;
+    width: 30px;
+    flex-grow: 1;
+    cursor: pointer;
+    transition: all 0.2s linear;
+  }
+  .color-swatch:hover{
+    z-index: 1;
+    transform: scale(1.1);
+    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),
+      0px 1px 1px 0px rgba(0,0,0,0.14),
+      0px 1px 3px 0px rgba(0,0,0,0.12);
+  }
+  .v-icon {
+    height: 30px;
+  }
+  .v-icon {
+    color: black;
+  }
+  .dark.v-icon {
+    color: white;
+  }
+  .layout {
+    max-width: 270px;
+  }
+  .spacer {
+    width: 30px;
+    height: 0;
+    flex-grow: 1;
+  }
 </style>

app/imports/ui/components/TreeDetailLayout.vue

@@ -0,0 +1,43 @@
+<template lang="html">
+  <div
+    class="layout row"
+    style="height: 100%;"
+  >
+    <div
+      class="layout column justify-start"
+      :style="computedTreeStyle"
+    >
+      <slot name="tree" />
+    </div>
+    <template v-if="$vuetify.breakpoint.mdAndUp">
+      <v-divider vertical />
+      <div
+        class="flex layout column"
+        style="background-color: inherit; overflow: hidden;"
+        data-id="selected-node-card"
+      >
+        <slot name="detail" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  computed:{
+    computedTreeStyle(){
+      if (this.$vuetify.breakpoint.smAndDown) return;
+      let style = 'flex-shrink: 0; flex-grow: 0; ';
+      if (this.$vuetify.breakpoint.xlOnly){
+        style += 'width: 400px;'
+      } else {
+        style += 'width: 320px;'
+      }
+      return style;
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

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

@@ -21,7 +21,7 @@
 		props: {
 			autoGrow: {
 				type: Boolean,
-				default: true,
+				default: false,
 			},
 		},
 	};

app/imports/ui/components/propertyToolbar.vue

@@ -0,0 +1,156 @@
+<template lang="html">
+  <v-toolbar
+    :color="color || 'secondary'"
+    :dark="isDark"
+    :flat="flat"
+  >
+    <property-icon
+      :type="model && model.type"
+      class="mr-2"
+    />
+    <v-toolbar-title v-if="model">
+      {{ model.name || getPropertyName(model.type) }}
+    </v-toolbar-title>
+    <v-spacer />
+    <v-slide-y-transition
+      hide-on-leave
+    >
+      <v-layout
+        v-if="editing && model"
+        key="edit-buttons"
+      >
+        <v-spacer />
+        <color-picker
+          v-if="$listeners && $listeners['color-changed']"
+          :value="model.color"
+          @input="colorChanged"
+        />
+        <v-menu
+          v-if="$listeners && (
+            $listeners.move ||
+            $listeners.duplicate ||
+            $listeners.remove
+          )"
+          bottom
+          left
+          transition="slide-y-transition"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              icon
+              data-id="property-toolbar-menu-button"
+              v-on="on"
+            >
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-tile
+              v-if="$listeners && $listeners.duplicate"
+              @click="$emit('duplicate')"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  Duplicate
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon>file_copy</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-list-tile
+              v-if="$listeners && $listeners.move"
+              @click="$emit('move')"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  Move
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon>send</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-list-tile
+              v-if="$listeners && $listeners.remove"
+              @click="$emit('remove')"
+            >
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  Delete
+                </v-list-tile-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon>delete</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+          </v-list>
+        </v-menu>
+      </v-layout>
+      <v-layout
+        v-else
+        key="blank"
+      />
+    </v-slide-y-transition>
+    <v-btn
+      icon
+      @click="$emit('toggle-editing')"
+    >
+      <v-slide-y-transition
+        hide-on-leave
+      >
+        <v-icon
+          v-if="editing"
+          key="doneIcon"
+        >
+          done
+        </v-icon>
+        <v-icon
+          v-else
+          key="createIcon"
+        >
+          create
+        </v-icon>
+      </v-slide-y-transition>
+    </v-btn>
+  </v-toolbar>
+</template>
+
+<script>
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
+import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
+
+export default {
+  components: {
+    PropertyIcon,
+    ColorPicker,
+  },
+  props: {
+    model: {
+      type: Object,
+      default: undefined,
+    },
+    flat: Boolean,
+    editing: Boolean,
+  },
+  computed: {
+    isDark(){
+      return isDarkColor(this.color);
+    },
+    color(){
+      return this.model && this.model.color || this.$vuetify.theme.secondary;
+    }
+  },
+  methods: {
+    colorChanged(value){
+      this.$emit('color-changed', value);
+    },
+    getPropertyName,
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/tree/TreeNode.vue

@@ -46,7 +46,7 @@
         v-show="showExpanded"
         class="pl-3"
       >
-        <v-fade-transition leave-absolute>
+        <v-fade-transition hide-on-leave>
           <tree-node-list
             v-if="showExpanded"
             :node="node"

app/imports/ui/creature/CreatureForm.vue

@@ -42,9 +42,28 @@
       :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
     />
-    <!--
-		<form-sections>
-			<form-section name="settings">
+    <form-sections>
+      <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/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/CharacterSheet.vue

@@ -35,7 +35,7 @@
         class="fill-height"
       >
         <v-tabs-items
-          v-model="tabs"
+          v-model="activeTab"
         >
           <v-tab-item>
             <stats-tab :creature-id="creatureId" />
@@ -103,6 +103,16 @@
       'creature.name'(value){
         this.$store.commit('setPageTitle', value || 'Character Sheet');
       },
+    },
+    computed: {
+      activeTab: {
+        get(){
+          return this.tabs;
+        },
+        set(newTab){
+          this.$emit('update:tabs', newTab);
+        },
+      },
     },
 		meteor: {
 			$subscribe: {

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

@@ -2,6 +2,7 @@
   <v-tabs
     v-if="creature"
     slot="extension"
+    color="secondary"
     :value="value"
     centered
     grow

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>
@@ -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){
-    return getProperties(creatureId, {
+	const getAttributeOfType = function(creature, type){
+    return getProperties(creature, {
       type: 'attribute',
       attributeType: type,
     });
 	};
 
-  const getSkillOfType = function(creatureId, type){
-    return getProperties(creatureId, {
+  const getSkillOfType = function(creature, type){
+    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/character/characterSheetTabs/TreeTab.vue

@@ -1,106 +1,60 @@
 <template lang="html">
   <div
-    class="tree-tab pa-4"
+    class="tree-tab pa-4 layout column align-center"
     style="height: calc(100vh - 96px); display: flex;"
   >
     <v-card
-      class="layout row"
-      style="height: 100%;"
+      style="height: 100%; width: 100%; max-width: 1800px;"
       data-id="creature-tree-card"
     >
-      <div
-        class="layout column justify-start"
-        :style="
-          $vuetify.breakpoint.mdAndUp &&
-            'width: 320px; flex-shrink: 0; flex-grow: 0;'
-        "
-      >
-        <v-toolbar
-          flat
-          dense
-        >
-          <v-spacer />
-          <v-switch
-            v-if="context.editPermission !== false"
-            v-model="organize"
-            label="Organize"
-            class="mx-3"
-            :disabled="organizeDisabled"
-            style="flex-grow: 0; height: 32px;"
-          />
-          <v-combobox
-            ref="searchBox"
-            slot="extension"
-            v-model="filterString"
-            :items="filterOptions"
-            prepend-inner-icon="search"
-            class="mx-4"
-            hide-no-data
-            hide-selected
-            multiple
-            clearable
-            small-chips
-            deletable-chips
-          />
-        </v-toolbar>
-        <creature-properties-tree
-          class="pt-2 flex"
-          style="overflow-y: auto;"
-          :root="{collection: 'creatures', id: creatureId}"
-          :organize="organize"
-          :selected-node-id="selected"
-          :filter="filter"
-          @selected="clickNode"
-        />
-      </div>
-      <template v-if="$vuetify.breakpoint.mdAndUp">
-        <v-divider vertical />
-        <div
-          class="flex layout column"
-          style="background-color: inherit; overflow: hidden;"
-          data-id="selected-node-card"
-        >
+      <tree-detail-layout>
+        <template slot="tree">
           <v-toolbar
-            dense
             flat
-            extended
+            dense
           >
-            <v-fade-transition mode="out-in">
-              <div
-                :key="selectedProperty && selectedProperty._id"
-                class="title"
-              >
-                <property-icon
-                  :key="selectedProperty && selectedProperty._id"
-                  :type="selectedProperty && selectedProperty.type"
-                  class="mr-2"
-                />
-                {{ getPropertyName(selectedProperty && selectedProperty.type) }}
-              </div>
-            </v-fade-transition>
             <v-spacer />
-            <v-btn
-              v-if="selectedProperty"
-              flat
-              icon
-              @click="editCreatureProperty"
-            >
-              <v-icon>create</v-icon>
-            </v-btn>
+            <v-switch
+              v-if="context.editPermission !== false"
+              v-model="organize"
+              label="Organize"
+              class="mx-3"
+              :disabled="organizeDisabled"
+              style="flex-grow: 0; height: 32px;"
+            />
+            <v-combobox
+              ref="searchBox"
+              slot="extension"
+              v-model="filterString"
+              :items="filterOptions"
+              prepend-inner-icon="search"
+              class="mx-4"
+              hide-no-data
+              hide-selected
+              multiple
+              clearable
+              small-chips
+              deletable-chips
+            />
           </v-toolbar>
-          <v-card-text
-            class="flex"
-            style="overflow-y: auto"
-          >
-            <v-fade-transition mode="out-in">
-              <property-viewer
-                :key="selectedProperty && selectedProperty._id"
-                :model="selectedProperty"
-              />
-            </v-fade-transition>
-          </v-card-text>
-        </div>
-      </template>
+          <creature-properties-tree
+            class="pt-2 flex"
+            style="overflow-y: auto;"
+            :root="{collection: 'creatures', id: creatureId}"
+            :organize="organize"
+            :selected-node-id="selected"
+            :filter="filter"
+            @selected="clickNode"
+          />
+        </template>
+        <template slot="detail">
+          <creature-property-dialog
+            embedded
+            :_id="selected"
+            @removed="selected = undefined"
+          />
+        </template>
+      </tree-detail-layout>
     </v-card>
     <v-speed-dial
       v-model="fab"
@@ -136,22 +90,23 @@
 </template>
 
 <script>
+  import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
   import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+  import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
+  import LabeledFab from '/imports/ui/components/LabeledFab.vue';
+
   import CreatureProperties, {
     insertProperty,
     insertPropertyFromLibraryNode
   } from '/imports/api/creature/CreatureProperties.js';
-  import PropertyViewer from '/imports/ui/properties/shared/PropertyViewer.vue';
   import { setDocToLastOrder } from '/imports/api/parenting/order.js';
-  import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
   import { getPropertyName } from '/imports/constants/PROPERTIES.js';
-  import LabeledFab from '/imports/ui/components/LabeledFab.vue';
 
   export default {
     components: {
+      TreeDetailLayout,
       CreaturePropertiesTree,
-      PropertyViewer,
-      PropertyIcon,
+      CreaturePropertyDialog,
       LabeledFab,
     },
     inject: {

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

@@ -1,79 +1,40 @@
 <template lang="html">
   <dialog-base>
-    <template slot="toolbar">
-      <property-icon
-        :type="model.type"
-        class="mr-2"
+    <template #replace-toolbar="{flat}">
+      <property-toolbar
+        :model="model"
+        :editing="editing"
+        :flat="flat"
+        @duplicate="duplicate"
+        @remove="remove"
+        @toggle-editing="editing = !editing"
+        @color-changed="value => change({path: ['color'], value})"
       />
-      <v-toolbar-title>
-        {{ model.name || getPropertyName(model.type) }}
-      </v-toolbar-title>
-      <v-spacer />
-      <v-menu
-        v-if="editing"
-        bottom
-        left
-        transition="slide-y-transition"
-      >
-        <template #activator="{ on }">
-          <v-btn
-            icon
-            v-on="on"
-          >
-            <v-icon>more_vert</v-icon>
-          </v-btn>
-        </template>
-        <v-list>
-          <v-list-tile @click="remove">
-            <v-list-tile-title>
-              Delete <v-icon>delete</v-icon>
-            </v-list-tile-title>
-          </v-list-tile>
-        </v-list>
-      </v-menu>
-      <v-btn
-        icon
-        @click="editing = !editing"
-      >
-        <v-slide-y-transition
-          leave-absolute
-          mode="out-in"
-        >
-          <v-icon
-            v-if="editing"
-            key="doneIcon"
-          >
-            done
-          </v-icon>
-          <v-icon
-            v-else
-            key="createIcon"
-          >
-            create
-          </v-icon>
-        </v-slide-y-transition>
-      </v-btn>
     </template>
     <template v-if="model">
-      <component
-        :is="model.type + 'Form'"
-        v-if="editing"
-        class="creature-property-form"
-        :model="model"
-        @change="change"
-        @push="push"
-        @pull="pull"
-      />
-      <component
-        :is="model.type + 'Viewer'"
-        v-else-if="!editing && $options.components[model.type + 'Viewer']"
-        class="creature-property-viewer"
-        :model="model"
-      />
-      <p v-else>
-        This property can't be viewed yet.
-      </p>
-      <template v-if="!editing">
+      <v-fade-transition
+        mode="out-in"
+      >
+        <component
+          :is="model.type + 'Form'"
+          v-if="editing"
+          class="creature-property-form"
+          :model="model"
+          @change="change"
+          @push="push"
+          @pull="pull"
+        />
+        <component
+          :is="model.type + 'Viewer'"
+          v-else-if="!editing && $options.components[model.type + 'Viewer']"
+          class="creature-property-viewer"
+          :model="model"
+        />
+        <p v-else>
+          This property can't be viewed yet.
+        </p>
+      </v-fade-transition>
+      <template v-if="!editing && !embedded">
         <v-divider />
         <creature-properties-tree
           v-if="!editing"
@@ -83,6 +44,7 @@
       </template>
     </template>
     <div
+      v-if="!embedded"
       slot="actions"
       class="layout row justify-end"
     >
@@ -100,11 +62,13 @@
 import CreatureProperties, {
 	updateProperty,
 	damageProperty,
+  duplicateProperty,
 	pushToProperty,
 	pullFromProperty,
 	softRemoveProperty,
 } from '/imports/api/creature/CreatureProperties.js';
 import Creatures from '/imports/api/creature/Creatures.js';
+import PropertyToolbar from '/imports/ui/components/propertyToolbar.vue';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
@@ -130,10 +94,12 @@ export default {
 		...viewerIndex,
 		PropertyIcon,
 		DialogBase,
+    PropertyToolbar,
 		CreaturePropertiesTree,
 	},
 	props: {
 		_id: String,
+    embedded: Boolean, // This dialog is embedded in a page
 		startInEditTab: Boolean,
 	},
 	data(){ return {
@@ -169,8 +135,26 @@ export default {
   },
 	methods: {
 		getPropertyName,
+    duplicate(){
+      duplicateProperty.call({_id: this._id}, (error) => {
+        if (error) {
+          console.error(error);
+        }
+        if (this.embedded){
+          this.$emit('duplicated');
+        } else {
+          this.$store.dispatch('popDialogStack');
+        }
+      });
+    },
 		change({path, value, ack}){
 			updateProperty.call({_id: this._id, path, value}, (error) =>{
+        if (error) console.warn(error);
+				ack && ack(error && error.reason || error);
+			});
+		},
+    damage({operation, value, ack}){
+			damageProperty.call({_id: this._id, operation, value}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
@@ -191,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/CreaturePropertyFromLibraryDialog.vue

@@ -6,6 +6,7 @@
     <library-and-node
       slot="unwrapped-content"
       style="height: 100%;"
+      selection
       @selected="val => node = val"
     />
     <template slot="actions">

app/imports/ui/dialogStack/DialogBase.vue

@@ -1,64 +1,72 @@
 <template>
-	<v-layout column style="height: 100%;">
-    <v-toolbar :color="color || 'secondary'" dark class="base-dialog-toolbar" :flat="!offsetTop">
-			<v-btn icon flat @click="back">
-				<v-icon>arrow_back</v-icon>
-			</v-btn>
-      <slot name="toolbar"/>
-			<template v-if="$slots.edit">
-				<v-spacer/>
-				<v-btn icon flat @click="$emit('remove')" v-if="isEditing">
-					<v-icon>delete</v-icon>
-				</v-btn>
-				<v-btn icon flat @click="isEditing = !isEditing">
-					<v-icon>{{isEditing ? 'check' : 'create'}}</v-icon>
-				</v-btn>
-			</template>
-    </v-toolbar>
-		<template v-if="breadcrumbs">
-			<v-card-text>
-				example > bread > crumb
-			</v-card-text>
-		</template>
-		<div
-			v-if="$slots['unwrapped-content']"
-			class="unwrapped-content"
-		>
-			<slot name="unwrapped-content"/>
-		</div>
-		<v-card-text
-			v-if="!$slots['unwrapped-content']"
-			id="base-dialog-body"
-			v-scroll:#base-dialog-body="onScroll"
-		>
-			<v-tabs-items :value="isEditing ? 1 : 0" touchless>
-				<v-tab-item>
-					<slot/>
-				</v-tab-item>
-				<v-tab-item lazy>
-					<slot name="edit"/>
-				</v-tab-item>
-			</v-tabs-items>
-		</v-card-text>
-		<v-card-actions>
-			<slot name="actions"/>
-		</v-card-actions>
-	</v-layout>
+  <v-layout
+    column
+    style="height: 100%;"
+  >
+    <slot
+      name="replace-toolbar"
+      :flat="!offsetTop"
+    >
+      <v-toolbar
+        :color="computedColor"
+        :dark="isDark"
+        class="base-dialog-toolbar"
+        :flat="!offsetTop"
+      >
+        <v-btn
+          icon
+          flat
+          @click="back"
+        >
+          <v-icon>arrow_back</v-icon>
+        </v-btn>
+        <slot name="toolbar" />
+      </v-toolbar>
+    </slot>
+    <div
+      v-if="$slots['unwrapped-content']"
+      class="unwrapped-content"
+    >
+      <slot name="unwrapped-content" />
+    </div>
+    <v-card-text
+      v-if="!$slots['unwrapped-content']"
+      id="base-dialog-body"
+      v-scroll:#base-dialog-body="onScroll"
+    >
+      <slot />
+    </v-card-text>
+    <v-card-actions v-if="$slots.actions">
+      <slot name="actions" />
+    </v-card-actions>
+  </v-layout>
 </template>
 
 <script>
-	import store from "/imports/ui/vuexStore.js";
+  import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 	export default {
 		props: {
-			color: String,
-			breadcrumbs: Object,
-			overrideBackButton: Function,
+			color: {
+        type: String,
+        default: undefined,
+      },
+			overrideBackButton: {
+        type: Function,
+        default: undefined,
+      },
 		},
 		data(){ return {
 			offsetTop: 0,
-			isEditing: false,
 		}},
+    computed: {
+      isDark(){
+        return isDarkColor(this.computedColor);
+      },
+      computedColor(){
+        return this.color || this.$vuetify.theme.secondary;
+      }
+    },
 		methods: {
 			onScroll(e){
 				this.offsetTop = e.target.scrollTop
@@ -71,7 +79,7 @@
 				}
 			},
 			close(){
-        store.dispatch("popDialogStack");
+        this.$store.dispatch('popDialogStack');
       },
 		},
 	}

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -7,7 +7,8 @@ import InviteDialog from '/imports/ui/user/InviteDialog.vue';
 import LibraryCreationDialog from '/imports/ui/library/LibraryCreationDialog.vue';
 import LibraryEditDialog from '/imports/ui/library/LibraryEditDialog.vue';
 import LibraryNodeCreationDialog from '/imports/ui/library/LibraryNodeCreationDialog.vue';
-import LibraryNodeEditDialog from '/imports/ui/library/LibraryNodeEditDialog.vue';
+import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
+import MoveLibraryNodeDialog from '/imports/ui/library/MoveLibraryNodeDialog.vue'
 import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
 import TierTooLowDialog from '/imports/ui/user/TierTooLowDialog.vue';
 import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
@@ -23,7 +24,8 @@ export default {
   LibraryCreationDialog,
   LibraryEditDialog,
   LibraryNodeCreationDialog,
-  LibraryNodeEditDialog,
+  LibraryNodeDialog,
+  MoveLibraryNodeDialog,
 	ShareDialog,
   TierTooLowDialog,
   UsernameDialog,

app/imports/ui/layouts/AppLayout.vue

@@ -54,20 +54,10 @@
       </v-fade-transition>
     </v-toolbar>
     <v-content>
-      <v-alert
-        v-if="$route.path !== '/countdown'"
-        icon="priority_high"
-        type="error"
-        dismissible
-        :value="true"
-      >
-        This version of DiceCloud is in beta. Some data stored here may be destroyed by
-        future updates.
-      </v-alert>
       <v-fade-transition
         mode="out-in"
       >
-        <router-view :tabs="tabs" />
+        <router-view :tabs.sync="tabs" />
       </v-fade-transition>
     </v-content>
 

app/imports/ui/layouts/Sidebar.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="sidebar">
+    <v-alert
+      v-if="$route.path !== '/countdown'"
+      icon="priority_high"
+      type="error"
+      dismissible
+      :value="true"
+    >
+      This version of DiceCloud is in beta. Some data stored here may be destroyed by
+      future updates.
+    </v-alert>
     <v-layout
       v-if="!signedIn"
       row
@@ -126,8 +136,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: 'Send Feedback', icon: 'bug_report', to: '/feedback'},
+          //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
+          {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

@@ -1,20 +1,20 @@
 <template lang="html">
-  <div
-    class="layout row"
-    style="background-color: inherit;"
-  >
+  <tree-detail-layout>
     <div
+      slot="tree"
       class="layout column"
       style="
-				background-color: inherit;
-				width: initial;
-				max-width: 100%;
-				min-width: 320px;
-			"
+        background-color: inherit;
+        width: initial;
+        max-width: 100%;
+        min-width: 320px;
+        height: 100%;
+      "
     >
       <v-toolbar
-        dense
         flat
+        :color="selectedNode && selectedNode.color || 'secondary'"
+        :dark="isDarkColor(selectedNode && selectedNode.color || $vuetify.theme.secondary)"
       >
         <v-spacer />
         <v-switch
@@ -28,91 +28,97 @@
         edit-mode
         :organize-mode="organize"
         :selected-node-id="selected"
-        @selected="e => selected = e"
+        style="overflow-y: auto;"
+        @selected="clickNode"
       />
     </div>
-    <v-divider vertical />
     <div
-      style="width: 100%; background-color: inherit;"
+      slot="detail"
       data-id="selected-node-card"
     >
-      <v-toolbar
-        dense
-        flat
-      >
-        <property-icon
-          :type="selectedNode && selectedNode.type"
-          class="mr-2"
-        />
-        <div class="title">
-          {{ getPropertyName(selectedNode && selectedNode.type) }}
-        </div>
-        <v-spacer />
-        <v-btn
-          v-if="selectedNode"
-          flat
-          icon
-          @click="editLibraryNode"
-        >
-          <v-icon>create</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text style="overflow-y: auto;">
-        <property-viewer :model="selectedNode" />
-      </v-card-text>
+      <library-node-dialog
+        :_id="selected"
+        embedded
+        @removed="selected = undefined"
+      />
     </div>
-  </div>
+  </tree-detail-layout>
 </template>
 
 <script>
+import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
 import LibraryBrowser from '/imports/ui/library/LibraryBrowser.vue';
-import PropertyViewer from '/imports/ui/properties/shared/PropertyViewer.vue';
+import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 import Libraries from '/imports/api/library/Libraries.js';
-import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 export default {
-	components: {
-		LibraryBrowser,
-		PropertyViewer,
-		PropertyIcon,
-	},
-	data(){ return {
-		organize: false,
-		selected: undefined,
-	};},
-	watch:{
-		selectedNode(val){
-			this.$emit('selected', val)
-		},
-	},
-	methods: {
-		editLibraryNode(){
-			this.$store.commit('pushDialogStack', {
-				component: 'library-node-edit-dialog',
-				elementId: 'selected-node-card',
-				data: {_id: this.selected},
-			});
-		},
-		getPropertyName,
-	},
-	meteor: {
-		$subscribe: {
-			'libraries': [],
-		},
-		libraries(){
-			return Libraries.find({}, {
-				sort: {name: 1}
-			}).fetch();
-		},
-		selectedNode(){
-			return LibraryNodes.findOne({
-				_id: this.selected,
-				removed: {$ne: true}
-			});
-		}
-	}
+  components: {
+    TreeDetailLayout,
+    LibraryBrowser,
+    LibraryNodeDialog,
+  },
+  props: {
+    selection: Boolean,
+  },
+  data(){ return {
+    organize: false,
+    selected: undefined,
+  };},
+  watch:{
+    selectedNode(val){
+      this.$emit('selected', val)
+    },
+  },
+  methods: {
+    editLibraryNode(){
+      this.$store.commit('pushDialogStack', {
+        component: 'library-node-edit-dialog',
+        elementId: 'selected-node-card',
+        data: {_id: this.selected},
+      });
+    },
+    clickNode(id){
+      if (this.$vuetify.breakpoint.mdAndUp){
+        this.selected = id;
+      } else {
+        this.$store.commit('pushDialogStack', {
+          component: 'library-node-dialog',
+          elementId: `tree-node-${id}`,
+          data: {
+            _id: id,
+            selection: this.selection,
+          },
+          callback: result => {
+            console.log(result)
+            if (result){
+              this.selected = id;
+            }
+          },
+        });
+      }
+    },
+    getPropertyName,
+    isDarkColor,
+  },
+  meteor: {
+    $subscribe: {
+      'libraries': [],
+    },
+    libraries(){
+      return Libraries.find({}, {
+        sort: {name: 1}
+      }).fetch();
+    },
+    selectedNode(){
+      return LibraryNodes.findOne({
+        _id: this.selected,
+        removed: {$ne: true}
+      });
+    },
+  }
 };
 </script>
 

app/imports/ui/library/LibraryBrowser.vue

@@ -76,6 +76,7 @@ import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
 import Libraries, { insertLibrary } from '/imports/api/library/Libraries.js';
 import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
+import { getAncestry } from  '/imports/api/parenting/parenting.js';
 
 export default {
   components: {
@@ -139,13 +140,20 @@ export default {
     },
     insertLibraryNode(libraryId){
       if (this.paidBenefits){
+        let parentRef;
+        if (this.organizeMode && this.selectedNodeId){
+          parentRef = {collection: 'libraryNodes', id: this.selectedNodeId}
+        } else {
+          parentRef = {collection: 'libraries', id: libraryId};
+        }
+        let {ancestors} = getAncestry({parentRef});
         this.$store.commit('pushDialogStack', {
           component: 'library-node-creation-dialog',
           elementId: `insert-node-${libraryId}`,
           callback(libraryNode){
             if (!libraryNode) return;
-            libraryNode.parent = {collection: 'libraries', id: libraryId};
-            libraryNode.ancestors = [ {collection: 'libraries', id: libraryId}];
+            libraryNode.parent = parentRef;
+            libraryNode.ancestors = ancestors;
             setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
             let libraryNodeId = insertNode.call(libraryNode);
             return `tree-node-${libraryNodeId}`;

app/imports/ui/library/LibraryNodeDialog.vue

@@ -0,0 +1,209 @@
+<template lang="html">
+  <dialog-base>
+    <template #replace-toolbar="{flat}">
+      <property-toolbar
+        :model="model"
+        :editing="editing"
+        :flat="flat"
+        @duplicate="duplicate"
+        @move="move"
+        @remove="remove"
+        @toggle-editing="editing = !editing"
+        @color-changed="value => change({path: ['color'], value})"
+      />
+    </template>
+    <template v-if="model">
+      <v-fade-transition
+        mode="out-in"
+      >
+        <component
+          :is="model.type + 'Form'"
+          v-if="editing"
+          class="library-node-form"
+          :model="model"
+          @change="change"
+          @push="push"
+          @pull="pull"
+        />
+        <component
+          :is="model.type + 'Viewer'"
+          v-else-if="!editing && $options.components[model.type + 'Viewer']"
+          class="creature-property-viewer"
+          :model="model"
+        />
+        <p v-else>
+          This property can't be viewed yet.
+        </p>
+      </v-fade-transition>
+    </template>
+    <div
+      v-if="!embedded"
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <template v-if="selection">
+        <v-btn
+          flat
+          @click="$store.dispatch('popDialogStack', false)"
+        >
+          Cancel
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          flat
+          @click="$store.dispatch('popDialogStack', true)"
+        >
+          Select
+        </v-btn>
+      </template>
+      <v-btn
+        v-else
+        flat
+        @click="$store.dispatch('popDialogStack')"
+      >
+        Done
+      </v-btn>
+    </div>
+  </dialog-base>
+</template>
+
+<script>
+  import LibraryNodes, {
+    duplicateNode,
+    updateLibraryNode,
+    pushToLibraryNode,
+    pullFromLibraryNode,
+    softRemoveLibraryNode,
+  } from '/imports/api/library/LibraryNodes.js';
+  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+  import PropertyToolbar from '/imports/ui/components/propertyToolbar.vue';
+  import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+  import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
+  import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
+  import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
+  import { get } from 'lodash';
+  import { assertDocEditPermission } from '/imports/api/sharing/sharingPermissions.js';
+  import { organizeDoc } from '/imports/api/parenting/organizeMethods.js';
+
+  let formIndex = {};
+  for (let key in propertyFormIndex){
+    formIndex[key + 'Form'] = propertyFormIndex[key];
+  }
+
+  let viewerIndex = {};
+  for (let key in propertyViewerIndex){
+    formIndex[key + 'Viewer'] = propertyViewerIndex[key];
+  }
+
+  export default {
+    components: {
+      PropertyToolbar,
+      PropertyIcon,
+      DialogBase,
+      ...formIndex,
+      ...viewerIndex,
+    },
+    props: {
+      _id: String,
+      startInEditTab: Boolean,
+      embedded: Boolean, // This dialog is embedded in a page
+      selection: Boolean, // This dialog is being used to select a node
+    },
+    reactiveProvide: {
+      name: 'context',
+      include: ['editPermission'],
+    },
+    data(){return {
+      editing: !!this.startInEditTab,
+    }},
+    meteor: {
+      model(){
+        return LibraryNodes.findOne(this._id);
+      },
+      editPermission(){
+        try {
+          assertDocEditPermission(this.model, Meteor.userId());
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
+    },
+    methods: {
+      getPropertyName,
+      duplicate(){
+        duplicateNode.call({_id: this._id}, (error) => {
+          console.error(error);
+          if (this.embedded){
+            this.$emit('duplicated');
+          } else {
+            this.$store.dispatch('popDialogStack');
+          }
+        });
+      },
+      move(){
+        let that = this;
+        this.$store.commit('pushDialogStack', {
+          component: 'move-library-node-dialog',
+          elementId: 'property-toolbar-menu-button',
+          callback(parentId){
+            if (!parentId) return;
+            organizeDoc.call({
+              docRef: {
+                collection: 'libraryNodes',
+                id: that._id,
+              },
+              parentRef: {
+                collection: 'libraryNodes',
+                id: parentId
+              },
+              order: -0.5
+            }, (error) => {
+              if (error) console.error(error);
+            });
+          }
+        });
+      },
+      change({path, value, ack}){
+        updateLibraryNode.call({_id: this._id, path, value}, (error) =>{
+          if (ack){
+            ack(error && error.reason || error);
+          } else if (error){
+            console.error(error);
+          }
+        });
+      },
+      push({path, value, ack}){
+        pushToLibraryNode.call({_id: this._id, path, value}, (error) =>{
+          if (ack){
+            ack(error && error.reason || error);
+          } else if (error){
+            console.error(error);
+          }
+        });
+      },
+      pull({path, ack}){
+        let itemId = get(this.model, path)._id;
+        path.pop();
+        pullFromLibraryNode.call({_id: this._id, path, itemId}, (error) =>{
+          if (ack){
+            ack(error && error.reason || error);
+          } else if (error){
+            console.error(error);
+          }
+        });
+      },
+      remove(){
+        softRemoveLibraryNode.call({_id: this._id});
+        if (this.embedded){
+          this.$emit('removed');
+        } else {
+          this.$store.dispatch('popDialogStack');
+        }
+      },
+    }
+  };
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/library/LibraryNodeEditDialog.vue

@@ -1,114 +0,0 @@
-<template lang="html">
-  <dialog-base>
-    <template slot="toolbar">
-      <property-icon
-        :type="model.type"
-        class="mr-2"
-      />
-      <v-toolbar-title>
-        {{ getPropertyName(model.type) }}
-      </v-toolbar-title>
-      <v-spacer />
-      <v-btn
-        icon
-        flat
-        @click="remove"
-      >
-        <v-icon>delete</v-icon>
-      </v-btn>
-    </template>
-    <component
-      :is="model.type"
-      v-if="model"
-      class="library-node-form"
-      :model="model"
-      @change="change"
-      @push="push"
-      @pull="pull"
-    />
-    <div
-      slot="actions"
-      class="layout row justify-end"
-    >
-      <v-btn
-        flat
-        @click="$store.dispatch('popDialogStack')"
-      >
-        Done
-      </v-btn>
-    </div>
-  </dialog-base>
-</template>
-
-<script>
-  import LibraryNodes, {
-    updateLibraryNode,
-    pushToLibraryNode,
-    pullFromLibraryNode,
-    softRemoveLibraryNode,
-  } from '/imports/api/library/LibraryNodes.js';
-  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
-  import { getPropertyName } from '/imports/constants/PROPERTIES.js';
-  import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
-  import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
-  import { get } from 'lodash';
-  import { assertDocEditPermission } from '/imports/api/sharing/sharingPermissions.js';
-
-  export default {
-    components: {
-      ...propertyFormIndex,
-      PropertyIcon,
-      DialogBase,
-    },
-    props: {
-      _id: String,
-    },
-    reactiveProvide: {
-      name: 'context',
-      include: ['debounceTime', 'editPermission'],
-    },
-    data(){return {
-      debounceTime: 0,
-    }},
-    meteor: {
-      model(){
-        return LibraryNodes.findOne(this._id);
-      },
-      editPermission(){
-        try {
-          assertDocEditPermission(this.model, Meteor.userId());
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
-    },
-    methods: {
-      getPropertyName,
-      change({path, value, ack}){
-        updateLibraryNode.call({_id: this._id, path, value}, (error) =>{
-          ack && ack(error && error.reason || error);
-        });
-      },
-      push({path, value, ack}){
-        pushToLibraryNode.call({_id: this._id, path, value}, (error) =>{
-          ack && ack(error && error.reason || error);
-        });
-      },
-      pull({path, ack}){
-        let itemId = get(this.model, path)._id;
-        path.pop();
-        pullFromLibraryNode.call({_id: this._id, path, itemId}, (error) =>{
-          ack && ack(error && error.reason || error);
-        });
-      },
-      remove(){
-        softRemoveLibraryNode.call({_id: this._id});
-        this.$store.dispatch('popDialogStack');
-      },
-    }
-  };
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/library/MoveLibraryNodeDialog.vue

@@ -0,0 +1,37 @@
+<template lang="html">
+  <dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Select new location
+    </v-toolbar-title>
+    <library-and-node
+      slot="unwrapped-content"
+      style="height: 100%;"
+      selection
+      @selected="val => node = val"
+    />
+    <template slot="actions">
+      <v-spacer />
+      <v-btn
+        flat
+        color="primary"
+        @click="$store.dispatch('popDialogStack', node._id)"
+      >
+        Move
+      </v-btn>
+    </template>
+  </dialog-base>
+</template>
+
+<script>
+	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
+	export default {
+		components: {
+			DialogBase,
+			LibraryAndNode,
+		},
+		data(){return {
+			node: undefined,
+		};},
+	};
+</script>

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

@@ -2,7 +2,7 @@
   <character-sheet
     show-menu-button
     :creature-id="$route.params.id"
-    :tabs="tabs"
+    :tabs.sync="activeTab"
   />
 </template>
 
@@ -18,5 +18,15 @@ export default {
       required: true,
     },
   },
+  computed: {
+    activeTab: {
+      get(){
+        return this.tabs;
+      },
+      set(newTab){
+        this.$emit('update:tabs', newTab);
+      },
+    },
+  },
 }
 </script>

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
-              items to other characters, or between sheets open on different
-              tabs.
+              Equiping items changes your characters stats automatically.
             </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,15 +1,15 @@
 <template lang="html">
-  <div>
-    <v-card class="ma-4">
-      <library-and-node />
-    </v-card>
-  </div>
+  <single-card-layout>
+    <library-and-node />
+  </single-card-layout>
 </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/forms/AttributeForm.vue

@@ -11,6 +11,7 @@
         @change="change('baseValueCalculation', ...arguments)"
       />
     </div>
+    <calculation-error-list :errors="model.baseValueErrors" />
     <div class="layout row wrap">
       <text-field
         label="Name"
@@ -100,10 +101,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/EffectForm.vue

@@ -6,48 +6,35 @@
       :error-messages="errors.name"
       @change="change('name', ...arguments)"
     />
-    <div class="layout row wrap justify-start">
-      <smart-select
-        label="Operation"
-        append-icon="arrow_drop_down"
-        class="mx-2"
-        :error-messages="errors.operation"
-        :menu-props="{transition: 'slide-y-transition', lazy: true}"
-        :items="operations"
-        :value="model.operation"
-        @change="change('operation', ...arguments)"
+    <smart-select
+      label="Operation"
+      append-icon="arrow_drop_down"
+      class="mx-2"
+      :error-messages="errors.operation"
+      :menu-props="{transition: 'slide-y-transition', lazy: true}"
+      :items="operations"
+      :value="model.operation"
+      @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"
-          :class="iconClass"
+          class="icon mr-2"
         >
-          {{ displayedIcon }}
+          {{ getEffectIcon(item.item.value, 1) }}
         </v-icon>
-        <template
-          slot="item"
-          slot-scope="item"
-        >
-          <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>
+        {{ item.item.text }}
+      </template>
+    </smart-select>
     <smart-combobox
       label="Stats"
       class="mr-2"
@@ -59,6 +46,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 +64,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 +80,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 +96,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/SavingThrowForm.vue

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

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

@@ -37,13 +37,18 @@
         @change="change('condition', ...arguments)"
       />
     </v-fade-transition>
+    <calculation-error-list :errors="model.errors" />
   </div>
 </template>
 
 <script>
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
+    components: {
+      CalculationErrorList,
+    },
     mixins: [propertyFormMixin],
     computed: {
       radioSelection(){

app/imports/ui/properties/forms/shared/CalculationErrorList.vue

@@ -0,0 +1,56 @@
+<template lang="html">
+  <div
+    v-if="errors && errors.length"
+    class="error-list"
+  >
+    <v-slide-x-transition
+      group
+      hide-on-leave
+    >
+      <v-alert
+        v-for="error in errors"
+        :key="error.message"
+        :value="true"
+        :icon="errorIcon(error.type)"
+        :color="errorColor(error.type)"
+        outline
+      >
+        {{ error.message }}
+      </v-alert>
+    </v-slide-x-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    errors: {
+      type: Array,
+      default: undefined,
+    },
+  },
+  methods: {
+    errorIcon(type){
+      if (type === 'subsitution'){
+        return 'info';
+      } else if (type === 'evaluation'){
+        return 'warning';
+      } else {
+        return 'error'
+      }
+    },
+    errorColor(type){
+      if (type === 'subsitution'){
+        return 'info';
+      } else if (type === 'evaluation'){
+        return 'warning';
+      } else {
+        return 'error'
+      }
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/properties/forms/shared/lists/createListOfProperties.js

@@ -15,7 +15,7 @@ export default function createListOfProperties(filter = {}){
       });
     }
   }
-  let options = {sort: {variableName: 1}}
+  let options = {sort: {order: 1, variableName: 1}}
   CreatureProperties.find(filter, options).forEach(addUniquePropertys);
   LibraryNodes.find(filter, options).forEach(addUniquePropertys);
   return Array.from(variableNames);

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

@@ -1,5 +1,7 @@
 <template lang="html">
-  <v-icon>{{icon}}</v-icon>
+  <v-icon :color="color">
+    {{ icon }}
+  </v-icon>
 </template>
 
 <script>
@@ -8,6 +10,7 @@ import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
 export default {
 	props: {
 		type: String,
+    color: String,
 	},
 	computed: {
 		icon(){

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

@@ -4,6 +4,7 @@
       class="mr-2"
       :type="model.type"
       :class="selected && 'primary--text'"
+      :color="model.color"
     />
     <div
       class="text-no-wrap text-truncate"

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

@@ -1,10 +1,12 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
-    <property-icon
+    <v-icon
       class="mr-2"
-      :type="model.type"
+      :color="model.color"
       :class="selected && 'primary--text'"
-    />
+    >
+      {{ icon }}
+    </v-icon>
     <div
       class="text-no-wrap text-truncate"
     >
@@ -13,7 +15,12 @@
         :value="model.amount"
         :expect-number="false"
       />
-      {{ model.damageType }} damage
+      <span class="mr-1">
+        {{ model.damageType }}
+      </span>
+      <span v-if="model.damageType !== 'healing'">
+        damage
+      </span>
     </div>
   </div>
 </template>
@@ -21,11 +28,21 @@
 <script>
 import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
 import ComputedForCreature from '/imports/ui/components/computation/ComputedForCreature.vue';
+import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
 
 export default {
   components: {
     Computed: ComputedForCreature,
   },
   mixins: [treeNodeViewMixin],
+  computed: {
+		icon(){
+      if (this.model.damageType === 'healing'){
+        return 'group_work'
+      } else {
+        return getPropertyIcon('damage');
+      }
+		},
+	},
 }
 </script>

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

@@ -3,6 +3,7 @@
     <property-icon
       class="mr-2"
       :type="model.type"
+      :color="model.color"
       :class="selected && 'primary--text'"
     />
     <div class="text-no-wrap text-truncate">

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

@@ -3,6 +3,7 @@
     <v-icon
       class="mr-2"
       :class="selected && 'primary--text'"
+      :color="model.color"
     >
       {{ effectIcon }}
     </v-icon>

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

@@ -3,6 +3,7 @@
     <v-icon
       class="mr-2"
       :class="selected && 'primary--text'"
+      :color="model.color"
     >
       {{ model.equipped ? 'check_box' : 'check_box_outline_blank' }}
     </v-icon>

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

@@ -4,7 +4,11 @@
       class="mr-2"
       :value="model.amount"
       :expect-number="false"
-    /> {{ model.damageType }} damage
+    />
+    {{ model.damageType }}
+    <span v-if="model.damageType !== 'healing'">
+      damage
+    </span>
   </div>
 </template>
 

app/imports/ui/router.js

@@ -4,6 +4,7 @@ import { acceptInviteToken } from '/imports/api/users/Invites.js';
 
 // Components
 import Home from '/imports/ui/pages/Home.vue';
+import About from '/imports/ui/pages/About.vue';
 import CharacterList from '/imports/ui/pages/CharacterList.vue';
 import Library from '/imports/ui/pages/Library.vue';
 import SingleLibraryPage from '/imports/ui/pages/SingleLibraryPage.vue'
@@ -182,6 +183,14 @@ RouterFactory.configure(factory => {
       meta: {
         title: 'Feedback',
       },
+    },{
+      path: '/about',
+      components: {
+        default: About,
+      },
+      meta: {
+        title: 'About DiceCloud',
+      },
     },{
       path: '/invite/:inviteToken',
       beforeEnter: claimInvite,

app/imports/ui/theme.js

@@ -1,21 +1,21 @@
 const theme = {
-  primary: "#B71C1C",
-  secondary: "#424242",
-  accent: "#B71C1C",
-  error: "#FF6D00",
-  warning: "#FFB300",
-  info: "#5C6BC0",
-  success: "#43A047",
+  primary: '#B71C1C',
+  secondary: '#424242',
+  accent: '#B71C1C',
+  error: '#FF6D00',
+  warning: '#FFB300',
+  info: '#5C6BC0',
+  success: '#43A047',
 };
 
 const darkTheme = {
-  primary: "#f44336",
-  secondary: "#424242",
-  accent: "#f44336",
-  error: "#FF6D00",
-  warning: "#FFB300",
-  info: "#5C6BC0",
-  success: "#43A047",
+  primary: '#f44336',
+  secondary: '#757575',
+  accent: '#f44336',
+  error: '#FF6D00',
+  warning: '#FFB300',
+  info: '#5C6BC0',
+  success: '#43A047',
 };
 
 export {theme, darkTheme};

app/imports/ui/utility/getEffectIcon.js

@@ -5,10 +5,11 @@ export default function getEffectIcon(op, value){
     case 'mul': return 'clear';
     case 'min': return 'unfold_more';
     case 'max': return 'unfold_less';
+    case 'set': return 'push_pin';
     case 'advantage': return 'arrow_upward';
     case 'disadvantage': return 'arrow_downward';
     case 'passiveAdd': return value < 0 ? 'remove_circle_outline' : 'add_circle_outline';
     case 'fail': return 'block';
     case 'conditional': return '*' ;
   }
-};
+}

app/imports/ui/utility/swapCase.js

@@ -1,7 +1,9 @@
 export function kebabToCamelCase(string){
+  if (!string) return string;
   return string.replace(/-([a-z0-9])/g, g => g[1].toUpperCase());
-};
+}
 
 export function camelToKebabCase(string){
+  if (!string) return string;
   return string.replace(/([a-z][A-Z0-9])/g, g => g[0] + '-' + g[1].toLowerCase());
-};
+}