Use embedded property dialog in tree tab. Colors for creature properties

app/.meteor/packages

@@ -49,3 +49,4 @@ aldeed:schema-index
 akryum:vue-component
 accounts-patreon
 bozhao:link-accounts
+peerlibrary:reactive-publish

app/.meteor/versions

@@ -27,6 +27,8 @@ caching-html-compiler@1.1.3
 callback-hook@1.3.0
 check@1.3.1
 chuangbo:marked@0.3.5_1
+coffeescript@2.4.1
+coffeescript-compiler@2.4.1
 dburles:collection-helpers@1.1.0
 dburles:mongo-collection-instances@0.3.5
 ddp@1.4.0
@@ -91,6 +93,12 @@ observe-sequence@1.0.16
 ongoworks:speakingurl@9.0.0
 ordered-dict@1.1.0
 patreon-oauth@0.1.0
+peerlibrary:assert@0.3.0
+peerlibrary:extend-publish@0.6.0
+peerlibrary:fiber-utils@0.10.0
+peerlibrary:reactive-mongo@0.4.0
+peerlibrary:reactive-publish@0.10.0
+peerlibrary:server-autorun@0.8.0
 percolate:migrations@0.9.8
 percolate:synced-cron@1.3.2
 promise@0.11.2

app/client/main.js

@@ -1,2 +1,3 @@
-import "/imports/ui/vueSetup.js";
-import "/imports/ui/styles/stylesIndex.js";
+import '/imports/ui/vueSetup.js';
+import '/imports/ui/styles/stylesIndex.js';
+import '/imports/ui/styles/stylesIndex.js';

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

@@ -1,13 +1,15 @@
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
 import deathSaveSchema from '/imports/api/properties/subSchemas/DeathSavesSchema.js'
 import ColorSchema from '/imports/api/properties/subSchemas/ColorSchema.js';
 import SharingSchema from '/imports/api/sharing/SharingSchema.js';
-import {assertEditPermission, assertOwnership} from '/imports/api/sharing/sharingPermissions.js';
+import {assertEditPermission} from '/imports/api/sharing/sharingPermissions.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
 import '/imports/api/creature/removeCreature.js';
 
 //set up the collection for creatures
