From 9b652fc133f5afa0e31a41cfa3fdb4843988175f Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 17 Aug 2022 13:42:47 +0200
Subject: [PATCH 01/14] Added point buy form

---
 app/imports/api/properties/PointBuys.js       |  49 ++++++-
 .../computedOnlyPropertySchemasIndex.js       |   2 +
 .../computedPropertySchemasIndex.js           |   2 +
 .../api/properties/propertySchemasIndex.js    |   2 +
 app/imports/constants/PROPERTIES.js           |   8 +-
 app/imports/constants/STORAGE_LIMITS.js       |   1 +
 .../ui/properties/forms/PointBuyForm.vue      | 129 ++++++++++++++++++
 .../forms/shared/propertyFormIndex.js         |   2 +
 8 files changed, 192 insertions(+), 3 deletions(-)
 create mode 100644 app/imports/ui/properties/forms/PointBuyForm.vue

diff --git a/app/imports/api/properties/PointBuys.js b/app/imports/api/properties/PointBuys.js
index 95cc1634..3be53ae2 100644
--- a/app/imports/api/properties/PointBuys.js
+++ b/app/imports/api/properties/PointBuys.js
@@ -27,10 +27,18 @@ let PointBuySchema = createPropertySchema({
   'values': {
     type: Array,
     defaultValue: [],
+    maxCount: STORAGE_LIMITS.pointBuyRowsCount,
   },
   'values.$': {
     type: Object,
   },
+  'values.$._id': {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+    autoValue(){
+      if (!this.isSet) return Random.id();
+    }
+  },
   'values.$.name': {
     type: String,
     optional: true,
@@ -47,6 +55,18 @@ let PointBuySchema = createPropertySchema({
     type: Number,
     optional: true,
   },
+  'values.$.min': {
+    type: 'fieldToCompute',
+    optional: true,
+  },
+  'values.$.max': {
+    type: 'fieldToCompute',
+    optional: true,
+  },
+  'values.$.cost': {
+    type: 'fieldToCompute',
+    optional: true,
+  },
   min: {
     type: 'fieldToCompute',
     optional: true,
@@ -74,11 +94,31 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     type: 'computedOnlyField',
     optional: true,
   },
-  total: {
+  cost: {
     type: 'computedOnlyField',
     optional: true,
   },
-  cost: {
+  'values': {
+    type: Array,
+    defaultValue: [],
+    maxCount: STORAGE_LIMITS.pointBuyRowsCount,
+  },
+  'values.$': {
+    type: Object,
+  },
+  'values.$.min': {
+    type: 'computedOnlyField',
+    optional: true,
+  },
+  'values.$.max': {
+    type: 'computedOnlyField',
+    optional: true,
+  },
+  'values.$.cost': {
+    type: 'computedOnlyField',
+    optional: true,
+  },
+  total: {
     type: 'computedOnlyField',
     optional: true,
   },
@@ -87,6 +127,11 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     optional: true,
     removeBeforeCompute: true,
   },
+  error: {
+    type: String,
+    optional: true,
+    removeBeforeCompute: true,
+  },
 });
 
 const ComputedPointBuySchema = new SimpleSchema()
diff --git a/app/imports/api/properties/computedOnlyPropertySchemasIndex.js b/app/imports/api/properties/computedOnlyPropertySchemasIndex.js
index d490e4e3..489f5b19 100644
--- a/app/imports/api/properties/computedOnlyPropertySchemasIndex.js
+++ b/app/imports/api/properties/computedOnlyPropertySchemasIndex.js
@@ -15,6 +15,7 @@ import { ComputedOnlyFeatureSchema } from '/imports/api/properties/Features.js';
 import { ComputedOnlyFolderSchema } from '/imports/api/properties/Folders.js';
 import { ComputedOnlyItemSchema } from '/imports/api/properties/Items.js';
 import { ComputedOnlyNoteSchema } from '/imports/api/properties/Notes.js';
+import { ComputedOnlyPointBuySchema } from '/imports/api/properties/PointBuys.js';
 import { ComputedOnlyProficiencySchema } from '/imports/api/properties/Proficiencies.js';
 import { ComputedOnlyReferenceSchema } from '/imports/api/properties/References.js';
 import { ComputedOnlyRollSchema } from '/imports/api/properties/Rolls.js';
@@ -44,6 +45,7 @@ const propertySchemasIndex = {
   folder: ComputedOnlyFolderSchema,
   item: ComputedOnlyItemSchema,
   note: ComputedOnlyNoteSchema,
+  pointBuy: ComputedOnlyPointBuySchema,
   proficiency: ComputedOnlyProficiencySchema,
   propertySlot: ComputedOnlySlotSchema,
   reference: ComputedOnlyReferenceSchema,
diff --git a/app/imports/api/properties/computedPropertySchemasIndex.js b/app/imports/api/properties/computedPropertySchemasIndex.js
index 9084e3b7..01741b49 100644
--- a/app/imports/api/properties/computedPropertySchemasIndex.js
+++ b/app/imports/api/properties/computedPropertySchemasIndex.js
@@ -15,6 +15,7 @@ import { ComputedFeatureSchema } from '/imports/api/properties/Features.js';
 import { FolderSchema } from '/imports/api/properties/Folders.js';
 import { ComputedItemSchema } from '/imports/api/properties/Items.js';
 import { ComputedNoteSchema } from '/imports/api/properties/Notes.js';
+import { ComputedPointBuySchema } from '/imports/api/properties/PointBuys.js';
 import { ProficiencySchema } from '/imports/api/properties/Proficiencies.js';
 import { ReferenceSchema } from '/imports/api/properties/References.js';
 import { ComputedRollSchema } from '/imports/api/properties/Rolls.js';
@@ -42,6 +43,7 @@ const propertySchemasIndex = {
   feature: ComputedFeatureSchema,
   folder: FolderSchema,
   note: ComputedNoteSchema,
+  pointBuy: ComputedPointBuySchema,
   proficiency: ProficiencySchema,
   propertySlot: ComputedSlotSchema,
   reference: ReferenceSchema,
diff --git a/app/imports/api/properties/propertySchemasIndex.js b/app/imports/api/properties/propertySchemasIndex.js
index cc4b77ee..0f2f8cb0 100644
--- a/app/imports/api/properties/propertySchemasIndex.js
+++ b/app/imports/api/properties/propertySchemasIndex.js
@@ -13,6 +13,7 @@ import { EffectSchema } from '/imports/api/properties/Effects.js';
 import { FeatureSchema } from '/imports/api/properties/Features.js';
 import { FolderSchema } from '/imports/api/properties/Folders.js';
 import { NoteSchema } from '/imports/api/properties/Notes.js';
+import { PointBuySchema } from '/imports/api/properties/PointBuys.js';
 import { ProficiencySchema } from '/imports/api/properties/Proficiencies.js';
 import { ReferenceSchema } from '/imports/api/properties/References.js';
 import { RollSchema } from '/imports/api/properties/Rolls.js';
@@ -42,6 +43,7 @@ const propertySchemasIndex = {
   feature: FeatureSchema,
   folder: FolderSchema,
   note: NoteSchema,
+  pointBuy: PointBuySchema,
   proficiency: ProficiencySchema,
   propertySlot: SlotSchema,
   reference: ReferenceSchema,
diff --git a/app/imports/constants/PROPERTIES.js b/app/imports/constants/PROPERTIES.js
index c2aa3be1..3d75bd06 100644
--- a/app/imports/constants/PROPERTIES.js
+++ b/app/imports/constants/PROPERTIES.js
@@ -96,7 +96,13 @@ const PROPERTIES = Object.freeze({
     icon: 'mdi-note-outline',
     name: 'Note',
     helpText: 'Notes about your character and their adventures',
-    suggestedParents: ['folder'],
+    suggestedParents: ['note', 'folder'],
+  },
+  pointBuy: {
+    icon: 'mdi-table',
+    name: 'Point Buy',
+    helpText: 'A point buy table that allows the user to select an array of values that match a given cost',
+    suggestedParents: [],
   },
   proficiency: {
     icon: 'mdi-brightness-1',
diff --git a/app/imports/constants/STORAGE_LIMITS.js b/app/imports/constants/STORAGE_LIMITS.js
index 6e116b07..cbc647e6 100644
--- a/app/imports/constants/STORAGE_LIMITS.js
+++ b/app/imports/constants/STORAGE_LIMITS.js
@@ -32,6 +32,7 @@ const STORAGE_LIMITS = Object.freeze({
   tagCount: 64,
   writersCount: 20,
   libraryCollectionCount: 32,
+  pointBuyRowsCount: 32,
 });
 
 export default STORAGE_LIMITS;
diff --git a/app/imports/ui/properties/forms/PointBuyForm.vue b/app/imports/ui/properties/forms/PointBuyForm.vue
new file mode 100644
index 00000000..b50d1a36
--- /dev/null
+++ b/app/imports/ui/properties/forms/PointBuyForm.vue
@@ -0,0 +1,129 @@
+<template lang="html">
+  <div class="point-buy-form">
+    <v-row dense>
+      <text-field
+        ref="focusFirst"
+        label="Name"
+        :value="model.name"
+        :error-messages="errors.name"
+        @change="change('name', ...arguments)"
+      />
+      <text-field
+        label="Variable name"
+        :value="model.variableName"
+        hint="Use this name in calculations to reference this point buy table"
+        :error-messages="errors.variableName"
+        @change="change('variableName', ...arguments)"
+      />
+      <computed-field
+        label="Min"
+        hint="The minimum value for each row"
+        :model="model.min"
+        :error-messages="errors.min"
+        @change="change('min', ...arguments)"
+      />
+      <computed-field
+        label="Max"
+        hint="The maximum value for each row"
+        :model="model.max"
+        :error-messages="errors.max"
+        @change="change('max', ...arguments)"
+      />
+      <computed-field
+        label="Cost"
+        hint="A function of `value` that determines the cost of each row"
+        :model="model.cost"
+        :error-messages="errors.cost"
+        @change="change('cost', ...arguments)"
+      />
+      <computed-field
+        label="Total"
+        hint="The total allowed cost of all rows"
+        :model="model.total"
+        :error-messages="errors.total"
+        @change="change('total', ...arguments)"
+      />
+    </v-row>
+    <v-row
+      v-for="(row, i) in model.values"
+      :key="row._id"
+      dense
+    >
+      <text-field
+        ref="focusFirst"
+        label="Name"
+        :value="model.name"
+        :error-messages="errors.name"
+        @change="change(['values', i, 'name'], ...arguments)"
+      />
+      <text-field
+        label="Variable name"
+        :value="model.variableName"
+        hint="Use this name to reference this row of the table: tableVariableName.thisVariableName"
+        :error-messages="errors.variableName"
+        @change="change(['values', i, 'variableName'], ...arguments)"
+      />
+      <v-btn
+        icon
+        @click="$emit('pull', {path: ['values', i]})"
+      >
+        <v-icon>mdi-delete</v-icon>
+      </v-btn>
+    </v-row>
+    <v-btn
+      icon
+      outlined
+      :loading="addRowLoading"
+      :disabled="rowsFull"
+      @click="addRow"
+    >
+      <v-icon>
+        mdi-plus
+      </v-icon>
+    </v-btn>
+    <form-section
+      v-if="$slots.children"
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
+  </div>
+</template>
+
+<script lang="js">
+import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+import { PointBuySchema } from '/imports/api/properties/PointBuys.js';
+
+export default {
+  mixins: [propertyFormMixin, attributeListMixin],
+  data() {
+    return {
+      addRowLoading: false,
+    };
+  },
+  computed: {
+    rowsFull(){
+      if (!this.model.values) return false;
+      let maxCount = PointBuySchema.get('values', 'maxCount');
+      return this.model.values.length >= maxCount;
+    },
+  },
+  methods: {
+    acknowledgeAddResult(){
+      this.addRowLoading = false;
+    },
+    addRow(){
+      this.addRowLoading = true;
+      this.$emit('push', {
+        path: ['values'],
+        value: {
+          _id: Random.id(),
+        },
+        ack: this.acknowledgeAddResult,
+      });
+    },
+  },
+}
+</script>
diff --git a/app/imports/ui/properties/forms/shared/propertyFormIndex.js b/app/imports/ui/properties/forms/shared/propertyFormIndex.js
index 1aa8f42e..63c4fe45 100644
--- a/app/imports/ui/properties/forms/shared/propertyFormIndex.js
+++ b/app/imports/ui/properties/forms/shared/propertyFormIndex.js
@@ -14,6 +14,7 @@ const FeatureForm = () => import('/imports/ui/properties/forms/FeatureForm.vue')
 const FolderForm = () => import('/imports/ui/properties/forms/FolderForm.vue');
 const ItemForm = () => import('/imports/ui/properties/forms/ItemForm.vue');
 const NoteForm = () => import('/imports/ui/properties/forms/NoteForm.vue');
+const PointBuyForm = () => import('/imports/ui/properties/forms/PointBuyForm.vue');
 const ProficiencyForm = () => import('/imports/ui/properties/forms/ProficiencyForm.vue');
 const ReferenceForm = () => import('/imports/ui/properties/forms/ReferenceForm.vue');
 const RollForm = () => import('/imports/ui/properties/forms/RollForm.vue');
@@ -43,6 +44,7 @@ export default {
   folder: FolderForm,
   item: ItemForm,
   note: NoteForm,
+  pointBuy: PointBuyForm,
   proficiency: ProficiencyForm,
   propertySlot: SlotForm,
   reference: ReferenceForm,

From 28307e26c32ac39e43390229826bd16bdcb8efc3 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 19 Aug 2022 14:03:03 +0200
Subject: [PATCH 02/14] Fixed some issues with skill display

---
 .../computeByType/computeSkill.js             |  2 +-
 .../computeVariable/computeVariableAsSkill.js |  5 ++-
 app/imports/api/properties/Skills.js          |  1 +
 .../components/skills/SkillListTile.vue       |  4 +-
 .../ui/properties/viewers/SkillViewer.vue     | 44 ++++---------------
 5 files changed, 16 insertions(+), 40 deletions(-)

diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computeSkill.js b/app/imports/api/engine/computation/computeComputation/computeByType/computeSkill.js
index 2e79d18a..9243adb4 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computeSkill.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computeSkill.js
@@ -4,7 +4,7 @@
 // by computeVariableAsSkill
 export default function computeSkill(computation, node){
   const prop = node.data;
-  prop.proficiency = prop.baseProficiency;
+  prop.proficiency = prop.baseProficiency || 0;
   let profBonus = computation.scope['proficiencyBonus']?.value || 0;
   // Multiply the proficiency bonus by the actual proficiency
   if(prop.proficiency === 0.49){
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/computeVariableAsSkill.js b/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/computeVariableAsSkill.js
index 37b6afdd..01d34101 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/computeVariableAsSkill.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/computeVariableAsSkill.js
@@ -33,6 +33,9 @@ export default function computeVariableAsSkill(computation, node, prop){
   const aggregator = node.data.effectAggregator;
   const aggregatorBase = aggregator?.base || 0;
 
+  // Store effects
+  prop.effects = node.data.effects;
+
   // If there is no aggregator, determine if the prop can hide, then exit
   if (!aggregator){
     prop.hide = statBase === undefined &&
@@ -71,8 +74,6 @@ export default function computeVariableAsSkill(computation, node, prop){
   prop.fail = aggregator.fail;
   // Rollbonus
   prop.rollBonuses = aggregator.rollBonus;
-  // Store effects
-  prop.effects = node.data.effects;
 }
 
 function aggregateAbilityEffects({computation, skillNode, abilityNode}){
diff --git a/app/imports/api/properties/Skills.js b/app/imports/api/properties/Skills.js
index 47ba2a76..d9f04791 100644
--- a/app/imports/api/properties/Skills.js
+++ b/app/imports/api/properties/Skills.js
@@ -135,6 +135,7 @@ let ComputedOnlySkillSchema = createPropertySchema({
   effects: {
     type: Array,
     optional: true,
+    removeBeforeCompute: true,
   },
   'effects.$': {
     type: Object,
diff --git a/app/imports/ui/properties/components/skills/SkillListTile.vue b/app/imports/ui/properties/components/skills/SkillListTile.vue
index 45f8b138..e24ece45 100644
--- a/app/imports/ui/properties/components/skills/SkillListTile.vue
+++ b/app/imports/ui/properties/components/skills/SkillListTile.vue
@@ -8,7 +8,7 @@
       <v-list-item-title class="d-flex align-center">
         <roll-popup
           v-if="!hideModifier"
-          class="prof-mod mr-1"
+          class="prof-mod mr-1 flex-shrink-0"
           button-class="pl-3 pr-2"
           text
           :roll-text="displayedModifier"
@@ -43,7 +43,7 @@
           :value="model.proficiency"
           class="prof-icon ml-3 mr-2"
         />
-        <div>
+        <div class="text-truncate">
           {{ model.name }}
           <template v-if="model.conditionalBenefits && model.conditionalBenefits.length">
             *
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index 5cc7479e..3b31157a 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -47,6 +47,12 @@
         name="Passive score"
         :value="passiveScore"
       />
+      <property-field
+        v-if="model.overridden"
+        :cols="{cols: 6, md: 12}"
+        name="Overridden"
+        value="Overriden by another property with the same variable name"
+      />
     </v-row>
     <v-row dense>
       <property-description
@@ -55,7 +61,7 @@
       />
     </v-row>
     <v-row
-      v-if="baseEffects.length || ability || effects.length"
+      v-if="ability || (effects && effects.length)"
       dense
     >
       <property-field
@@ -63,14 +69,6 @@
         name="Effects"
       >
         <v-list style="width: 100%">
-          <attribute-effect
-            v-for="effect in baseEffects"
-            :key="effect._id === model._id ? 'this_base' : effect._id"
-            :model="effect"
-            :hide-breadcrumbs="effect._id === model._id"
-            :data-id="effect._id"
-            @click="effect._id !== model._id && clickEffect(effect._id)"
-          />
           <attribute-effect
             v-if="ability"
             :key="ability._id"
@@ -188,32 +186,8 @@ export default {
     variables(){
       return CreatureVariables.findOne({_creatureId: this.context.creatureId}) || {};
     },
-    baseEffects(){
-      if (this.context.creatureId){
-        let creatureId = this.context.creatureId;
-        return CreatureProperties.find({
-          'ancestors.id': creatureId,
-          type: 'skill',
-          variableName: this.model.variableName,
-          removed: {$ne: true},
-          inactive: {$ne: true},
-        }).map( prop => ({
-          _id: prop._id,
-          name: 'Skill base value',
-          operation: 'base',
-          calculation: prop.baseValueCalculation,
-          amount: {value: prop.baseValue?.value},
-          stats: [prop.variableName],
-          ancestors: prop.ancestors,
-        }) ).filter(effect => effect.amount?.value);
-      } else {
-        return [];
-      }
-    },
     effects() {
-      return CreatureProperties.find({
-        _id: { $in: this.model.effects?.map(e => e._id) || [] }
-      });
+      return this.model.effects;
     },
     baseProficiencies(){
       if (this.context.creatureId){
@@ -265,7 +239,7 @@ export default {
       return {
         _id: abilityProp._id,
         name: abilityProp.name,
-        operation: 'base',
+        operation: 'add',
         amount: {value: abilityProp.modifier},
         stats: [this.model.variableName],
         ancestors: abilityProp.ancestors,

From c6ca8c1fa43e6b5cf9e75d08f7812e4102d7f78c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 19 Aug 2022 14:03:12 +0200
Subject: [PATCH 03/14] Added point buy to computation engine

---
 .../buildComputation/linkTypeDependencies.js  |  18 ++
 .../computeComputation/computeByType.js       |   2 +
 .../computeByType/computePointBuy.js          |  50 ++++
 .../aggregate/aggregateDefinition.js          |  33 ++-
 .../aggregate/aggregateEffect.js              |   1 +
 app/imports/api/properties/Attributes.js      |   1 +
 app/imports/api/properties/PointBuys.js       |  30 ++-
 .../character/CharacterCreationDialog.vue     |   2 +-
 .../components/attributes/AttributeEffect.vue | 175 +++++++------
 .../ui/properties/forms/PointBuyForm.vue      | 240 ++++++++++++------
 .../properties/forms/shared/ComputedField.vue |  14 +-
 .../ui/properties/viewers/AttributeViewer.vue |  39 +--
 .../ui/properties/viewers/PointBuyViewer.vue  |  45 ++++
 .../viewers/shared/propertyViewerIndex.js     |   2 +
 14 files changed, 443 insertions(+), 209 deletions(-)
 create mode 100644 app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
 create mode 100644 app/imports/ui/properties/viewers/PointBuyViewer.vue

diff --git a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
index c729bf81..08eef012 100644
--- a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
+++ b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
@@ -14,6 +14,7 @@ const linkDependenciesByType = {
   effect: linkEffects,
   proficiency: linkProficiencies,
   roll: linkRoll,
+  pointBuy: linkPointBuy,
   propertySlot: linkSlot,
   skill: linkSkill,
   spell: linkAction,
@@ -242,6 +243,23 @@ function linkDamageMultiplier(dependencyGraph, prop) {
   });
 }
 
+function linkPointBuy(dependencyGraph, prop){
+  dependOnCalc({ dependencyGraph, prop, key: 'min' });
+  dependOnCalc({ dependencyGraph, prop, key: 'max' });
+  dependOnCalc({ dependencyGraph, prop, key: 'cost' });
+  prop.values?.forEach(row => {
+    row.type = 'pointBuyRow';
+    row.tableName = prop.name;
+    row.tableId = prop._id;
+    dependencyGraph.addNode(row._id, row);
+    linkVariableName(dependencyGraph, row);
+    dependOnCalc({ dependencyGraph, row, key: 'min' });
+    dependOnCalc({ dependencyGraph, row, key: 'max' });
+    dependOnCalc({ dependencyGraph, row, key: 'cost' });
+  });
+  if (prop.inactive) return;
+}
+
 function linkProficiencies(dependencyGraph, prop){
   // The stats depend on the proficiency
   if (prop.inactive) return;
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType.js b/app/imports/api/engine/computation/computeComputation/computeByType.js
index b6ccff38..7597b976 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType.js
@@ -2,6 +2,7 @@ import _variable from './computeByType/computeVariable.js';
 import action from './computeByType/computeAction.js';
 import attribute from './computeByType/computeAttribute.js';
 import skill from './computeByType/computeSkill.js';
+import pointBuy from './computeByType/computePointBuy.js';
 import propertySlot from './computeByType/computeSlot.js';
 import container from './computeByType/computeContainer.js';
 import _calculation from './computeByType/computeCalculation.js';
@@ -13,6 +14,7 @@ export default Object.freeze({
   attribute,
   container,
   skill,
+  pointBuy,
   propertySlot,
   spell: action,
 });
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
new file mode 100644
index 00000000..a1d4cbbd
--- /dev/null
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
@@ -0,0 +1,50 @@
+import { has } from 'lodash';
+import evaluateCalculation from '../../utility/evaluateCalculation.js';
+
+export default function computePointBuy(computation, node) {
+  const prop = node.data;
+  const tableMin = prop.min?.value || null;
+  const tableMax = prop.max?.value || null;
+  prop.spent = 0;
+  prop.values?.forEach(row => {
+    // Clean up added properties
+    delete row.tableId;
+    delete row.tableName;
+    delete row.type;
+
+    row.spent = 0;
+    if (row.value === undefined) return;
+    const min = has(row, 'min.value') ? row.min.value : tableMin;
+    const max = has(row, 'max.value') ? row.max.value : tableMax;
+    const costFunction = EJSON.clone(row.cost || prop.cost);
+    if (costFunction) costFunction.parseLevel = 'reduce';
+
+    // Check min and max
+    if (min !== null && row.value < min) {
+      row.errors = row.errors || [];
+      row.errors.push('Value smaller than min value');
+    }
+    if (max !== null && row.value > max) {
+      row.errors = row.errors || [];
+      row.errors.push('Value larger than max value');
+    }
+    // Evaluate the cost function
+    if (!costFunction) return;
+    evaluateCalculation(costFunction, { ...computation.scope, value: row.value });
+    // Write calculation errors
+    costFunction.errors?.forEach(error => {
+      if (error?.message) {
+        row.errors = row.errors || [];
+        row.errors.push(error.message);
+      }
+    });
+    if (Number.isFinite(costFunction.value)) {
+      row.spent = costFunction.value;
+      prop.spent += costFunction.value;
+    }
+  });
+  if (prop.spent > prop.total?.value) {
+    prop.errors = prop.errors || [];
+    prop.errors.push('Spent more than total points available')
+  }
+}
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateDefinition.js b/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateDefinition.js
index 66fbe79a..d665b284 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateDefinition.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateDefinition.js
@@ -8,7 +8,13 @@ export default function aggregateDefinition({node, linkedNode, link}){
   // get current defining prop
   const definingProp = node.data.definingProp;
   // Find the last defining prop
-  if (!definingProp || prop.order > definingProp.order){
+  if (
+    !definingProp ||
+    prop.type !== 'pointBuyRow' && (
+      definingProp.type === 'pointBuyRow' ||
+      prop.order > definingProp.order
+    )
+  ) {
     // override the current defining prop
     overrideProp(definingProp, node);
     // set this prop as the new defining prop
@@ -18,9 +24,32 @@ export default function aggregateDefinition({node, linkedNode, link}){
   }
 
   // Aggregate the base value due to the defining properties
-  const propBaseValue = prop.baseValue?.value;
+  let propBaseValue = prop.baseValue?.value;
+  // Point buy rows use prop.value instead of prop.baseValue
+  if (prop.type === 'pointBuyRow') {
+    propBaseValue = prop.value;
+  }
 
   if (propBaseValue === undefined) return;
+  // Store a summary of the definition as a base value effect
+  node.data.effects = node.data.effects || [];
+  if (prop.type === 'pointBuyRow') {
+    node.data.effects.push({
+      _id: prop.tableId,
+      name: prop.tableName,
+      operation: 'base',
+      amount: { value: propBaseValue },
+      type: 'pointBuy',
+    });
+  } else {
+    node.data.effects.push({
+      _id: prop._id,
+      name: prop.name,
+      operation: 'base',
+      amount: { value: propBaseValue },
+      type: prop.type,
+    });
+  }
   if (node.data.baseValue === undefined || propBaseValue > node.data.baseValue){
     node.data.baseValue = propBaseValue;
   }
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateEffect.js b/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateEffect.js
index 8cf47d36..e4a58317 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateEffect.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computeVariable/aggregate/aggregateEffect.js
@@ -24,6 +24,7 @@ export default function aggregateEffect({node, linkedNode, link}){
     name: linkedNode.data.name,
     operation: linkedNode.data.operation,
     amount: linkedNode.data.amount && {value: linkedNode.data.amount.value},
+    type: linkedNode.data.type,
     // ancestors: linkedNode.data.ancestors,
   });
 
diff --git a/app/imports/api/properties/Attributes.js b/app/imports/api/properties/Attributes.js
index 38721928..51174362 100644
--- a/app/imports/api/properties/Attributes.js
+++ b/app/imports/api/properties/Attributes.js
@@ -176,6 +176,7 @@ let ComputedOnlyAttributeSchema = createPropertySchema({
   effects: {
     type: Array,
     optional: true,
+    removeBeforeCompute: true,
   },
   'effects.$': {
     type: Object,
diff --git a/app/imports/api/properties/PointBuys.js b/app/imports/api/properties/PointBuys.js
index 3be53ae2..24950add 100644
--- a/app/imports/api/properties/PointBuys.js
+++ b/app/imports/api/properties/PointBuys.js
@@ -13,13 +13,6 @@ let PointBuySchema = createPropertySchema({
     optional: true,
     max: STORAGE_LIMITS.name,
   },
-  variableName: {
-    type: String,
-    optional: true,
-    regEx: VARIABLE_NAME_REGEX,
-    min: 2,
-    max: STORAGE_LIMITS.variableName,
-  },
   ignored: {
     type: Boolean,
     optional: true,
@@ -82,6 +75,7 @@ let PointBuySchema = createPropertySchema({
   cost: {
     type: 'fieldToCompute',
     optional: true,
+    parseLevel: 'compile',
   },
 });
 
@@ -97,6 +91,7 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
   cost: {
     type: 'computedOnlyField',
     optional: true,
+    parseLevel: 'compile',
   },
   'values': {
     type: Array,
@@ -117,6 +112,20 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
   'values.$.cost': {
     type: 'computedOnlyField',
     optional: true,
+    parseLevel: 'compile',
+  },
+  'values.$.spent': {
+    type: Number,
+    optional: true,
+    removeBeforeCompute: true,
+  },
+  'values.$.errors': {
+    type: Array,
+    optional: true,
+    removeBeforeCompute: true,
+  },
+  'values.$.errors.$': {
+    type: String,
   },
   total: {
     type: 'computedOnlyField',
@@ -127,11 +136,14 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     optional: true,
     removeBeforeCompute: true,
   },
-  error: {
-    type: String,
+  errors: {
+    type: Array,
     optional: true,
     removeBeforeCompute: true,
   },
+  'errors.$': {
+    type: String,
+  },
 });
 
 const ComputedPointBuySchema = new SimpleSchema()
diff --git a/app/imports/ui/creature/character/CharacterCreationDialog.vue b/app/imports/ui/creature/character/CharacterCreationDialog.vue
index 568ae394..17fca049 100644
--- a/app/imports/ui/creature/character/CharacterCreationDialog.vue
+++ b/app/imports/ui/creature/character/CharacterCreationDialog.vue
@@ -98,7 +98,7 @@
         Next
       </v-btn>
       <v-btn
-        :disabled="biographyAlert"
+        :disabled="!!biographyAlert"
         :text="step < 2"
         :color="step < 2? '' : 'accent'"
         @click="submit"
diff --git a/app/imports/ui/properties/components/attributes/AttributeEffect.vue b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
index 687500bc..5725a3ef 100644
--- a/app/imports/ui/properties/components/attributes/AttributeEffect.vue
+++ b/app/imports/ui/properties/components/attributes/AttributeEffect.vue
@@ -27,9 +27,9 @@
       <div class="text-body-1 mb-1">
         {{ displayedText }}
       </div>
-      <div v-if="!hideBreadcrumbs && model.ancestors">
+      <div v-if="!hideBreadcrumbs && ancestors">
         <breadcrumbs
-          :model="model"
+          :model="{...model, ancestors}"
           class="text-caption"
           no-links
           no-icons
@@ -41,94 +41,101 @@
 </template>
 
 <script lang="js">
-  import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
-  import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
-  import { isFinite } from 'lodash';
+import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import { isFinite } from 'lodash';
 
-  export default {
-    components: {
-      Breadcrumbs,
+export default {
+  components: {
+    Breadcrumbs,
+  },
+  props: {
+    hideBreadcrumbs: Boolean,
+    model: {
+      type: Object,
+      required: true,
     },
-    props: {
-      hideBreadcrumbs: Boolean,
-      model: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    hasClickListener(){
+      return this.$listeners && this.$listeners.click
     },
-    computed: {
-      hasClickListener(){
-        return this.$listeners && this.$listeners.click
-      },
-      displayedText(){
-        if (this.model.operation === 'conditional'){
-          return this.model.text || this.model.name || this.operation
-        } else {
-          return this.model.name || this.operation
-        }
-      },
-      resolvedValue(){
-        let amount = this.model.amount;
-        if (!amount) return;
-        return amount.value !== undefined ? amount.value : amount.calculation;
-      },
-      effectIcon(){
-        let value = this.resolvedValue;
-        return getEffectIcon(this.model.operation, value);
-      },
-      operation(){
-        switch(this.model.operation) {
-          case 'base': return 'Base value';
-          case 'add': return 'Add';
-          case 'mul': return 'Multiply';
-          case 'min': return 'Minimum';
-          case 'max': return 'Maximum';
-          case 'advantage': return 'Advantage';
-          case 'disadvantage': return 'Disadvantage';
-          case 'passiveAdd': return 'Passive bonus';
-          case 'fail': return 'Always fail';
-          case 'conditional': return 'Conditional benefit' ;
-          default: return '';
-        }
-      },
-      showValue(){
-        switch(this.model.operation) {
-          case 'base': return true;
-          case 'add': return true;
-          case 'mul': return true;
-          case 'min': return true;
-          case 'max': return true;
-          case 'advantage': return false;
-          case 'disadvantage': return false;
-          case 'passiveAdd': return true;
-          case 'fail': return false;
-          case 'conditional': return false;
-          default: return false;
-        }
-      },
-      displayedValue(){
-        let value = this.resolvedValue;
-        switch(this.model.operation) {
-          case 'base': return value;
-          case 'add': return isFinite(value) ? Math.abs(value) : value;
-          case 'mul': return value;
-          case 'min': return value;
-          case 'max': return value;
-          case 'advantage': return;
-          case 'disadvantage': return;
-          case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
-          case 'fail': return;
-          case 'conditional': return undefined;
-          default: return undefined;
-        }
+    displayedText(){
+      if (this.model.operation === 'conditional'){
+        return this.model.text || this.model.name || this.operation
+      } else {
+        return this.model.name || this.operation
       }
     },
-    methods: {
-      click(e){
-        this.$emit('click', e);
-      },
+    resolvedValue() {
+      let amount = this.model.amount;
+      if (!amount) return;
+      return amount.value !== undefined ? amount.value : amount.calculation;
     },
-  };
+    effectIcon(){
+      let value = this.resolvedValue;
+      return getEffectIcon(this.model.operation, value);
+    },
+    operation(){
+      switch(this.model.operation) {
+        case 'base': return 'Base value';
+        case 'add': return 'Add';
+        case 'mul': return 'Multiply';
+        case 'min': return 'Minimum';
+        case 'max': return 'Maximum';
+        case 'advantage': return 'Advantage';
+        case 'disadvantage': return 'Disadvantage';
+        case 'passiveAdd': return 'Passive bonus';
+        case 'fail': return 'Always fail';
+        case 'conditional': return 'Conditional benefit' ;
+        default: return '';
+      }
+    },
+    showValue(){
+      switch(this.model.operation) {
+        case 'base': return true;
+        case 'add': return true;
+        case 'mul': return true;
+        case 'min': return true;
+        case 'max': return true;
+        case 'advantage': return false;
+        case 'disadvantage': return false;
+        case 'passiveAdd': return true;
+        case 'fail': return false;
+        case 'conditional': return false;
+        default: return false;
+      }
+    },
+    displayedValue(){
+      let value = this.resolvedValue;
+      switch(this.model.operation) {
+        case 'base': return value;
+        case 'add': return isFinite(value) ? Math.abs(value) : value;
+        case 'mul': return value;
+        case 'min': return value;
+        case 'max': return value;
+        case 'advantage': return;
+        case 'disadvantage': return;
+        case 'passiveAdd': return isFinite(value) ? Math.abs(value) : value;
+        case 'fail': return;
+        case 'conditional': return undefined;
+        default: return undefined;
+      }
+    }
+},
+  meteor: {
+    ancestors() {
+      const prop = CreatureProperties.findOne(this.model._id);
+      return prop && prop.ancestors || [];
+    }
+  },
+  methods: {
+    click(e){
+      this.$emit('click', e);
+    },
+  },
+};
 </script>
 
 <style lang="css" scoped>
diff --git a/app/imports/ui/properties/forms/PointBuyForm.vue b/app/imports/ui/properties/forms/PointBuyForm.vue
index b50d1a36..d7709a7d 100644
--- a/app/imports/ui/properties/forms/PointBuyForm.vue
+++ b/app/imports/ui/properties/forms/PointBuyForm.vue
@@ -1,86 +1,172 @@
 <template lang="html">
   <div class="point-buy-form">
     <v-row dense>
-      <text-field
-        ref="focusFirst"
-        label="Name"
-        :value="model.name"
-        :error-messages="errors.name"
-        @change="change('name', ...arguments)"
-      />
-      <text-field
-        label="Variable name"
-        :value="model.variableName"
-        hint="Use this name in calculations to reference this point buy table"
-        :error-messages="errors.variableName"
-        @change="change('variableName', ...arguments)"
-      />
-      <computed-field
-        label="Min"
-        hint="The minimum value for each row"
-        :model="model.min"
-        :error-messages="errors.min"
-        @change="change('min', ...arguments)"
-      />
-      <computed-field
-        label="Max"
-        hint="The maximum value for each row"
-        :model="model.max"
-        :error-messages="errors.max"
-        @change="change('max', ...arguments)"
-      />
-      <computed-field
-        label="Cost"
-        hint="A function of `value` that determines the cost of each row"
-        :model="model.cost"
-        :error-messages="errors.cost"
-        @change="change('cost', ...arguments)"
-      />
-      <computed-field
-        label="Total"
-        hint="The total allowed cost of all rows"
-        :model="model.total"
-        :error-messages="errors.total"
-        @change="change('total', ...arguments)"
-      />
-    </v-row>
-    <v-row
-      v-for="(row, i) in model.values"
-      :key="row._id"
-      dense
-    >
-      <text-field
-        ref="focusFirst"
-        label="Name"
-        :value="model.name"
-        :error-messages="errors.name"
-        @change="change(['values', i, 'name'], ...arguments)"
-      />
-      <text-field
-        label="Variable name"
-        :value="model.variableName"
-        hint="Use this name to reference this row of the table: tableVariableName.thisVariableName"
-        :error-messages="errors.variableName"
-        @change="change(['values', i, 'variableName'], ...arguments)"
-      />
-      <v-btn
-        icon
-        @click="$emit('pull', {path: ['values', i]})"
+      <v-col
+        cols="12"
+        md="6"
       >
-        <v-icon>mdi-delete</v-icon>
-      </v-btn>
+        <text-field
+          ref="focusFirst"
+          label="Table name"
+          :value="model.name"
+          :error-messages="errors.name"
+          @change="change('name', ...arguments)"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <computed-field
+          label="Min"
+          hint="The minimum value for each row"
+          :model="model.min"
+          :error-messages="errors.min"
+          @change="({path, value, ack}) =>
+            $emit('change', {path: ['min', ...path], value, ack})"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <computed-field
+          label="Max"
+          hint="The maximum value for each row"
+          :model="model.max"
+          :error-messages="errors.max"
+          @change="({path, value, ack}) =>
+            $emit('change', {path: ['max', ...path], value, ack})"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <computed-field
+          label="Cost"
+          hint="A function of `value` that determines the cost of each row"
+          hide-value
+          :model="model.cost"
+          :error-messages="errors.cost"
+          @change="({path, value, ack}) =>
+            $emit('change', {path: ['cost', ...path], value, ack})"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <computed-field
+          label="Total available points"
+          hint="The total allowed cost of all rows"
+          :model="model.total"
+          :error-messages="errors.total"
+          @change="({path, value, ack}) =>
+            $emit('change', {path: ['total', ...path], value, ack})"
+        />
+      </v-col>
     </v-row>
-    <v-btn
-      icon
-      outlined
-      :loading="addRowLoading"
-      :disabled="rowsFull"
-      @click="addRow"
+    <v-subheader>
+      Rows
+    </v-subheader>
+    <v-slide-x-transition
+      group
+      leave-absolute
     >
-      <v-icon>
-        mdi-plus
-      </v-icon>
-    </v-btn>
+      <v-row
+        v-for="(row, i) in model.values"
+        :key="row._id"
+        dense
+      >
+        <v-divider
+          v-if="i"
+          style="flex-basis: 100%;"
+          class="mb-6"
+        />
+        <v-col cols="11">
+          <v-row dense>
+            <v-col
+              cols="12"
+              md="6"
+            >
+              <text-field
+                ref="focusFirst"
+                label="Row Name"
+                :value="row.name"
+                :error-messages="errors.values && errors.values[i] && errors.values[i].name"
+                @change="change(['values', i, 'name'], ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="6"
+            >
+              <text-field
+                label="Variable name"
+                :value="row.variableName"
+                hint="Use this name in calculations to reference this row of the table"
+                :error-messages="errors.values && errors.values[i] && errors.values[i].variableName"
+                @change="change(['values', i, 'variableName'], ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="6"
+            >
+              <text-field
+                label="Value"
+                type="number"
+                :min="row.hasOwnProperty('min') ? row.min && row.min.value : model.min && model.min.value"
+                :max="row.hasOwnProperty('max') ? row.max && row.max.value : model.max && model.max.value"
+                :value="row.value"
+                :error-messages="errors.values && errors.values[i] && errors.values[i].value"
+                @change="(value, ack) => $emit('change', {path: ['values', i, 'value'], value, ack})"
+              >
+                <template v-if="row.spent">
+                  Cost: {{ row.spent }}
+                </template>
+              </text-field>
+            </v-col>
+          </v-row>
+        </v-col>
+        <v-col
+          cols="1"
+          class="d-flex align-center justify-center"
+        >
+          <v-btn
+            icon
+            large
+            @click="$emit('pull', {path: ['values', i]})"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row
+        key="addButton"
+        dense
+        justify="end"
+        class="mb-4"
+      >
+        <v-col
+          cols="1"
+          class="d-flex justify-center"
+        >  
+          <v-btn
+            icon
+            outlined
+            :loading="addRowLoading"
+            :disabled="rowsFull"
+            @click="addRow"
+          >
+            <v-icon>
+              mdi-plus
+            </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-slide-x-transition>
     <form-section
       v-if="$slots.children"
       name="Children"
diff --git a/app/imports/ui/properties/forms/shared/ComputedField.vue b/app/imports/ui/properties/forms/shared/ComputedField.vue
index d6b237e4..9d3ac194 100644
--- a/app/imports/ui/properties/forms/shared/ComputedField.vue
+++ b/app/imports/ui/properties/forms/shared/ComputedField.vue
@@ -6,7 +6,7 @@
       @change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
     >
       <template
-        v-if="model.value !== undefined || model.value !== null"
+        v-if="showValue"
         #value
       >
         {{ model.value }}
@@ -28,8 +28,20 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    hideValue: {
+      type: Boolean,
+    },
   },
   computed: {
+    showValue() {
+      const value = this.model.value;
+      if (
+        this.hideValue || 
+        (value === undefined || value === null) ||
+        value == this.model.calculation
+      ) return false;
+      return true;
+    },
     errorList(){
       if (this.model.parseError){
         return [this.model.parseError, ...this.model.errors];
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index 6a2844c8..6561dfd1 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -107,25 +107,18 @@
     </v-row>
     <v-row dense>
       <property-field
-        v-if="baseEffects.length || effects.length"
+        v-if="effects && effects.length"
         :cols="{col: 12}"
         name="Effects"
       >
         <v-list style="width: 100%;">
-          <attribute-effect
-            v-for="effect in baseEffects"
-            :key="effect._id"
-            :model="effect"
-            :hide-breadcrumbs="effect._id === model._id"
-            :data-id="effect._id"
-            @click="effect._id !== model._id && clickEffect(effect._id)"
-          />
           <attribute-effect
             v-for="effect in effects"
             :key="effect._id"
             :model="effect"
             :data-id="effect._id"
-            @click="clickEffect(effect._id)"
+            :hide-breadcrumbs="effect._id === model._id"
+            @click="effect._id !== model._id && clickEffect(effect._id)"
           />
         </v-list>
       </property-field>
@@ -137,7 +130,6 @@
   import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
   import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
   import AttributeEffect from '/imports/ui/properties/components/attributes/AttributeEffect.vue';
-  import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
   import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
   import IncrementButton from '/imports/ui/components/IncrementButton.vue';
   import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
@@ -211,31 +203,8 @@
       },
     },
     meteor: {
-      baseEffects(){
-        if (this.context.creatureId && this.model.variableName){
-          let creatureId = this.context.creatureId;
-          return CreatureProperties.find({
-            'ancestors.id': creatureId,
-            type: 'attribute',
-            variableName: this.model.variableName,
-            removed: {$ne: true},
-            inactive: {$ne: true},
-          }).map( prop => ({
-            _id: prop._id,
-            name: 'Attribute base value',
-            operation: 'base',
-            amount: prop.baseValue,
-            stats: [prop.variableName],
-            ancestors: prop.ancestors,
-          }) ).filter(effect => effect.amount);
-        } else {
-          return [];
-        }
-      },
       effects() {
-        return CreatureProperties.find({
-          _id: { $in: this.model.effects?.map(e => e._id) || [] }
-        });
+        return this.model.effects;
       },
     },
   }
diff --git a/app/imports/ui/properties/viewers/PointBuyViewer.vue b/app/imports/ui/properties/viewers/PointBuyViewer.vue
new file mode 100644
index 00000000..760b87ab
--- /dev/null
+++ b/app/imports/ui/properties/viewers/PointBuyViewer.vue
@@ -0,0 +1,45 @@
+<template lang="html">
+  <div class="point-buy-viewer">
+    <v-row dense>
+      <property-field
+        v-for="(row, i) in model.values"
+        :key="row._id"
+        :name="row.name"
+        :value="row.value"
+      />
+    </v-row>
+  </div>
+</template>
+
+<script lang="js">
+import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
+import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import { timingOptions, eventOptions, actionPropertyTypeOptions } from '/imports/api/properties/Triggers.js';
+
+export default {
+  mixins: [propertyViewerMixin],
+  inject: {
+    context: {
+      default: {},
+    },
+  },
+  computed: {
+    slotTypeName(){
+      if (!this.model.slotType) return;
+      return getPropertyName(this.model.slotType);
+    },
+    timingText(){
+      if (!this.model.timing) return;
+      return timingOptions[this.model.timing];
+    },
+    actionPropertyText(){
+      if (!this.model.actionPropertyType) return;
+      return actionPropertyTypeOptions[this.model.actionPropertyType];
+    },
+    eventText(){
+      if (!this.model.event) return;
+      return eventOptions[this.model.event];
+    },
+  }
+}
+</script>
diff --git a/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js b/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
index cef19b01..15d148e7 100644
--- a/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
+++ b/app/imports/ui/properties/viewers/shared/propertyViewerIndex.js
@@ -15,6 +15,7 @@ const FeatureViewer = () => import ('/imports/ui/properties/viewers/FeatureViewe
 const FolderViewer = () => import ('/imports/ui/properties/viewers/FolderViewer.vue');
 const ItemViewer = () => import ('/imports/ui/properties/viewers/ItemViewer.vue');
 const NoteViewer = () => import ('/imports/ui/properties/viewers/NoteViewer.vue');
+const PointBuyViewer = () => import ('/imports/ui/properties/viewers/PointBuyViewer.vue');
 const ProficiencyViewer = () => import ('/imports/ui/properties/viewers/ProficiencyViewer.vue');
 const ReferenceViewer = () => import ('/imports/ui/properties/viewers/ReferenceViewer.vue');
 const RollViewer = () => import ('/imports/ui/properties/viewers/RollViewer.vue');
@@ -45,6 +46,7 @@ export default {
   folder: FolderViewer,
   item: ItemViewer,
   note: NoteViewer,
+  pointBuy: PointBuyViewer,
   proficiency: ProficiencyViewer,
   propertySlot: SlotViewer,
   roll: RollViewer,

From 5d14c392e8cb7a5b952ee3e4a567334e12b1307c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 22 Aug 2022 11:58:48 +0200
Subject: [PATCH 04/14] Added creature new variables to API

---
 app/imports/server/rest/apiPublications/creature.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/imports/server/rest/apiPublications/creature.js b/app/imports/server/rest/apiPublications/creature.js
index f805c92b..a35ae634 100644
--- a/app/imports/server/rest/apiPublications/creature.js
+++ b/app/imports/server/rest/apiPublications/creature.js
@@ -1,6 +1,7 @@
 import SimpleSchema from 'simpl-schema';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import CreatureVariables from '/imports/api/creature/creatures/CreatureVariables';
 import { assertViewPermission } from '/imports/api/creature/creatures/creaturePermissions.js';
 import computeCreature from '/imports/api/engine/computeCreature.js';
 import VERSION from '/imports/constants/VERSION.js';
@@ -40,6 +41,9 @@ Meteor.publish('api-creature', function(creatureId){
     CreatureProperties.find({
       'ancestors.id': creatureId,
     }),
+    CreatureVariables.find({
+      _creatureId: creatureId,
+    }),
   ];
 }, {
   url: 'api/creature/:0'

From 59fc5ab8511871c9a4dd036b9e1569f3ee677b3d Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 22 Aug 2022 15:07:40 +0200
Subject: [PATCH 05/14] Continued work on point buy UI

---
 .../computeByType/computePointBuy.js           | 18 ++++++++++++++----
 app/imports/api/properties/PointBuys.js        |  5 +++--
 .../ui/properties/forms/PointBuyForm.vue       | 12 ++++++++++++
 .../ui/properties/forms/PointBuySpendForm.vue  | 13 +++++++++++++
 .../forms/shared/CalculationErrorList.vue      |  5 ++++-
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 app/imports/ui/properties/forms/PointBuySpendForm.vue

diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
index a1d4cbbd..a24794f3 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
@@ -22,11 +22,17 @@ export default function computePointBuy(computation, node) {
     // Check min and max
     if (min !== null && row.value < min) {
       row.errors = row.errors || [];
-      row.errors.push('Value smaller than min value');
+      row.errors.push({
+        type: 'pointBuyError',
+        message: 'Value smaller than min value'
+      });
     }
     if (max !== null && row.value > max) {
       row.errors = row.errors || [];
-      row.errors.push('Value larger than max value');
+      row.errors.push({
+        type: 'pointBuyError',
+        message: 'Value larger than max value'
+      });
     }
     // Evaluate the cost function
     if (!costFunction) return;
@@ -35,7 +41,8 @@ export default function computePointBuy(computation, node) {
     costFunction.errors?.forEach(error => {
       if (error?.message) {
         row.errors = row.errors || [];
-        row.errors.push(error.message);
+        error.message = 'Cost calculation error.\n' + error.message;
+        row.errors.push(error);
       }
     });
     if (Number.isFinite(costFunction.value)) {
@@ -45,6 +52,9 @@ export default function computePointBuy(computation, node) {
   });
   if (prop.spent > prop.total?.value) {
     prop.errors = prop.errors || [];
-    prop.errors.push('Spent more than total points available')
+    prop.errors.push({
+      type: 'pointBuyError',
+      message: 'Spent more than total points available',
+    });
   }
 }
diff --git a/app/imports/api/properties/PointBuys.js b/app/imports/api/properties/PointBuys.js
index 24950add..d5fe983c 100644
--- a/app/imports/api/properties/PointBuys.js
+++ b/app/imports/api/properties/PointBuys.js
@@ -2,6 +2,7 @@ import SimpleSchema from 'simpl-schema';
 import STORAGE_LIMITS from '/imports/constants/STORAGE_LIMITS.js';
 import VARIABLE_NAME_REGEX from '/imports/constants/VARIABLE_NAME_REGEX.js';
 import createPropertySchema from '/imports/api/properties/subSchemas/createPropertySchema.js';
+import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 
 /*
  * PointBuys are reason-value attached to skills and abilities
@@ -125,7 +126,7 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     removeBeforeCompute: true,
   },
   'values.$.errors.$': {
-    type: String,
+    type: ErrorSchema,
   },
   total: {
     type: 'computedOnlyField',
@@ -142,7 +143,7 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     removeBeforeCompute: true,
   },
   'errors.$': {
-    type: String,
+    type: ErrorSchema,
   },
 });
 
diff --git a/app/imports/ui/properties/forms/PointBuyForm.vue b/app/imports/ui/properties/forms/PointBuyForm.vue
index d7709a7d..3919f7e0 100644
--- a/app/imports/ui/properties/forms/PointBuyForm.vue
+++ b/app/imports/ui/properties/forms/PointBuyForm.vue
@@ -128,6 +128,14 @@
                 </template>
               </text-field>
             </v-col>
+            <v-col
+              v-if="row.errors && row.errors.length"
+              cols="12"
+            >
+              <calculation-error-list
+                :errors="row.errors"
+              />
+            </v-col>
           </v-row>
         </v-col>
         <v-col
@@ -181,8 +189,12 @@
 import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import { PointBuySchema } from '/imports/api/properties/PointBuys.js';
+import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
+  components: {
+    CalculationErrorList,
+  },
   mixins: [propertyFormMixin, attributeListMixin],
   data() {
     return {
diff --git a/app/imports/ui/properties/forms/PointBuySpendForm.vue b/app/imports/ui/properties/forms/PointBuySpendForm.vue
new file mode 100644
index 00000000..8f525450
--- /dev/null
+++ b/app/imports/ui/properties/forms/PointBuySpendForm.vue
@@ -0,0 +1,13 @@
+<template lang="html">
+  <div class="point-buy-spend-form">
+    <div />
+  </div>
+</template>
+
+<script lang="js">
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
+	export default {
+    mixins: [propertyFormMixin],
+	};
+</script>
diff --git a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue b/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
index 93b2df2d..a3f7d152 100644
--- a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
+++ b/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
@@ -73,5 +73,8 @@ export default {
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
+.error-list .v-alert__content{
+  overflow-x: auto;
+}
 </style>

From e42ec4b862408f865ea05209eabe0b2254bec7b2 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 23 Aug 2022 14:44:35 +0200
Subject: [PATCH 06/14] Continued work on point buy UI

---
 .../buildComputation/linkTypeDependencies.js  |  20 +-
 .../computeByType/computePointBuy.js          |  18 +-
 app/imports/ui/components/global/SmartBtn.vue |  72 ++++
 .../ui/components/global/SmartInputMixin.js   |   2 +-
 .../ui/components/global/SmartSlider.vue      |  34 ++
 .../ui/components/global/globalIndex.js       |   4 +
 app/imports/ui/pages/Tabletops.vue            |   2 +-
 .../ui/properties/forms/PointBuyForm.vue      | 340 +++++++++---------
 .../ui/properties/forms/PointBuySpendForm.vue |  98 ++++-
 .../properties/forms/shared/FormSection.vue   |   4 +-
 app/imports/ui/tabletop/TabletopComponent.vue |   2 +-
 11 files changed, 391 insertions(+), 205 deletions(-)
 create mode 100644 app/imports/ui/components/global/SmartBtn.vue
 create mode 100644 app/imports/ui/components/global/SmartSlider.vue

diff --git a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
index 08eef012..c8799d4f 100644
--- a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
+++ b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
@@ -248,14 +248,18 @@ function linkPointBuy(dependencyGraph, prop){
   dependOnCalc({ dependencyGraph, prop, key: 'max' });
   dependOnCalc({ dependencyGraph, prop, key: 'cost' });
   prop.values?.forEach(row => {
-    row.type = 'pointBuyRow';
-    row.tableName = prop.name;
-    row.tableId = prop._id;
-    dependencyGraph.addNode(row._id, row);
-    linkVariableName(dependencyGraph, row);
-    dependOnCalc({ dependencyGraph, row, key: 'min' });
-    dependOnCalc({ dependencyGraph, row, key: 'max' });
-    dependOnCalc({ dependencyGraph, row, key: 'cost' });
+    // Wrap the document in a new object so we don't bash it unintentionally
+    const pointBuyRow = {
+      ...row,
+      type: 'pointBuyRow',
+      tableName: prop.name,
+      tableId: prop._id,
+    }
+    dependencyGraph.addNode(row._id, pointBuyRow);
+    linkVariableName(dependencyGraph, pointBuyRow);
+    dependOnCalc({ dependencyGraph, pointBuyRow, key: 'row.min' });
+    dependOnCalc({ dependencyGraph, pointBuyRow, key: 'row.max' });
+    dependOnCalc({ dependencyGraph, pointBuyRow, key: 'row.cost' });
   });
   if (prop.inactive) return;
 }
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
index a24794f3..fff558c0 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
@@ -8,9 +8,9 @@ export default function computePointBuy(computation, node) {
   prop.spent = 0;
   prop.values?.forEach(row => {
     // Clean up added properties
-    delete row.tableId;
-    delete row.tableName;
-    delete row.type;
+    // delete row.tableId;
+    // delete row.tableName;
+    // delete row.type;
 
     row.spent = 0;
     if (row.value === undefined) return;
@@ -21,18 +21,10 @@ export default function computePointBuy(computation, node) {
 
     // Check min and max
     if (min !== null && row.value < min) {
-      row.errors = row.errors || [];
-      row.errors.push({
-        type: 'pointBuyError',
-        message: 'Value smaller than min value'
-      });
+      row.value = min;
     }
     if (max !== null && row.value > max) {
-      row.errors = row.errors || [];
-      row.errors.push({
-        type: 'pointBuyError',
-        message: 'Value larger than max value'
-      });
+      row.value = max;
     }
     // Evaluate the cost function
     if (!costFunction) return;
diff --git a/app/imports/ui/components/global/SmartBtn.vue b/app/imports/ui/components/global/SmartBtn.vue
new file mode 100644
index 00000000..324fcf3e
--- /dev/null
+++ b/app/imports/ui/components/global/SmartBtn.vue
@@ -0,0 +1,72 @@
+<template lang="html">
+  <v-btn 
+    v-bind="$attrs"
+    :disabled="isDisabled"
+    :loading="loading"
+    @click="click"
+  >
+    <slot />
+  </v-btn>
+</template>
+
+<script lang="js">
+import { debounce } from 'lodash';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+
+export default {
+  inject: {
+    context: { default: {} }
+  },
+  props: {
+    disabled: Boolean,
+    debounce: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      timesClicked: 0,
+    };
+  },
+  computed: {
+    isDisabled(){
+      return this.context.editPermission === false || this.disabled;
+    },
+    debounceTime() {
+      if (Number.isFinite(this.debounce)){
+        return this.debounce;
+      } else if (Number.isFinite(this.context.debounceTime)){
+        return this.context.debounceTime;
+      } else {
+        return 750;
+      }
+    },
+  },
+  created(){
+    this.debounceClicks = debounce(this.clicks, this.debounceTime);
+  },
+  beforeDestroy(){
+    this.debounceClicks.flush();
+  },
+  methods: {
+    click() {
+      this.timesClicked += 1;
+      this.debounceClicks();
+      this.$emit('click', this.acknowledgeChange);
+    },
+    clicks() {
+      this.$emit('clicks', this.timesClicked, this.acknowledgeChange);
+      this.loading = true;
+      this.timesClicked = 0;
+    },
+    acknowledgeChange(error){
+      this.loading = false;
+      if (error) {
+        snackbar({ text: error.reason || error.message || error.toString() });
+      }
+    },
+  },
+};
+</script>
diff --git a/app/imports/ui/components/global/SmartInputMixin.js b/app/imports/ui/components/global/SmartInputMixin.js
index 5e44cc7b..9cf02830 100644
--- a/app/imports/ui/components/global/SmartInputMixin.js
+++ b/app/imports/ui/components/global/SmartInputMixin.js
@@ -115,7 +115,7 @@ export default {
     },
     change(val){
       this.dirty = true;
-      if (this.hasChangeListener) this.loading = true;
+      if (this.hasChangeListener()) this.loading = true;
       this.$emit('change', val, this.acknowledgeChange);
     },
     hasChangeListener(){
diff --git a/app/imports/ui/components/global/SmartSlider.vue b/app/imports/ui/components/global/SmartSlider.vue
new file mode 100644
index 00000000..b9797d9b
--- /dev/null
+++ b/app/imports/ui/components/global/SmartSlider.vue
@@ -0,0 +1,34 @@
+<template lang="html">
+  <v-slider
+    ref="input"
+    v-bind="$attrs"
+    class="dc-text-field"
+    :hide-details="!(errors && errors.length)"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :disabled="isDisabled"
+    :outlined="!regular"
+    @change="change"
+    @focus="focused = true"
+    @blur="focused = false"
+  >
+    <template #prepend>
+      <slot name="prepend" />
+    </template>
+    <template #append>
+      <slot name="append" />
+    </template>
+  </v-slider>
+</template>
+
+<script lang="js">
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+  export default {
+    mixins: [SmartInput],
+    props: {
+      regular: Boolean,
+    },
+  };
+</script>
diff --git a/app/imports/ui/components/global/globalIndex.js b/app/imports/ui/components/global/globalIndex.js
index 05992177..84c28bbe 100644
--- a/app/imports/ui/components/global/globalIndex.js
+++ b/app/imports/ui/components/global/globalIndex.js
@@ -5,17 +5,21 @@ import IconPicker from '/imports/ui/components/global/IconPicker.vue';
 import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
+import SmartBtn from '/imports/ui/components/global/SmartBtn.vue';
 import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
 import SmartCheckbox from '/imports/ui/components/global/SmartCheckbox.vue';
 import SmartSwitch from '/imports/ui/components/global/SmartSwitch.vue';
 import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
+import SmartSlider from '/imports/ui/components/global/SmartSlider.vue';
 
 Vue.component('DatePicker', DatePicker);
 Vue.component('IconPicker', IconPicker);
 Vue.component('TextField', TextField);
 Vue.component('TextArea', TextArea);
 Vue.component('SmartSelect', SmartSelect);
+Vue.component('SmartBtn', SmartBtn);
 Vue.component('SmartCombobox', SmartCombobox);
 Vue.component('SmartCheckbox', SmartCheckbox);
+Vue.component('SmartSlider', SmartSlider);
 Vue.component('SmartSwitch', SmartSwitch);
 Vue.component('SvgIcon', SvgIcon);
diff --git a/app/imports/ui/pages/Tabletops.vue b/app/imports/ui/pages/Tabletops.vue
index fca7d1c6..5417feb4 100644
--- a/app/imports/ui/pages/Tabletops.vue
+++ b/app/imports/ui/pages/Tabletops.vue
@@ -37,7 +37,7 @@
 import SingleCardLayout from '/imports/ui/layouts/SingleCardLayout.vue'
 import Tabletops from '/imports/api/tabletop/Tabletops.js';
 import insertTabletop from '/imports/api/tabletop/methods/insertTabletop.js';
-import snackbar from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components: {
diff --git a/app/imports/ui/properties/forms/PointBuyForm.vue b/app/imports/ui/properties/forms/PointBuyForm.vue
index 3919f7e0..41426acb 100644
--- a/app/imports/ui/properties/forms/PointBuyForm.vue
+++ b/app/imports/ui/properties/forms/PointBuyForm.vue
@@ -1,187 +1,177 @@
 <template lang="html">
   <div class="point-buy-form">
-    <v-row dense>
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <text-field
-          ref="focusFirst"
-          label="Table name"
-          :value="model.name"
-          :error-messages="errors.name"
-          @change="change('name', ...arguments)"
-        />
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <computed-field
-          label="Min"
-          hint="The minimum value for each row"
-          :model="model.min"
-          :error-messages="errors.min"
-          @change="({path, value, ack}) =>
-            $emit('change', {path: ['min', ...path], value, ack})"
-        />
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <computed-field
-          label="Max"
-          hint="The maximum value for each row"
-          :model="model.max"
-          :error-messages="errors.max"
-          @change="({path, value, ack}) =>
-            $emit('change', {path: ['max', ...path], value, ack})"
-        />
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <computed-field
-          label="Cost"
-          hint="A function of `value` that determines the cost of each row"
-          hide-value
-          :model="model.cost"
-          :error-messages="errors.cost"
-          @change="({path, value, ack}) =>
-            $emit('change', {path: ['cost', ...path], value, ack})"
-        />
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <computed-field
-          label="Total available points"
-          hint="The total allowed cost of all rows"
-          :model="model.total"
-          :error-messages="errors.total"
-          @change="({path, value, ack}) =>
-            $emit('change', {path: ['total', ...path], value, ack})"
-        />
-      </v-col>
-    </v-row>
-    <v-subheader>
-      Rows
-    </v-subheader>
-    <v-slide-x-transition
-      group
-      leave-absolute
-    >
-      <v-row
-        v-for="(row, i) in model.values"
-        :key="row._id"
-        dense
-      >
-        <v-divider
-          v-if="i"
-          style="flex-basis: 100%;"
-          class="mb-6"
-        />
-        <v-col cols="11">
-          <v-row dense>
-            <v-col
-              cols="12"
-              md="6"
-            >
-              <text-field
-                ref="focusFirst"
-                label="Row Name"
-                :value="row.name"
-                :error-messages="errors.values && errors.values[i] && errors.values[i].name"
-                @change="change(['values', i, 'name'], ...arguments)"
-              />
+    <point-buy-spend-form 
+      :model="model"
+      @change="e => $emit('change', e)"
+      @push="e => $emit('change', e)"
+      @pull="e => $emit('change', e)"
+    />
+    <form-sections>
+      <form-section name="Settings">
+        <v-row dense>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <text-field
+              ref="focusFirst"
+              label="Table name"
+              :value="model.name"
+              :error-messages="errors.name"
+              @change="change('name', ...arguments)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <computed-field
+              label="Min"
+              hint="The minimum value for each row"
+              :model="model.min"
+              :error-messages="errors.min"
+              @change="({path, value, ack}) =>
+                $emit('change', {path: ['min', ...path], value, ack})"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <computed-field
+              label="Max"
+              hint="The maximum value for each row"
+              :model="model.max"
+              :error-messages="errors.max"
+              @change="({path, value, ack}) =>
+                $emit('change', {path: ['max', ...path], value, ack})"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <computed-field
+              label="Cost"
+              hint="A function of `value` that determines the cost of each row"
+              hide-value
+              :model="model.cost"
+              :error-messages="errors.cost"
+              @change="({path, value, ack}) =>
+                $emit('change', {path: ['cost', ...path], value, ack})"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <computed-field
+              label="Total available points"
+              hint="The total allowed cost of all rows"
+              :model="model.total"
+              :error-messages="errors.total"
+              @change="({path, value, ack}) =>
+                $emit('change', {path: ['total', ...path], value, ack})"
+            />
+          </v-col>
+        </v-row>
+      </form-section>
+      <form-section name="Rows">
+        <v-slide-x-transition
+          group
+          leave-absolute
+        >
+          <v-row
+            v-for="(row, i) in model.values"
+            :key="row._id"
+            dense
+          >
+            <v-divider
+              v-if="i"
+              style="flex-basis: 100%;"
+              class="mb-6"
+            />
+            <v-col cols="11">
+              <v-row dense>
+                <v-col
+                  cols="12"
+                  md="6"
+                >
+                  <text-field
+                    ref="focusFirst"
+                    label="Row Name"
+                    :value="row.name"
+                    :error-messages="errors.values && errors.values[i] && errors.values[i].name"
+                    @change="change(['values', i, 'name'], ...arguments)"
+                  />
+                </v-col>
+                <v-col
+                  cols="12"
+                  md="6"
+                >
+                  <text-field
+                    label="Variable name"
+                    :value="row.variableName"
+                    hint="Use this name in calculations to reference this row of the table"
+                    :error-messages="errors.values && errors.values[i] && errors.values[i].variableName"
+                    @change="change(['values', i, 'variableName'], ...arguments)"
+                  />
+                </v-col>
+                <v-col
+                  v-if="row.errors && row.errors.length"
+                  cols="12"
+                >
+                  <calculation-error-list
+                    :errors="row.errors"
+                  />
+                </v-col>
+              </v-row>
             </v-col>
             <v-col
-              cols="12"
-              md="6"
+              cols="1"
+              class="d-flex align-center justify-center"
             >
-              <text-field
-                label="Variable name"
-                :value="row.variableName"
-                hint="Use this name in calculations to reference this row of the table"
-                :error-messages="errors.values && errors.values[i] && errors.values[i].variableName"
-                @change="change(['values', i, 'variableName'], ...arguments)"
-              />
-            </v-col>
-            <v-col
-              cols="12"
-              md="6"
-            >
-              <text-field
-                label="Value"
-                type="number"
-                :min="row.hasOwnProperty('min') ? row.min && row.min.value : model.min && model.min.value"
-                :max="row.hasOwnProperty('max') ? row.max && row.max.value : model.max && model.max.value"
-                :value="row.value"
-                :error-messages="errors.values && errors.values[i] && errors.values[i].value"
-                @change="(value, ack) => $emit('change', {path: ['values', i, 'value'], value, ack})"
+              <v-btn
+                icon
+                large
+                @click="$emit('pull', {path: ['values', i]})"
               >
-                <template v-if="row.spent">
-                  Cost: {{ row.spent }}
-                </template>
-              </text-field>
-            </v-col>
-            <v-col
-              v-if="row.errors && row.errors.length"
-              cols="12"
-            >
-              <calculation-error-list
-                :errors="row.errors"
-              />
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
             </v-col>
           </v-row>
-        </v-col>
-        <v-col
-          cols="1"
-          class="d-flex align-center justify-center"
-        >
-          <v-btn
-            icon
-            large
-            @click="$emit('pull', {path: ['values', i]})"
+          <v-row
+            key="addButton"
+            dense
+            justify="end"
+            class="mb-4"
           >
-            <v-icon>mdi-delete</v-icon>
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-row
-        key="addButton"
-        dense
-        justify="end"
-        class="mb-4"
+            <v-col
+              cols="1"
+              class="d-flex justify-center"
+            >  
+              <v-btn
+                icon
+                outlined
+                :loading="addRowLoading"
+                :disabled="rowsFull"
+                @click="addRow"
+              >
+                <v-icon>
+                  mdi-plus
+                </v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-slide-x-transition>
+      </form-section>
+      <form-section
+        v-if="$slots.children"
+        name="Children"
       >
-        <v-col
-          cols="1"
-          class="d-flex justify-center"
-        >  
-          <v-btn
-            icon
-            outlined
-            :loading="addRowLoading"
-            :disabled="rowsFull"
-            @click="addRow"
-          >
-            <v-icon>
-              mdi-plus
-            </v-icon>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-slide-x-transition>
-    <form-section
-      v-if="$slots.children"
-      name="Children"
-      standalone
-    >
-      <slot name="children" />
-    </form-section>
+        <slot name="children" />
+      </form-section>
+    </form-sections>
   </div>
 </template>
 
@@ -190,10 +180,12 @@ import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attrib
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import { PointBuySchema } from '/imports/api/properties/PointBuys.js';
 import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
+import PointBuySpendForm from '/imports/ui/properties/forms/PointBuySpendForm.vue';
 
 export default {
   components: {
     CalculationErrorList,
+    PointBuySpendForm,
   },
   mixins: [propertyFormMixin, attributeListMixin],
   data() {
diff --git a/app/imports/ui/properties/forms/PointBuySpendForm.vue b/app/imports/ui/properties/forms/PointBuySpendForm.vue
index 8f525450..289450fb 100644
--- a/app/imports/ui/properties/forms/PointBuySpendForm.vue
+++ b/app/imports/ui/properties/forms/PointBuySpendForm.vue
@@ -1,13 +1,101 @@
 <template lang="html">
   <div class="point-buy-spend-form">
-    <div />
+    <v-row dense>
+      <v-col
+        cols="10"
+        md="11"
+      />
+      <v-col
+        cols="2"
+        md="1"
+        class="text-truncate d-flex justify-center"
+      >
+        Cost
+      </v-col>
+    </v-row>
+    <v-row
+      v-for="(row, i) in model.values"
+      :key="row._id"
+      dense
+      align="center"
+    >
+      <v-col
+        cols="12"
+        md="2"
+        class="d-flex justify-md-end"
+      >
+        {{ row.name }}
+      </v-col>
+      <v-col
+        cols="2"
+        md="1"
+        class="d-flex justify-md-center justify-end"
+      >
+        {{ row.value }}
+      </v-col>
+      <v-col
+        cols="8"
+      >
+        <smart-slider
+          thumb-label
+          dense
+          :ticks="max(row) - min(row) <= 20"
+          :min="min(row)"
+          :max="max(row)"
+          :value="row.value"
+          :error-messages="errors.values && errors.values[i] && errors.values[i].value"
+          @change="(value, ack) => $emit('change', {path: ['values', i, 'value'], value, ack})"
+        />
+      </v-col>
+      <v-col
+        cols="2"
+        md="1"
+        class="text-truncate d-flex justify-center"
+      >
+        {{ row.spent }}
+      </v-col>
+      <v-col
+        v-if="row.errors && row.errors.length"
+        cols="12"
+      >
+        <calculation-error-list
+          :errors="row.errors"
+        />
+      </v-col>
+    </v-row>
+    <v-row
+      dense
+    >
+      <v-col
+        cols="12"
+        class="text-h4 mb-4 pr-8 d-flex justify-end"
+        :class="{
+          'error--text': model.spent > (model.total && model.total.value),
+          'warning--text': model.spent < (model.total && model.total.value),
+        }"
+      >
+        {{ model.spent }} / {{ model.total && model.total.value }}
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script lang="js">
-  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
-	export default {
-    mixins: [propertyFormMixin],
-	};
+export default {
+  components: {
+    CalculationErrorList,
+  },
+  methods: {
+    max(row) {
+      return row.max ? row.max && row.max.value : this.model.max && this.model.max.value;
+    },
+    min(row) {
+      return row.min ? row.min && row.min.value : this.model.min && this.model.min.value;
+    },
+  },
+  mixins: [propertyFormMixin],
+};
 </script>
diff --git a/app/imports/ui/properties/forms/shared/FormSection.vue b/app/imports/ui/properties/forms/shared/FormSection.vue
index 04d5b3d7..96946f77 100644
--- a/app/imports/ui/properties/forms/shared/FormSection.vue
+++ b/app/imports/ui/properties/forms/shared/FormSection.vue
@@ -4,7 +4,7 @@
       <v-expansion-panel-header>
         {{ name }}
       </v-expansion-panel-header>
-      <v-expansion-panel-content>
+      <v-expansion-panel-content class="pt-2">
         <slot />
       </v-expansion-panel-content>
     </v-expansion-panel>
@@ -13,7 +13,7 @@
     <v-expansion-panel-header>
       {{ name }}
     </v-expansion-panel-header>
-    <v-expansion-panel-content>
+    <v-expansion-panel-content class="pt-2">
       <slot />
     </v-expansion-panel-content>
   </v-expansion-panel>
diff --git a/app/imports/ui/tabletop/TabletopComponent.vue b/app/imports/ui/tabletop/TabletopComponent.vue
index 81e4318c..690219e9 100644
--- a/app/imports/ui/tabletop/TabletopComponent.vue
+++ b/app/imports/ui/tabletop/TabletopComponent.vue
@@ -43,7 +43,7 @@ import TabletopMap from '/imports/ui/tabletop/TabletopMap.vue';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
 import TabletopActionCards from '/imports/ui/tabletop/TabletopActionCards.vue';
 import MiniCharacterSheet from '/imports/ui/creature/character/MiniCharacterSheet.vue';
-import snackbar from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components: {

From 1d98c4116873b0f6ff7a2b40a2d5c7ad034a612c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 11:40:30 +0200
Subject: [PATCH 07/14] Fixed slotLevel not having the right value in spell
 scope

---
 app/imports/api/engine/actions/doCastSpell.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/imports/api/engine/actions/doCastSpell.js b/app/imports/api/engine/actions/doCastSpell.js
index 95169e90..ef71759d 100644
--- a/app/imports/api/engine/actions/doCastSpell.js
+++ b/app/imports/api/engine/actions/doCastSpell.js
@@ -9,7 +9,6 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions.js';
 import { damagePropertyWork } from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 import { doActionWork } from '/imports/api/engine/actions/doAction.js';
-import { CreatureLogSchema } from '/imports/api/creature/log/CreatureLogs.js';
 import ActionContext from '/imports/api/engine/actions/ActionContext.js';
 
 const doAction = new ValidatedMethod({
@@ -65,8 +64,6 @@ const doAction = new ValidatedMethod({
     let slotLevel = spell.level || 0;
     let slot;
 
-    actionContext.scope['slotLevel'] = slotLevel;
-
     if (slotId && !spell.castWithoutSpellSlots){
       slot = CreatureProperties.findOne(slotId);
       if (!slot){
@@ -109,6 +106,8 @@ const doAction = new ValidatedMethod({
       });
     }
 
+    actionContext.scope['slotLevel'] = slotLevel;
+
     // Do the action
     doActionWork({
       properties, ancestors, actionContext, methodScope: scope,

From 2714d0b9d57704390a87316bff55d0eb2b84eabb Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 12:10:51 +0200
Subject: [PATCH 08/14] Added the ability to silence most action props

---
 .../applyPropertyByType/applyAction.js        | 12 +++----
 .../applyPropertyByType/applyAdjustment.js    |  6 ++--
 .../applyPropertyByType/applyBranch.js        |  8 ++---
 .../actions/applyPropertyByType/applyBuff.js  |  2 +-
 .../applyPropertyByType/applyBuffRemover.js   | 12 +++----
 .../applyPropertyByType/applyDamage.js        |  2 +-
 .../applyPropertyByType/applySavingThrow.js   |  4 +--
 app/imports/api/properties/Actions.js         |  5 +++
 app/imports/api/properties/Adjustments.js     |  5 +++
 app/imports/api/properties/Branches.js        |  5 +++
 app/imports/api/properties/BuffRemovers.js    |  5 +++
 app/imports/api/properties/Buffs.js           |  5 +++
 app/imports/api/properties/Damages.js         |  7 +++-
 app/imports/api/properties/SavingThrows.js    |  5 +++
 app/imports/api/properties/Triggers.js        |  5 +++
 .../ui/properties/forms/ActionForm.vue        | 12 +++++++
 .../ui/properties/forms/AdjustmentForm.vue    |  6 ++++
 .../ui/properties/forms/BranchForm.vue        |  6 ++++
 app/imports/ui/properties/forms/BuffForm.vue  | 32 +++++++++++++++----
 .../ui/properties/forms/BuffRemoverForm.vue   | 14 ++++++++
 .../ui/properties/forms/DamageForm.vue        |  6 ++++
 .../ui/properties/forms/SavingThrowForm.vue   |  6 ++++
 22 files changed, 140 insertions(+), 30 deletions(-)

diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyAction.js b/app/imports/api/engine/actions/applyPropertyByType/applyAction.js
index 26da462a..8d6bd185 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyAction.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyAction.js
@@ -20,7 +20,7 @@ export default function applyAction(node, actionContext) {
     recalculateInlineCalculations(prop.summary, actionContext);
     content.value = prop.summary.value;
   }
-  actionContext.addLog(content);
+  if (!prop.silent) actionContext.addLog(content);
 
   // Spend the resources
   const failed = spendResources(prop, actionContext);
@@ -188,7 +188,7 @@ function applyChildren(node, actionContext) {
 function spendResources(prop, actionContext){
   // Check Uses
   if (prop.usesLeft <= 0){
-    actionContext.addLog({
+    if (!prop.silent) actionContext.addLog({
       name: 'Error',
       value: `${prop.name || 'action'} does not have enough uses left`,
     });
@@ -196,7 +196,7 @@ function spendResources(prop, actionContext){
   }
   // Resources
   if (prop.insufficientResources){
-    actionContext.addLog({
+    if (!prop.silent) actionContext.addLog({
       name: 'Error',
       value: 'This creature doesn\'t have sufficient resources to perform this action',
     });
@@ -257,7 +257,7 @@ function spendResources(prop, actionContext){
     }, {
       selector: prop
     });
-    actionContext.addLog({
+    if (!prop.silent) actionContext.addLog({
       name: 'Uses left',
       value: prop.usesLeft - 1,
       inline: true,
@@ -288,12 +288,12 @@ function spendResources(prop, actionContext){
   });
 
   // Log all the spending
-  if (gainLog.length) actionContext.addLog({
+  if (gainLog.length && !prop.silent) actionContext.addLog({
     name: 'Gained',
     value: gainLog.join('\n'),
     inline: true,
   });
-  if (spendLog.length) actionContext.addLog({
+  if (spendLog.length && !prop.silent) actionContext.addLog({
     name: 'Spent',
     value: spendLog.join('\n'),
     inline: true,
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyAdjustment.js b/app/imports/api/engine/actions/applyPropertyByType/applyAdjustment.js
index cc63f53a..ede94665 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyAdjustment.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyAdjustment.js
@@ -24,7 +24,7 @@ export default function applyAdjustment(node, actionContext){
     damageTargets.forEach(target => {
       let stat = target.variables[prop.stat];
       if (!stat?.type) {
-        actionContext.addLog({
+        if (!prop.silent) actionContext.addLog({
           name: 'Error',
           value: `Could not apply attribute damage, creature does not have \`${prop.stat}\` set`
         });
@@ -36,7 +36,7 @@ export default function applyAdjustment(node, actionContext){
         value,
         actionContext,
       });
-      actionContext.addLog({
+      if (!prop.silent) actionContext.addLog({
         name: 'Attribute damage',
         value: `${prop.stat}${prop.operation === 'set' ? ' set to' : ''}` +
         ` ${value}`,
@@ -44,7 +44,7 @@ export default function applyAdjustment(node, actionContext){
       });
     });
   } else {
-    actionContext.addLog({
+    if (!prop.silent) actionContext.addLog({
       name: 'Attribute damage',
       value: `${prop.stat}${prop.operation === 'set' ? ' set to' : ''}` +
       ` ${value}`,
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyBranch.js b/app/imports/api/engine/actions/applyPropertyByType/applyBranch.js
index 3106b88b..ce918c4a 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyBranch.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyBranch.js
@@ -36,25 +36,25 @@ export default function applyBranch(node, actionContext){
       break;
     case 'hit':
       if (scope['$attackHit']?.value){
-        if (!targets.length) actionContext.addLog({value: '**On hit**'});
+        if (!targets.length && !prop.silent) actionContext.addLog({value: '**On hit**'});
         applyChildren();
       }
       break;
     case 'miss':
       if (scope['$attackMiss']?.value){
-        if (!targets.length) actionContext.addLog({value: '**On miss**'});
+        if (!targets.length && !prop.silent) actionContext.addLog({value: '**On miss**'});
         applyChildren();
       }
       break;
     case 'failedSave':
       if (scope['$saveFailed']?.value){
-        if (!targets.length) actionContext.addLog({value: '**On failed save**'});
+        if (!targets.length && !prop.silent) actionContext.addLog({value: '**On failed save**'});
         applyChildren();
       }
       break;
     case 'successfulSave':
       if (scope['$saveSucceeded']?.value){
-        if (!targets.length) actionContext.addLog({value: '**On save**',});
+        if (!targets.length && !prop.silent) actionContext.addLog({value: '**On save**',});
         applyChildren();
       }
       break;
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js b/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js
index 965ef8b3..d9e2827f 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js
@@ -43,7 +43,7 @@ export default function applyBuff(node, actionContext){
     copyNodeListToTarget(propList, target, oldParent);
 
     //Log the buff
-    if (prop.name || prop.description?.value){
+    if ((prop.name || prop.description?.value) && !prop.silent){
       if (target._id === actionContext.creature._id){
         // Targeting self
         actionContext.addLog({
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyBuffRemover.js b/app/imports/api/engine/actions/applyPropertyByType/applyBuffRemover.js
index 09e4e987..86b60949 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyBuffRemover.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyBuffRemover.js
@@ -13,7 +13,7 @@ export default function applyBuffRemover(node, actionContext) {
   const prop = node.node;
 
   // Log Name
-  if (prop.name){
+  if (prop.name && !prop.silent){
     actionContext.addLog({ name: prop.name });
   }
 
@@ -29,7 +29,7 @@ export default function applyBuffRemover(node, actionContext) {
       });
       return;
     }
-    removeBuff(nearestBuff, actionContext);
+    removeBuff(nearestBuff, actionContext, prop);
   } else {
     // Get all the buffs targeted by tags
     const allBuffs = getPropertiesOfType(actionContext.creature._id, 'buff');
@@ -41,7 +41,7 @@ export default function applyBuffRemover(node, actionContext) {
     if (prop.removeAll) {
       // Remove all matching buffs
       targetedBuffs.forEach(buff => {
-        removeBuff(buff, actionContext);
+        removeBuff(buff, actionContext, prop);
       });
     } else {
       // Sort in reverse order
@@ -49,7 +49,7 @@ export default function applyBuffRemover(node, actionContext) {
       // Remove the one with the highest order
       const buff = targetedBuffs[0];
       if (buff) {
-        removeBuff(buff, actionContext);
+        removeBuff(buff, actionContext, prop);
       }
     }
   }
@@ -60,8 +60,8 @@ export default function applyBuffRemover(node, actionContext) {
   node.children.forEach(child => applyProperty(child, actionContext));
 }
 
-function removeBuff(buff, actionContext) {
-  actionContext.addLog({
+function removeBuff(buff, actionContext, prop) {
+  if (!prop.silent) actionContext.addLog({
     name: 'Removed',
     value: `${buff.name || 'Buff'}`
   });
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js b/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js
index 0ee3bbd7..540ec5cb 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js
@@ -128,7 +128,7 @@ export default function applyDamage(node, actionContext){
     // There are no targets, just log the result
     logValue.push(`**${damage}** ${suffix}`);
   }
-  actionContext.addLog({
+  if (!prop.silent) actionContext.addLog({
     name: logName,
     value: logValue.join('\n'),
     inline: true,
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applySavingThrow.js b/app/imports/api/engine/actions/applyPropertyByType/applySavingThrow.js
index 6064e3bd..a5aa4bae 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applySavingThrow.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applySavingThrow.js
@@ -20,7 +20,7 @@ export default function applySavingThrow(node, actionContext){
     });
     return node.children.forEach(child => applyProperty(child, actionContext));
   }
-  actionContext.addLog({
+  if (!prop.silent) actionContext.addLog({
     name: prop.name,
     value: `DC **${dc}**`,
     inline: true,
@@ -94,7 +94,7 @@ export default function applySavingThrow(node, actionContext){
     } else {
       scope['$saveFailed'] = {value: true};
     }
-    actionContext.addLog({
+    if (!prop.silent) actionContext.addLog({
       name: saveSuccess ? 'Successful save' : 'Failed save',
       value: resultPrefix + '\n**' + result + '**',
       inline: true,
diff --git a/app/imports/api/properties/Actions.js b/app/imports/api/properties/Actions.js
index 53e57afa..1ff4d6fd 100644
--- a/app/imports/api/properties/Actions.js
+++ b/app/imports/api/properties/Actions.js
@@ -114,6 +114,11 @@ let ActionSchema = createPropertySchema({
     type: 'fieldToCompute',
     optional: true,
   },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 const ComputedOnlyActionSchema = createPropertySchema({
diff --git a/app/imports/api/properties/Adjustments.js b/app/imports/api/properties/Adjustments.js
index 49c1b248..0d1edb6a 100644
--- a/app/imports/api/properties/Adjustments.js
+++ b/app/imports/api/properties/Adjustments.js
@@ -31,6 +31,11 @@ const AdjustmentSchema = createPropertySchema({
     allowedValues: ['set', 'increment'],
     defaultValue: 'increment',
   },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 const ComputedOnlyAdjustmentSchema = createPropertySchema({
diff --git a/app/imports/api/properties/Branches.js b/app/imports/api/properties/Branches.js
index 952c7715..386773a1 100644
--- a/app/imports/api/properties/Branches.js
+++ b/app/imports/api/properties/Branches.js
@@ -37,6 +37,11 @@ let BranchSchema = createPropertySchema({
     optional: true,
     parseLevel: 'compile',
   },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 let ComputedOnlyBranchSchema = createPropertySchema({
diff --git a/app/imports/api/properties/BuffRemovers.js b/app/imports/api/properties/BuffRemovers.js
index 8752f750..ae86bf5e 100644
--- a/app/imports/api/properties/BuffRemovers.js
+++ b/app/imports/api/properties/BuffRemovers.js
@@ -68,6 +68,11 @@ let BuffRemoverSchema = createPropertySchema({
     type: String,
     max: STORAGE_LIMITS.tagLength,
   },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 let ComputedOnlyBuffRemoverSchema = createPropertySchema({});
diff --git a/app/imports/api/properties/Buffs.js b/app/imports/api/properties/Buffs.js
index dac2d7ff..ad993bb7 100644
--- a/app/imports/api/properties/Buffs.js
+++ b/app/imports/api/properties/Buffs.js
@@ -29,6 +29,11 @@ let BuffSchema = createPropertySchema({
     ],
 		defaultValue: 'target',
 	},
+	// Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 let ComputedOnlyBuffSchema = createPropertySchema({
diff --git a/app/imports/api/properties/Damages.js b/app/imports/api/properties/Damages.js
index 85cafee0..8f5e2a67 100644
--- a/app/imports/api/properties/Damages.js
+++ b/app/imports/api/properties/Damages.js
@@ -26,7 +26,12 @@ const DamageSchema = createPropertySchema({
     max: STORAGE_LIMITS.calculation,
 		defaultValue: 'slashing',
     regEx: VARIABLE_NAME_REGEX,
-	},
+  },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 const ComputedOnlyDamageSchema = createPropertySchema({
diff --git a/app/imports/api/properties/SavingThrows.js b/app/imports/api/properties/SavingThrows.js
index f5cfbf70..05210a53 100644
--- a/app/imports/api/properties/SavingThrows.js
+++ b/app/imports/api/properties/SavingThrows.js
@@ -30,6 +30,11 @@ let SavingThrowSchema = createPropertySchema({
     optional: true,
     max: STORAGE_LIMITS.variableName,
   },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 const ComputedOnlySavingThrowSchema = createPropertySchema({
diff --git a/app/imports/api/properties/Triggers.js b/app/imports/api/properties/Triggers.js
index 4b66e422..0bfd7d9d 100644
--- a/app/imports/api/properties/Triggers.js
+++ b/app/imports/api/properties/Triggers.js
@@ -109,6 +109,11 @@ let TriggerSchema = createPropertySchema({
     type: String,
     max: STORAGE_LIMITS.tagLength,
   },
+  // Prevent the property from showing up in the log
+  silent: {
+    type: Boolean,
+    optional: true,
+  },
 });
 
 const ComputedOnlyTriggerSchema = createPropertySchema({
diff --git a/app/imports/ui/properties/forms/ActionForm.vue b/app/imports/ui/properties/forms/ActionForm.vue
index c550d75a..91bebdd2 100644
--- a/app/imports/ui/properties/forms/ActionForm.vue
+++ b/app/imports/ui/properties/forms/ActionForm.vue
@@ -141,6 +141,18 @@
               @change="change('usesUsed', ...arguments)"
             />
           </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Don't show in log"
+              :value="model.silent"
+              :error-messages="errors.silent"
+              @change="change('silent', ...arguments)"
+            />
+          </v-col>
         </v-row>
         <smart-select
           label="Reset"
diff --git a/app/imports/ui/properties/forms/AdjustmentForm.vue b/app/imports/ui/properties/forms/AdjustmentForm.vue
index c1df6cdb..94d419c4 100644
--- a/app/imports/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/ui/properties/forms/AdjustmentForm.vue
@@ -59,6 +59,12 @@
       :value="model.tags"
       @change="change('tags', ...arguments)"
     />
+    <smart-switch
+      label="Don't show in log"
+      :value="model.silent"
+      :error-messages="errors.silent"
+      @change="change('silent', ...arguments)"
+    />
     <form-section
       v-if="$slots.children"
       name="Children"
diff --git a/app/imports/ui/properties/forms/BranchForm.vue b/app/imports/ui/properties/forms/BranchForm.vue
index 1d6fe81c..d1aa6ec9 100644
--- a/app/imports/ui/properties/forms/BranchForm.vue
+++ b/app/imports/ui/properties/forms/BranchForm.vue
@@ -38,6 +38,12 @@
       :value="model.tags"
       @change="change('tags', ...arguments)"
     />
+    <smart-switch
+      label="Don't show in log"
+      :value="model.silent"
+      :error-messages="errors.silent"
+      @change="change('silent', ...arguments)"
+    />
     <form-section
       name="Children"
       standalone
diff --git a/app/imports/ui/properties/forms/BuffForm.vue b/app/imports/ui/properties/forms/BuffForm.vue
index ff395f4f..e8848bed 100644
--- a/app/imports/ui/properties/forms/BuffForm.vue
+++ b/app/imports/ui/properties/forms/BuffForm.vue
@@ -47,12 +47,32 @@
       <form-section
         name="Advanced"
       >
-        <smart-switch
-          label="Hide remove button"
-          :value="model.hideRemoveButton"
-          :error-messages="errors.hideRemoveButton"
-          @change="change('hideRemoveButton', ...arguments)"
-        />
+        <v-row dense>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Hide remove button"
+              :value="model.hideRemoveButton"
+              :error-messages="errors.hideRemoveButton"
+              @change="change('hideRemoveButton', ...arguments)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Don't show in log"
+              :value="model.silent"
+              :error-messages="errors.silent"
+              @change="change('silent', ...arguments)"
+            />
+          </v-col>
+        </v-row>
         <smart-combobox
           label="Tags"
           multiple
diff --git a/app/imports/ui/properties/forms/BuffRemoverForm.vue b/app/imports/ui/properties/forms/BuffRemoverForm.vue
index f98d7adc..ed5845af 100644
--- a/app/imports/ui/properties/forms/BuffRemoverForm.vue
+++ b/app/imports/ui/properties/forms/BuffRemoverForm.vue
@@ -115,6 +115,20 @@
           :value="model.tags"
           @change="change('tags', ...arguments)"
         />
+        <v-row dense>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Don't show in log"
+              :value="model.silent"
+              :error-messages="errors.silent"
+              @change="change('silent', ...arguments)"
+            />
+          </v-col>
+        </v-row>
       </form-section>
     </form-sections>
   </div>
diff --git a/app/imports/ui/properties/forms/DamageForm.vue b/app/imports/ui/properties/forms/DamageForm.vue
index 81bb3a10..fc8be6ee 100644
--- a/app/imports/ui/properties/forms/DamageForm.vue
+++ b/app/imports/ui/properties/forms/DamageForm.vue
@@ -53,6 +53,12 @@
       :error-messages="errors.tags"
       @change="change('tags', ...arguments)"
     />
+    <smart-switch
+      label="Don't show in log"
+      :value="model.silent"
+      :error-messages="errors.silent"
+      @change="change('silent', ...arguments)"
+    />
     <form-section
       v-if="$slots.children"
       name="Children"
diff --git a/app/imports/ui/properties/forms/SavingThrowForm.vue b/app/imports/ui/properties/forms/SavingThrowForm.vue
index a9da6172..1fc03b68 100644
--- a/app/imports/ui/properties/forms/SavingThrowForm.vue
+++ b/app/imports/ui/properties/forms/SavingThrowForm.vue
@@ -65,6 +65,12 @@
       :error-messages="errors.tags"
       @change="change('tags', ...arguments)"
     />
+    <smart-switch
+      label="Don't show in log"
+      :value="model.silent"
+      :error-messages="errors.silent"
+      @change="change('silent', ...arguments)"
+    />
     <form-section
       v-if="$slots.children"
       name="Children"

From 987aacbb67dca5cddd986c55ea99c6d518d97214 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 12:12:07 +0200
Subject: [PATCH 09/14] Silence for triggers also

---
 app/imports/api/engine/actions/applyTriggers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/imports/api/engine/actions/applyTriggers.js b/app/imports/api/engine/actions/applyTriggers.js
index 9343e1ac..8fd6a536 100644
--- a/app/imports/api/engine/actions/applyTriggers.js
+++ b/app/imports/api/engine/actions/applyTriggers.js
@@ -65,7 +65,7 @@ export function applyTrigger(trigger, prop, actionContext) {
     recalculateInlineCalculations(trigger.description, actionContext);
     content.value = trigger.description.value;
   }
-  actionContext.addLog(content);
+  if(!trigger.silent) actionContext.addLog(content);
 
   // Get all the trigger's properties and apply them
   const properties = getPropertyDecendants(actionContext.creature._id, trigger._id);

From 1677e8c424a7bb2cf3d45692b4cf227c270f92eb Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 12:14:32 +0200
Subject: [PATCH 10/14] Fixed silence missing from trigger form

---
 app/imports/ui/properties/forms/TriggerForm.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/imports/ui/properties/forms/TriggerForm.vue b/app/imports/ui/properties/forms/TriggerForm.vue
index 2a8e3d8a..d48932a7 100644
--- a/app/imports/ui/properties/forms/TriggerForm.vue
+++ b/app/imports/ui/properties/forms/TriggerForm.vue
@@ -140,6 +140,12 @@
           :value="model.tags"
           @change="change('tags', ...arguments)"
         />
+        <smart-switch
+          label="Don't show in log"
+          :value="model.silent"
+          :error-messages="errors.silent"
+          @change="change('silent', ...arguments)"
+        />
       </form-section>
     </form-sections>
   </div>

From 8d729216b52c476302b5bde40c8e5f5f005b986b Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 12:15:12 +0200
Subject: [PATCH 11/14] Properties now have their variable name as a default
 tag

---
 .../api/engine/computation/utility/getEffectivePropTags.js       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/imports/api/engine/computation/utility/getEffectivePropTags.js b/app/imports/api/engine/computation/utility/getEffectivePropTags.js
index e3e52bf2..c8ebe65b 100644
--- a/app/imports/api/engine/computation/utility/getEffectivePropTags.js
+++ b/app/imports/api/engine/computation/utility/getEffectivePropTags.js
@@ -9,6 +9,7 @@ export default function getEffectivePropTags(prop) {
   }
 
   // Tags for some string properties
+  if (prop.variableName) tags.push(prop.variableName);
   if (prop.damageType) tags.push(prop.damageType);
   if (prop.skillType) tags.push(prop.skillType);
   if (prop.attributeType) tags.push(prop.attributeType);

From 11a527481e8dd09507e8b23e768067ecff21a466 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 13:18:24 +0200
Subject: [PATCH 12/14] Show Point buy on Build tab

---
 .../buildComputation/linkTypeDependencies.js  |  1 +
 .../computeByType/computePointBuy.js          |  1 +
 app/imports/api/properties/PointBuys.js       |  5 ++
 .../ui/creature/buildTree/BuildTreeNode.vue   | 73 ++++++++++++-------
 .../creature/buildTree/BuildTreeNodeList.vue  | 35 +++++----
 .../character/characterSheetTabs/BuildTab.vue | 39 +++++++---
 .../ui/creature/slots/SlotCardsToFill.vue     | 39 +++++++++-
 .../components/pointBuy/PointBuyCard.vue      | 72 ++++++++++++++++++
 .../ui/properties/forms/PointBuySpendForm.vue | 13 +++-
 9 files changed, 221 insertions(+), 57 deletions(-)
 create mode 100644 app/imports/ui/properties/components/pointBuy/PointBuyCard.vue

diff --git a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
index c8799d4f..44fc93e9 100644
--- a/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
+++ b/app/imports/api/engine/computation/buildComputation/linkTypeDependencies.js
@@ -247,6 +247,7 @@ function linkPointBuy(dependencyGraph, prop){
   dependOnCalc({ dependencyGraph, prop, key: 'min' });
   dependOnCalc({ dependencyGraph, prop, key: 'max' });
   dependOnCalc({ dependencyGraph, prop, key: 'cost' });
+  dependOnCalc({ dependencyGraph, prop, key: 'total' });
   prop.values?.forEach(row => {
     // Wrap the document in a new object so we don't bash it unintentionally
     const pointBuyRow = {
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
index fff558c0..c2cc7606 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
@@ -42,6 +42,7 @@ export default function computePointBuy(computation, node) {
       prop.spent += costFunction.value;
     }
   });
+  prop.pointsLeft = (prop.total?.value || 0) - (prop.spent || 0);
   if (prop.spent > prop.total?.value) {
     prop.errors = prop.errors || [];
     prop.errors.push({
diff --git a/app/imports/api/properties/PointBuys.js b/app/imports/api/properties/PointBuys.js
index d5fe983c..db20911a 100644
--- a/app/imports/api/properties/PointBuys.js
+++ b/app/imports/api/properties/PointBuys.js
@@ -137,6 +137,11 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     optional: true,
     removeBeforeCompute: true,
   },
+  pointsLeft: {
+    type: Number,
+    optional: true,
+    removeBeforeCompute: true,
+  },
   errors: {
     type: Array,
     optional: true,
diff --git a/app/imports/ui/creature/buildTree/BuildTreeNode.vue b/app/imports/ui/creature/buildTree/BuildTreeNode.vue
index 8f49fb2d..ca359bf2 100644
--- a/app/imports/ui/creature/buildTree/BuildTreeNode.vue
+++ b/app/imports/ui/creature/buildTree/BuildTreeNode.vue
@@ -55,6 +55,7 @@
           />
           <v-spacer />
           <v-btn
+            v-if="node.parent.id === parentSlotId"
             icon
             :disabled="context.editPermission === false"
             @click.stop="remove(node)"
@@ -91,6 +92,7 @@
           <build-tree-node-list
             v-if="showExpanded"
             :children="computedChildren"
+            :parent-slot-id="computedSlotId"
             @selected="e => $emit('selected', e)"
           />
           <div v-else>
@@ -147,6 +149,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    parentSlotId: {
+      type: String,
+      default: undefined,
+    },
   },
   data(){return {
     expanded: false,
@@ -197,6 +203,21 @@ export default {
       }
       return this.children;
     },
+    computedSlotId() {
+      if (this.condenseChild) {
+        if (this.children[0].node.type === 'propertySlot') {
+          return this.children[0].node._id;
+        } else {
+          return undefined;
+        }
+      } else {
+        if (this.node.type === 'propertySlot') {
+          return this.node._id;
+        } else {
+          return undefined;
+        }
+      }
+    },
     canExpand(){
       return !!this.computedChildren.length || this.canFillWithMany;
     },
@@ -230,41 +251,41 @@ export default {
 </script>
 
 <style lang="css" scoped>
-	.rotate-90 {
-		transform: rotate(90deg) translateZ(0);
-	}
-	.expand-area {
-		box-shadow: -2px 0px 0px 0px #808080;
-		margin-left: 0;
-	}
-	.handle {
-		cursor: move;
-	}
-	.empty .drag-area {
-		box-shadow: -2px 0px 0px 0px rgb(128, 128, 128, 0.4);
-	}
-	.empty .expand-button {
-		opacity: 0.4;
-	}
+  .rotate-90 {
+    transform: rotate(90deg) translateZ(0);
+  }
+  .expand-area {
+    box-shadow: -2px 0px 0px 0px #808080;
+    margin-left: 0;
+  }
+  .handle {
+    cursor: move;
+  }
+  .empty .drag-area {
+    box-shadow: -2px 0px 0px 0px rgb(128, 128, 128, 0.4);
+  }
+  .empty .expand-button {
+    opacity: 0.4;
+  }
   .found {
     background: rgba(200, 0, 0, 0.1) !important;
   }
-	.ghost {
+  .ghost {
     opacity: 0.5;
     background: rgba(251, 0, 0, 0.3);
-	}
-	.v-icon.v-icon--disabled {
-		opacity: 0;
-	}
+  }
+  .v-icon.v-icon--disabled {
+    opacity: 0;
+  }
   .v-icon {
     transition: none !important;
   }
-	.theme--light .tree-node-title:hover {
-		background-color: rgba(0,0,0,.04);
-	}
+  .theme--light .tree-node-title:hover {
+    background-color: rgba(0,0,0,.04);
+  }
   .theme--dark .tree-node-title:hover {
-		background-color: rgba(255,255,255,.04);
-	}
+    background-color: rgba(255,255,255,.04);
+  }
   .tree-node-title{
     transition: background ease 0.3s, color ease 0.15s;
   }
diff --git a/app/imports/ui/creature/buildTree/BuildTreeNodeList.vue b/app/imports/ui/creature/buildTree/BuildTreeNodeList.vue
index f6a22de6..59aa14c4 100644
--- a/app/imports/ui/creature/buildTree/BuildTreeNodeList.vue
+++ b/app/imports/ui/creature/buildTree/BuildTreeNodeList.vue
@@ -5,26 +5,31 @@
       :key="child.node._id"
       :node="child.node"
       :children="child.children"
+      :parent-slot-id="parentSlotId"
       @selected="e => $emit('selected', e)"
     />
   </div>
 </template>
 
 <script lang="js">
-	import BuildTreeNode from '/imports/ui/creature/buildTree/BuildTreeNode.vue';
+  import BuildTreeNode from '/imports/ui/creature/buildTree/BuildTreeNode.vue';
 
-	export default {
-		components: {
-			BuildTreeNode,
-		},
-		props: {
-			children: {
-				type: Array,
-				default: () => [],
-			},
-		},
-		data(){ return {
-			expanded: false,
-		}},
-	};
+  export default {
+    components: {
+      BuildTreeNode,
+    },
+    props: {
+      children: {
+        type: Array,
+        default: () => [],
+      },
+      parentSlotId: {
+				type: String,
+				default: undefined,
+      },
+    },
+    data(){ return {
+      expanded: false,
+    }},
+  };
 </script>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue b/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
index f3da3e0c..b4e4d9a4 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
@@ -25,6 +25,7 @@
               <v-menu
                 bottom
                 left
+                transition="slide-y-transition"
               >
                 <template #activator="{ on }">
                   <v-badge
@@ -48,12 +49,21 @@
                     <v-icon class="mr-2">
                       mdi-file-hidden
                     </v-icon>
-                    {{ hiddenCount }} hidden {{ hiddenCount > 1 ? 'slots' : 'slot' }}
+                    {{ hiddenCount }} hidden {{ hiddenCount > 1 ? 'properties' : 'property' }}
                   </v-subheader>
+                  <v-list-item
+                    v-for="pointBuy in hiddenPointBuys"
+                    :key="pointBuy._id"
+                    @click="unhideProp(pointBuy._id)"
+                  >
+                    <v-list-item-title>
+                      {{ getPropertyTitle(pointBuy) }}
+                    </v-list-item-title>
+                  </v-list-item>
                   <v-list-item
                     v-for="slot in hiddenSlots"
                     :key="slot._id"
-                    @click="unhideSlot(slot._id)"
+                    @click="unhideProp(slot._id)"
                   >
                     <v-list-item-title>
                       {{ getPropertyTitle(slot) }}
@@ -226,7 +236,7 @@ export default {
       ].sort((a, b) => a.order - b.order);
     },
     hiddenCount() {
-      return this.hiddenSlots.length;
+      return this.hiddenSlots.length + this.hiddenPointBuys.length;
     },
   },
   meteor: {
@@ -236,6 +246,16 @@ export default {
     variables() {
       return CreatureVariables.findOne({ _creatureId: this.creatureId }) || {};
     },
+    hiddenPointBuys() {
+      return CreatureProperties.find({
+        type: 'pointBuy',
+        'ancestors.id': this.creatureId,
+        ignored: true,
+        pointsLeft: {$ne: 0},
+        removed: {$ne: true},
+        inactive: {$ne: true},
+      }).fetch();
+    },
     hiddenSlots(){
       return CreatureProperties.find({
         type: 'propertySlot',
@@ -284,7 +304,7 @@ export default {
     slotBuildTree(){
       const slots = CreatureProperties.find({
         'ancestors.id': this.creatureId,
-        type: 'propertySlot',
+        type: {$in: ['propertySlot', 'pointBuy']},
         $or: [
           {'slotCondition.value': {$nin: [false, 0, '']}},
           {'slotCondition.value': {$exists: false}},
@@ -308,16 +328,15 @@ export default {
       ]);
       traverse(tree, (child, parents) => {
         const model = child.node;
-        const isSlotWithSpace = model.type === 'propertySlot' &&
+        const isSlotWithSpace = model.type === 'propertySlot' && (
           model.spaceLeft > 0 || 
           !model.quantityExpected ||
-          model.quantityExpected.value === 0;
+          model.quantityExpected.value === 0
+        );
         if(isSlotWithSpace) {
           model._canFill = true;
           parents.forEach(node => {
-            if (node.node.type === 'propertySlot'){
-              node.node._descendantCanFill = true;
-            }
+            node.node._descendantCanFill = true;
           });
         }
       });
@@ -385,7 +404,7 @@ export default {
       });
     },
     getPropertyTitle,
-    unhideSlot(_id) {
+    unhideProp(_id) {
       updateCreatureProperty.call({
         _id,
         path: ['ignored'],
diff --git a/app/imports/ui/creature/slots/SlotCardsToFill.vue b/app/imports/ui/creature/slots/SlotCardsToFill.vue
index 2c2d873c..043489e7 100644
--- a/app/imports/ui/creature/slots/SlotCardsToFill.vue
+++ b/app/imports/ui/creature/slots/SlotCardsToFill.vue
@@ -5,6 +5,18 @@
       leave-absolute
       hide-on-leave
     >
+      <div
+        v-for="pointBuy in pointBuys"
+        :key="pointBuy._id"
+        style="transition: all 0.3s !important"
+      >
+        <point-buy-card
+          :model="pointBuy"
+          hover
+          @ignore="ignoreProp(pointBuy._id)"
+          @click="editPointBuy(pointBuy._id)"
+        />
+      </div>
       <div
         v-for="slot in slots"
         :key="slot._id"
@@ -13,7 +25,7 @@
         <slot-card
           :model="slot"
           hover
-          @ignore="ignoreSlot(slot._id)"
+          @ignore="ignoreProp(slot._id)"
           @click="fillSlot(slot._id)"
         />
       </div>
@@ -24,6 +36,7 @@
 <script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import SlotCard from '/imports/ui/creature/slots/SlotCard.vue';
+import PointBuyCard from '/imports/ui/properties/components/pointBuy/PointBuyCard.vue';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
 import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
@@ -32,13 +45,14 @@ import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 export default {
   components: {
     SlotCard,
+    PointBuyCard,
     ColumnLayout,
   },
   inject: {
     context: { default: {} }
   },
   methods: {
-    ignoreSlot(_id){
+    ignoreProp(_id){
       updateCreatureProperty.call({
         _id,
         path: ['ignored'],
@@ -75,6 +89,16 @@ export default {
         }
       });
     },
+    editPointBuy(_id){
+      this.$store.commit('pushDialogStack', {
+        component: 'creature-property-dialog',
+        elementId: `point-buy-card-${_id}`,
+        data: {
+          _id,
+          startInEditTab: true,
+        },
+      });
+    },
   },
   meteor: {
     slots(){
@@ -99,7 +123,16 @@ export default {
         removed: {$ne: true},
         inactive: {$ne: true},
       });
-    }
+    },
+    pointBuys(){
+      return CreatureProperties.find({
+        type: 'pointBuy',
+        'ancestors.id': this.context.creatureId,
+        ignored: { $ne: true },       
+        removed: {$ne: true},
+        inactive: {$ne: true},
+      });
+    },
   }
 }
 </script>
diff --git a/app/imports/ui/properties/components/pointBuy/PointBuyCard.vue b/app/imports/ui/properties/components/pointBuy/PointBuyCard.vue
new file mode 100644
index 00000000..cbd3f339
--- /dev/null
+++ b/app/imports/ui/properties/components/pointBuy/PointBuyCard.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-card
+    v-if="model"
+    v-bind="$attrs"
+    :data-id="`point-buy-card-${model._id}`"
+    :style="`border: solid 1px ${accentColor};`"
+    hover
+    class="slot-card d-flex flex-column"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @click="$emit('click')"
+  >
+    <card-highlight 
+      :active="hover"
+    />
+    <v-card-title>
+      {{ model.name || 'Point Buy' }}
+    </v-card-title>
+    <v-card-text>
+      {{ model.spent }}
+      <template v-if="model.total && (typeof model.total.value === 'number')">
+        / {{ model.total && model.total.value }}
+      </template>
+    </v-card-text>
+    <v-spacer />
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        icon
+        color="accent"
+        @click.stop="$emit('ignore')"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="js">
+import CardHighlight from '/imports/ui/components/CardHighlight.vue';
+
+export default {
+  components: {
+    CardHighlight,
+  },
+  inject: {
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
+  props: {
+    model: {
+      type: Object,
+      default: undefined,
+    },
+  },
+  data(){ return {
+    hover: false,
+  }},
+  computed: {
+    accentColor(){
+      if (this.theme.isDark){
+        return this.$vuetify.theme.themes.dark.primary;
+      } else {
+        return this.$vuetify.theme.themes.light.primary;
+      }
+    }
+  },
+}
+</script>
diff --git a/app/imports/ui/properties/forms/PointBuySpendForm.vue b/app/imports/ui/properties/forms/PointBuySpendForm.vue
index 289450fb..403cd927 100644
--- a/app/imports/ui/properties/forms/PointBuySpendForm.vue
+++ b/app/imports/ui/properties/forms/PointBuySpendForm.vue
@@ -1,6 +1,9 @@
 <template lang="html">
   <div class="point-buy-spend-form">
-    <v-row dense>
+    <v-row
+      v-if="model.values && model.values.length"
+      dense
+    >
       <v-col
         cols="10"
         md="11"
@@ -67,6 +70,7 @@
       dense
     >
       <v-col
+        v-if="typeof model.spent === 'number'"
         cols="12"
         class="text-h4 mb-4 pr-8 d-flex justify-end"
         :class="{
@@ -74,7 +78,10 @@
           'warning--text': model.spent < (model.total && model.total.value),
         }"
       >
-        {{ model.spent }} / {{ model.total && model.total.value }}
+        {{ model.spent }}
+        <template v-if="model.total && (typeof model.total.value === 'number')">
+          / {{ model.total && model.total.value }}
+        </template>
       </v-col>
     </v-row>
   </div>
@@ -88,6 +95,7 @@ export default {
   components: {
     CalculationErrorList,
   },
+  mixins: [propertyFormMixin],
   methods: {
     max(row) {
       return row.max ? row.max && row.max.value : this.model.max && this.model.max.value;
@@ -96,6 +104,5 @@ export default {
       return row.min ? row.min && row.min.value : this.model.min && this.model.min.value;
     },
   },
-  mixins: [propertyFormMixin],
 };
 </script>

From 249aebea0f4e3b45b531356873299fc2515653e4 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 15:10:36 +0200
Subject: [PATCH 13/14] Allowed some properties to return damaged action values
 When a prop is damaged during an action, it now tries to show its new value
 during the rest of that action

---
 .../creatureProperties/methods/damageProperty.js | 16 +++++++++++++++-
 .../actions/applyPropertyByType/applyDamage.js   | 10 ++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/imports/api/creature/creatureProperties/methods/damageProperty.js b/app/imports/api/creature/creatureProperties/methods/damageProperty.js
index d9af78f5..075aa34f 100644
--- a/app/imports/api/creature/creatureProperties/methods/damageProperty.js
+++ b/app/imports/api/creature/creatureProperties/methods/damageProperty.js
@@ -24,7 +24,7 @@ const damageProperty = new ValidatedMethod({
   run({ _id, operation, value }) {
     
     // Get action context
-    const prop = CreatureProperties.findOne(_id);
+    let prop = CreatureProperties.findOne(_id);
     if (!prop) throw new Meteor.Error(
       'Damage property failed', 'Property doesn\'t exist'
     );
@@ -42,6 +42,14 @@ const damageProperty = new ValidatedMethod({
 				`Property of type "${prop.type}" can't be damaged`
 			);
     }
+
+    // Replace the prop by its actionContext counterpart if possible
+    if (prop.variableName) {
+      const actionContextProp = actionContext.scope[prop.variableName];
+      if (actionContextProp?._id === prop._id) {
+        prop = actionContextProp;
+      }
+    }
     
     const result = damagePropertyWork({ prop, operation, value, actionContext });
   
@@ -94,6 +102,9 @@ export function damagePropertyWork({ prop, operation, value, actionContext }) {
     }, {
       selector: prop
     });
+    // Also write it straight to the prop so that it is updated in the actionContext
+    prop.damage = damage;
+    prop.value = newValue;
   } else if (operation === 'increment'){
     let currentValue = prop.value || 0;
     let currentDamage = prop.damage || 0;
@@ -111,6 +122,9 @@ export function damagePropertyWork({ prop, operation, value, actionContext }) {
     }, {
       selector: prop
     });
+    // Also write it straight to the prop so that it is updated in the actionContext
+    prop.damage += increment;
+    prop.value -= increment;
   }
 
   applyTriggers(actionContext.triggers?.damageProperty?.after, prop, actionContext);
diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js b/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js
index 540ec5cb..6900fa56 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyDamage.js
@@ -219,6 +219,16 @@ function dealDamage({target, damageType, amount, actionContext}){
   if (damageType === 'healing') damageLeft = -totalDamage;
   healthBars.forEach(healthBar => {
     if (damageLeft === 0) return;
+    // Replace the healthbar by the one in the action context if we can
+    // The damagePropertyWork function bashes the prop with the damage
+    // So we can use the new value in later action properties
+    if (healthBar.variableName) {
+      const targetHealthBar = target.variables[healthBar.variableName];
+      if (targetHealthBar?._id === healthBar._id) {
+        healthBar = targetHealthBar;
+      }
+    }
+    // Do the damage
     let damageAdded = damagePropertyWork({
       prop: healthBar,
       operation: 'increment',

From a84da7d8a59437499f8e1538df7ef2ff09189e2c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 25 Aug 2022 15:10:56 +0200
Subject: [PATCH 14/14] Buffs can skip var freezing, freeze inline calcs

---
 .../actions/applyPropertyByType/applyBuff.js  | 37 ++++++++++++++++++-
 app/imports/api/properties/Buffs.js           |  5 +++
 app/imports/ui/properties/forms/BuffForm.vue  | 12 ++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js b/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js
index d9e2827f..93bf413c 100644
--- a/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js
+++ b/app/imports/api/engine/actions/applyPropertyByType/applyBuff.js
@@ -13,6 +13,7 @@ import logErrors from './shared/logErrors.js';
 import { insertCreatureLog } from '/imports/api/creature/log/CreatureLogs.js';
 import cyrb53 from '/imports/api/engine/computation/utility/cyrb53.js';
 import { applyNodeTriggers } from '/imports/api/engine/actions/applyTriggers.js';
+import INLINE_CALCULATION_REGEX from '/imports/constants/INLINE_CALCULTION_REGEX.js';
 
 export default function applyBuff(node, actionContext){
   applyNodeTriggers(node, 'before', actionContext);
@@ -32,7 +33,9 @@ export default function applyBuff(node, actionContext){
     });
   }
   addChildrenToPropList(node.children);
-  crystalizeVariables({propList, actionContext});
+  if (!prop.skipCrystalization) {
+    crystalizeVariables({propList, actionContext});
+  }
 
   let oldParent = {
     id: prop.parent.id,
@@ -96,6 +99,7 @@ function crystalizeVariables({propList, actionContext}){
       delete prop._skipCrystalize;
       return;
     }
+    // Iterate through all the calculations and crystalize them
     computedSchemas[prop.type].computedFields().forEach( calcKey => {
       applyFnToKey(prop, calcKey, (prop, key) => {
         const calcObj = get(prop, key);
@@ -132,5 +136,36 @@ function crystalizeVariables({propList, actionContext}){
         calcObj.hash = cyrb53(calcObj.calculation);
       });
     });
+    // For each key in the schema
+    computedSchemas[prop.type].inlineCalculationFields().forEach( calcKey => {
+      // That ends in .inlineCalculations
+      applyFnToKey(prop, calcKey, (prop, key) => {
+        const inlineCalcObj = get(prop, key);
+        if (!inlineCalcObj) return;
+
+        // If there is no text, skip
+        if (!inlineCalcObj.text){
+          return;
+        }
+
+        // Replace all the existing calculations
+        let index = -1;
+        inlineCalcObj.text = inlineCalcObj.text.replace(INLINE_CALCULATION_REGEX, () => {
+          index += 1;
+          return `{${inlineCalcObj.inlineCalculations[index].calculation}}`;
+        });
+
+        // Set the value to the uncomputed string
+        inlineCalcObj.value = inlineCalcObj.text;
+
+        // Write a new hash
+        const inlineCalcHash = cyrb53(inlineCalcObj.text);
+        if (inlineCalcHash === inlineCalcObj.hash) {
+          // Skip if nothing changed
+          return;
+        }
+        inlineCalcObj.hash = inlineCalcHash;
+      });
+    });
   });
 }
diff --git a/app/imports/api/properties/Buffs.js b/app/imports/api/properties/Buffs.js
index ad993bb7..2e15d441 100644
--- a/app/imports/api/properties/Buffs.js
+++ b/app/imports/api/properties/Buffs.js
@@ -31,6 +31,11 @@ let BuffSchema = createPropertySchema({
 	},
 	// Prevent the property from showing up in the log
   silent: {
+    type: Boolean,
+    optional: true,
+	},
+	// Prevent the children from being crystalized
+  skipCrystalization: {
     type: Boolean,
     optional: true,
   },
diff --git a/app/imports/ui/properties/forms/BuffForm.vue b/app/imports/ui/properties/forms/BuffForm.vue
index e8848bed..a7c3b0dd 100644
--- a/app/imports/ui/properties/forms/BuffForm.vue
+++ b/app/imports/ui/properties/forms/BuffForm.vue
@@ -72,6 +72,18 @@
               @change="change('silent', ...arguments)"
             />
           </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Don't freeze variables"
+              :value="model.skipCrystalization"
+              :error-messages="errors.skipCrystalization"
+              @change="change('skipCrystalization', ...arguments)"
+            />
+          </v-col>
         </v-row>
         <smart-combobox
           label="Tags"