Added slotfiller property type to increase control over slot filling

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -73,11 +73,14 @@
 </template>
 
 <script>
+import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import { parse, CompilationContext } from '/imports/parser/parser.js';
+
 export default {
   components: {
 		DialogBase,
@@ -87,7 +90,15 @@ export default {
     slotId: {
       type: String,
       required: true,
-    }
+    },
+    creatureId: {
+      type: String,
+      required: true,
+    },
+    numToFill: {
+      type: Number,
+      required: true,
+    },
   },
   data(){return {
     selectedNode: undefined,
@@ -109,14 +120,41 @@ export default {
     model(){
       return CreatureProperties.findOne(this.slotId);
     },
+    creature(){
+      return Creatures.findOne(this.creatureId);
+    },
     libraryNodes(){
-      let filter = {
-        tags: {$all: this.model.slotTags},
-      };
+      let filter = {};
+      if (this.model.tags.length){
+        filter.tags = {$all: this.model.slotTags};
+      }
       if (this.model.slotType){
-        filter.type = this.model.slotType;
+        filter.$or = [{
+            type: this.model.slotType
+          },{
+            type: 'slotFiller',
+            slotFillerType: this.model.slotType,
+        }];
       }
       let nodes = LibraryNodes.find(filter).fetch();
+      // Filter out slotFillers whose condition isn't met or are too big to fit
+      // the quantity to fill
+      nodes = nodes.filter(node => {
+        if (node.type === 'slotFiller'){
+          if (node.slotFillerCondition){
+            let context = new CompilationContext();
+            let conditionResult = parse(node.slotFillerCondition)
+            .reduce(this.creature.variables, context);
+            if (conditionResult && !conditionResult.value) return false;
+          }
+          console.log({numToFill: this.numToFill, node});
+          if (this.numToFill > 0 && node.slotQuantityFilled > this.numToFill){
+            return false;
+          }
+        }
+        return true;
+      });
+      // Filter out slotFillers whose
       if (nodes.length === 1) this.selectedNode = nodes[0];
       return nodes;
     },

app/imports/ui/creature/slots/Slots.vue

@@ -9,7 +9,7 @@
         {{ slot.name }}
         <v-spacer />
         <span v-if="slot.quantityExpected > 1">
-          {{ slot.children.length }} / {{ slot.quantityExpected }}
+          {{ slot.totalFilled }} / {{ slot.quantityExpected }}
         </span>
       </h3>
       <div
@@ -33,11 +33,11 @@
         </v-btn>
       </div>
       <v-btn
-        v-if="!slot.quantityExpected || slot.quantityExpected > slot.children.length"
+        v-if="!slot.quantityExpected || slot.quantityExpected > slot.totalFilled"
         icon
         :data-id="`slot-add-button-${slot._id}`"
         style="background-color: inherit;"
-        @click="fillSlot(slot._id)"
+        @click="fillSlot(slot)"
       >
         <v-icon>add</v-icon>
       </v-btn>
@@ -64,11 +64,19 @@ export default {
     },
   },
   methods: {
-    fillSlot(slotId){
+    fillSlot(slot){
+      let slotId = slot._id;
+      let creatureId = this.creatureId;
+      let numToFill = slot.quantityExpected === 0 ?
+        0 : slot.quantityExpected - slot.totalFilled;
       this.$store.commit('pushDialogStack', {
         component: 'slot-fill-dialog',
         elementId: `slot-add-button-${slotId}`,
-        data: {slotId},
+        data: {
+          slotId,
+          creatureId,
+          numToFill,
+        },
         callback(node){
 					if(!node) return;
           let newPropertyId = insertPropertyFromLibraryNode.call({
@@ -105,6 +113,14 @@ export default {
           'parent.id': slot._id,
           removed: {$ne: true},
         }).fetch();
+        slot.totalFilled = 0;
+        slot.children.forEach(child => {
+          if (child.type === 'slotFiller'){
+            slot.totalFilled += child.slotQuantityFilled;
+          } else {
+            slot.totalFilled++;
+          }
+        });
         return slot;
       });
     },