-Creatures = new Mongo.Collection('creatures');
+let Creatures = new Mongo.Collection('creatures');
 
 let CreatureSettingsSchema = new SimpleSchema({
 	//slowed down by carrying too much?
@@ -34,13 +36,6 @@ let CreatureSchema = new SimpleSchema({
 		defaultValue: '',
 		optional: true,
 	},
-	urlName: {
-		type: String,
-		optional: true,
-		autoValue: function() {
-			return getSlug(this.field('name').value, {maintainCase: true}) || '-';
-		},
-	},
 	alignment: {
 		type: String,
 		optional: true
@@ -53,6 +48,10 @@ let CreatureSchema = new SimpleSchema({
 		type: String,
 		optional: true
 	},
+  avatarPicture: {
+    type: String,
+    optional: true,
+  },
 
 	// Mechanics
 	deathSave: {
@@ -76,6 +75,11 @@ let CreatureSchema = new SimpleSchema({
 		defaultValue: 'pc',
 		allowedValues: ['pc', 'npc', 'monster'],
 	},
+  damageMultipliers: {
+    type: Object,
+		blackbox: true,
+		defaultValue: {}
+  },
 	variables: {
 		type: Object,
 		blackbox: true,
@@ -105,6 +109,11 @@ const insertCreature = new ValidatedMethod({
       throw new Meteor.Error('Creatures.methods.insert.denied',
       'You need to be logged in to insert a creature');
     }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Creatures.methods.insert.denied',
+      `The ${tier.name} tier does not allow you to insert a creature`);
+    }
 
 		// Create the creature document
     let charId = Creatures.insert({
@@ -118,10 +127,10 @@ const insertCreature = new ValidatedMethod({
 
 const updateCreature = new ValidatedMethod({
   name: 'Creatures.methods.update',
-  validate({_id, path, value}){
+  validate({_id, path}){
 		if (!_id) return false;
 		// Allowed fields
-		let allowedFields = ['name', 'alignment', 'gender', 'picture', 'settings'];
+		let allowedFields = ['name', 'alignment', 'gender', 'picture', 'avatarPicture', 'settings'];
 		if (!allowedFields.includes(path[0])){
 			throw new Meteor.Error('Creatures.methods.update.denied',
       'This field can\'t be updated using this method');
@@ -137,4 +146,4 @@ const updateCreature = new ValidatedMethod({
 });
 
 export default Creatures;
-export { CreatureSchema, insertCreature, removeCreature, updateCreature };
+export { CreatureSchema, insertCreature, updateCreature };

app/imports/api/creature/DEFAULT_CHARACTER_DOCS.js

@@ -1,146 +0,0 @@
-// Don't just export a constant, because deep nested objects could be changed
-// by code that requires it. Exporting a function that returns the newly created
-// object is a little safer.
-export default () => ({
-  "attributes": [
-    {"name": "Strength",     "variableName": "strength",     "baseValue": 10, "type": "ability"},
-    {"name": "Dexterity",    "variableName": "dexterity",    "baseValue": 10, "type": "ability"},
-    {"name": "Constitution", "variableName": "constitution", "baseValue": 10, "type": "ability"},
-    {"name": "Intelligence", "variableName": "intelligence", "baseValue": 10, "type": "ability"},
-    {"name": "Wisdom",       "variableName": "wisdom",       "baseValue": 10, "type": "ability"},
-    {"name": "Charisma",     "variableName": "charisma",     "baseValue": 10, "type": "ability"},
-
-  	{"name": "Speed",       "variableName": "speed", "baseValue": 30, "type": "stat"},
-  	{"name": "Armor Class", "variableName": "armor", "baseValue": 10, "type": "stat"},
-
-  	{"name":  "d6 Hit Dice", "variableName":  "d6HitDice", "type": "hitDice"},
-		{"name":  "d8 Hit Dice", "variableName":  "d8HitDice", "type": "hitDice"},
-		{"name": "d10 Hit Dice", "variableName": "d10HitDice", "type": "hitDice"},
-		{"name": "d12 Hit Dice", "variableName": "d12HitDice", "type": "hitDice"},
-
-
-		{"name": "Hit Points",           "variableName": "hitPoints",     "type": "healthBar"},
-		{"name": "Temporary Hit Points", "variableName": "tempHitPoints", "type": "healthBar"},
-
-    {"name": "Ki",               "variableName": "ki",              "type": "resource"},
-    {"name": "Rages",            "variableName": "rages",           "type": "resource"},
-		{"name": "Sourcery Points",  "variableName": "sorceryPoints",   "type": "resource"},
-		{"name": "Superiority Dice", "variableName": "superiorityDice", "type": "resource"},
-		{"name": "Expertise Dice",   "variableName": "expertiseDice",   "type": "resource"},
-
-		{"name": "Level 1 Spell Slots", "variableName": "level1SpellSlots", "type": "spellSlot"},
-		{"name": "Level 2 Spell Slots", "variableName": "level2SpellSlots", "type": "spellSlot"},
-		{"name": "Level 3 Spell Slots", "variableName": "level3SpellSlots", "type": "spellSlot"},
-		{"name": "Level 4 Spell Slots", "variableName": "level4SpellSlots", "type": "spellSlot"},
-		{"name": "Level 5 Spell Slots", "variableName": "level5SpellSlots", "type": "spellSlot"},
-		{"name": "Level 6 Spell Slots", "variableName": "level6SpellSlots", "type": "spellSlot"},
-		{"name": "Level 7 Spell Slots", "variableName": "level7SpellSlots", "type": "spellSlot"},
-		{"name": "Level 8 Spell Slots", "variableName": "level8SpellSlots", "type": "spellSlot"},
-		{"name": "Level 9 Spell Slots", "variableName": "level9SpellSlots", "type": "spellSlot"},
-
-    {"name": "Proficiency Bonus", "variableName": "proficiencyBonus", "type": "modifier"},
-
-  	{"name": "Carry Capacity Multiplier", "variableName": "carryMultiplier", "type": "utility", "baseValue": 1},
-  	{"name": "Rage Damage",               "variableName": "rageDamage",      "type": "utility"},
-  ],
-
-  "skills": [
-    {"name": "Acrobatics",      "variableName": "acrobatics",     "ability": "dexterity",    "type":"skill"},
-    {"name": "Animal Handling", "variableName": "animalHandling", "ability": "wisdom",       "type":"skill"},
-    {"name": "Arcana",          "variableName": "arcana",         "ability": "intelligence", "type":"skill"},
-    {"name": "Athletics",       "variableName": "athletics",      "ability": "strength",     "type":"skill"},
-    {"name": "Deception",       "variableName": "deception",      "ability": "charisma",     "type":"skill"},
-    {"name": "History",         "variableName": "history",        "ability": "intelligence", "type":"skill"},
-    {"name": "Insight",         "variableName": "insight",        "ability": "wisdom",       "type":"skill"},
-    {"name": "Intimidation",    "variableName": "intimidation",   "ability": "charisma",     "type":"skill"},
-    {"name": "Investigation",   "variableName": "investigation",  "ability": "intelligence", "type":"skill"},
-    {"name": "Medicine",        "variableName": "medicine",       "ability": "wisdom",       "type":"skill"},
-    {"name": "Nature",          "variableName": "nature",         "ability": "intelligence", "type":"skill"},
-    {"name": "Perception",      "variableName": "perception",     "ability": "wisdom",       "type":"skill"},
-    {"name": "Performance",     "variableName": "performance",    "ability": "charisma",     "type":"skill"},
-    {"name": "Persuasion",      "variableName": "persuasion",     "ability": "charisma",     "type":"skill"},
-    {"name": "Religion",        "variableName": "religion",       "ability": "intelligence", "type":"skill"},
-    {"name": "Sleight of Hand", "variableName": "sleightOfHand",  "ability": "dexterity",    "type":"skill"},
-    {"name": "Stealth",         "variableName": "stealth",        "ability": "dexterity",    "type":"skill"},
-    {"name": "Survival",        "variableName": "survival",       "ability": "wisdom",       "type":"skill"},
-
-    {"name": "Strength Save",     "variableName": "strengthSave",     "ability": "strength",     "type":"save"},
-    {"name": "Dexterity Save",    "variableName": "dexteritySave",    "ability": "dexterity",    "type":"save"},
-    {"name": "Constitution Save", "variableName": "constitutionSave", "ability": "constitution", "type":"save"},
-    {"name": "Intelligence Save", "variableName": "intelligenceSave", "ability": "intelligence", "type":"save"},
-    {"name": "Wisdom Save",       "variableName": "wisdomSave",       "ability": "wisdom",       "type":"save"},
-    {"name": "Charisma Save",     "variableName": "charismaSave",     "ability": "charisma",     "type":"save"},
-
-    {"name": "Initiative",     "variableName": "initiative",     "ability": "dexterity",     "type":"check"},
-  ],
-
-  "damageMultipliers": [
-    {"name": "Acid Multiplier",        "variableName":"acidMultiplier"},
-    {"name": "Bludgeoning Multiplier", "variableName":"bludgeoningMultiplier"},
-    {"name": "Cold Multiplier",        "variableName":"coldMultiplier"},
-    {"name": "Fire Multiplier",        "variableName":"fireMultiplier"},
-    {"name": "Force Multiplier",       "variableName":"forceMultiplier"},
-    {"name": "Lightning Multiplier",   "variableName":"lightningMultiplier"},
-    {"name": "Necrotic Multiplier",    "variableName":"necroticMultiplier"},
-    {"name": "Piercing Multiplier",    "variableName":"piercingMultiplier"},
-    {"name": "Poison Multiplier",      "variableName":"poisonMultiplier"},
-    {"name": "Psychic Multiplier",     "variableName":"psychicMultiplier"},
-    {"name": "Radiant Multiplier",     "variableName":"radiantMultiplier"},
-    {"name": "Slashing Multiplier",    "variableName":"slashingMultiplier"},
-    {"name": "Thunder Multiplier",     "variableName":"thunderMultiplier"},
-  ],
-
-  "effects": [
-    {
-      "name": "Proficiency bonus by level",
-      "stat": "proficiencyBonus",
-      "operation": "add",
-      "calculation": "floor(level / 4 + 1.75)",
-      "enabled": true,
-    },{
-      "name": "Constitution modifier per level",
-      "stat": "hitPoints",
-      "operation": "add",
-      "calculation": "constitutionMod * level",
-      "enabled": true,
-    },
-  ],
-
-  "containers": [
-    {
-			"name": "Coin Pouch",
-			"isCarried": true,
-			"description": "A sturdy pouch for coins",
-      "items": [
-        {
-    			"name": "Gold piece",
-    			"plural": "Gold pieces",
-    			"quantity": 0,
-    			"weight": 0.02,
-    			"value": 1,
-    			"settings": {
-    				"showIncrement": true,
-    			},
-        }, {
-    			"name": "Silver piece",
-    			"plural": "Silver pieces",
-    			"quantity": 0,
-    			"weight": 0.02,
-    			"value": 0.1,
-    			"settings": {
-    				"showIncrement": true,
-    			},
-    		}, {
-    			"name": "Copper piece",
-    			"plural": "Copper pieces",
-    			"quantity": 0,
-    			"weight": 0.02,
-    			"value": 0.01,
-    			"settings": {
-    				"showIncrement": true,
-    			},
-        },
-      ],
-    },
-  ],
-});

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

@@ -1,21 +1,46 @@
-import { includes, cloneDeep, has } from 'lodash';
+import { includes, cloneDeep } from 'lodash';
 
+// The computation memo is an in-memory data structure used only during the
+// computation process
 export default class ComputationMemo {
   constructor(props){
     this.statsByVariableName = {};
+    this.extraStatsByVariableName = {};
+    this.statsById = {};
     this.originalPropsById = {};
     this.propsById = {};
     this.skillsByAbility = {};
     this.unassignedEffects = [];
-    props.filter((prop) => {
-      // skip effects, proficiencies, and class levels for the next pass
+    this.classLevelsById = {};
+    this.classes = {};
+    this.togglesById = {};
+    this.toggleIds = new Set();
+    // First note all the ids of all the toggles
+    props.forEach((prop) => {
       if (
-        prop.type === 'effect' ||
-        prop.type === 'proficiency' ||
-        prop.type === 'classLevel'
-      ) return true;
-      // Add all the stats
-      this.addStat(prop);
+        prop.type === 'toggle'
+      ) {
+        this.toggleIds.add(prop._id);
+      }
+    });
+    props.filter((prop) => {
+      if (
+        prop.type === 'toggle'
+      ) {
+        this.addToggle(prop);
+      } else {
+        return true;
+      }
+    }).filter((prop) => {
+      if (
+        prop.type === 'attribute' ||
+        prop.type === 'skill'
+      ) {
+        // Add all the stats
+        this.addStat(prop);
+      } else {
+        return true;
+      }
     }).forEach((prop) => {
       // Now add all effects and proficiencies
       if (prop.type === 'effect'){
@@ -31,46 +56,97 @@ export default class ComputationMemo {
     this.originalPropsById[prop._id] = cloneDeep(prop);
     this.propsById[prop._id] = prop;
     prop.computationDetails = propDetails(prop);
+    prop.ancestors.forEach(ancestor => {
+      if (this.toggleIds.has(ancestor.id)){
+        prop.computationDetails.toggleAncestors.push(ancestor.id);
+      }
+    });
     return prop;
   }
-  storeHighestClassLevel(name, 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;
   }
   addClassLevel(prop){
     prop = this.registerProperty(prop);
-    if (prop.variableName){
-      this.storeHighestClassLevel(prop.variableName, prop);
-    }
-    if (prop.baseClass){
-      this.storeHighestClassLevel(prop.baseClass, prop);
-    }
+    this.classLevelsById[prop._id] = prop;
   }
   addStat(prop){
-    prop = this.registerProperty(prop);
     let variableName = prop.variableName;
     if (!variableName) return;
-    if (this.statsByVariableName[variableName]){
-      prop.value = NaN;
-      prop.computationDetails.error = 'variableNameCollision';
-      console.warn('variableNameCollision', prop);
-      return;
-    }
-    this.statsByVariableName[variableName] = prop;
-    if (
-      prop.type === 'skill' &&
-      isSkillCheck(prop) &&
-      prop.ability
-    ){
-      this.addSkillToAbility(prop, prop.ability)
+    let existingStat = this.statsByVariableName[variableName];
+    if (existingStat){
+      existingStat.computationDetails.idsOfSameName.push(prop._id);
+      this.originalPropsById[prop._id] = cloneDeep(prop);
+      if (prop.baseValueCalculation){
+        existingStat.computationDetails.effects.push({
+          operation: 'base',
+          calculation: prop.baseValueCalculation,
+          stats: [variableName],
+          computationDetails: propDetailsByType.effect(),
+          statBase: true,
+        });
+      }
+      if (prop.baseProficiency){
+        existingStat.computationDetails.proficiencies.push({
+          value: prop.baseProficiency,
+          stats: [variableName],
+          computationDetails: propDetailsByType.proficiency(),
+          type: 'proficiency',
+          statBase: true,
+        });
+      }
+    } else {
+      prop = this.registerProperty(prop);
+      this.statsById[prop._id] = prop;
+      this.statsByVariableName[variableName] = prop;
+      if (
+        prop.type === 'skill' &&
+        isSkillCheck(prop) &&
+        prop.ability
+      ){
+        this.addSkillToAbility(prop, prop.ability)
+      }
     }
   }
   addSkillToAbility(prop, ability){
@@ -83,7 +159,9 @@ export default class ComputationMemo {
     prop = this.registerProperty(prop);
     let targets = this.getEffectTargets(prop);
     targets.forEach(target => {
-      target.computationDetails.effects.push(prop);
+      if (target.computationDetails.effects){
+        target.computationDetails.effects.push(prop);
+      }
     });
     if (!targets.size){
       this.unassignedEffects.push(prop);
@@ -98,7 +176,12 @@ export default class ComputationMemo {
       targets.add(target);
       if (isSkillOperation(prop) && isAbility(target)){
         let extras = this.skillsByAbility[statName] || [];
-        targets.add(...extras)
+        extras.forEach(ex =>{
+          // Only pass on ability effects to skills and checks
+          if (ex.skillType === 'skill' || ex.skillType === 'check'){
+            targets.add(ex)
+          }
+        });
       }
     });
     return targets;
@@ -117,15 +200,29 @@ export default class ComputationMemo {
       let target = this.statsByVariableName[statName];
       if (!target) return;
       targets.add(target);
-      if (isAbility(target) && isSkillCheck(prop)) {
+      if (isAbility(target)) {
         let extras = this.skillsByAbility[statName] || [];
-        targets.add(...extras)
+        extras.forEach(ex =>{
+          // Only pass on ability proficiencies to skills and checks
+          if (ex.skillType === 'skill' || ex.skillType === 'check'){
+            targets.add(ex)
+          }
+        });
       }
     });
     return targets;
   }
 }
 
+function isAbility(prop){
+  return prop.type === 'attribute' &&
+  prop.attributeType === 'ability'
+}
+
+function isSkillCheck(prop){
+  return includes(['skill', 'check', 'save', 'utility'], prop.skillType);
+}
+
 const skillOperations = [
   'advantage',
   'disadvantage',
@@ -135,15 +232,6 @@ const skillOperations = [
   'rollBonus',
 ];
 
-function isAbility(prop){
-  return prop.type === 'attribute' &&
-  prop.attributeType === 'ability'
-}
-
-function isSkillCheck(prop){
-  return includes(['skill', 'check', 'save', 'utility'], prop.skillType);
-}
-
 function isSkillOperation(prop){
   return skillOperations.includes(prop.operation);
 }
@@ -153,11 +241,22 @@ function propDetails(prop){
 }
 
 const propDetailsByType = {
+  toggle(){
+    return {
+      computed: false,
+      busyComputing: false,
+      toggleAncestors: [],
+      disabledByToggle: false,
+    };
+  },
   attribute(){
     return {
       computed: false,
       busyComputing: false,
       effects: [],
+      toggleAncestors: [],
+      disabledByToggle: false,
+      idsOfSameName: [],
     };
   },
   skill(){
@@ -166,22 +265,30 @@ const propDetailsByType = {
       busyComputing: false,
       effects: [],
       proficiencies: [],
+      toggleAncestors: [],
+      disabledByToggle: false,
+      idsOfSameName: [],
     };
   },
   effect(){
     return {
       computed: false,
+      busyComputing: false,
+      toggleAncestors: [],
+      disabledByToggle: false,
     };
   },
   classLevel(){
     return {
       computed: true,
+      toggleAncestors: [],
+      disabledByToggle: false,
     };
   },
   proficiency(){
-    return {};
-  },
-  damageMultiplier(){
-    return {};
+    return {
+      toggleAncestors: [],
+      disabledByToggle: false,
+    };
   },
 }

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

@@ -25,6 +25,9 @@ export default class EffectAggregator{
       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;
+        }
         break;
       case 'add':
         // Add all adds together

app/imports/api/creature/computation/afterComputation/evaluateString.js

@@ -1,5 +1,5 @@
-import * as math from 'mathjs';
-import  replaceBareSymbolsWithValueAccessor from '/imports/api/creature/computation/utility/replaceBareSymbolsWithValueAccessor.js';
+import math from '/imports/math.js';
+import bareSymbolSubtitutor from '/imports/api/creature/computation/utility/bareSymbolSubtitutor.js';
 
 export default function evaluateString(string, scope){
   let errors = [];
@@ -20,7 +20,7 @@ export default function evaluateString(string, scope){
   }
 
   // Replace all bare symbols with symbol.value
-  let transformedCalc = calc.transform(replaceBareSymbolsWithValueAccessor);
+  let transformedCalc = calc.transform(bareSymbolSubtitutor(scope));
 
   // Evaluate the expression to a number or return with substitutions
   try {
@@ -29,11 +29,11 @@ export default function evaluateString(string, scope){
   } catch (e1){
     errors.push(e1);
     try {
-      let result = simplifyWithAccessors(calc, scope).toHTML();
+      let result = simplifyWithAccessors(transformedCalc, scope).toHTML();
       return {result, errors};
     } catch (e2){
       errors.push(e2);
-      return {result: calc.toHTML(), errors};
+      return {result: transformedCalc.toHTML(), errors};
     }
   }
 }

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

@@ -0,0 +1,11 @@
+import computeToggle from '/imports/api/creature/computation/computeToggle.js';
+
+export default function applyToggles(prop, memo){
+  prop.computationDetails.toggleAncestors.forEach(toggleId => {
+    let toggle = memo.togglesById[toggleId];
+    computeToggle(toggle, memo);
+    if (!toggle.toggleResult){
+      prop.computationDetails.disabledByToggle = true;
+    }
+  });
+}

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

@@ -1,5 +1,5 @@
 import computeStat from '/imports/api/creature/computation/computeStat.js';
-
+import applyToggles from '/imports/api/creature/computation/applyToggles.js';
 
 export default function combineStat(stat, aggregator, memo){
   if (stat.type === 'attribute'){
@@ -37,17 +37,22 @@ function combineSkill(stat, aggregator, memo){
   stat.proficiency = stat.baseProficiency || 0;
   for (let i in stat.computationDetails.proficiencies){
     let prof = stat.computationDetails.proficiencies[i];
-    if (prof.value > stat.proficiency) stat.proficiency = prof.value;
+    applyToggles(prof, memo);
+    if (
+      !prof.computationDetails.disabledByToggle &&
+      prof.value > stat.proficiency
+    ){
+      stat.proficiency = prof.value;
+    }
   }
   // Get the character's proficiency bonus to apply
   let profBonusStat = memo.statsByVariableName['proficiencyBonus'];
   let profBonus = profBonusStat && profBonusStat.value;
 
-  /** TODO level needs to be on the memo somewhere
-  if (typeof profBonus !== "number"){
-    profBonus = Math.floor(char.level / 4 + 1.75);
+  if (typeof profBonus !== 'number' && memo.statsByVariableName['level']){
+    let level = memo.statsByVariableName['level'].value;
+    profBonus = Math.ceil(level / 4) + 1;
   }
-  */
   // Multiply the proficiency bonus by the actual proficiency
   profBonus *= stat.proficiency;
   // Combine everything to get the final result
@@ -55,8 +60,25 @@ function combineSkill(stat, aggregator, memo){
   if (result < aggregator.min) result = aggregator.min;
   if (result > aggregator.max) result = aggregator.max;
   result = Math.floor(result);
-  if (stat.base > result) result = stat.base;
   stat.value = result;
+  // Advantage/disadvantage
+  if (aggregator.advantage && !aggregator.disadvantage){
+    stat.advantage = 1;
+  } else if (aggregator.disadvantage && !aggregator.advantage){
+    stat.advantage = -1;
+  } else {
+    stat.advantage = 0;
+  }
+  // Passive bonus
+  stat.passiveBonus = aggregator.passiveAdd;
+  // conditional benefits
+  stat.conditionalBenefits = aggregator.conditional;
+  // Roll bonuses
+  stat.rollBonus = aggregator.rollBonus;
+  // Forced to fail
+  stat.fail = aggregator.fail;
+  // Rollbonus
+  stat.rollBonuses = aggregator.rollBonus;
 }
 
 function combineDamageMultiplier(stat){

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

@@ -1,15 +1,38 @@
 import evaluateCalculation from '/imports/api/creature/computation/evaluateCalculation.js';
+import applyToggles from '/imports/api/creature/computation/applyToggles.js';
 
 export default function computeEffect(effect, memo){
   if (effect.computationDetails.computed) return;
-  if (_.isFinite(effect.calculation)){
+  if (effect.computationDetails.busyComputing){
+    // Trying to compute this effect again while it is already computing.
+    // We must be in a dependency loop.
+    effect.computationDetails.computed = true;
+    effect.result = NaN;
+    effect.computationDetails.busyComputing = false;
+    effect.computationDetails.error = 'dependencyLoop';
+    if (Meteor.isClient) console.warn('dependencyLoop', effect);
+    return;
+  }
+  // Before doing any work, mark this effect as busy
+  effect.computationDetails.busyComputing = true;
+
+  // Apply any toggles
+  applyToggles(effect, memo);
+
+  // Determine result of effect calculation
+  if (!effect.calculation){
+    if(effect.operation === 'add' || effect.operation === 'base'){
+      effect.result = 0;
+    }
+  } else if (Number.isFinite(+effect.calculation)){
     effect.result = +effect.calculation;
-  } else if(effect.operation === "conditional" || effect.operation === "rollBonus"){
+  } else if(effect.operation === 'conditional' || effect.operation === 'rollBonus'){
     effect.result = effect.calculation;
-  } else if(_.contains(["advantage", "disadvantage", "fail"], effect.operation)){
+  } else if(_.contains(['advantage', 'disadvantage', 'fail'], effect.operation)){
     effect.result = 1;
   } else {
     effect.result = evaluateCalculation(effect.calculation, memo);
   }
   effect.computationDetails.computed = true;
+  effect.computationDetails.busyComputing = false;
 }

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

@@ -0,0 +1,44 @@
+import { forOwn, has } from 'lodash';
+
+export default function computeLevels(memo){
+  computeClassLevels(memo);
+  computeTotalLevel(memo);
+}
+
+function computeClassLevels(memo){
+  forOwn(memo.classLevelsById, classLevel => {
+    let name = classLevel.variableName;
+    let stat = memo.statsByVariableName[name];
+    if (!stat){
+      memo.statsByVariableName[name] = classLevel;
+      memo.classes[name] = classLevel;
+    } else if (!has(stat, 'level')){
+      // Stat is overriden by an attribute
+      return;
+    } else if (stat.level < classLevel.level) {
+      memo.statsByVariableName[name] = classLevel;
+      memo.classes[name] = classLevel;
+    }
+  });
+}
+
+function computeTotalLevel(memo){
+  let currentLevel = memo.statsByVariableName['level'];
+  if (!currentLevel){
+    currentLevel = {
+      value: 0,
+      computationDetails: {
+        builtIn: true,
+        computed: true,
+      }
+    };
+    memo.statsByVariableName['level'] = currentLevel;
+  }
+  // bail out if overriden by an attribute
+  if (!currentLevel.computationDetails.builtIn) return;
+  let level = 0;
+  for (let name in memo.classes){
+    level += memo.classes[name].level || 0;
+  }
+  memo.statsByVariableName['level'].value = level;
+}

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

@@ -1,12 +1,22 @@
 import { each, forOwn } from 'lodash';
+import computeLevels from '/imports/api/creature/computation/computeLevels.js';
 import computeStat from '/imports/api/creature/computation/computeStat.js';
 import computeEffect from '/imports/api/creature/computation/computeEffect.js';
+import computeToggle from '/imports/api/creature/computation/computeToggle.js';
 
 export default function computeMemo(memo){
-  forOwn(memo.statsByVariableName, (stat) => {
+  // Compute level
+  computeLevels(memo);
+  // Compute all stats, even if they are overriden
+  forOwn(memo.statsById, stat => {
     computeStat (stat, memo);
   });
-  each(memo.unassignedEffects, (effect) => {
+  // Compute effects which didn't end up targeting a stat
+  each(memo.unassignedEffects, effect => {
     computeEffect(effect, memo);
   });
+  forOwn(memo.togglesById, toggle => {
+    computeToggle(toggle, memo);
+  });
+  // Compute class levels
 }

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

@@ -1,6 +1,7 @@
 import combineStat from '/imports/api/creature/computation/combineStat.js';
 import computeEffect from '/imports/api/creature/computation/computeEffect.js';
 import EffectAggregator from '/imports/api/creature/computation/EffectAggregator.js';
+import applyToggles from '/imports/api/creature/computation/applyToggles.js';
 import { each } from 'lodash';
 
 export default function computeStat(stat, memo){
@@ -13,17 +14,26 @@ export default function computeStat(stat, memo){
     stat.value = NaN;
     stat.computationDetails.busyComputing = false;
     stat.computationDetails.error = 'dependencyLoop';
-    console.warn('dependencyLoop', stat);
+    if (Meteor.isClient) console.warn('dependencyLoop', stat);
     return;
   }
-  // Compute and aggregate all the effects
-  let aggregator = new EffectAggregator(stat, memo)
-  each(stat.computationDetails.effects, (effect) => {
-    computeEffect(effect, memo);
-    aggregator.addEffect(effect);
-  });
-  // Conglomerate all the effects to compute the final stat values
-  combineStat(stat, aggregator, memo);
+  // Before doing any work, mark this stat as busy
+  stat.computationDetails.busyComputing = true;
+  // Apply any toggles
+  applyToggles(stat, memo);
+
+  if (!stat.computationDetails.disabledByToggle){
+    // Compute and aggregate all the effects
+    let aggregator = new EffectAggregator(stat, memo)
+    each(stat.computationDetails.effects, (effect) => {
+      computeEffect(effect, memo);
+      if (!effect.computationDetails.disabledByToggle){
+        aggregator.addEffect(effect);
+      }
+    });
+    // Conglomerate all the effects to compute the final stat values
+    combineStat(stat, aggregator, memo);
+  }
   // Mark the attribute as computed
   stat.computationDetails.computed = true;
   stat.computationDetails.busyComputing = false;

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

@@ -0,0 +1,32 @@
+import evaluateCalculation from '/imports/api/creature/computation/evaluateCalculation.js';
+
+export default function computeToggle(toggle, memo){
+  if (toggle.computationDetails.computed) return;
+  if (toggle.computationDetails.busyComputing){
+    // Trying to compute this effect again while it is already computing.
+    // We must be in a dependency loop.
+    toggle.computationDetails.computed = true;
+    toggle.result = false;
+    toggle.computationDetails.busyComputing = false;
+    toggle.computationDetails.error = 'dependencyLoop';
+    if (Meteor.isClient) console.warn('dependencyLoop', toggle);
+    return;
+  }
+  // Before doing any work, mark this toggle as busy
+  toggle.computationDetails.busyComputing = true;
+
+  // Do work
+  if (toggle.enabled){
+    toggle.toggleResult = true;
+  } else if (toggle.disabled){
+    toggle.toggleResult = false;
+  } else if (!toggle.condition){
+    toggle.toggleResult = false;
+  } else if (Number.isFinite(+toggle.condition)){
+    toggle.toggleResult = !!+toggle.condition;
+  } else {
+    toggle.toggleResult = evaluateCalculation(toggle.condition, memo);
+  }
+  toggle.computationDetails.computed = true;
+  toggle.computationDetails.busyComputing = false;
+}

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

@@ -1,6 +1,6 @@
-import  replaceBareSymbolsWithValueAccessor from '/imports/api/creature/computation/utility/replaceBareSymbolsWithValueAccessor.js';
+import bareSymbolSubtitutor from '/imports/api/creature/computation/utility/bareSymbolSubtitutor.js';
 import computeStat from '/imports/api/creature/computation/computeStat.js';
-import * as math from 'mathjs';
+import math from '/imports/math.js';
 
 export default function evaluateCalculation(string, memo){
   if (!string) return string;
@@ -9,7 +9,6 @@ export default function evaluateCalculation(string, memo){
   try {
     calc = math.parse(string);
   } catch (e) {
-    console.error(e);
     return string;
   }
   // Ensure all symbol nodes are defined and coputed
@@ -22,7 +21,7 @@ export default function evaluateCalculation(string, memo){
     }
   });
   // Ensure any bare symbols are value accessors instead
-  let substitutedCalc = calc.transform(replaceBareSymbolsWithValueAccessor);
+  let substitutedCalc = calc.transform(bareSymbolSubtitutor(memo.statsByVariableName));
   // Evaluate the expression to a number or return with substitutions
   try {
     return substitutedCalc.evaluate(memo.statsByVariableName);

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

@@ -1,42 +0,0 @@
-import Creatures from '/imports/api/creature/Creatures.js';
-import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
-
-export default function getCalculationProperties(creatureId){
-  // First get ids of disabled properties and unequiped items
-  let disabledAncestorIds = CreatureProperties.find({
-    'ancestors.id': creatureId,
-    $or: [
-      {disabled: true},
-      {equipped: false},
-    ],
-  }, {
-    fields: {_id: 1},
-  }).map(prop => prop._id);
-
-  // Then get the ids of creatures that are children of this creature
-  // to isolate their decendent properties from this calculation
-  Creatures.find({
-    'ancestors.id': creatureId,
-  }, {
-    fields: {_id: 1},
-  }).forEach(prop => {
-    disabledAncestorIds.push(prop._id);
-  });
-
-  // Get all the properties that aren't from the excluded decendents
-  return CreatureProperties.find({
-    'ancestors.id': {
-      $eq: creatureId,
-      $nin: disabledAncestorIds,
-    },
-    removed: {$ne: true},
-    type: {$in: [
-      'attribute',
-      'skill',
-      'damageMultiplier',
-      'effect',
-      'proficiency',
-      'classLevel',
-    ]},
-  }).fetch();
-}

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

@@ -1,12 +1,12 @@
-import { Meteor } from 'meteor/meteor'
 import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import ComputationMemo from '/imports/api/creature/computation/ComputationMemo.js';
 import computeMemo from '/imports/api/creature/computation/computeMemo.js';
-import getCalculationProperties from '/imports/api/creature/computation/getCalculationProperties.js';
+import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 import writeAlteredProperties from '/imports/api/creature/computation/writeAlteredProperties.js';
 import writeCreatureVariables from '/imports/api/creature/computation/writeCreatureVariables.js';
+import { recomputeDamageMultipliersById } from '/imports/api/creature/damageMultiplierDenormalise/recomputeDamageMultipliers.js'
 
 export const recomputeCreature = new ValidatedMethod({
 
@@ -26,6 +26,15 @@ export const recomputeCreature = new ValidatedMethod({
 
 });
 
+const calculationPropertyTypes = [
+  'attribute',
+  'skill',
+  'effect',
+  'proficiency',
+  'classLevel',
+  'toggle',
+];
+
 /**
  * This function is the heart of DiceCloud. It recomputes a creature's stats,
  * distilling down effects and proficiencies into the final stats that make up
@@ -63,11 +72,16 @@ export const recomputeCreature = new ValidatedMethod({
  * - Write the computed results back to the database
  */
 export function recomputeCreatureById(creatureId){
-  let props = getCalculationProperties(creatureId);
+  let props = getActiveProperties({
+    ancestorId: creatureId,
+    filter: {type: {$in: calculationPropertyTypes}},
+    includeUntoggled: true,
+  });
   let computationMemo = new ComputationMemo(props);
   computeMemo(computationMemo);
   writeAlteredProperties(computationMemo);
   writeCreatureVariables(computationMemo, creatureId);
   // if(Meteor.isClient) console.log(computationMemo);
+  recomputeDamageMultipliersById(creatureId);
   return computationMemo;
 }

app/imports/api/creature/computation/utility/bareSymbolSubtitutor.js

@@ -0,0 +1,24 @@
+import math from '/imports/math.js';
+
+export default function bareSymbolSubtitutor(scope){
+  return function(node, path){
+    if (!scope) return node;
+    if (node.isFunctionNode){
+      let fn = node.fn;
+      if (fn && fn.isSymbolNode){
+        fn.skipReplacement = true;
+      }
+      return node;
+    } else if (
+      node.isSymbolNode &&
+      path !== 'object' &&
+      node.skipReplacement !== true
+    ) {
+      let stat = scope[node.name];
+      if (!stat) return node;
+      return new math.ConstantNode(stat.value);
+    } else {
+      return node;
+    }
+  }
+}

app/imports/api/creature/computation/utility/replaceBareSymbolsWithValueAccessor.js

@@ -1,22 +0,0 @@
-import * as math from 'mathjs';
-
-export default function replaceBareSymbolsWithValueAccessor(node, path) {
-  if (node.isFunctionNode){
-    let fn = node.fn;
-    if (fn && fn.isSymbolNode){
-      fn.skipReplacement = true;
-    }
-    return node;
-  } else if (
-    node.isSymbolNode &&
-    path !== 'object' &&
-    node.skipReplacement !== true
-  ) {
-    const object = new math.SymbolNode(node.name);
-    const address = new math.ConstantNode('value');
-    const index = new math.IndexNode([address]);
-    return new math.AccessorNode(object, index);
-  } else {
-    return node;
-  }
-}

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

@@ -3,51 +3,60 @@ import { isEqual, forOwn } from 'lodash';
 import { ComputedOnlySkillSchema } from '/imports/api/properties/Skills.js';
 import { ComputedOnlyAttributeSchema } from '/imports/api/properties/Attributes.js';
 import { ComputedOnlyEffectSchema } from '/imports/api/properties/Effects.js';
+import { ComputedOnlyToggleSchema } from '/imports/api/properties/Toggles.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 
+const schemasByType = {
+  'skill': ComputedOnlySkillSchema,
+  'attribute': ComputedOnlyAttributeSchema,
+  'effect': ComputedOnlyEffectSchema,
+  'toggle': ComputedOnlyToggleSchema,
+};
+
 export default function writeAlteredProperties(memo){
   let bulkWriteOperations = [];
   // Loop through all properties on the memo
-  forOwn(memo.originalPropsById, (original, _id) => {
-    let changed = memo.propsById[_id];
-
-    let schema;
-    switch (changed.type){
-      case 'skill':
-        schema = ComputedOnlySkillSchema;
-        break;
-      case 'attribute':
-        schema = ComputedOnlyAttributeSchema;
-        break;
-      case 'effect':
-        schema = ComputedOnlyEffectSchema;
-        break;
-      default:
-        return;
+  forOwn(memo.propsById, changed => {
+    let schema = schemasByType[changed.type];
+    if (!schema) return;
+    let extraIds = changed.computationDetails.idsOfSameName;
+    let ids;
+    if (extraIds && extraIds.length){
+      ids = [changed._id, ...extraIds];
+    } else {
+      ids = [changed._id];
     }
-    let op = undefined;
-    // Loop through all keys that can be changed by computation
-    // and compile an operation that sets all those keys
-    for (let key of schema.objectKeys()){
-      if (!isEqual(original[key], changed[key])){
-        if (!op) op = newOperation(_id, changed.type);
-        let value = changed[key];
-        if (value === undefined){
-          // Unset values that become undefined
-          addUnsetOp(op, key);
-        } else {
-          // Set values that changed to something else
-          addSetOp(op, key, value);
-        }
+    ids.forEach(id => {
+      let op = undefined;
+      let original = memo.originalPropsById[id];
+      op = addChangedKeysToOp(op, schema.objectKeys(), original, changed);
+      if (op){
+        bulkWriteOperations.push(op);
       }
-    }
-    if (op){
-      bulkWriteOperations.push(op);
-    }
+    });
   });
   bulkWriteProperties(bulkWriteOperations);
 }
 
+function addChangedKeysToOp(op, keys, original, changed) {
+  // Loop through all keys that can be changed by computation
+  // and compile an operation that sets all those keys
+  for (let key of keys){
+    if (!isEqual(original[key], changed[key])){
+      if (!op) op = newOperation(original._id, changed.type);
+      let value = changed[key];
+      if (value === undefined){
+        // Unset values that become undefined
+        addUnsetOp(op, key);
+      } else {
+        // Set values that changed to something else
+        addSetOp(op, key, value);
+      }
+    }
+  }
+  return op;
+}
+
 function newOperation(_id, type){
   let newOp = {
     updateOne: {
@@ -84,12 +93,16 @@ function bulkWriteProperties(bulkWriteOps){
       bulkWriteOps,
       {ordered : false},
       function(e){
-        if (e) console.error(e);
+        if (e) {
+          console.error('Bulk write failed: ');
+          console.error(e);
+        }
       }
     );
   } else {
     bulkWriteOps.forEach(op => {
-      CreatureProperties.update(op.updateOne.filter, op.updateOne.update, {
+      let updateOneOrMany = op.updateOne || op.updateMany;
+      CreatureProperties.update(updateOneOrMany.filter, updateOneOrMany.update, {
         // The server code is bypassing collection 2 validation, so do the same
         // on the client
         // include this if bypass is off:

app/imports/api/creature/creaturePermissions.js

@@ -1,3 +1,4 @@
+import Creatures from '/imports/api/creature/Creatures.js';
 import {
   assertEditPermission as editPermission,
   assertViewPermission as viewPermission,

app/imports/api/creature/damageMultiplierDenormalise/recomputeDamageMultipliers.js

@@ -0,0 +1,67 @@
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
+import SimpleSchema from 'simpl-schema';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import Creatures from '/imports/api/creature/Creatures.js';
+import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
+
+export const recomputeDamageMultipliers = new ValidatedMethod({
+
+  name: 'Creatures.methods.recomputeDamageMultipliers',
+
+  validate: new SimpleSchema({
+    creatureId: { type: String }
+  }).validator(),
+
+  run({creatureId}) {
+    // Permission
+    assertEditPermission(creatureId, this.userId);
+    // Work, call this direcly if you are already in a method that has checked
+    // for permission to edit a given character
+    recomputeDamageMultipliersById(creatureId);
+  },
+
+});
+
+export function recomputeDamageMultipliersById(creatureId){
+  if (!creatureId) throw 'Creature ID is required';
+  let props = getActiveProperties({
+    ancestorId: creatureId,
+    filter: {type: 'damageMultiplier'},
+  });
+
+  // Count of how many weakness, resistances and immunities each damage type has
+  let multipliersByName = {};
+  props.forEach(dm => {
+    dm.damageTypes.forEach(damageType => {
+      if (!multipliersByName[damageType]){
+        multipliersByName[damageType] = {
+          weaknesses: 0,
+          resistances: 0,
+          immunities: 0,
+        };
+      }
+      if (dm.value === 0){
+        multipliersByName[damageType].immunities++;
+      } else if (dm.value === 0.5){
+        multipliersByName[damageType].resistances++;
+      } else if (dm.value === 2){
+        multipliersByName[damageType].weaknesses++;
+      }
+    });
+  });
+  // Make an Object with keys of all the damage types that have a resulting
+  // immunity, weakness, or resistance
+  let damageMultipliers = {};
+  for (let damageType in multipliersByName){
+    let multiplier = multipliersByName[damageType];
+    if (multiplier.immunities){
+      damageMultipliers[damageType] = 0;
+    } else if (multiplier.resistances && !multiplier.weaknesses){
+      damageMultipliers[damageType] = 0.5;
+    } else if (multiplier.weaknesses && !multiplier.resistances){
+      damageMultipliers[damageType] = 2;
+    }
+  }
+  // Store the Object on the creature document
+  Creatures.update(creatureId, {$set: {damageMultipliers}});
+}

app/imports/api/creature/getActiveProperties.js

@@ -0,0 +1,52 @@
+import Creatures from '/imports/api/creature/Creatures.js';
+import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
+
+export default function getActiveProperties({
+  ancestorId,
+  filter = {},
+  options,
+  includeUntoggled = false
+}){
+  if (!ancestorId){
+    throw 'Ancestor Id is required to get active properties'
+  }
+  // First get ids of disabled properties, unequiped items, unapplied buffs
+  let disabledAncestorsFilter = {
+    'ancestors.id': ancestorId,
+    $or: [
+      {disabled: true},
+      {equipped: false},
+      {applied: false},
+    ],
+  };
+  if (!includeUntoggled){
+    disabledAncestorsFilter.$or.push({toggleResult: false});
+  }
+  let disabledAncestorIds = CreatureProperties.find(disabledAncestorsFilter, {
+    fields: {_id: 1},
+  }).map(prop => prop._id);
+
+  // Then get the ids of creatures that are children of this creature
+  // to isolate their decendent properties
+  Creatures.find({
+    'ancestors.id': ancestorId,
+  }, {
+    fields: {_id: 1},
+  }).forEach(subCreature => {
+    disabledAncestorIds.push(subCreature._id);
+  });
+
+  // Get all the properties that are decendents of the ancestor of interest but
+  // aren't from the excluded decendents
+  filter['ancestors.id'] = {
+    $eq: ancestorId,
+    $nin: disabledAncestorIds,
+  };
+  // Get properties that aren't removed
+  filter.removed = {$ne: true};
+  // Don't include the disabled ancestors themselves either
+  filter._id = {
+    $nin: disabledAncestorIds,
+  }
+  return CreatureProperties.find(filter, options).fetch();
+}

app/imports/api/creature/getDefaultCharacterDocs.js

@@ -1,181 +0,0 @@
-import DEFAULT_CHARACTER_DOCS from '/imports/api/creature/DEFAULT_CHARACTER_DOCS.js';
-import { Random } from 'meteor/random';
-
-const setParent = function(charId){
-	let parent = {
-		collection: "Creatures",
-		id: charId,
-		group: "default",
-	};
-	return doc => {
-		doc.parent = doc.parent || parent;
-		doc.charId = charId;
-	};
-};
-
-const getRacialBonusEffect = function(charId, attribute, bonus){
-	return {
-		name: "Race Bonus",
-		stat: attribute,
-		operation: "add",
-		calculation: bonus.toString(),
-		enabled: true,
-		parent: {
-			collection: "Creatures",
-			id: charId,
-			group: "race",
-		},
-		charId: charId,
-	};
-};
-
-const giveDocsOrderAndIds = function(docArray){
-	for (i in docArray){
-		docArray[i].order = +i;
-		if (!docArray[i]._id){
-			docArray[i]._id = Random.id();
-		}
-	}
-};
-
-const getDefaultCharacterDocs = function(charId, {
-	// Character form data
-	baseStrength = 10,
-	baseDexterity = 10,
-	baseConstitution = 10,
-	baseIntelligence = 10,
-	baseWisdom = 10,
-	baseCharisma = 10,
-	strengthBonus = 0,
-	dexterityBonus = 0,
-	constitutionBonus = 0,
-	intelligenceBonus = 0,
-	wisdomBonus = 0,
-	charismaBonus = 0,
-	hitDice = "d8",
-	cls = "Class",
-  level = 1,
-}){
-	let docs = DEFAULT_CHARACTER_DOCS();
-
-	// Setup the base ability scores
-	docs.attributes[0].baseValue = baseStrength;
-	docs.attributes[1].baseValue = baseDexterity;
-	docs.attributes[2].baseValue = baseConstitution;
-	docs.attributes[3].baseValue = baseIntelligence;
-	docs.attributes[4].baseValue = baseWisdom;
-	docs.attributes[5].baseValue = baseCharisma;
-
-	// Set up racial bonuses
-	if (strengthBonus) {
-		docs.effects.push(
-			getRacialBonusEffect(charId, 'strength', strengthBonus)
-		);
-	}
-	if (dexterityBonus) {
-		docs.effects.push(
-			getRacialBonusEffect(charId, 'dexterity', dexterityBonus)
-		);
-	}
-	if (constitutionBonus) {
-		docs.effects.push(
-			getRacialBonusEffect(charId, 'constitution', constitutionBonus)
-		);
-	}
-	if (intelligenceBonus) {
-		docs.effects.push(
-			getRacialBonusEffect(charId, 'intelligence', intelligenceBonus)
-		);
-	}
-	if (wisdomBonus) {
-		docs.effects.push(
-			getRacialBonusEffect(charId, 'wisdom', wisdomBonus)
-		);
-	}
-	if (charismaBonus) {
-		docs.effects.push(
-			getRacialBonusEffect(charId, 'charisma', charismaBonus)
-		);
-	}
-
-	// Set up Class
-  const strippedCls = cls.replace(/\s+/g, '')
-  const classId = Random.id();
-	docs.classes = [{
-		_id: classId,
-		charId,
-    level,
-		name: cls,
-	}];
-
-  // Setup hit dice
-  docs.effects.push({
-		name: cls,
-		stat: `${hitDice}HitDice`,
-		operation: "add",
-		calculation: `${strippedCls}Level`,
-		enabled: true,
-		parent: {
-			collection: "Classes",
-			id: classId,
-		},
-		charId: charId,
-	});
-
-  // Setup health for all class levels
-  let healthPerLevel = 4;
-  if (hitDice == "d6"){
-    healthPerLevel = 4;
-  } else if (hitDice == "d8"){
-    healthPerLevel = 5;
-  } else if (hitDice == "d10"){
-    healthPerLevel = 6;
-  } else if (hitDice == "d12"){
-    healthPerLevel = 7;
-  }
-	docs.effects.push({
-		name: cls,
-		stat: `hitPoints`,
-		operation: "add",
-		calculation: `${healthPerLevel - 2} + ${healthPerLevel} * ${strippedCls}Level`,
-		enabled: true,
-		parent: {
-			collection: "Classes",
-			id: classId,
-		},
-		charId: charId,
-	});
-
-	// Set the parents for base items
-	docs.attributes.forEach(setParent(charId));
-	docs.skills.forEach(setParent(charId));
-	docs.damageMultipliers.forEach(setParent(charId));
-	docs.effects.forEach(setParent(charId));
-	docs.containers.forEach(setParent(charId));
-
-	// Set up parenting on items and move them to the top level items object
-	docs.items = [];
-	docs.containers.forEach(container => {
-		container._id = Random.id();
-		const parent = {
-			collection: "Containers",
-			id: container._id,
-		};
-		container.items.forEach(item => {
-			item.parent = parent;
-			item.charId = charId;
-		});
-		// Move the items to the top level array
-		docs.items.push(...container.items);
-		delete container.items;
-	});
-
-	// Order the docs
-	for (collection in docs){
-		giveDocsOrderAndIds(docs[collection]);
-	}
-
-	return docs
-};
-
-export default getDefaultCharacterDocs;

app/imports/api/library/Libraries.js

@@ -1,8 +1,10 @@
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import SimpleSchema from 'simpl-schema';
 import SharingSchema from '/imports/api/sharing/SharingSchema.js';
 import simpleSchemaMixin from '/imports/api/creature/mixins/simpleSchemaMixin.js';
 import { assertEditPermission, assertOwnership } from '/imports/api/sharing/sharingPermissions.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js'
 
 /**
  * Libraries are trees of library nodes where each node represents a character
@@ -38,6 +40,15 @@ const insertLibrary = new ValidatedMethod({
   ],
   schema: LibrarySchema.omit('owner', 'isDefault'),
   run(library) {
+    if (!this.userId) {
+      throw new Meteor.Error('Libraries.methods.insert.denied',
+      'You need to be logged in to insert a library');
+    }
+    let tier = getUserTier(this.userId);
+    if (!tier.paidBenefits){
+      throw new Meteor.Error('Libraries.methods.insert.denied',
+      `The ${tier.name} tier does not allow you to insert a library`);
+    }
     library.owner = this.userId;
 		return Libraries.insert(library);
   },

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

@@ -14,7 +14,6 @@ const RefSchema = new SimpleSchema({
 let ChildSchema = new SimpleSchema({
   order: {
     type: Number,
-    min: 0,
   },
 	parent: {
     type: RefSchema,
@@ -23,6 +22,7 @@ let ChildSchema = new SimpleSchema({
   ancestors: {
     type: Array,
     defaultValue: [],
+    max: 100,
   },
   'ancestors.$': {
     type: RefSchema,

app/imports/api/parenting/getDescendantsInDepthFirstOrder.js

@@ -0,0 +1,27 @@
+import { nodesToTree } from '/imports/api/parenting/parenting.js';
+
+export default function getDescendantsInDepthFirstOrder({
+  collection,
+  ancestorId,
+  filter,
+  options = {fields: {order: 1, ancestors: 1}},
+}){
+  let forest = nodesToTree({collection, ancestorId, filter, options});
+  let orderMemo = getDocsInDepthFirstOrder(forest);
+  return orderMemo;
+}
+
+export function getDocsInDepthFirstOrder(forest){
+  let docs = [];
+  forest.forEach(node => {
+    addNodeAndTraverse(node, docs)
+  });
+  return docs;
+}
+
+function addNodeAndTraverse(node, docs){
+  docs.push(node.node);
+  node.children.forEach(child => {
+    addNodeAndTraverse(child, docs)
+  });
+}

app/imports/api/parenting/order.js

@@ -1,53 +1,24 @@
 import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
 import getCollectionByName from '/imports/api/parenting/getCollectionByName.js';
+import getDescendantsInDepthFirstOrder from '/imports/api/parenting/getDescendantsInDepthFirstOrder.js'
 
-// Docs keep track of their order amongst their siblings and keep a copy of the
-// order of their ancestors. Order is first compared between oldest non-shared
-// ancestors, then by ancestors before children, then between order of siblings.
+// Docs keep track of their depth-first order amongst their entire ancestor tree
 export function compareOrder(docA, docB){
   // < 0 if A comes before B
   // = 0 if A and B are the same order
   // > 0 if B comes before A
 
-  // Documents are equal order to themselves
-  if (docA._id && docB._id && docA._id === docB._id){
-    return 0;
-  }
-
-  // If they are siblings, just compare order
-  if (docA.parent.id === docB.parent.id){
-    return docA.order - docB.order;
-  }
-
   // They must share a root ancestor to be meaningfully sorted
   if (docA.ancestors[0].id !== docB.ancestors[0].id){
     return 0;
+  } else {
+    return docA.order - docB.order;
   }
-
-  // Go through their ancestors after the root, and find the first order
-  // difference
-  // TODO ancestors don't store order yet
-  let i, difference;
-  const length = Math.min(docA.ancestors.length, docB.ancestors.length);
-  for (i = 1; i < length; i++){
-    difference = docA.ancestors[i].order - docB.ancestors[i].order;
-    if (difference){
-      return difference;
-    } else if (docA.ancestors[i].id !== docB.ancestors[i].id) {
-      throw new Meteor.Error('Sibling order clash',
-        'Sibling docs share the same order, sort failed');
-    }
-  }
-
-  // We haven't returned yet, all ancestors up to this point are shared and one
-  // doc has no more ancestors implying one is an ancestor of the other,
-  // return the difference in their ancestor list lengths, shorter comes first
-  return docA.ancestors.length - docB.ancestors.length
 }
 
-export function getHighestOrder({collection, parentId}){
+export function getHighestOrder({collection, ancestorId}){
   const highestOrderedDoc = collection.findOne({
-    'parent.id': parentId,
+    'ancestors.id': ancestorId,
   }, {
     fields: {order: 1},
     sort: {order: -1},
@@ -58,13 +29,13 @@ export function getHighestOrder({collection, parentId}){
 export function setDocToLastOrder({collection, doc}){
   doc.order = getHighestOrder({
     collection,
-    parentId: doc.parent.id,
+    ancestorId: doc.ancestors[0].id,
   }) + 1;
 }
 
-// update the order of a doc, and shift the siblings around to suit the new
+// update the order of a doc, and shift the related docs around to suit the new
 // order
-export function updateDocOrder({docRef, order}){
+function cheapUpdateDocOrder({docRef, order}){
   let doc = fetchDocByRef(docRef, {fields: {
     order: 1,
     parent: 1,
@@ -92,7 +63,7 @@ export function updateDocOrder({docRef, order}){
       increment = 1;
     }
     collection.update({
-      'parent.id': doc.parent.id,
+      'ancestors.id': doc.ancestors[0].id,
       order: inBetweenSelector,
     }, {
       $inc: {order: increment},
@@ -105,10 +76,10 @@ export function updateDocOrder({docRef, order}){
   }
 }
 
-export function removedDocAtOrder({collection, doc}){
+export function cheapRemovedDocAtOrder({collection, doc}){
   // Decrement the order of all docs after the removed doc
   collection.update({
-    'parent.id': doc.parent.id,
+    'ancestors.id': doc.ancestors[0].id,
     order: {$gt: doc.order},
   }, {
     $inc: {order: -1},
@@ -118,10 +89,10 @@ export function removedDocAtOrder({collection, doc}){
   });
 }
 
-export function insertedDocAtOrder({collection, parentId, order}){
+export function cheapInsertedDocAtOrder({collection, ancestorId, order}){
   // Increment the order of all docs after the inserted doc
   collection.update({
-    'parent.id': parentId,
+    'ancestors.id': ancestorId,
     order: {$gte: order},
   }, {
     $inc: {order: 1},
@@ -131,54 +102,28 @@ export function insertedDocAtOrder({collection, parentId, order}){
   });
 }
 
-// Update the order a single doc and re-order the entire sibling list
+// Update the order a single doc and re-order the entire related doc list
 // with the change
 export function safeUpdateDocOrder({docRef, order}){
   let collection = getCollectionByName(docRef.collection);
-  let movedDoc = fetchDocByRef(docRef, {fields: {
-    parent: 1, name: 1
-  }});
-  let parentId = movedDoc.parent.id;
-  let bulkWrite = [];
-  let docs = collection.find({
-    'parent.id': parentId,
-    '_id': {$ne: movedDoc._id},
+  // Put the new doc half a step in front of its new order
+  // to ensure it's in front of whichever doc was there before
+  collection.update(docRef.id, {
+    $set: {order}
   }, {
-    fields: {order: 1, name: 1},
-    sort: {order: 1}
-  }).fetch();
-  docs.splice(order, 0, movedDoc);
-  docs.forEach((doc, index) => {
-    if (doc.order !== index){
-      bulkWrite.push({
-        updateOne: {
-          filter: {_id: doc._id},
-          update: {$set: {order: index}},
-        },
-      });
-    }
+    selector: {type: 'any'}
   });
-  if (Meteor.isServer){
-    collection.rawCollection().bulkWrite(bulkWrite);
-  } else {
-    bulkWrite.forEach(op => {
-      collection.update(
-        op.updateOne.filter,
-        op.updateOne.update,
-        {selector: {type: 'any'}}
-      );
-    });
-  }
-};
+  // reorder all related docs so that order is back to being a continous
+  // set of whole numbers
+  let movedDoc = fetchDocByRef(docRef, {fields: {ancestors: 1}});
+  let ancestorId = movedDoc.ancestors[0].id;
+  reorderDocs({collection, ancestorId});
+}
 
-export function reorderDocs({collection, parentId}){
+export function reorderDocs({collection, ancestorId}){
+  let orderedDocs = getDescendantsInDepthFirstOrder({collection, ancestorId});
   let bulkWrite = [];
-  collection.find({
-    'parent.id': parentId,
-  }, {
-    fields: {order: 1},
-    sort: {order: 1}
-  }).forEach((doc, index) => {
+  orderedDocs.forEach((doc, index) => {
     if (doc.order !== index){
       bulkWrite.push({
         updateOne : {
@@ -188,11 +133,24 @@ export function reorderDocs({collection, parentId}){
       });
     }
   });
-  if (Meteor.isServer){
-    collection.rawCollection().bulkWrite(bulkWrite);
+  if (Meteor.isServer && bulkWrite.length){
+    collection.rawCollection().bulkWrite(
+      bulkWrite,
+      {ordered : false},
+      function(e){
+        if (e) {
+          console.error('Bulk write failed: ');
+          console.error(e);
+        }
+      }
+    );
   } else {
     bulkWrite.forEach(op => {
-      collection.update(op.updateOne.filter, op.updateOne.update);
+      collection.update(
+        op.updateOne.filter,
+        op.updateOne.update,
+        {selector: {type: 'any'}}
+      );
     });
   }
 }

app/imports/api/parenting/organizeMethods.js

@@ -1,10 +1,13 @@
 import SimpleSchema from 'simpl-schema';
+import { union } from 'lodash';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
 import { updateParent } from '/imports/api/parenting/parenting.js';
-import { insertedDocAtOrder, removedDocAtOrder, safeUpdateDocOrder } from '/imports/api/parenting/order.js';
+import { reorderDocs, safeUpdateDocOrder } from '/imports/api/parenting/order.js';
 import { RefSchema } from '/imports/api/parenting/ChildSchema.js';
 import { assertDocEditPermission } from '/imports/api/sharing/sharingPermissions.js';
 import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
 import getCollectionByName from '/imports/api/parenting/getCollectionByName.js';
+import { recomputeCreatureById } from '/imports/api/creature/computation/recomputeCreature.js';
 
 const organizeDoc = new ValidatedMethod({
   name: 'organize.methods.organizeDoc',
@@ -13,7 +16,7 @@ const organizeDoc = new ValidatedMethod({
     parentRef: RefSchema,
     order: {
       type: Number,
-      min: 0,
+      // Should end in 0.5 to place it reliably between two existing documents
     },
   }).validator(),
   run({docRef, parentRef, order}) {
@@ -25,14 +28,28 @@ const organizeDoc = new ValidatedMethod({
     let parent = fetchDocByRef(parentRef);
     assertDocEditPermission(parent, this.userId);
 
-    // Reorder the documents in the doc's old parent
-    removedDocAtOrder({collection, doc});
-    // Reorder the docs in the destination parent
-    insertedDocAtOrder({collection, parentId: parentRef.id, order});
     // Change the doc's parent
     updateParent({docRef, parentRef});
-    // Change the doc's order
+    // Change the doc's order to be a half step ahead of its target location
     collection.update(doc._id, {$set: {order}}, {selector: {type: 'any'}});
+
+    // Reorder both ancestors' documents
+    let oldAncestorId = doc.ancestors[0].id;
+    reorderDocs({collection, ancestorId: oldAncestorId});
+
+    let newAncestorId = getRootId(parent);
+    if (newAncestorId !== oldAncestorId){
+      reorderDocs({collection, ancestorId: newAncestorId});
+    }
+
+    // Figure out which creatures need to be recalculated after this move
+    let docCreatures = getCreatureAncestors(doc);
+    let parentCreatures = getCreatureAncestors(parent);
+    let creaturesToRecompute = union(docCreatures, parentCreatures);
+    // Recompute the creatures
+    creaturesToRecompute.forEach(id => {
+      recomputeCreatureById(id);
+    });
   },
 });
 
@@ -42,14 +59,41 @@ const reorderDoc = new ValidatedMethod({
     docRef: RefSchema,
     order: {
       type: Number,
-      min: 0,
+      // Should end in 0.5 to place it reliably between two existing documents
     },
   }).validator(),
   run({docRef, order}) {
     let doc = fetchDocByRef(docRef);
     assertDocEditPermission(doc, this.userId);
-    safeUpdateDocOrder({docRef, order})
+    safeUpdateDocOrder({docRef, order});
+    // Recompute the affected creatures
+    getCreatureAncestors(doc).forEach(id => {
+      recomputeCreatureById(id);
+    });
   },
 });
 
+function getRootId(doc){
+  if (doc.ancestors && doc.ancestors.length && doc.ancestors[0]){
+    return doc.ancestors[0].id;
+  } else {
+    return doc._id;
+  }
+}
+
+function getCreatureAncestors(doc){
+  let ids = [];
+  if(doc.type === 'pc' || doc.type === 'npc' || doc.type === 'monster'){
+    ids.push(doc._id);
+  }
+  if (doc.ancestors){
+    doc.ancestors.forEach(ancestorRef => {
+      if (ancestorRef.collection === 'creatures'){
+        ids.push(ancestorRef.id);
+      }
+    });
+  }
+  return ids;
+}
+
 export { organizeDoc, reorderDoc };

app/imports/api/parenting/parenting.js

@@ -48,38 +48,38 @@ export function fetchParent({id, collection}){
 }
 
 export function fetchChildren({ collection, parentId, filter = {}, options = {sort: {order: 1}} }){
-  filter["parent.id"] = parentId;
+  filter['parent.id'] = parentId;
   let children = [];
   children.push(
     ...collection.find({
-      "parent.id": parentId
+      'parent.id': parentId
     }, options).fetch()
   );
   return children;
 }
 
 export function updateChildren({collection, parentId, filter = {}, modifier, options={}}){
-  filter["parent.id"] = parentId;
+  filter['parent.id'] = parentId;
   options.multi = true;
   collection.update(filter, modifier, options);
 }
 
 export function fetchDescendants({ collection, ancestorId, filter = {}, options}){
-  filter["ancestors.id"] = ancestorId;
+  filter['ancestors.id'] = ancestorId;
   let descendants = [];
   descendants.push(...collection.find(filter, options).fetch());
   return descendants;
 }
 
 export function updateDescendants({collection, ancestorId, filter = {}, modifier, options={}}){
-  filter["ancestors.id"] = ancestorId;
+  filter['ancestors.id'] = ancestorId;
   options.multi = true;
   options.selector = {type: 'any'};
   collection.update(filter, modifier, options);
 }
 
 export function forEachDescendant({collection, ancestorId, filter = {}, options}, callback){
-  filter["ancestors.id"] = ancestorId;
+  filter['ancestors.id'] = ancestorId;
   collection.find(filter, options).forEach(callback);
 }
 
@@ -200,21 +200,21 @@ export function getName(doc){
   if (doc.name) return name;
   var i = doc.ancestors.length;
   while(i--) {
-    if (ancestors[i].name) return ancestors[i].name;
+    if (doc.ancestors[i].name) return doc.ancestors[i].name;
   }
 }
 
-export function nodesToTree({collection, ancestorId, filter}){
+export function nodesToTree({collection, ancestorId, filter, options}){
   // Store a dict of all the nodes
   let nodeIndex = {};
   let nodeList = [];
+  if (!options) options = {};
+  options.sort = {order: 1};
   collection.find({
     'ancestors.id': ancestorId,
 		removed: {$ne: true},
     ...filter,
-  }, {
-    sort: {order: 1}
-  }).forEach( node => {
+  }, options).forEach( node => {
     let treeNode = {
       node: node,
       children: [],

app/imports/api/properties/Actions.js

@@ -1,6 +1,5 @@
 import SimpleSchema from 'simpl-schema';
 import ResourcesSchema from '/imports/api/properties/subSchemas/ResourcesSchema.js'
-import ResultsSchema from '/imports/api/properties/subSchemas/ResultsSchema.js';
 
 /*
  * Actions are things a character can do
@@ -41,10 +40,6 @@ let ActionSchema = new SimpleSchema({
   'tags.$': {
     type: String,
   },
-	results: {
-		type: ResultsSchema,
-		defaultValue: {},
-	},
   resources: {
     type: ResourcesSchema,
     defaultValue: {},

app/imports/api/properties/Adjustments.js

@@ -0,0 +1,27 @@
+import SimpleSchema from 'simpl-schema';
+
+const AdjustmentSchema = new SimpleSchema({
+	// The roll that determines how much to change the attribute
+  amount: {
+    type: String,
+    optional: true,
+    defaultValue: '1',
+  },
+	// Who this adjustment applies to
+	target: {
+		type: String,
+    defaultValue: 'every',
+		allowedValues: [
+      'self',   // the character who took the action
+      'each',   // rolled once for `each` target
+      'every',  // rolled once and applied to `every` target
+    ],
+	},
+	// The stat this rolls applies to
+	stat: {
+		type: String,
+    optional: true,
+	},
+});
+
+export { AdjustmentSchema };

app/imports/api/properties/Buffs.js

@@ -1,6 +1,4 @@
 import SimpleSchema from 'simpl-schema';
-import { Random } from 'meteor/random';
-import { StoredEffectSchema } from '/imports/api/properties/Effects.js';
 
 let BuffSchema = new SimpleSchema({
 	name: {
@@ -15,20 +13,12 @@ let BuffSchema = new SimpleSchema({
 		type: String,
 		optional: true,
 	},
-});
-
-// The effects in the stored buff need to be resolved to a number before being
-// placed on other characters, if they are applied to self, they can remain as
-// calculations, provided they don't contain any rolls
-let StoredBuffSchema = new SimpleSchema({
-	effects: {
-		type: Array,
-		defaultValue: [],
-	},
-	'effects.$': {
-		type: StoredEffectSchema,
-	},
-	target: {
+  applied: {
+    type: Boolean,
+    defaultValue: false,
+    index: 1,
+  },
+  target: {
 		type: String,
 		allowedValues: [
       'self',  // the character who took the buff
@@ -37,21 +27,14 @@ let StoredBuffSchema = new SimpleSchema({
     ],
 		defaultValue: 'every',
 	},
-}).extend(BuffSchema);
-
-let StoredBuffWithIdSchema = new SimpleSchema({
-	_id: {
-    type: String,
-    regEx: SimpleSchema.RegEx.Id,
-    autoValue(){
-      if (!this.isSet){
-        return Random.id();
-      }
-    },
-  },
-}).extend(StoredBuffSchema);
+});
 
 let AppliedBuffSchema = new SimpleSchema({
+  applied: {
+    type: Boolean,
+    defaultValue: true,
+    index: 1,
+  },
 	durationSpent: {
 		type: Number,
 		optional: true,
@@ -73,4 +56,4 @@ let AppliedBuffSchema = new SimpleSchema({
 	},
 }).extend(BuffSchema);
 
-export { AppliedBuffSchema, StoredBuffSchema, StoredBuffWithIdSchema };
+export { AppliedBuffSchema, BuffSchema };

app/imports/api/properties/ClassLevels.js

@@ -11,12 +11,6 @@ let ClassLevelSchema = new SimpleSchema({
     type: String,
 		regEx: VARIABLE_NAME_REGEX,
   },
-	// The variable name of the base class this level is attached to
-	baseClass: {
-		type: String,
-		regEx: VARIABLE_NAME_REGEX,
-		optional: true,
-	},
 	level: {
     type: SimpleSchema.Integer,
 		defaultValue: 1,

app/imports/api/properties/Damages.js

@@ -1,22 +1,14 @@
 import SimpleSchema from 'simpl-schema';
-import { Random } from 'meteor/random';
 import DAMAGE_TYPES from '/imports/constants/DAMAGE_TYPES.js';
 
 const DamageSchema = new SimpleSchema({
-  _id: {
-    type: String,
-    regEx: SimpleSchema.RegEx.Id,
-    autoValue(){
-      if (!this.isSet) return Random.id();
-    }
-  },
 	// The roll that determines how much to damage the attribute
-  damage: {
+  amount: {
     type: String,
     optional: true,
     defaultValue: '1d8 + strength.modifier',
   },
-	// Who this adjustment applies to
+	// Who this damage applies to
 	target: {
 		type: String,
     defaultValue: 'every',
@@ -33,4 +25,4 @@ const DamageSchema = new SimpleSchema({
 	},
 });
 
-export default DamageSchema;
+export { DamageSchema };

app/imports/api/properties/Effects.js

@@ -1,5 +1,4 @@
 import SimpleSchema from 'simpl-schema';
-import { Random } from 'meteor/random';
 
 /*
  * Effects are reason-value attached to skills and abilities
@@ -42,16 +41,6 @@ let EffectSchema = new SimpleSchema({
 	},
 });
 
-const StoredEffectSchema = new SimpleSchema({
-		_id: {
-			type: String,
-			regEx: SimpleSchema.RegEx.Id,
-			autoValue(){
-				if (!this.isSet) return Random.id();
-			}
-		},
-}).extend(EffectSchema);
-
 const ComputedOnlyEffectSchema = new SimpleSchema({
 	// The computed result of the effect
 	result: {
@@ -64,4 +53,4 @@ const ComputedEffectSchema = new SimpleSchema()
 	.extend(ComputedOnlyEffectSchema)
 	.extend(EffectSchema);
 
-export { EffectSchema, StoredEffectSchema, ComputedEffectSchema, ComputedOnlyEffectSchema };
+export { EffectSchema, ComputedEffectSchema, ComputedOnlyEffectSchema };

app/imports/api/properties/Rolls.js

@@ -1,5 +1,4 @@
 import SimpleSchema from 'simpl-schema';
-import RollResultsSchema from '/imports/api/properties/subSchemas/RollResultsSchema.js'
 
 /**
  * Rolls are children to actions or other rolls, they are triggered with 0 or
@@ -34,13 +33,6 @@ let RollSchema = new SimpleSchema({
   'tags.$': {
     type: String,
   },
-  rollResults: {
-    type: Array,
-    defaultValue: [],
-  },
-  'rollResults.$': {
-    type: RollResultsSchema,
-  },
 });
 
 export { RollSchema };

app/imports/api/properties/SavingThrows.js

@@ -1,5 +1,4 @@
 import SimpleSchema from 'simpl-schema';
-import ResultsSchema from '/imports/api/properties/subSchemas/ResultsSchema.js';
 
 // These are the rolls made when saves are called for
 // For the saving throw bonus or proficiency, see ./Skills.js
@@ -8,18 +7,10 @@ let SavingThrowSchema = new SimpleSchema ({
     type: String,
     optional: true,
   },
-  // The variable name of ability the saving throw relies on
-  ability: {
+  // The variable name of ability the save to roll
+  stat: {
     type: String,
     optional: true,
-  },
-	passResults: {
-		type: ResultsSchema,
-		defaultValue: {},
-	},
-  failResults: {
-    type: ResultsSchema,
-		defaultValue: {},
   },
 });
 

app/imports/api/properties/Toggles.js

@@ -0,0 +1,36 @@
+import SimpleSchema from 'simpl-schema';
+
+const ToggleSchema = new SimpleSchema({
+  name: {
+    type: String,
+    optional: true,
+  },
+  disabled: {
+    type: Boolean,
+    optional: true,
+  },
+  enabled: {
+    type: Boolean,
+    optional: true,
+  },
+  // if neither disabled or enabled, the condition will be run to determine
+  // if the children of the toggle should be active
+  condition: {
+    type: String,
+    optional: true,
+  },
+});
+
+const ComputedOnlyToggleSchema = new SimpleSchema({
+	// The computed result of the effect
+	toggleResult: {
+		type: SimpleSchema.oneOf(Number, String, Boolean),
+		optional: true,
+	},
+});
+
+const ComputedToggleSchema = new SimpleSchema()
+	.extend(ComputedOnlyToggleSchema)
+	.extend(ToggleSchema);
+
+export { ToggleSchema, ComputedOnlyToggleSchema, ComputedToggleSchema };

app/imports/api/properties/computedPropertySchemasIndex.js

@@ -1,31 +1,36 @@
 import SimpleSchema from 'simpl-schema';
 import { ActionSchema } from '/imports/api/properties/Actions.js';
+import { AdjustmentSchema } from '/imports/api/properties/Adjustments.js';
 import { AttackSchema } from '/imports/api/properties/Attacks.js';
 import { ComputedAttributeSchema } from '/imports/api/properties/Attributes.js';
-import { AppliedBuffSchema } from '/imports/api/properties/Buffs.js';
+import { BuffSchema } from '/imports/api/properties/Buffs.js';
 import { ClassLevelSchema } from '/imports/api/properties/ClassLevels.js';
+import { ContainerSchema } from '/imports/api/properties/Containers.js';
+import { DamageSchema } from '/imports/api/properties/Damages.js';
 import { DamageMultiplierSchema } from '/imports/api/properties/DamageMultipliers.js';
 import { ComputedEffectSchema } from '/imports/api/properties/Effects.js';
 import { ExperienceSchema } from '/imports/api/properties/Experiences.js';
 import { FeatureSchema } from '/imports/api/properties/Features.js';
 import { FolderSchema } from '/imports/api/properties/Folders.js';
+import { ItemSchema } from '/imports/api/properties/Items.js';
 import { NoteSchema } from '/imports/api/properties/Notes.js';
 import { ProficiencySchema } from '/imports/api/properties/Proficiencies.js';
 import { RollSchema } from '/imports/api/properties/Rolls.js';
 import { SavingThrowSchema } from '/imports/api/properties/SavingThrows.js';
 import { ComputedSkillSchema } from '/imports/api/properties/Skills.js';
 import { SlotSchema } from '/imports/api/properties/Slots.js';
-import { SpellListSchema } from '/imports/api/properties/SpellLists.js';
 import { SpellSchema } from '/imports/api/properties/Spells.js';
-import { ContainerSchema } from '/imports/api/properties/Containers.js';
-import { ItemSchema } from '/imports/api/properties/Items.js';
+import { SpellListSchema } from '/imports/api/properties/SpellLists.js';
+import { ToggleSchema } from '/imports/api/properties/Toggles.js';
 
 const propertySchemasIndex = {
   action: ActionSchema,
+  adjustment: AdjustmentSchema,
   attack: AttackSchema,
   attribute: ComputedAttributeSchema,
-  buff: AppliedBuffSchema,
+  buff: BuffSchema,
   classLevel: ClassLevelSchema,
+  damage: DamageSchema,
   damageMultiplier: DamageMultiplierSchema,
   effect: ComputedEffectSchema,
   experience: ExperienceSchema,
@@ -39,6 +44,7 @@ const propertySchemasIndex = {
   slot: SlotSchema,
   spellList: SpellListSchema,
   spell: SpellSchema,
+  toggle: ToggleSchema,
   container: ContainerSchema,
   item: ItemSchema,
   any: new SimpleSchema({}),

app/imports/api/properties/propertySchemasIndex.js

@@ -1,9 +1,11 @@
 import SimpleSchema from 'simpl-schema';
 import { ActionSchema } from '/imports/api/properties/Actions.js';
+import { AdjustmentSchema } from '/imports/api/properties/Adjustments.js';
 import { AttackSchema } from '/imports/api/properties/Attacks.js';
 import { AttributeSchema } from '/imports/api/properties/Attributes.js';
-import { StoredBuffSchema } from '/imports/api/properties/Buffs.js';
+import { BuffSchema } from '/imports/api/properties/Buffs.js';
 import { ClassLevelSchema } from '/imports/api/properties/ClassLevels.js';
+import { DamageSchema } from '/imports/api/properties/Damages.js';
 import { DamageMultiplierSchema } from '/imports/api/properties/DamageMultipliers.js';
 import { EffectSchema } from '/imports/api/properties/Effects.js';
 import { ExperienceSchema } from '/imports/api/properties/Experiences.js';
@@ -17,15 +19,18 @@ import { SkillSchema } from '/imports/api/properties/Skills.js';
 import { SlotSchema } from '/imports/api/properties/Slots.js';
 import { SpellListSchema } from '/imports/api/properties/SpellLists.js';
 import { SpellSchema } from '/imports/api/properties/Spells.js';
+import { ToggleSchema } from '/imports/api/properties/Toggles.js';
 import { ContainerSchema } from '/imports/api/properties/Containers.js';
 import { ItemSchema } from '/imports/api/properties/Items.js';
 
 const propertySchemasIndex = {
   action: ActionSchema,
+  adjustment: AdjustmentSchema,
   attack: AttackSchema,
   attribute: AttributeSchema,
-  buff: StoredBuffSchema,
+  buff: BuffSchema,
   classLevel: ClassLevelSchema,
+  damage: DamageSchema,
   damageMultiplier: DamageMultiplierSchema,
   effect: EffectSchema,
   experience: ExperienceSchema,
@@ -39,6 +44,7 @@ const propertySchemasIndex = {
   slot: SlotSchema,
   spellList: SpellListSchema,
   spell: SpellSchema,
+  toggle: ToggleSchema,
   container: ContainerSchema,
   item: ItemSchema,
   any: new SimpleSchema({}),

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

@@ -1,36 +0,0 @@
-import SimpleSchema from 'simpl-schema';
-
-import AdjustmentSchema from '/imports/api/properties/subSchemas/AdjustmentSchema.js';
-import DamageSchema from '/imports/api/properties/subSchemas/DamageSchema.js';
-import { StoredBuffWithIdSchema } from '/imports/api/properties/Buffs.js';
-
-let ResultsSchema = new SimpleSchema({
-  // Adjustments applied when taking this action
-  // Ideally, if these adjustments can't be made, the action should be unusable
-  adjustments: {
-    type: Array,
-    defaultValue: [],
-  },
-  'adjustments.$': {
-    type: AdjustmentSchema,
-  },
-  // Damage is done to hitpoints or hitpoint-like stats
-  // has a damage type, can be mitigated by resistances, etc.
-  damages: {
-    type: Array,
-    defaultValue: [],
-  },
-  'damages.$': {
-    type: DamageSchema,
-  },
-  // Buffs applied when taking this action
-  buffs: {
-    type: Array,
-    defaultValue: [],
-  },
-  'buffs.$': {
-    type: StoredBuffWithIdSchema,
-  },
-});
-
-export default ResultsSchema;

app/imports/api/sharing/sharing.js

@@ -3,18 +3,64 @@ import { assertOwnership } from '/imports/api/sharing/sharingPermissions.js';
 import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
 import getCollectionByName from '/imports/api/parenting/getCollectionByName.js';
 import { RefSchema } from '/imports/api/parenting/ChildSchema.js';
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
 
 const setPublic = new ValidatedMethod({
   name: 'sharing.methods.setPublic',
 	validate: new SimpleSchema({
 		docRef: RefSchema,
-    public: { type: Boolean },
+    isPublic: { type: Boolean },
   }).validator(),
-  run({docRef, public}){
+  run({docRef, isPublic}){
 		let doc = fetchDocByRef(docRef);
 		assertOwnership(doc, this.userId);
-		getCollectionByName(docRef.collection).update(docRef.id, {$set: {public}});
+		return getCollectionByName(docRef.collection).update(docRef.id, {
+      $set: {public: isPublic},
+    });
 	},
 });
 
-export { setPublic };
+const updateUserSharePermissions = new ValidatedMethod({
+  name: 'sharing.methods.updateUserSharePermissions',
+	validate: new SimpleSchema({
+		docRef: RefSchema,
+    userId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+    role: {
+      type: String,
+      allowedValues: ['reader', 'writer', 'none'],
+    },
+  }).validator(),
+  run({docRef, userId, role}){
+		let doc = fetchDocByRef(docRef);
+    if (role === 'none'){
+      // only asser ownership if you aren't removing yourself
+      if (this.userId !== userId){
+        assertOwnership(doc, this.userId);
+      }
+      return getCollectionByName(docRef.collection).update(docRef.id, {
+        $pullAll: { readers: userId, writers: userId },
+      });
+    }
+    if (doc.owner === userId){
+      throw new Meteor.Error('Sharing update failed',
+      'User is already the owner of this document');
+    }
+    assertOwnership(doc, this.userId);
+    if (role === 'reader'){
+      return getCollectionByName(docRef.collection).update(docRef.id, {
+        $addToSet: { readers: userId },
+        $pullAll: { writers: userId },
+      });
+    } else if (role === 'writer'){
+      return getCollectionByName(docRef.collection).update(docRef.id, {
+        $addToSet: { writers: userId },
+        $pullAll: { readers: userId },
+      });
+    }
+	},
+});
+
+export { setPublic, updateUserSharePermissions };

app/imports/api/sharing/sharingPermissions.js

@@ -1,17 +1,18 @@
 import { _ } from 'meteor/underscore';
 import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
 function assertIdValid(userId){
   if (!userId || typeof userId !== 'string'){
-    throw new Meteor.Error("Permission denied",
-      "No user ID given for edit permission check");
+    throw new Meteor.Error('Permission denied',
+      'No user ID given for edit permission check');
   }
 }
 
 function assertdocExists(doc){
   if (!doc){
-    throw new Meteor.Error("Permission denied",
-      `No such document exists`);
+    throw new Meteor.Error('Permission denied',
+      'No such document exists');
   }
 }
 
@@ -21,8 +22,8 @@ export function assertOwnership(doc, userId){
   if (doc.owner === userId ){
     return true;
   } else {
-    throw new Meteor.Error("Permission denied",
-      `You are not the owner of this document`);
+    throw new Meteor.Error('Permission denied',
+      'You are not the owner of this document');
   }
 }
 
@@ -35,11 +36,34 @@ export function assertOwnership(doc, userId){
 export function assertEditPermission(doc, userId) {
   assertIdValid(userId);
   assertdocExists(doc);
-  if (doc.owner === userId || _.contains(doc.writers, userId)){
+  let user = Meteor.users.findOne(userId, {
+    fields: {
+      'services.patreon': 1,
+      'roles': 1,
+    }
+  });
+
+  // Admin override
+  if (user.roles && user.roles.includes('admin')){
+    return true;
+  }
+
+  // Ensure the user is of a tier with paid benefits
+  let tier = getUserTier(user);
+  if (!tier.paidBenefits){
+    throw new Meteor.Error('Edit permission denied',
+      `The ${tier.name} tier does not allow you to edit this document`);
+  }
+
+  // Ensure the user is authorized for this specific document
+  if (
+    doc.owner === userId ||
+    _.contains(doc.writers, userId)
+  ){
     return true;
   } else {
-    throw new Meteor.Error("Edit permission denied",
-      `You do not have permission to edit this document`);
+    throw new Meteor.Error('Edit permission denied',
+      'You do not have permission to edit this document');
   }
 }
 
@@ -74,8 +98,8 @@ export function assertViewPermission(doc, userId) {
   ){
     return true;
   } else {
-    throw new Meteor.Error("View permission denied",
-      `You do not have permission to view this character`);
+    throw new Meteor.Error('View permission denied',
+      'You do not have permission to view this character');
   }
 }
 

app/imports/api/users/Invites.js

@@ -15,6 +15,7 @@ let InviteSchema = new SimpleSchema({
     regEx: SimpleSchema.RegEx.Id,
     optional: true,
     index: 1,
+    unique: 1,
   },
   inviteToken: {
     type: String,
@@ -25,10 +26,6 @@ let InviteSchema = new SimpleSchema({
   isFunded: {
     type: Boolean,
   },
-  isRedundant: {
-    type: Boolean,
-    optional: true,
-  },
   // The timestamp of when the invitee was confirmed
   // Older invites have priority over newer ones
   dateConfirmed: {
@@ -119,14 +116,15 @@ const acceptInviteToken = new ValidatedMethod({
     },
   }).validator(),
   run({inviteToken}) {
-    if (this.userId) {
+    if (!this.userId) {
       throw new Meteor.Error('Invites.methods.acceptToken.denied',
       'You need to be the logged in to accept a token');
     }
+    if (Meteor.isClient) return;
     let invite = Invites.findOne({inviteToken});
     if (!invite){
       throw new Meteor.Error('Invites.methods.acceptToken.notFound',
-      'No invite could be found for this token');
+      'No invite could be found for this link, maybe it has already been claimed');
     }
     // If the invitee is already filled, fix unexpected case by deleting the token
     if (invite.invitee){
@@ -134,7 +132,7 @@ const acceptInviteToken = new ValidatedMethod({
         $unset: {inviteToken: 1}
       });
       throw new Meteor.Error('Invites.methods.acceptToken.alreadyAccepted',
-      'This invite already has an invitee, and shouldn\'t have a token');
+      'This invite has already been claimed');
     }
     if (this.userId === invite.inviter){
       throw new Meteor.Error('Invites.methods.acceptToken.ownToken',
@@ -147,7 +145,41 @@ const acceptInviteToken = new ValidatedMethod({
   },
 });
 
+const revokeInvite = new ValidatedMethod({
+  name: 'Invites.methods.revokeInvite',
+  validate: new SimpleSchema({
+    inviteId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    },
+  }).validator(),
+  run({inviteId}) {
+    if (!this.userId) {
+      throw new Meteor.Error('Invites.methods.revokeInvite.denied',
+      'You need to be the logged in to revoke a token');
+    }
+    if (Meteor.isClient) return;
+    let invite = Invites.findOne(inviteId);
+    if (!invite){
+      throw new Meteor.Error('Invites.methods.revokeInvite.notFound',
+      'No invite could be found for this id');
+    }
+    if (this.userId !== invite.inviter) {
+      throw new Meteor.Error('Invites.methods.revokeInvite.denied',
+      'You are not the owner of this invite');
+    }
+
+    // If the invitee is empty, the token has already been revoked
+    if (!invite.invitee){
+      return;
+    }
+    Invites.update(invite._id, {
+      $unset: {invitee: 1, dateConfirmed: 1},
+    });
+  },
+});
+
 Invites.attachSchema(InviteSchema);
 
 export default Invites;
-export { alignInvitesWithPatreonTier, getInviteToken, acceptInviteToken };
+export { alignInvitesWithPatreonTier, getInviteToken, acceptInviteToken, revokeInvite };

app/imports/api/users/Users.js

@@ -66,7 +66,22 @@ const userSchema = new SimpleSchema({
 	},
 	'subscribedLibraries.$': {
 		type: String,
+    regEx: SimpleSchema.RegEx.Id,
 	},
+  subscribedCharacters: {
+		type: Array,
+		defaultValue: [],
+		max: 100,
+	},
+	'subscribedCharacters.$': {
+		type: String,
+    regEx: SimpleSchema.RegEx.Id,
+	},
+  profile: {
+    type: Object,
+    blackbox: true,
+    optional: true,
+  },
 });
 
 Meteor.users.attachSchema(userSchema);
@@ -127,6 +142,55 @@ Meteor.users.isAdmin = function(userId){
 	return user && user.roles.includes('admin');
 }
 
+Meteor.users.canPickUsername = new ValidatedMethod({
+	name: 'Users.methods.canPickUsername',
+	validate: userSchema.pick('username').validator(),
+	run({username}){
+		if (Meteor.isClient) return;
+		let user = Accounts.findUserByUsername(username);
+    // You can pick your own username
+    if (user && user._id === this.userId){
+      return false;
+    }
+		return !!user;
+	}
+});
+
+Meteor.users.setUsername = new ValidatedMethod({
+  name: 'Users.methods.setUsername',
+	validate: userSchema.pick('username').validator(),
+	run({username}){
+		if (!this.userId) throw 'Can only set your username if logged in';
+    if (Meteor.isClient) return;
+    return Accounts.setUsername(this.userId, username)
+	}
+});
+
+Meteor.users.subscribeToLibrary = new ValidatedMethod({
+  name: 'Users.methods.subscribeToLibrary',
+	validate: new SimpleSchema({
+		libraryId:{
+			type: String,
+      regEx: SimpleSchema.RegEx.Id,
+		},
+    subscribe: {
+      type: Boolean,
+    },
+	}).validator(),
+	run({libraryId, subscribe}){
+		if (!this.userId) throw 'Can only subscribe if logged in';
+    if (subscribe){
+      return Meteor.users.update(this.userId, {
+        $addToSet: {subscribedLibraries: libraryId},
+      });
+    } else {
+      return Meteor.users.update(this.userId, {
+        $pullAll: {subscribedLibraries: libraryId},
+      });
+    }
+	}
+});
+
 Meteor.users.findUserByUsernameOrEmail = new ValidatedMethod({
 	name: 'Users.methods.findUserByUsernameOrEmail',
 	validate: new SimpleSchema({

app/imports/api/users/patreon/tiers.js

@@ -1,5 +1,6 @@
 import { findLast } from 'lodash';
 import getEntitledCents from '/imports/api/users/patreon/getEntitledCents.js';
+import Invites from '/imports/api/users/Invites.js';
 
 const TIERS = [
   {
@@ -58,11 +59,22 @@ export function getTierByEntitledCents(entitledCents = 0){
 export function getUserTier(user){
   if (!user) throw 'user must be provided';
   if (typeof user === 'string'){
-    user = Meteor.users.findOne(user);
+    user = Meteor.users.findOne(user, {
+      fields: {
+        'services.patreon': 1,
+      }
+    });
     if (!user) throw 'User not found';
   }
   const entitledCents = getEntitledCents(user);
-  return getTierByEntitledCents(entitledCents);
+  const tier = getTierByEntitledCents(entitledCents);
+  if (tier.paidBenefits) return tier;
+  let invite = Invites.findOne({invitee: user._id, isFunded: true});
+  if (invite){
+    return GUEST_TIER;
+  } else {
+    return tier;
+  }
 }
 
 export default TIERS;

app/imports/constants/PROPERTIES.js

@@ -3,6 +3,10 @@ const PROPERTIES = Object.freeze({
     icon: 'offline_bolt',
     name: 'Action'
   },
+  adjustment: {
+    icon: 'warning',
+    name: 'Attribute damage'
+  },
   attack: {
     icon: 'bolt',
     name: 'Attack'
@@ -19,6 +23,10 @@ const PROPERTIES = Object.freeze({
     icon: 'school',
     name: 'Class level'
   },
+  damage: {
+    icon: 'report',
+    name: 'Damage'
+  },
   damageMultiplier: {
     icon: 'layers',
     name: 'Damage multiplier'
@@ -75,6 +83,10 @@ const PROPERTIES = Object.freeze({
     icon: 'category',
     name: 'Item'
   },
+  toggle: {
+    icon: 'power_settings_new',
+    name: 'Toggle'
+  },
 });
 
 export default PROPERTIES;

app/imports/math.js

@@ -0,0 +1,9 @@
+import { create, all } from 'mathjs';
+const math = create(all);
+math.import({
+  'if': function(pred, a, b) {
+      return pred ? a : b;
+  }
+});
+
+export default math;

app/imports/server/publications/characterList.js

@@ -1,37 +1,42 @@
-import Creatures from "/imports/api/creature/Creatures.js";
+import Creatures from '/imports/api/creature/Creatures.js';
 import Parties from '/imports/api/campaign/Parties.js';
 
-Meteor.publish("characterList", function(){
-	var userId = this.userId;
-	if (!userId) {
-		this.ready();
-		return;
-	}
-	return [
-			Creatures.find(
-			{$or: [{readers: userId}, {writers: userId}, {owner: userId}], type: "pc"},
-			{
-				fields: {
-					name: 1,
-					urlName: 1,
-					race: 1,
-					alignment: 1,
-					gender: 1,
-					readers: 1,
-					writers:1,
-					owner: 1,
-					color: 1,
-					picture: 1,
-				}
-			}
-		),
-		Parties.find({owner: userId}),
-	];
+Meteor.publish('characterList', function(){
+  this.autorun(function (){
+    var userId = this.userId;
+    if (!userId) {
+      return this.ready();
+    }
+    const user = Meteor.users.findOne(this.userId, {
+      fields: {subscribedCharacters: 1}
+    });
+    const subs = user && user.subscribedCharacters || [];
+    return [
+        Creatures.find({
+          $or: [
+            {readers: userId},
+            {writers: userId},
+            {owner: userId},
+            {_id: {$in: subs}},
+          ],
+          type: 'pc',
+        }, {
+          fields: {
+            name: 1,
+            initial: 1,
+            alignment: 1,
+            gender: 1,
+            readers: 1,
+            writers:1,
+            owner: 1,
+            color: 1,
+            picture: 1,
+            avatarPicture: 1,
+            public: 1,
+          }
+        }
+      ),
+      Parties.find({owner: userId}),
+    ];
+  });
 });
-
-DDPRateLimiter.addRule({
-	name: "characterList",
-	type: "subscription",
-	userId(){ return true; },
-	connectionId(){ return true; },
-}, 8, 5000);

app/imports/server/publications/icons.js

@@ -1,11 +1,10 @@
 import Icons from '/imports/api/icons/Icons.js';
 
-Meteor.publish("sampleIcons", function(){
+Meteor.publish('sampleIcons', function(){
 	return Icons.find({}, {limit: 50});
 });
 
-
-Meteor.publish("searchIcons", function(searchValue) {
+Meteor.publish('searchIcons', function(searchValue) {
   // Don't publish anything if there's no search value
   if (!searchValue) {
     return [];
@@ -15,11 +14,11 @@ Meteor.publish("searchIcons", function(searchValue) {
     {
       // relevant documents have a higher score.
       fields: {
-        score: { $meta: "textScore" }
+        score: { $meta: 'textScore' }
       },
       // `score` property specified in the projection fields above.
       sort: {
-        score: { $meta: "textScore" }
+        score: { $meta: 'textScore' }
       }
     }
   );

app/imports/server/publications/index.js

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

app/imports/server/publications/library.js

@@ -1,66 +1,61 @@
+import SimpleSchema from 'simpl-schema';
 import Libraries from '/imports/api/library/Libraries.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 
 const standardLibraryIds = [
-	'SRDLibraryGA3XWsd',
+  'SRDLibraryGA3XWsd',
 ];
 
 Meteor.publish('standardLibraries', function(){
-	return Libraries.find({_id: {$in: standardLibraryIds}});
-});
-
-Meteor.publish('standardLibraryItems', function(categoryKey){
-	return LibraryItems.find({
-		library: {$in: standardLibraryIds},
-		'settings.category': categoryKey,
-	}, {
-		sort: {name: 1},
-	});
-});
-
-Meteor.publish('standardLibrarySpells', function(level){
-	return LibrarySpells.find({
-		library: {$in: standardLibraryIds},
-		level,
-	}, {
-		sort: {name: 1},
-	});
+  return Libraries.find({_id: {$in: standardLibraryIds}});
 });
 
 Meteor.publish('libraries', function(){
-	const user = Meteor.user();
-	const userId = user && user._id;
-	if (!userId) return [];
-	const subs = user && user.subscribedLibraries || [];
-	return Libraries.find({
-		$or: [
-			{owner: userId},
-			{writers: userId},
-			{readers: userId},
-			{_id: {$in: subs}},
-		]
-	});
+  this.autorun(function (){
+    if (!this.userId) {
+      return this.ready();
+    }
+    const user = Meteor.users.findOne(this.userId, {
+      fields: {subscribedLibraries: 1}
+    });
+    const subs = user && user.subscribedLibraries || [];
+    return Libraries.find({
+      $or: [
+        {owner: this.userId},
+        {writers: this.userId},
+        {readers: this.userId},
+        {_id: {$in: subs}},
+      ]
+    });
+  });
+});
+
+let libraryIdSchema = new SimpleSchema({
+  libraryId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  },
 });
 
 Meteor.publish('library', function(libraryId){
-	const user = Meteor.user();
-	const userId = user && user._id;
-	if (!userId) return [];
-	const subs = user && user.subscribedLibraries || [];
-	let libraryCursor = Libraries.find({
-		_id: libraryId,
-		$or: [
-			{owner: userId},
-			{writers: userId},
-			{readers: userId},
-			{_id: {$in: subs}},
-		],
-	});
-	if (!libraryCursor.count()) return [];
-	return [
-		libraryCursor,
-		LibraryNodes.find({
-			'ancestors.id': 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},
+      ],
+    });
+    if (!libraryCursor.count()) return this.ready();
+    return [
+      libraryCursor,
+      LibraryNodes.find({
+        'ancestors.id': libraryId,
+      }),
+    ];
+  });
 });

app/imports/server/publications/singleCharacter.js

@@ -1,51 +1,33 @@
+import SimpleSchema from 'simpl-schema';
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 
-Meteor.publish('singleCharacter', function(charId){
-	userId = this.userId;
-	var char = Creatures.findOne({
-		_id: charId,
-		$or: [
-			{readers: userId},
-			{writers: userId},
-			{owner: userId},
-			{'settings.viewPermission': 'public'},
-		],
-	});
-	if (char){
-		return [
-			Creatures.find({_id: charId}),
-			CreatureProperties.find({
-				'ancestors.id': charId,
-			}),
-		];
-	} else {
-		return [];
-	}
+let schema = new SimpleSchema({
+  creatureId: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  },
 });
 
-DDPRateLimiter.addRule({
-	name: 'singleCharacter',
-	type: 'subscription',
-	userId: null,
-	connectionId(){ return true; },
-}, 8, 10000, function(reply, ruleInput){
-	if(!reply.allowed){
-		logRateError(reply, ruleInput);
-	}
-});
-
-Meteor.publish('singleCharacterName', function(charId){
-	userId = this.userId;
-	return Creatures.find({
-		_id: charId,
-		$or: [
-			{readers: userId},
-			{writers: userId},
-			{owner: userId},
-			{'settings.viewPermission': 'public'},
-		],
-	}, {
-		fields:{'name': 1}
-	});
+Meteor.publish('singleCharacter', function(creatureId){
+  schema.validate({ creatureId });
+  this.autorun(function (){
+    let userId = this.userId;
+    let creatureCursor = Creatures.find({
+      _id: creatureId,
+      $or: [
+        {readers: userId},
+        {writers: userId},
+        {owner: userId},
+        {public: true},
+      ],
+    });
+    if (!creatureCursor.count()) return this.ready();
+    return [
+      creatureCursor,
+      CreatureProperties.find({
+        'ancestors.id': creatureId,
+      }),
+    ];
+  });
 });

app/imports/server/publications/users.js

@@ -1,3 +1,4 @@
+import SimpleSchema from 'simpl-schema';
 import '/imports/api/users/Users.js';
 import Invites from '/imports/api/users/Invites.js';
 
@@ -8,21 +9,44 @@ Meteor.publish('user', function(){
       username: 1,
       apiKey: 1,
       darkMode: 1,
+      subscribedLibraries: 1,
+      profile: 1,
       'services.patreon.id': 1,
       'services.patreon.entitledCents': 1,
       'services.patreon.entitledCentsOverride': 1,
+      'services.google.id': 1,
+      'services.google.picture': 1,
+      'services.google.name': 1,
+      'services.google.email': 1,
+      'services.google.locale': 1,
     }}),
     Invites.find({
       $or: [
         {inviter: this.userId},
         {invitee: this.userId}
       ],
+    }, {
+      fields: {
+        inviteToken: 0,
+      }
     }),
   ];
 });
 
+let userIdsSchema = new SimpleSchema({
+  ids: {
+    type: Array,
+    optional: true,
+  },
+  'ids.$':{
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  }
+})
+
 Meteor.publish('userPublicProfiles', function(ids){
-	if (!this.userId || !Array.isArray(ids)) return [];
+  userIdsSchema.validate({ids});
+	if (!this.userId || !ids) return this.ready();
 	return Meteor.users.find({
 		_id: {$in: ids}
 	},{

app/imports/ui/components/ColorPicker.Story.vue

@@ -1,26 +0,0 @@
-<template lang="html">
-	<v-layout justify-center>
-		<color-picker v-model="color"/>
-	</v-layout>
-</template>
-
-<script>
-	import ColorPicker from '/imports/ui/components/ColorPicker.vue';
-
-	export default {
-		data(){ return {
-			color: '#CE93D8',
-		}},
-		components: {
-			ColorPicker,
-		},
-		watch: {
-			color(newColor){
-				console.log(`%c${newColor}`, `background: ${newColor};`);
-			},
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

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/ColumnLayout.Story.vue

@@ -1,24 +0,0 @@
-<template lang="html">
-  <column-layout>
-		<div v-for="(height, n) in cardHeights" :key="n">
-			<v-card :height="height"/>
-		</div >
-  </column-layout>
-</template>
-
-<script>
-	import ColumnLayout from "/imports/ui/components/ColumnLayout.vue";
-	import { _ } from "meteor/underscore";
-	export default {
-		dontWrap: true,
-		data(){return{
-			cardHeights: _.times(12, n => `${_.random(100, 500)}px`),
-		}},
-		components: {
-			ColumnLayout,
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/ColumnLayout.vue

@@ -36,6 +36,12 @@ export default {
 		padding: 4px;
 	}
 	.column-layout >>> > div {
+    /*
+      Table and width set because firefox does not support break-inside: avoid
+    */
+    display: table;
+    table-layout: fixed;
+    width: 100%;
 		-webkit-backface-visibility: hidden;
 		-webkit-transform: translateX(0);
 		-webkit-column-break-inside: avoid;

app/imports/ui/components/IconSearch.Story.vue

@@ -1,16 +0,0 @@
-<template lang="html">
-	<icon-search/>
-</template>
-
-<script>
-	import IconSearch from '/imports/ui/components/IconSearch.vue';
-
-	export default {
-		components: {
-			IconSearch,
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/LabeledFab.vue

@@ -17,7 +17,6 @@
    * Because speed dials only work well with v-btn's as children, this hacky
    * component creates a v-btn with a label.
    */
-   console.log('labeled fab reporting for duty')
   export default {
     props: ['icon', 'label'],
   }

app/imports/ui/components/ToolbarCard.vue

@@ -1,18 +1,21 @@
 <template lang="html">
-  <v-card :hover="hasClickListener" @click="$emit('click')">
-  	<v-toolbar
-			flat
-			:style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
-			:color="color"
-			:dark="isDark"
-			@click="$emit('toolbarclick')"
-		>
-  		<slot name="toolbar"/>
-  	</v-toolbar>
-		<div
-		>
-			<slot/>
-		</div>
+  <v-card
+    :hover="hasClickListener"
+    class="toolbar-card"
+    @click="$emit('click')"
+  >
+    <v-toolbar
+      flat
+      :style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
+      :color="color"
+      :dark="isDark"
+      @click="$emit('toolbarclick')"
+    >
+      <slot name="toolbar" />
+    </v-toolbar>
+    <div>
+      <slot />
+    </div>
   </v-card>
 </template>
 
@@ -41,5 +44,8 @@
 	};
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
+.toolbar-card .v-toolbar__title {
+  font-size: 14px;
+}
 </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/computation/Computed.vue

@@ -79,6 +79,9 @@ export default {
 </script>
 
 <style lang="css">
+  .computed {
+    display: inline-block;
+  }
   .computed.symbols-are-errors .math-symbol {
     color: red;
   }

app/imports/ui/components/computation/ComputedForCreature.vue

@@ -11,7 +11,7 @@ import Computed from '/imports/ui/components/computation/Computed.vue';
 
 export default {
   inject: {
-    computationContext: { default: {} }
+    context: { default: {} }
   },
   components: {
     Computed,
@@ -24,8 +24,8 @@ export default {
   },
   computed: {
     scope(){
-      return this.computationContext.creature &&
-      this.computationContext.creature.variables;
+      return this.context.creature &&
+      this.context.creature.variables;
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <template lang="html">
-	<v-menu
+  <v-menu
     v-model="menu"
     :close-on-content-click="false"
     lazy
@@ -7,21 +7,25 @@
     full-width
     min-width="290px"
   >
-    <template v-slot:activator="{ on }">
+    <template #activator="{ on }">
       <v-text-field
         :value="formattedSafeValue"
         v-bind="$attrs"
         prepend-icon="event"
         readonly
-        v-on="on"
-				:loading="loading"
+        :loading="loading"
         :error-messages="errors"
-				@focus="focused = true"
-				@blur="focused = false"
-				box
-      ></v-text-field>
+        :disabled="isDisabled"
+        box
+        v-on="on"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
     </template>
-    <v-date-picker :value="formattedSafeValue" @input="dateInput"></v-date-picker>
+    <v-date-picker
+      :value="formattedSafeValue"
+      @input="dateInput"
+    />
   </v-menu>
 </template>
 
@@ -34,17 +38,17 @@ export default {
 	data(){return {
 		menu: false,
 	};},
+	computed: {
+		formattedSafeValue(){
+			return format(this.safeValue, 'YYYY-MM-DD')
+		},
+	},
 	methods: {
 		dateInput(e){
 			this.menu = false;
 			this.input(e);
 		},
 	},
-	computed: {
-		formattedSafeValue(){
-			return format(this.safeValue, 'YYYY-MM-DD')
-		},
-	},
 }
 </script>
 

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

@@ -0,0 +1,18 @@
+<template lang="html">
+  <v-checkbox
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :input-value="safeValue"
+    :disabled="isDisabled"
+    @change="change"
+  />
+</template>
+
+<script>
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+  export default {
+    mixins: [SmartInput],
+  };
+</script>

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

@@ -5,8 +5,10 @@
     :error-messages="errors"
     :value="safeValue"
     :menu-props="{auto: true, lazy: true}"
+    :search-input.sync="searchInput"
+    :disabled="isDisabled"
     box
-    @change="change"
+    @change="customChange"
     @focus="focused = true"
     @blur="focused = false"
   >
@@ -22,5 +24,14 @@
 
 	export default {
 		mixins: [SmartInput],
+    data(){ return {
+      searchInput: '',
+    }},
+    methods: {
+      customChange(val){
+        this.change(val);
+        this.searchInput = '';
+      },
+    }
 	};
 </script>

app/imports/ui/components/global/SmartInput.Story.vue

@@ -1,92 +0,0 @@
-<template lang="html">
-	<v-container grid-list-lg>
-		<v-layout row wrap align-center>
-
-			<v-flex xs6>
-				<text-field
-					:value="value1"
-					@change="value1Change"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				<div class="flex">
-					{{value1}}
-				</div>
-			</v-flex>
-
-			<v-flex xs6>
-				<text-field
-					:value="changingValue"
-					@change="(val, ack) => {changingValue = val; ack()}"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				{{changingValue}}
-			</v-flex>
-
-			<v-flex xs6>
-				<text-area
-					:value="value2"
-					@change="value2Change"
-					label="text-area"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				{{value2}}
-			</v-flex>
-
-			<v-flex xs6>
-				<smart-select
-					:value="value3"
-					:items="['meep', 'moop', 'maap']"
-					label="select"
-					@change="(val, ack) => {setTimeout(() => {value3 = val; ack()}, 700)}"
-				/>
-			</v-flex>
-			<v-flex xs6>
-				{{value3}}
-			</v-flex>
-
-		</v-layout>
-	</v-container>
-</template>
-
-<script>
-	export default {
-		data(){ return {
-			value1: 'Five letters minimum, always trimmed',
-			value2: 'Takes 2s to write',
-			value3: 'meep',
-			changingValue: `Changes every 3s ${Math.random().toFixed(4)}`,
-		}},
-		methods: {
-			value1Change(val, ack){
-				let error;
-				val = val.trim();
-				if (!val || val.length < 5){
-					error = "Too short";
-				} else {
-					this.value1 = val;
-				}
-				ack(error);
-			},
-			value2Change(val, ack){
-				setTimeout(() => {
-					this.value2 = val;
-					ack();
-				}, 2000);
-			},
-		},
-		mounted() {
-	    setInterval(() => {
-	      this.changingValue = `Changes every 3s ${Math.random().toFixed(4)}`;
-	    }, 3000);
-	  },
-	};
-</script>
-
-<style lang="css" scoped>
-	.layout {
-		margin: 20px 0;
-	}
-</style>

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

@@ -9,6 +9,9 @@
 import { debounce } from 'lodash';
 
 export default {
+  inject: {
+    context: { default: {} }
+  },
   inheritAttrs: false,
   data(){ return {
     error: false,
@@ -20,12 +23,9 @@ export default {
     inputValue: this.value,
   };},
   props: {
-    value: [String, Number, Date, Array],
-    debounceTime: {
-      type: Number,
-      default: 750,
-    },
+    value: [String, Number, Date, Array, Boolean],
     errorMessages: [String, Array],
+    disabled: Boolean,
   },
   watch: {
     focused(newFocus){
@@ -54,7 +54,7 @@ export default {
         this.safeValue = newValue;
       }
     },
-    safeValue(newSafeValue){
+    safeValue(){
       // The safe value only gets updated from the parent, so it must be valid
       this.error = false;
       this.ackErrors = null;
@@ -104,6 +104,16 @@ export default {
       }
       return errors;
     },
+    isDisabled(){
+      return this.context.editPermission === false || this.disabled;
+    },
+    debounceTime() {
+      if (Number.isFinite(this.context.debounceTime)){
+        return this.context.debounceTime;
+      } else {
+        return 750;
+      }
+    },
   },
   created(){
     this.debouncedChange = debounce(this.change, this.debounceTime);

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

@@ -1,17 +1,21 @@
 <template lang="html">
   <v-select
-		v-bind="$attrs"
-		:loading="loading"
-		:error-messages="errors"
-		:value="safeValue"
-		:menu-props="{auto: true, lazy: true}"
-		@change="change"
-		@focus="focused = true"
-		@blur="focused = false"
-		box
-	>
-		<slot name="prepend" slot="prepend"/>
-	</v-select>
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :menu-props="{auto: true, lazy: true}"
+    :disabled="isDisabled"
+    box
+    @change="change"
+    @focus="focused = true"
+    @blur="focused = false"
+  >
+    <slot
+      slot="prepend"
+      name="prepend"
+    />
+  </v-select>
 </template>
 
 <script>

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

@@ -0,0 +1,18 @@
+<template lang="html">
+  <v-switch
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :input-value="safeValue"
+    :disabled="isDisabled"
+    @change="change"
+  />
+</template>
+
+<script>
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+  export default {
+    mixins: [SmartInput],
+  };
+</script>

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

@@ -1,15 +1,16 @@
 <template lang="html">
   <v-textarea
-		v-bind="$attrs"
-		:loading="loading"
-		:error-messages="errors"
-		:value="safeValue"
-		:auto-grow="autoGrow"
-		@input="input"
-		@focus="focused = true"
-		@blur="focused = false"
-		box
-	/>
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :disabled="isDisabled"
+    :auto-grow="autoGrow"
+    box
+    @input="input"
+    @focus="focused = true"
+    @blur="focused = false"
+  />
 </template>
 
 <script>
@@ -20,7 +21,7 @@
 		props: {
 			autoGrow: {
 				type: Boolean,
-				default: true,
+				default: false,
 			},
 		},
 	};

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

@@ -1,20 +1,21 @@
 <template lang="html">
   <v-text-field
-		v-bind="$attrs"
-		:loading="loading"
-		:error-messages="errors"
-		:value="safeValue"
-		@input="input"
-		@focus="focused = true"
-		@blur="focused = false"
-		box
-	/>
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :disabled="isDisabled"
+    box
+    @input="input"
+    @focus="focused = true"
+    @blur="focused = false"
+  />
 </template>
 
 <script>
-	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
-	export default {
-		mixins: [SmartInput],
-	};
+  export default {
+    mixins: [SmartInput],
+  };
 </script>

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

@@ -5,9 +5,13 @@ import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
 import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
+import SmartCheckbox from '/imports/ui/components/global/SmartCheckbox.vue';
+import SmartSwitch from '/imports/ui/components/global/SmartSwitch.vue';
 
 Vue.component('DatePicker', DatePicker);
 Vue.component('TextField', TextField);
 Vue.component('TextArea', TextArea);
 Vue.component('SmartSelect', SmartSelect);
 Vue.component('SmartCombobox', SmartCombobox);
+Vue.component('SmartCheckbox', SmartCheckbox);
+Vue.component('SmartSwitch', SmartSwitch);

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

@@ -1,61 +1,74 @@
 <template lang="html">
-	<v-sheet
-		class="tree-node"
-		:class="!hasChildren ? 'empty' : null"
-		:data-id="`tree-node-${node._id}`"
-	>
-		<div
-			class="layout row align-center justify-start tree-node-title"
-			style="cursor: pointer;"
-			:class="selected && 'primary--text'"
-			@click.stop="$emit('selected', node._id)"
-		>
-			<v-btn
-				small icon
-				:class="showExpanded ? 'rotate-90' : null"
-				@click.stop="expanded = !expanded"
-				:disabled="!hasChildren && !organize || !canExpand"
-			>
-				<v-icon v-if="canExpand && (hasChildren || organize)">chevron_right</v-icon>
-			</v-btn>
-			<div
-				class="layout row align-center justify-start"
-				style="flex-grow: 0;"
-			>
-				<v-icon
-					class="handle mr-2"
-					v-if="organize"
-					:class="selected && 'primary--text'"
-					:disabled="expanded"
-				>drag_handle</v-icon>
-				<property-icon
-					v-if="node.type"
-					class="mr-2"
-					:type="node.type"
-					:class="selected && 'primary--text'"
-				/>
-				<div class="text-no-wrap text-truncate">
-					<!--{{node && node.order}}-->
-					{{getTitle}}
-				</div>
-			</div>
-		</div>
-		<v-expand-transition>
-			<div v-if="showExpanded" class="pl-3">
-				<tree-node-list
-					v-if="showExpanded"
-					:node="node"
-					:children="computedChildren"
-					:group="group"
-					:organize="organize"
-					:selected-node-id="selectedNodeId"
-					@reordered="e => $emit('reordered', e)"
-					@reorganized="e => $emit('reorganized', e)"
-					@selected="e => $emit('selected', e)"
-				/>
-			</div>
-		</v-expand-transition>
-	</v-sheet>
+  <v-sheet
+    class="tree-node"
+    :class="!hasChildren ? 'empty' : null"
+    :data-id="`tree-node-${node._id}`"
+  >
+    <div
+      class="layout row align-center justify-start tree-node-title"
+      style="cursor: pointer;"
+      :class="selected && 'primary--text'"
+      @click.stop="$emit('selected', node._id)"
+    >
+      <v-btn
+        small
+        icon
+        :class="showExpanded ? 'rotate-90' : null"
+        :disabled="!hasChildren && !organize || !canExpand"
+        @click.stop="expanded = !expanded"
+      >
+        <v-icon v-if="canExpand && (hasChildren || organize)">
+          chevron_right
+        </v-icon>
+      </v-btn>
+      <div
+        class="layout row align-center justify-start pr-1"
+        style="flex-grow: 0;"
+      >
+        <v-icon
+          v-if="organize"
+          class="handle mr-2"
+          :class="selected && 'primary--text'"
+          :disabled="expanded"
+        >
+          drag_handle
+        </v-icon>
+        <!--{{node && node.order}}-->
+        <component
+          :is="treeNodeView"
+          :model="node"
+          :selected="selected"
+        />
+      </div>
+    </div>
+    <v-expand-transition>
+      <div
+        v-show="showExpanded"
+        class="pl-3"
+      >
+        <v-fade-transition hide-on-leave>
+          <tree-node-list
+            v-if="showExpanded"
+            :node="node"
+            :children="computedChildren"
+            :group="group"
+            :organize="organize"
+            :selected-node-id="selectedNodeId"
+            @reordered="e => $emit('reordered', e)"
+            @reorganized="e => $emit('reorganized', e)"
+            @selected="e => $emit('selected', e)"
+          />
+          <div v-else>
+            <div
+              v-for="i in children.length"
+              :key="i"
+              class="dummy-node"
+            />
+          </div>
+        </v-fade-transition>
+      </div>
+    </v-expand-transition>
+  </v-sheet>
 </template>
 
 <script>
@@ -65,21 +78,15 @@
 	* the tree view shows off the full character structure, and where each part of
 	* character comes from.
 	**/
-	import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 	import { canBeParent } from '/imports/api/parenting/parenting.js';
-	import PROPERTIES from '/imports/constants/PROPERTIES.js'
+	import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
+  import treeNodeViewIndex from '/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js';
 
 	export default {
-		name: 'tree-node',
-		beforeCreate() {
-		  this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
-		},
+		name: 'TreeNode',
 		components: {
-			PropertyIcon,
+      ...treeNodeViewIndex
 		},
-		data(){ return {
-			expanded: false,
-		}},
 		props: {
 			node: Object,
 			group: String,
@@ -89,7 +96,14 @@
 			selectedNodeId: String,
 			selected: Boolean,
 		},
+		data(){ return {
+			expanded: false,
+		}},
 		computed: {
+      treeNodeView(){
+        let type = this.node.type;
+        return treeNodeViewIndex[type] || treeNodeViewIndex.default;
+      },
 			hasChildren(){
 				return this.children && this.children.length || this.lazy && !this.expanded;
 			},
@@ -109,17 +123,13 @@
 			canExpand(){
 				return canBeParent(this.node.type);
 			},
-			getTitle(){
-				let node = this.node;
-				if (!node) return;
-				if (node.name) return node.name;
-				let prop = PROPERTIES[this.node.type]
-				return prop && prop.name;
-			}
+		},
+		beforeCreate() {
+      this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
 		},
 		methods: {
 			icon(type){
-				return PROPERTY_ICONS[type];
+				return getPropertyIcon(type);
 			},
 		}
 	};
@@ -144,13 +154,19 @@
 		opacity: 0.4;
 	}
 	.ghost {
-	  opacity: 0.5;
-	  background: #c8ebfb;
+    opacity: 0.5;
+    background: #fbc8c8;
 	}
 	.v-icon.v-icon--disabled {
 		opacity: 0;
 	}
+  .v-icon {
+    transition: none !important;
+  }
 	.theme--light .tree-node-title:hover {
 		background: rgba(0,0,0,.04);
 	}
+  .dummy-node {
+    height: 40px;
+  }
 </style>

app/imports/ui/components/tree/TreeNodeList.Story.vue

@@ -1,60 +0,0 @@
-<template lang="html">
-	<v-card-text>
-		<tree-node-list :children="children" group="example-group" :show-empty="false"/>
-	</v-card-text>
-</template>
-
-<script>
-	import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';
-
-	export default {
-		components: {
-			TreeNodeList,
-		},
-		data(){ return {
-			children: [
-				{name: 'Point buy', children:[
-					{name: 'Strength 14', children:[]},
-					{name: 'Dexterity 8', children:[]},
-					{name: 'Constitution 14', children:[]},
-					{name: 'Intelligence 8', children:[]},
-					{name: 'Wisdom 15', children:[]},
-					{name: 'Charisma 12', children:[]},
-				]},
-				{name: 'Hermit', children:[
-					{name: 'Discovery', children:[]},
-				]},
-				{name: 'Hill Dwarf', children: [
-					{name: 'Dwarven combat training', children:[]},
-					{name: 'Dwarven resilience', children:[]},
-					{name: 'Dwarven toughness', children:[]},
-					{name: 'Stone cutting', children:[]},
-				]},
-				{name: 'Cleric', children:[
-					{name: 'Level 1', children:[
-						{name: 'Spellcasting', children:[
-							{name: 'Light', children:[]},
-							{name: 'Sacred Flame', children:[]},
-							{name: 'Thaumaturgy', children:[]},
-						]},
-						{name: 'Divine domain: Tempest', children:[]},
-					]},
-					{name: 'Level 2', children:[]},
-					{name: 'Level 3', children:[]},
-					{name: 'Level 4', children:[]},
-					{name: 'Level 5', children:[]},
-				]},
-			],
-			otherChildren: [],
-			drag: false,
-		}},
-		computed: {
-			dataString(){
-				return JSON.stringify(this.children, null, 2);
-			}
-		},
-	};
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -1,33 +1,33 @@
 <template lang="html">
-	<!--use value for immutable, list for auto-updating children -->
-	<draggable
-		class="drag-area"
-		:value="children"
-		:group="group"
-		:animation="200"
-		:move="move"
-		@change="change"
-		ghost-class="ghost"
-		draggable=".item"
-		handle=".handle"
-	>
-		<tree-node
-			class="item"
-			v-for="child in children"
-			:node="child.node"
-			:children="child.children"
-			:group="group"
-			:key="child.node._id"
-			:selected-node-id="selectedNodeId"
-			:selected="selectedNodeId === child.node._id"
-			:organize="organize"
-			:lazy="lazy"
-			@selected="e => $emit('selected', e)"
-			@reordered="e => $emit('reordered', e)"
-			@reorganized="e => $emit('reorganized', e)"
-			@dragstart.native="e => e.dataTransfer.setData('cow', child.node && child.node.name)"
-		/>
-	</draggable>
+  <!--use value for immutable, list for auto-updating children -->
+  <draggable
+    v-model="displayedChildren"
+    class="drag-area"
+    :group="group"
+    :move="move"
+    :animation="200"
+    ghost-class="ghost"
+    draggable=".item"
+    handle=".handle"
+    @change="change"
+  >
+    <tree-node
+      v-for="child in displayedChildren"
+      :key="child.node._id"
+      class="item"
+      :node="child.node"
+      :children="child.children"
+      :group="group"
+      :selected-node-id="selectedNodeId"
+      :selected="selectedNodeId === child.node._id"
+      :organize="organize"
+      :lazy="lazy"
+      @selected="e => $emit('selected', e)"
+      @reordered="e => $emit('reordered', e)"
+      @reorganized="e => $emit('reorganized', e)"
+      @dragstart.native="e => e.dataTransfer.setData('cow', child.node && child.node.name)"
+    />
+  </draggable>
 </template>
 
 <script>
@@ -40,9 +40,6 @@
 			draggable,
 			TreeNode,
 		},
-		data(){ return {
-			expanded: false,
-		}},
 		props: {
 			node: Object,
 			group: String,
@@ -50,10 +47,14 @@
 			lazy: Boolean,
 			children: {
 				type: Array,
-				required: true,
+				default: () => [],
 			},
 			selectedNodeId: String,
 		},
+		data(){ return {
+			expanded: false,
+      displayedChildren: [],
+		}},
 		computed: {
 			hasChildren(){
 				return this.children && this.children.length;
@@ -62,17 +63,35 @@
 				return this.expanded && (this.organize || this.hasChildren)
 			},
 		},
+    watch: {
+      children(value){
+        this.displayedChildren = value;
+      }
+    },
+    mounted(){
+      this.displayedChildren = this.children;
+    },
 		methods: {
-			change({added, moved, removed}){
+			change({added, moved}){
 				let event = moved || added;
 				if (event){
 					let doc = event.element.node;
 					let newIndex;
 					if (event.newIndex === 0){
-						newIndex = 0;
+						newIndex = -0.5;
 					} else {
-						childBeforeNewIndex = this.children[event.newIndex - 1];
-						newIndex = childBeforeNewIndex.node.order + 1;
+            if (event.newIndex < this.children.length){
+              let childAtNewIndex = this.children[event.newIndex];
+              let indexOrder = childAtNewIndex.node.order;
+              if (event.newIndex > event.oldIndex){
+                newIndex = indexOrder + 0.5;
+              } else {
+                newIndex = indexOrder - 0.5;
+              }
+            } else {
+              let childBeforeNewIndex = this.children[event.newIndex - 1];
+              newIndex = childBeforeNewIndex.node.order + 0.5;
+            }
 					}
 					if (moved){
 						this.$emit('reordered', {doc, newIndex});
@@ -88,9 +107,19 @@
 				let allowed = isParentAllowed({parentType, childType});
 				return allowed;
 			},
+      log: console.log,
 		},
 	};
 </script>
 
 <style lang="css" scoped>
+  .flip-list-leave-active {
+    display: none;
+  }
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
+  .no-move {
+    transition: transform 0s;
+  }
 </style>

app/imports/ui/creature/CreatureForm.vue

@@ -5,6 +5,7 @@
       :value="model.name"
       :error-messages="errors.name"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
     />
     <text-field
@@ -12,6 +13,7 @@
       :value="model.alignment"
       :error-messages="errors.alignment"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['alignment'], value, ack})"
     />
     <text-field
@@ -19,15 +21,27 @@
       :value="model.gender"
       :error-messages="errors.gender"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['gender'], value, ack})"
     />
     <text-field
       label="Picture URL"
+      hint="A link to a high resolution image"
       :value="model.picture"
       :error-messages="errors.picture"
       :debounce-time="debounceTime"
+      :disabled="disabled"
       @change="(value, ack) => $emit('change', {path: ['picture'], value, ack})"
     />
+    <text-field
+      label="Avatar picture URL"
+      hint="A link to a smaller, square image to use as an avatar"
+      :value="model.avatarPicture"
+      :error-messages="errors.avatarPicture"
+      :debounce-time="debounceTime"
+      :disabled="disabled"
+      @change="(value, ack) => $emit('change', {path: ['avatarPicture'], value, ack})"
+    />
     <!--
 		<form-sections>
 			<form-section name="settings">
@@ -35,18 +49,21 @@
 					label="Use variant encumbrance"
 					:input-value="model.settings.useVariantEncumbrance"
 					:error-messages="errors.useVariantEncumbrance"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','useVariantEncumbrance'], value})"
 				/>
 				<v-switch
 					label="Hide spells tab"
 					:input-value="model.settings.hideSpellcasting"
 					:error-messages="errors.hideSpellcasting"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','hideSpellcasting'], value})"
 				/>
 				<v-switch
 					label="Swap ability scores and modifiers"
 					:input-value="model.settings.swapStatAndModifier"
 					:error-messages="errors.swapStatAndModifier"
+          :disabled="disabled"
 					@change="value => $emit('change', {path: ['settings','swapStatAndModifier'], value})"
 				/>
 			</form-section>
@@ -79,6 +96,7 @@ export default {
 			type: Boolean,
 		},
 		debounceTime: Number,
+    disabled: Boolean,
 	},
 };
 </script>

app/imports/ui/creature/CreatureFormDialog.vue

@@ -1,24 +1,32 @@
 <template lang="html">
-	<dialog-base>
-    <div slot="toolbar">
+  <dialog-base>
+    <v-toolbar-title slot="toolbar">
       Creature Form Dialog
+    </v-toolbar-title>
+    <div>
+      <creature-form
+        :model="model"
+        :disabled="editPermission === false"
+        @change="change"
+      />
     </div>
-		<div>
-			<creature-form :model="model" @change="change"/>
-		</div>
-		<v-spacer slot="actions"/>
-		<v-btn
-			slot="actions"
-			 flat
-			 @click="$store.dispatch('popDialogStack')"
-		 >Done</v-btn>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      flat
+      @click="$store.dispatch('popDialogStack')"
+    >
+      Done
+    </v-btn>
   </dialog-base>
 </template>
 
 <script>
+import Creatures from '/imports/api/creature/Creatures.js';
 import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import CreatureForm from '/imports/ui/creature/CreatureForm.vue'
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 
 export default {
 	components: {
@@ -33,6 +41,14 @@ export default {
 		model(){
 			return Creatures.findOne(this._id);
 		},
+    editPermission(){
+      try {
+        assertEditPermission(this.model, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
 	},
 	methods: {
 		change({path, value, ack}){

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

@@ -1,192 +1,269 @@
 <template>
   <dialog-base>
-    <template slot="toolbar">New Character</template>
-    <v-stepper v-model="step" class="no-shadow">
+    <v-toolbar-title slot="toolbar">
+      New Character
+    </v-toolbar-title>
+    <v-stepper
+      v-model="step"
+      class="no-shadow"
+    >
       <v-stepper-header class="no-shadow">
-        <v-stepper-step :complete="step > 1" step="1">
-					Name
-				</v-stepper-step>
-        <v-divider></v-divider>
-        <v-stepper-step :complete="step > 2" step="2">
+        <v-stepper-step
+          :complete="step > 1"
+          step="1"
+        >
+          Name
+        </v-stepper-step>
+        <v-divider />
+        <v-stepper-step
+          :complete="step > 2"
+          step="2"
+        >
           Ability Scores
         </v-stepper-step>
-        <v-divider></v-divider>
-        <v-stepper-step :complete="step > 3" step="3">
+        <v-divider />
+        <v-stepper-step
+          :complete="step > 3"
+          step="3"
+        >
           Class
         </v-stepper-step>
       </v-stepper-header>
 
       <v-stepper-items>
         <v-stepper-content step="1">
-          <v-text-field label="Name" v-model="name"></v-text-field>
-					<v-text-field label="Gender" v-model="gender"></v-text-field>
-					<v-text-field label="Alignment" v-model="alignment" @keydown.tab="step++"></v-text-field>
+          <v-text-field
+            v-model="name"
+            label="Name"
+          />
+          <v-text-field
+            v-model="gender"
+            label="Gender"
+          />
+          <v-text-field
+            v-model="alignment"
+            label="Alignment"
+            @keydown.tab="step++"
+          />
         </v-stepper-content>
         <v-stepper-content step="2">
-          <v-text-field label="Race" v-model="race"></v-text-field>
-					<v-layout row justify-center align-center>
-						<h3>Point Cost:</h3>
-						<h1 class="ml-2" :class="cost > 27 ? 'error--text' : ''">{{cost}}</h1>
-						<span class="ml-1">/27</span>
-					</v-layout>
-					<table class="point-buy-table mt-2">
-						<thead>
-							<tr class="font-weight-bold">
-								<td></td>
-								<td>Base Values</td>
-								<td>Race Bonus</td>
-								<td>Score</td>
-								<td>Modifier</td>
-							</tr>
-						</thead>
-						<tr>
-							<td>Strength</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseStrength"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="strengthBonus">
-							</v-text-field></td>
-							<td>{{baseStrength + strengthBonus}}</td>
-							<td>{{mod(baseStrength + strengthBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Dexterity</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseDexterity"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="dexterityBonus">
-							</v-text-field></td>
-							<td>{{baseDexterity + dexterityBonus}}</td>
-							<td>{{mod(baseDexterity + dexterityBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Constitution</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseConstitution"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="constitutionBonus">
-							</v-text-field></td>
-							<td>{{baseConstitution + constitutionBonus}}</td>
-							<td>{{mod(baseConstitution + constitutionBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Intelligence</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseIntelligence"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="intelligenceBonus">
-							</v-text-field></td>
-							<td>{{baseIntelligence + intelligenceBonus}}</td>
-							<td>{{mod(baseIntelligence + intelligenceBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Wisdom</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseWisdom"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="wisdomBonus">
-							</v-text-field></td>
-							<td>{{baseWisdom + wisdomBonus}}</td>
-							<td>{{mod(baseWisdom + wisdomBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Charisma</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseCharisma"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="charismaBonus">
-							</v-text-field></td>
-							<td>{{baseCharisma + charismaBonus}}</td>
-							<td>{{mod(baseCharisma + charismaBonus)}}</td>
-						</tr>
-					</table>
+          <v-text-field
+            v-model="race"
+            label="Race"
+          />
+          <v-layout
+            row
+            justify-center
+            align-center
+          >
+            <h3>Point Cost:</h3>
+            <h1
+              class="ml-2"
+              :class="cost > 27 ? 'error--text' : ''"
+            >
+              {{ cost }}
+            </h1>
+            <span class="ml-1">/27</span>
+          </v-layout>
+          <table class="point-buy-table mt-2">
+            <thead>
+              <tr class="font-weight-bold">
+                <td />
+                <td>Base Values</td>
+                <td>Race Bonus</td>
+                <td>Score</td>
+                <td>Modifier</td>
+              </tr>
+            </thead>
+            <tr>
+              <td>Strength</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseStrength"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="strengthBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseStrength + strengthBonus }}</td>
+              <td>{{ mod(baseStrength + strengthBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Dexterity</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseDexterity"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="dexterityBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseDexterity + dexterityBonus }}</td>
+              <td>{{ mod(baseDexterity + dexterityBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Constitution</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseConstitution"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="constitutionBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseConstitution + constitutionBonus }}</td>
+              <td>{{ mod(baseConstitution + constitutionBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Intelligence</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseIntelligence"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="intelligenceBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseIntelligence + intelligenceBonus }}</td>
+              <td>{{ mod(baseIntelligence + intelligenceBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Wisdom</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseWisdom"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="wisdomBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseWisdom + wisdomBonus }}</td>
+              <td>{{ mod(baseWisdom + wisdomBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Charisma</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseCharisma"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="charismaBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseCharisma + charismaBonus }}</td>
+              <td>{{ mod(baseCharisma + charismaBonus) }}</td>
+            </tr>
+          </table>
         </v-stepper-content>
         <v-stepper-content step="3">
           <v-text-field
-          	label="Class"
-						v-model="cls"
-          >
+            v-model="cls"
+            label="Class"
+          />
+          <v-select
+            v-model="hitDice"
+            :items="hitDiceItems"
+            label="Hit Dice"
+          />
           </v-text-field>
-					<v-select
-						:items="hitDiceItems"
-						label="Hit Dice"
-						v-model="hitDice">
-					</v-select>
-					</v-text-field>
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>
     <template slot="actions">
-      <v-btn flat @click="$emit('pop')">Cancel</v-btn>
-			<v-btn flat @click="step--" v-if="step > 1">Back</v-btn>
-      <v-spacer></v-spacer>
-      <v-btn color="accent" @click="step++" v-if="step < 3">Next</v-btn>
       <v-btn
-				:flat="step < 3"
-				:color="step < 3? '' : 'accent'"
-				@click="submit">
-				Create
-			</v-btn>
+        flat
+        @click="$emit('pop')"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        v-if="step > 1"
+        flat
+        @click="step--"
+      >
+        Back
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        v-if="step < 3"
+        color="accent"
+        @click="step++"
+      >
+        Next
+      </v-btn>
+      <v-btn
+        :flat="step < 3"
+        :color="step < 3? '' : 'accent'"
+        @click="submit"
+      >
+        Create
+      </v-btn>
     </template>
   </dialog-base>
 </template>
 
 <script>
-  import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	const getCost = function(score){
 		const costs = {
 			8: 0,
@@ -205,12 +282,15 @@
 		}
 	};
   export default {
+    components: {
+      DialogBase,
+    },
     data(){return {
       step: 1,
-			name: "New Character",
-			gender: "",
-			alignment: "",
-			race: "Race",
+			name: 'New Character',
+			gender: '',
+			alignment: '',
+			race: 'Race',
 			baseStrength: 10,
 			baseDexterity: 10,
 			baseConstitution: 10,
@@ -223,10 +303,23 @@
 			intelligenceBonus: 0,
 			wisdomBonus: 0,
 			charismaBonus: 0,
-			hitDiceItems: ["d6", "d8", "d10", "d12"],
-			hitDice: "d8",
-			cls: "Class",
+			hitDiceItems: ['d6', 'd8', 'd10', 'd12'],
+			hitDice: 'd8',
+			cls: 'Class',
     }},
+		computed: {
+			cost(){
+				return [
+					this.baseStrength,
+					this.baseDexterity,
+					this.baseConstitution,
+					this.baseIntelligence,
+					this.baseWisdom,
+					this.baseCharisma,
+				].map(getCost)
+				.reduce((memo, score) => memo + score, 0);
+			},
+		},
 		methods: {
 			mod(score){
 				let mod = Math.floor((score - 10) / 2);
@@ -257,25 +350,9 @@
 					hitDice: this.hitDice,
 					cls: this.cls,
 				};
-				this.$emit("pop", char);
+				this.$emit('pop', char);
 			},
 		},
-		computed: {
-			cost(){
-				return [
-					this.baseStrength,
-					this.baseDexterity,
-					this.baseConstitution,
-					this.baseIntelligence,
-					this.baseWisdom,
-					this.baseCharisma,
-				].map(getCost)
-				.reduce((memo, score) => memo + score, 0);
-			},
-		},
-    components: {
-      DialogBase,
-    },
   };
 </script>
 

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

@@ -1,25 +1,37 @@
 <template lang="html">
   <dialog-base>
-		<div slot="toolbar">
-			Delete Character
-		</div>
-		<div>
-			<p v-if="name">
-				Type "{{name}}" to permanenetly delete the character
-			</p>
-			<v-text-field v-if="name" v-model="inputName"/>
-			<v-btn v-show="nameMatch" class="primary" @click="remove">Delete forever</v-btn>
-		</div>
-		<v-spacer slot="actions"/>
-		<v-btn
-			slot="actions"
-			flat
-			@click="$store.dispatch('popDialogStack')"
-		>Cancel</v-btn>
-	</dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Delete Character
+    </v-toolbar-title>
+    <div>
+      <p v-if="name">
+        Type "{{ name }}" to permanenetly delete the character
+      </p>
+      <v-text-field
+        v-if="name"
+        v-model="inputName"
+      />
+      <v-btn
+        v-show="nameMatch"
+        class="primary"
+        @click="remove"
+      >
+        Delete forever
+      </v-btn>
+    </div>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      flat
+      @click="$store.dispatch('popDialogStack')"
+    >
+      Cancel
+    </v-btn>
+  </dialog-base>
 </template>
 
 <script>
+import Creatures from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import removeCreature from '/imports/api/creature/removeCreature.js';
 
@@ -49,7 +61,7 @@ export default {
 	},
 	methods: {
 		remove(){
-			removeCreature.call({charId: this.id}, (error, result) => {
+			removeCreature.call({charId: this.id}, (error) => {
 				if (error) {
 					console.error(error);
 				} else {

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

@@ -2,12 +2,40 @@
   <div class="character-sheet fill-height">
     <v-fade-transition mode="out-in">
       <div
-        v-if="$subReady.singleCharacter"
+        v-if="!$subReady.singleCharacter"
+        key="character-loading"
+        class="fill-height layout justify-center align-center"
+      >
+        <v-progress-circular
+          indeterminate
+          color="primary"
+          size="64"
+        />
+      </div>
+      <div
+        v-else-if="!creature"
+      >
+        <v-layout
+          column
+          align-center
+          justify-center
+        >
+          <h2 style="margin: 48px 28px 16px">
+            Character not found
+          </h2>
+          <h3>
+            Either this character does not exist, or you don't have permission
+            to view it.
+          </h3>
+        </v-layout>
+      </div>
+      <div
+        v-else
         key="character-tabs"
         class="fill-height"
       >
         <v-tabs-items
-          v-model="tabs"
+          v-model="activeTab"
         >
           <v-tab-item>
             <stats-tab :creature-id="creatureId" />
@@ -29,17 +57,6 @@
           </v-tab-item>
         </v-tabs-items>
       </div>
-      <div
-        v-else
-        key="character-loading"
-        class="fill-height layout justify-center align-center"
-      >
-        <v-progress-circular
-          indeterminate
-          color="primary"
-          size="64"
-        />
-      </div>
     </v-fade-transition>
   </div>
 </template>
@@ -48,17 +65,13 @@
   //TODO add a "no character found" screen if shown on a false address
   // or on a character the user does not have permission to view
 	import Creatures from '/imports/api/creature/Creatures.js';
-	import removeCreature from '/imports/api/creature/removeCreature.js';
-	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
-	import { mapMutations } from 'vuex';
-	import { theme } from '/imports/ui/theme.js';
 	import StatsTab from '/imports/ui/creature/character/characterSheetTabs/StatsTab.vue';
 	import FeaturesTab from '/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue';
 	import InventoryTab from '/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue';
 	import SpellsTab from '/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue';
 	import PersonaTab from '/imports/ui/creature/character/characterSheetTabs/PersonaTab.vue';
 	import TreeTab from '/imports/ui/creature/character/characterSheetTabs/TreeTab.vue';
-	import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
+  import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 
 	export default {
 		components: {
@@ -80,8 +93,8 @@
       },
 		},
     reactiveProvide: {
-      name: 'computationContext',
-      include: ['creature'],
+      name: 'context',
+      include: ['creature', 'editPermission'],
     },
     onMounted(){
       this.$store.commit('setPageTitle', this.creature && this.creature.name || 'Character Sheet');
@@ -90,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: {
@@ -98,8 +121,23 @@
 				},
 			},
 			creature(){
-				return Creatures.findOne(this.creatureId) || {};
+				return Creatures.findOne(this.creatureId);
 			},
+      editPermission(){
+        try {
+          assertEditPermission(this.creature, Meteor.userId());
+          return true;
+        } catch (e) {
+          return false;
+        }
+      },
 		},
 	}
 </script>
+
+<style>
+  .character-sheet .v-window-item {
+    min-height: calc(100vh - 96px);
+    overflow: hidden;
+  }
+</style>

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

@@ -1,6 +1,8 @@
 <template lang="html">
   <v-tabs
+    v-if="creature"
     slot="extension"
+    color="secondary"
     :value="value"
     centered
     grow
@@ -29,13 +31,20 @@
 </template>
 
 <script>
+import Creatures from '/imports/api/creature/Creatures.js';
+
 export default {
   props: {
     value: {
       type: Number,
       required: true,
     },
-  }
+  },
+  meteor: {
+    creature(){
+      return Creatures.findOne(this.$route.params.id);
+    },
+  },
 }
 </script>
 

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

@@ -1,6 +1,7 @@
 <template lang="html">
-  <v-toolbar-items>
+  <v-toolbar-items v-if="creature">
     <v-btn
+      v-if="editPermission"
       flat
       icon
       @click="recompute(creature._id)"
@@ -21,7 +22,7 @@
           <v-icon>more_vert</v-icon>
         </v-btn>
       </template>
-      <v-list>
+      <v-list v-if="editPermission">
         <v-list-tile @click="deleteCharacter">
           <v-list-tile-title>
             <v-icon>delete</v-icon> Delete
@@ -38,6 +39,13 @@
           </v-list-tile-title>
         </v-list-tile>
       </v-list>
+      <v-list v-else>
+        <v-list-tile @click="unshareWithMe">
+          <v-list-tile-title>
+            <v-icon>delete</v-icon> Unshare with me
+          </v-list-tile-title>
+        </v-list-tile>
+      </v-list>
     </v-menu>
   </v-toolbar-items>
 </template>
@@ -49,11 +57,18 @@ import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { mapMutations } from 'vuex';
 import { theme } from '/imports/ui/theme.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
 
 export default {
   data(){return {
     theme,
   }},
+  computed: {
+    creatureId(){
+      return this.$route.params.id;
+    },
+  },
   methods: {
     ...mapMutations([
       'toggleDrawer',
@@ -103,12 +118,23 @@ export default {
 				}
 			});
 		},
-		isDarkColor,
-  },
-  computed: {
-    creatureId(){
-      return this.$route.params.id;
+    unshareWithMe(){
+      updateUserSharePermissions.call({
+        docRef: {
+          collection: 'creatures',
+          id: this.creatureId,
+        },
+        userId: Meteor.userId(),
+        role: 'none',
+      }, (error) => {
+        if (error) {
+          console.error(error);
+        } else {
+          this.$router.push('/characterList');
+        }
+      });
     },
+		isDarkColor,
   },
   meteor: {
     $subscribe: {
@@ -117,7 +143,15 @@ export default {
       },
     },
     creature(){
-      return Creatures.findOne(this.creatureId) || {};
+      return Creatures.findOne(this.creatureId);
+    },
+    editPermission(){
+      try {
+        assertEditPermission(this.creature, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
     },
   },
 }

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

@@ -1,47 +1,42 @@
 <template lang="html">
-	<div class="inventory">
-		<column-layout>
-			<v-card>
-				<v-switch
-					v-model="organize"
-					label="Organize"
-					class="justify-end"
-					style="margin: 16px 24px -16px;"
-				/>
-				<!-- Equipping things isn't implemented yet
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: true,
-						type: {$in: ['item']},
-						'ancestors.id': {$nin: containerIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="inventory"
-				/>
-				<v-divider/>
-				-->
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: {$ne: true},
-						type: {$in: ['item']},
-						'ancestors.id': {$nin: containerIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="inventory"
-				/>
-			</v-card>
-			<div v-for="container in containersWithoutAncestorContainers" :key="container._id">
-				<container-card
-					:model="container"
-					:organize="organize"
-				/>
-			</div>
-		</column-layout>
-	</div>
+  <div class="inventory">
+    <column-layout>
+      <div>
+        <toolbar-card color="">
+          <v-spacer slot="toolbar" />
+          <v-switch
+            v-if="context.editPermission !== false"
+            slot="toolbar"
+            v-model="organize"
+            label="Organize"
+            class="justify-end"
+          />
+          <v-card-text class="px-0">
+            <creature-properties-tree
+              :root="{collection: 'creatures', id: creatureId}"
+              :filter="{
+                type: {$in: ['item']},
+                'ancestors.id': {$nin: containerIds}
+              }"
+              :organize="organize"
+              group="inventory"
+              @selected="e => clickProperty(e)"
+              @reorganized="({doc}) => setEquipped(doc, false)"
+            />
+          </v-card-text>
+        </toolbar-card>
+      </div>
+      <div
+        v-for="container in containersWithoutAncestorContainers"
+        :key="container._id"
+      >
+        <container-card
+          :model="container"
+          :organize="organize"
+        />
+      </div>
+    </column-layout>
+  </div>
 </template>
 
 <script>
@@ -49,19 +44,25 @@ import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
+import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
+import { updateProperty } from '/imports/api/creature/CreatureProperties.js';
 
 export default {
+	components: {
+		ColumnLayout,
+		CreaturePropertiesTree,
+		ContainerCard,
+    ToolbarCard,
+	},
+  inject: {
+    context: { default: {} }
+  },
 	props: {
 		creatureId: String,
 	},
 	data(){ return {
 		organize: false,
 	}},
-	components: {
-		ColumnLayout,
-		CreaturePropertiesTree,
-		ContainerCard,
-	},
 	meteor: {
 		containers(){
 			return CreatureProperties.find({
@@ -98,6 +99,13 @@ export default {
 				data: {_id},
 			});
 		},
+    setEquipped(doc, equipped){
+      updateProperty.call({
+        _id: doc._id,
+        path: ['equipped'],
+        value: equipped
+      });
+    }
 	},
 }
 </script>

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

@@ -7,6 +7,10 @@
           data-id="creature-summary"
           @click="showCharacterForm"
         >
+          <v-img
+            v-if="creature.picture"
+            :src="creature.picture"
+          />
           <v-card-title class="title">
             {{ creature.name }}
           </v-card-title>

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

@@ -1,47 +1,40 @@
 <template lang="html">
-	<div class="spells">
-		<column-layout>
-			<v-card>
-				<v-switch
-					v-model="organize"
-					label="Organize"
-					class="justify-end"
-					style="margin: 16px 24px -16px;"
-				/>
-				<!-- Equipping things isn't implemented yet
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: true,
-						type: 'spell',
-						'ancestors.id': {$nin: spellListIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="spells"
-				/>
-				<v-divider/>
-				-->
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: {$ne: true},
-						type: 'spell',
-						'ancestors.id': {$nin: spellListIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="spells"
-				/>
-			</v-card>
-			<div v-for="spellList in spellListsWithoutAncestorSpellLists" :key="spellList._id">
-				<spellList-card
-					:model="spellList"
-					:organize="organize"
-				/>
-			</div>
-		</column-layout>
-	</div>
+  <div class="spells">
+    <column-layout>
+      <div>
+        <v-card>
+          <v-card-text>
+            <v-switch
+              v-if="context.editPermission !== false"
+              v-model="organize"
+              label="Organize"
+              class="justify-end"
+            />
+            <creature-properties-tree
+              :root="{collection: 'creatures', id: creatureId}"
+              :filter="{
+                equipped: {$ne: true},
+                type: 'spell',
+                'ancestors.id': {$nin: spellListIds}
+              }"
+              :organize="organize"
+              group="spells"
+              @selected="e => clickProperty(e)"
+            />
+          </v-card-text>
+        </v-card>
+      </div>
+      <div
+        v-for="spellList in spellListsWithoutAncestorSpellLists"
+        :key="spellList._id"
+      >
+        <spellList-card
+          :model="spellList"
+          :organize="organize"
+        />
+      </div>
+    </column-layout>
+  </div>
 </template>
 
 <script>
@@ -51,17 +44,23 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 import SpellListCard from '/imports/ui/properties/components/spells/SpellListCard.vue';
 
 export default {
-	props: {
-		creatureId: String,
-	},
-	data(){ return {
-		organize: false,
-	}},
 	components: {
 		ColumnLayout,
 		CreaturePropertiesTree,
 		SpellListCard,
 	},
+  inject: {
+    context: { default: {} }
+  },
+	props: {
+		creatureId: {
+      type: String,
+      required: true,
+    }
+	},
+	data(){ return {
+		organize: false,
+	}},
 	meteor: {
 		spellLists(){
 			return CreatureProperties.find({

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

@@ -97,7 +97,7 @@
       </div>
 
       <div
-        v-if="spellSlots.length"
+        v-if="spellSlots && spellSlots.length"
         class="spell-slots"
       >
         <v-card>
@@ -115,6 +115,10 @@
         </v-card>
       </div>
 
+      <div v-if="numKeys(creature.damageMultipliers)">
+        <damage-multiplier-card :model="creature.damageMultipliers" />
+      </div>
+
       <div class="saving-throws">
         <v-card>
           <v-list>
@@ -146,12 +150,12 @@
       </div>
 
       <div
-        v-if="weapons.length || tools.length || languages.length"
-        class="proficiencies"
+        v-if="weapons && weapons.length"
+        class="weapon-proficiencies"
       >
         <v-card>
           <v-list>
-            <v-subheader v-if="weapons.length">
+            <v-subheader>
               Weapons
             </v-subheader>
             <skill-list-tile
@@ -162,7 +166,16 @@
               :data-id="weapon._id"
               @click="clickProperty({_id: weapon._id})"
             />
-            <v-subheader v-if="armors.length">
+          </v-list>
+        </v-card>
+      </div>
+      <div
+        v-if="armors && armors.length"
+        class="weapon-proficiencies"
+      >
+        <v-card>
+          <v-list>
+            <v-subheader>
               Armor
             </v-subheader>
             <skill-list-tile
@@ -173,7 +186,16 @@
               :data-id="armor._id"
               @click="clickProperty({_id: armor._id})"
             />
-            <v-subheader v-if="tools.length">
+          </v-list>
+        </v-card>
+      </div>
+      <div
+        v-if="tools && tools.length"
+        class="weapon-proficiencies"
+      >
+        <v-card>
+          <v-list>
+            <v-subheader>
               Tools
             </v-subheader>
             <skill-list-tile
@@ -184,7 +206,16 @@
               :data-id="tool._id"
               @click="clickProperty({_id: tool._id})"
             />
-            <v-subheader v-if="languages.length">
+          </v-list>
+        </v-card>
+      </div>
+      <div
+        v-if="languages && languages.length"
+        class="language-proficiencies"
+      >
+        <v-card>
+          <v-list>
+            <v-subheader>
               Languages
             </v-subheader>
             <skill-list-tile
@@ -200,7 +231,7 @@
       </div>
 
       <div
-        v-if="actions.length || attacks.length"
+        v-if="actions.length"
         class="actions"
       >
         <v-card>
@@ -216,6 +247,18 @@
               :data-id="action._id"
               @click="clickProperty({_id: action._id})"
             />
+          </v-list>
+        </v-card>
+      </div>
+      <div
+        v-if="attacks.length"
+        class="actions"
+      >
+        <v-card>
+          <v-list
+            two-line
+            subheader
+          >
             <v-subheader>Attacks</v-subheader>
             <attack-list-tile
               v-for="attack in attacks"
@@ -232,24 +275,27 @@
 </template>
 
 <script>
+  import Creatures from '/imports/api/creature/Creatures.js';
 	import CreatureProperties, { damageProperty } from '/imports/api/creature/CreatureProperties.js';
 	import AttributeCard from '/imports/ui/properties/components/attributes/AttributeCard.vue';
 	import AbilityListTile from '/imports/ui/properties/components/attributes/AbilityListTile.vue';
 	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
-	import HealthBarCardContainer from '/imports/ui/properties/components/attributes/HealthBarCardContainer.vue';
+  import DamageMultiplierCard from '/imports/ui/properties/components/damageMultipliers/DamageMultiplierCard.vue';
+  import HealthBarCardContainer from '/imports/ui/properties/components/attributes/HealthBarCardContainer.vue';
 	import HitDiceListTile from '/imports/ui/properties/components/attributes/HitDiceListTile.vue';
 	import SkillListTile from '/imports/ui/properties/components/skills/SkillListTile.vue';
 	import ResourceCard from '/imports/ui/properties/components/attributes/ResourceCard.vue';
 	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 getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 
-  const getProperties = function(creatureId, filter = {}){
-    filter['ancestors.id'] = creatureId;
-    filter.removed = {$ne: true};
-    return CreatureProperties.find(filter, {
-			sort: {order: 1}
-		});
+  const getProperties = function(creatureId, filter){
+    return getActiveProperties({
+      ancestorId: creatureId,
+      filter,
+      options: {sort: {order: 1}},
+    });
   };
 
 	const getAttributeOfType = function(creatureId, type){
@@ -271,6 +317,7 @@
 			AbilityListTile,
 			AttributeCard,
 			ColumnLayout,
+      DamageMultiplierCard,
 			HealthBarCardContainer,
 			HitDiceListTile,
 			SkillListTile,
@@ -286,6 +333,9 @@
       },
 		},
 		meteor: {
+      creature(){
+        return Creatures.findOne(this.creatureId);
+      },
 			abilities(){
 				return getAttributeOfType(this.creatureId, 'ability');
 			},
@@ -345,6 +395,10 @@
 					damageProperty.call({_id, operation: 'increment' ,value: -value});
 				}
 			},
+      numKeys(obj){
+        if (!obj) return 0;
+        return Object.keys(obj).length;
+      },
 		},
 	};
 </script>

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

@@ -1,76 +1,60 @@
 <template lang="html">
-  <div class="tree-tab">
+  <div
+    class="tree-tab pa-4 layout column align-center"
+    style="height: calc(100vh - 96px); display: flex;"
+  >
     <v-card
-      class="ma-4 layout row"
+      style="height: 100%; width: 100%; max-width: 1800px;"
       data-id="creature-tree-card"
     >
-      <div>
-        <v-toolbar
-          flat
-          dense
-        >
-          <v-spacer />
-          <v-switch
-            v-model="organize"
-            label="Organize"
-            class="mx-3"
-            :disabled="organizeDisabled"
-            style="flex-grow: 0; height: 32px;"
-          />
-        </v-toolbar>
-        <v-combobox
-          ref="searchBox"
-          v-model="filterString"
-          :items="filterOptions"
-          prepend-inner-icon="search"
-          class="mx-4"
-          hide-no-data
-          hide-selected
-          multiple
-          clearable
-          small-chips
-          deletable-chips
-        />
-        <creature-properties-tree
-          class="pt-0"
-          :root="{collection: 'creatures', id: creatureId}"
-          :organize="organize"
-          :selected-node-id="selected"
-          :filter="filter"
-          style="min-width: 320px;"
-          @selected="e => selected = e"
-        />
-      </div>
-      <v-divider vertical />
-      <div
-        style="width: 100%; background-color: inherit;"
-        data-id="selected-node-card"
-      >
-        <v-toolbar
-          dense
-          flat
-        >
-          <property-icon
-            :type="selectedProperty && selectedProperty.type"
-            class="mr-2"
-          />
-          <div class="title">
-            {{ getPropertyName(selectedProperty && selectedProperty.type) }}
-          </div>
-          <v-spacer />
-          <v-btn
-            v-if="selectedProperty"
+      <tree-detail-layout>
+        <template slot="tree">
+          <v-toolbar
             flat
-            icon
-            @click="editCreatureProperty"
+            dense
           >
-            <v-icon>create</v-icon>
-          </v-btn>
-        </v-toolbar>
-        <v-card-text>
-          <property-viewer :model="selectedProperty" />
-        </v-card-text>
-      </div>
+            <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"
+          />
+        </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"
@@ -106,139 +90,162 @@
 </template>
 
 <script>
+  import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
   import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.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 CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
 
-	export default {
-		components: {
-			CreaturePropertiesTree,
-			PropertyViewer,
-			PropertyIcon,
+  import CreatureProperties, {
+    insertProperty,
+    insertPropertyFromLibraryNode
+  } from '/imports/api/creature/CreatureProperties.js';
+  import { setDocToLastOrder } from '/imports/api/parenting/order.js';
+  import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+
+  export default {
+    components: {
+      TreeDetailLayout,
+      CreaturePropertiesTree,
+      CreaturePropertyDialog,
       LabeledFab,
-		},
-		props: {
-			creatureId: {
-				type: String,
-			},
-		},
-		data(){ return {
-			organize: false,
-			organizeDisabled: false,
-			selected: undefined,
-			fab: false,
-			filterString: '',
-			filterOptions: [
-				{text: 'Actions', value: 'action'},
-				{text: 'Attacks', value: 'attack'},
-				{text: 'Attributes', value: 'attribute'},
-				{text: 'Buffs', value: 'buff'},
-				{text: 'Class Levels', value: 'classLevel'},
-				{text: 'Damage Multipliers', value: 'damageMultiplier'},
-				{text: 'Effects', value: 'effect'},
-				{text: 'Experiences', value: 'experience'},
-				{text: 'Features', value: 'feature'},
-				{text: 'Folders', value: 'folder'},
-				{text: 'Notes', value: 'note'},
-				{text: 'Proficiencies', value: 'proficiency'},
-				{text: 'Rolls', value: 'roll'},
-				{text: 'Saving Throws', value: 'savingThrow'},
-				{text: 'Skills', value: 'skill'},
-				{text: 'Spell Lists', value: 'spellList'},
-				{text: 'Spells', value: 'spell'},
-				{text: 'Containers', value: 'container'},
-				{text: 'Items', value: 'item'},
-			],
-		};},
-		computed: {
-			filter(){
-				if (!this.filterString.length) return;
-				let typeFilters = [];
-				let nameFilters = [];
-				this.filterString.forEach(filter => {
-					if (filter.value){
-						typeFilters.push(filter.value);
-					} else {
-						// escape string
-						let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
+    },
+    inject: {
+      context: { default: {} }
+    },
+    props: {
+      creatureId: {
+        type: String,
+        required: true,
+      },
+    },
+    data(){ return {
+      organize: false,
+      organizeDisabled: false,
+      selected: undefined,
+      fab: false,
+      filterString: '',
+      filterOptions: [
+        {text: 'Actions', value: 'action'},
+        {text: 'Attacks', value: 'attack'},
+        {text: 'Attributes', value: 'attribute'},
+        {text: 'Buffs', value: 'buff'},
+        {text: 'Class Levels', value: 'classLevel'},
+        {text: 'Damage Multipliers', value: 'damageMultiplier'},
+        {text: 'Effects', value: 'effect'},
+        {text: 'Experiences', value: 'experience'},
+        {text: 'Features', value: 'feature'},
+        {text: 'Folders', value: 'folder'},
+        {text: 'Notes', value: 'note'},
+        {text: 'Proficiencies', value: 'proficiency'},
+        {text: 'Rolls', value: 'roll'},
+        {text: 'Saving Throws', value: 'savingThrow'},
+        {text: 'Skills', value: 'skill'},
+        {text: 'Spell Lists', value: 'spellList'},
+        {text: 'Spells', value: 'spell'},
+        {text: 'Containers', value: 'container'},
+        {text: 'Items', value: 'item'},
+      ],
+    };},
+    computed: {
+      filter(){
+        if (!this.filterString.length) return;
+        let typeFilters = [];
+        let nameFilters = [];
+        this.filterString.forEach(filter => {
+          if (filter.value){
+            typeFilters.push(filter.value);
+          } else {
+            // escape string
+            let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
             var reg = new RegExp( '.*' + term + '.*', 'i' );
-						nameFilters.push(reg)
-					}
-				});
-				return {$or: [
-					{type: {$in: typeFilters}},
-					{name: {$in: nameFilters}},
-				]};
-			},
-		},
-		watch: {
-			filter(filter){
-				if (filter) {
-					this.organize = false;
-					this.organizeDisabled = true;
-				} else {
-					this.organizeDisabled = false;
-				}
-			},
-		},
-		methods: {
-			insertCreatureProperty(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-creation-dialog',
-					elementId: 'insert-creature-property-fab',
-					callback(creatureProperty){
-						if (!creatureProperty) return;
-						creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
-						creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
-						setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
-						let creaturePropertyId = insertProperty.call({creatureProperty});
-						return creaturePropertyId;
-					}
-				});
-			},
-			propertyFromLibrary(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-from-library-dialog',
-					elementId: 'insert-creature-property-fab',
-					callback(libraryNode){
-						if (!libraryNode) return;
-						insertPropertyFromLibraryNode.call({
-							nodeId: libraryNode._id,
-							parentRef: {collection: 'creatures', id: that.creatureId},
-						});
-					}
-				});
-			},
-			editCreatureProperty(){
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-dialog',
-					elementId: 'selected-node-card',
-					data: {
-						_id: this.selected,
-						startInEditTab: true,
-					},
-				});
-			},
-			getPropertyName,
-		},
-		meteor: {
-			selectedProperty(){
-				return CreatureProperties.findOne({
-					_id: this.selected,
-					removed: {$ne: true}
-				});
-			}
-		}
-	};
+            nameFilters.push(reg)
+          }
+        });
+        return {$or: [
+          {type: {$in: typeFilters}},
+          {name: {$in: nameFilters}},
+        ]};
+      },
+    },
+    watch: {
+      filter(filter){
+        if (filter) {
+          this.organize = false;
+          this.organizeDisabled = true;
+        } else {
+          this.organizeDisabled = false;
+        }
+      },
+      '$vuetify.breakpoint.mdAndUp'(mdAndUp){
+        if (!mdAndUp){
+          this.selected = undefined;
+        }
+      },
+    },
+    methods: {
+      clickNode(id){
+        if (this.$vuetify.breakpoint.mdAndUp){
+          this.selected = id;
+        } else {
+          this.$store.commit('pushDialogStack', {
+            component: 'creature-property-dialog',
+            elementId: `tree-node-${id}`,
+            data: {
+              _id: id,
+            },
+          });
+        }
+      },
+      insertCreatureProperty(){
+        let that = this;
+        this.$store.commit('pushDialogStack', {
+          component: 'creature-property-creation-dialog',
+          elementId: 'insert-creature-property-fab',
+          callback(creatureProperty){
+            if (!creatureProperty) return;
+            creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
+            creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
+            setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
+            let creaturePropertyId = insertProperty.call({creatureProperty});
+            return creaturePropertyId;
+          }
+        });
+      },
+      propertyFromLibrary(){
+        let that = this;
+        this.$store.commit('pushDialogStack', {
+          component: 'creature-property-from-library-dialog',
+          elementId: 'insert-creature-property-fab',
+          callback(libraryNode){
+            if (!libraryNode) return;
+            insertPropertyFromLibraryNode.call({
+              nodeId: libraryNode._id,
+              parentRef: {collection: 'creatures', id: that.creatureId},
+            });
+          }
+        });
+      },
+      editCreatureProperty(){
+        this.$store.commit('pushDialogStack', {
+          component: 'creature-property-dialog',
+          elementId: 'selected-node-card',
+          data: {
+            _id: this.selected,
+            startInEditTab: true,
+          },
+        });
+      },
+      getPropertyName,
+    },
+    meteor: {
+      selectedProperty(){
+        return CreatureProperties.findOne({
+          _id: this.selected,
+          removed: {$ne: true}
+        });
+      }
+    }
+  };
 </script>
 
 <style lang="css" scoped>

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

@@ -1,16 +1,14 @@
 <template lang="html">
-	<v-card-text style="width: initial; max-width: 100%;">
-		<tree-node-list
-			v-if="root"
-			:children="children"
-			:group="group"
-			:organize="organize"
-			:selected-node-id="selectedNodeId"
-			@selected="e => $emit('selected', e)"
-			@reordered="reordered"
-			@reorganized="reorganized"
-		/>
-	</v-card-text>
+  <tree-node-list
+    v-if="root"
+    :children="children"
+    :group="group"
+    :organize="organize"
+    :selected-node-id="selectedNodeId"
+    @selected="e => $emit('selected', e)"
+    @reordered="reordered"
+    @reorganized="reorganized"
+  />
 </template>
 
 <script>

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})"
       />
-      <div class="title">
-        {{ model.name || getPropertyName(model.type) }}
-      </div>
-      <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,17 +62,20 @@
 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';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import { get, findLast } from 'lodash';
 
 let formIndex = {};
@@ -129,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 {
@@ -142,6 +109,14 @@ export default {
 		model(){
 			return CreatureProperties.findOne(this._id);
 		},
+    editPermission(){
+      try {
+        assertEditPermission(this.creature, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
 	},
   computed: {
     creature(){
@@ -155,19 +130,37 @@ export default {
     }
   },
   reactiveProvide: {
-    name: 'computationContext',
-    include: ['creature'],
+    name: 'context',
+    include: ['creature', 'editPermission'],
   },
 	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, result) =>{
+			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);
 			});
 		},
 		push({path, value, ack}){
-			pushToProperty.call({_id: this._id, path, value}, (error, result) =>{
+			pushToProperty.call({_id: this._id, path, value}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});
@@ -175,7 +168,7 @@ export default {
 		pull({path, ack}){
 			let itemId = get(this.model, path)._id;
 			path.pop();
-			pullFromProperty.call({_id: this._id, path, itemId}, (error, result) =>{
+			pullFromProperty.call({_id: this._id, path, itemId}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});

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

@@ -1,20 +1,25 @@
 <template lang="html">
-	<dialog-base>
-		<div slot="toolbar">Add from library</div>
-		<library-and-node
-			slot="unwrapped-content"
-			@selected="val => node = val"
-			style="height: 100%;"
-		/>
-		<template slot="actions">
-			<v-spacer/>
-			<v-btn
-				flat
-				@click="$store.dispatch('popDialogStack', node)"
-				color="primary"
-			>Insert</v-btn>
-		</template>
-	</dialog-base>
+  <dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Add from library
+    </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)"
+      >
+        Insert
+      </v-btn>
+    </template>
+  </dialog-base>
 </template>
 
 <script>

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

@@ -1,27 +1,31 @@
 <template lang="html">
-	<dialog-base :override-back-button="() => $emit('back')">
-		<div slot="toolbar">Add {{propertyName}}</div>
-		<component
-			v-if="type"
-			:is="type"
-			class="creature-property-form"
-			:model="model"
-			:errors="errors"
-			@change="change"
-			@push="push"
-			@pull="pull"
-		/>
-		<div
-			slot="actions"
-			class="layout row justify-end"
-		>
-			<v-btn
-				flat
-				:disabled="!valid"
-				@click="$store.dispatch('popDialogStack', model)"
-			>Insert</v-btn>
-		</div>
-	</dialog-base>
+  <dialog-base :override-back-button="() => $emit('back')">
+    <v-toolbar-title slot="toolbar">
+      Add {{ propertyName }}
+    </v-toolbar-title>
+    <component
+      :is="type"
+      v-if="type"
+      class="creature-property-form"
+      :model="model"
+      :errors="errors"
+      @change="change"
+      @push="push"
+      @pull="pull"
+    />
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        :disabled="!valid"
+        @click="$store.dispatch('popDialogStack', model)"
+      >
+        Insert
+      </v-btn>
+    </div>
+  </dialog-base>
 </template>
 
 <script>
@@ -35,17 +39,22 @@ export default {
 		DialogBase,
 	},
 	mixins: [schemaFormMixin],
+	props: {
+		propertyName: String,
+		type: String,
+	},
+  reactiveProvide: {
+    name: 'context',
+    include: ['debounceTime'],
+  },
 	data(){return {
 		model: {
 			type: this.type,
 		},
 		schema: undefined,
 		validationContext: undefined,
+    debounceTime: 0,
 	};},
-	props: {
-		propertyName: String,
-		type: String,
-	},
 	watch: {
 		type(newType){
 			if (!newType) return;

app/imports/ui/dialogStack/DeleteConfirmationDialog.vue

@@ -1,28 +1,35 @@
 <template lang="html">
   <dialog-base>
-		<div slot="toolbar">
-			Delete {{typeName}}
-		</div>
-		<div>
-			<p v-if="name">
-				Type "{{name}}" to permanenetly delete
-			</p>
-			<v-text-field v-if="name" v-model="inputName"/>
-			<div class="layout row justify-center">
-				<v-btn
-				v-show="nameMatch"
-				class="primary"
-				@click="$store.dispatch('popDialogStack', true);"
-				>Delete forever</v-btn>
-			</div>
-		</div>
-		<v-spacer slot="actions"/>
-		<v-btn
-			slot="actions"
-			flat
-			@click="$store.dispatch('popDialogStack')"
-		>Cancel</v-btn>
-	</dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Delete {{ typeName }}
+    </v-toolbar-title>
+    <div>
+      <p v-if="name">
+        Type "{{ name }}" to permanenetly delete
+      </p>
+      <v-text-field
+        v-if="name"
+        v-model="inputName"
+      />
+      <div class="layout row justify-center">
+        <v-btn
+          v-show="nameMatch"
+          class="primary"
+          @click="$store.dispatch('popDialogStack', true);"
+        >
+          Delete forever
+        </v-btn>
+      </div>
+    </div>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      flat
+      @click="$store.dispatch('popDialogStack')"
+    >
+      Cancel
+    </v-btn>
+  </dialog-base>
 </template>
 
 <script>

app/imports/ui/dialogStack/DialogBase.Story.vue

@@ -1,30 +0,0 @@
-<template>
-  <dialog-base>
-    <div slot="toolbar">
-      Test Dialog
-    </div>
-    <div>
-			<v-btn @click="openDialog('btn')" data-id="btn">Open Dialog</v-btn>
-      <v-btn fab @click="openDialog('fab')" data-id="fab" color="green">Open Dialog</v-btn>
-    </div>
-  </dialog-base>
-</template>
-
-<script>
-  import store from "/imports/ui/vuexStore.js";
-  import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
-  const component = {
-    methods: {
-      openDialog(elementId){
-        store.commit("pushDialogStack", {
-          component,
-					elementId,
-        });
-      }
-    },
-    components: {
-      DialogBase,
-    },
-  };
-  export default component;
-</script>