Rudimentary customization in check dialog

app/imports/client/ui/creature/actions/input/CheckInput.vue

@@ -1,43 +1,65 @@
 <template>
-  <div class="d-flex flex-column justify-center align-center">
-    <v-btn-toggle
-      :value="value.advantage"
-      color="accent"
-      @change="changeAdvantage"
-    >
-      <v-btn :value="-1">
-        Disadvantage
-      </v-btn>
-      <v-btn :value="1">
-        Advantage
-      </v-btn>
-    </v-btn-toggle>
-    <div style="position: relative;">
-      <v-scale-transition
-        origin="center center"
+  <div class="d-flex flex-wrap">
+    <div class="d-flex flex-column justify-center align-center ma-2">
+      <v-btn-toggle
+        :value="value.advantage"
+        color="accent"
+        @change="changeAdvantage"
       >
+        <v-btn :value="-1">
+          Disadvantage
+        </v-btn>
+        <v-btn :value="1">
+          Advantage
+        </v-btn>
+      </v-btn-toggle>
+      <div style="position: relative;">
+        <v-scale-transition
+          origin="center center"
+        >
+          <vertical-hex
+            v-if="value.advantage"
+            id="extra-hex"
+            style="position:absolute; transition: margin-left 0.3s ease;"
+            :style="{marginLeft: value.advantage == 1 ? '24px' : '-24px'}"
+            disable-hover
+          />
+        </v-scale-transition>
         <vertical-hex
-          v-if="value.advantage"
-          id="extra-hex"
-          style="position:absolute; transition: margin-left 0.3s ease;"
-          :style="{marginLeft: value.advantage == 1 ? '24px' : '-24px'}"
-          disable-hover
-        />
-      </v-scale-transition>
-      <vertical-hex
-        id="roll-hex"
-        @click="$emit('continue')"
-      >
-        <div>
-          Roll
-        </div>
-      </vertical-hex>
+          id="roll-hex"
+          @click="$emit('continue')"
+        >
+          <div>
+            Roll
+          </div>
+        </vertical-hex>
+      </div>
+    </div>
+    <div class="d-flex flex-column mt-4 mr-4">
+      <smart-select
+        label="Ability"
+        :items="abilityOptions"
+        :value="value.abilityVariableName"
+        @change="change('abilityVariableName', ...arguments)"
+      />
+      <smart-select
+        label="Skill"
+        :items="skillOptions"
+        :value="value.skillVariableName"
+        @change="change('skillVariableName', ...arguments)"
+      />
+      <text-field
+        label="DC"
+        :value="value.dc"
+        @change="change('dc', ...arguments)"
+      />
     </div>
   </div>
 </template>
 
 <script lang="js">
 import VerticalHex from '/imports/client/ui/components/VerticalHex.vue';
+import createListOfProperties from '/imports/client/ui/properties/forms/shared/lists/createListOfProperties';
 
 export default {
   components: {
@@ -58,11 +80,28 @@ export default {
       required: true,
     }
   },
+  data() {
+    return {
+      abilityOptions: createListOfProperties({
+        attributeType: 'ability',
+        'root.id': this.value.prop.root.id,
+      }, true),
+      skillOptions: createListOfProperties({
+        type: 'skill',
+        'root.id': this.value.prop.root.id,
+      }, true),
+    };
+  },
   methods: {
     changeAdvantage(e) {
       const newValue = { ...this.value, advantage: e };
       this.$emit('input', newValue)
     },
+    change(key, value, ack) {
+      const newValue = { ...this.value, [key]: value };
+      this.$emit('input', newValue);
+      ack();
+    },
   }
 };
 </script>

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

@@ -415,12 +415,12 @@ import doAction from '/imports/client/ui/creature/actions/doAction';
 import getPropertyTitle from '/imports/client/ui/properties/shared/getPropertyTitle';
 
 function walkDown(forest, callback){
-  let stack = [...forest];
+  let stack = [...forest].reverse();
   while(stack.length){
     let node = stack.pop();
     const { skipChildren } = callback(node) ?? { skipChildren: false };
     if (!skipChildren) {
-      stack.push(...node.children);
+      stack.push(...[...node.children].reverse());
     }
   }
 }
@@ -557,7 +557,7 @@ export default {
       if (creature.settings.hideUnusedStats) {
         filter.hide = { $ne: true };
       }
-      const allProps = CreatureProperties.find(filter, { sort: { left: -1 } }).fetch();
+      const allProps = CreatureProperties.find(filter, { sort: { left: 1 } }).fetch();
       const forest = docsToForest(allProps);
       const properties = { folder: {}, attribute: {}, skill: {} };
       walkDown(forest, node => {