Added basic XP system

app/imports/ui/creature/experiences/ExperienceForm.vue

@@ -0,0 +1,66 @@
+<template lang="html">
+  <div class="experience-form">
+    <div class="layout column align-center">
+      <smart-switch
+        label="Milestone"
+        class="mx-3"
+        :value="milestone"
+        @change="makeMilestone"
+      />
+      <text-field
+        v-if="milestone"
+        label="Levels"
+        type="number"
+        class="base-value-field text-xs-center large-format no-flex"
+        :value="model.levels"
+        :error-messages="errors.levels"
+        @change="change('levels', ...arguments)"
+      />
+      <text-field
+        v-else
+        type="number"
+        class="base-value-field text-xs-center large-format no-flex"
+        suffix="XP"
+        :value="model.xp"
+        :error-messages="errors.xp"
+        @change="change('xp', ...arguments)"
+      />
+    </div>
+    <text-field
+      label="Name"
+      :value="model.name"
+      :error-messages="errors.name"
+      @change="change('name', ...arguments)"
+    />
+  </div>
+</template>
+
+<script>
+import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
+export default {
+  mixins: [propertyFormMixin],
+  props: {
+    startAsMilestone: {
+      type: Boolean,
+    },
+  },
+  data(){return {
+    milestone: this.startAsMilestone,
+  }},
+  methods: {
+    makeMilestone(milestone, ack){
+      this.milestone = milestone;
+      if (milestone){
+        this.change('xp', undefined);
+        this.change('levels', 1, ack);
+      } else {
+        this.change('levels', undefined, ack);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/creature/experiences/ExperienceInsertDialog.vue

@@ -0,0 +1,96 @@
+<template lang="html">
+  <dialog-base>
+    <experience-form
+      :start-as-milestone="startAsMilestone"
+      :model="model"
+      :errors="errors"
+      @change="change"
+      @push="push"
+      @pull="pull"
+    />
+    <p
+      v-if="error"
+      class="error"
+    >
+      {{ error }}
+    </p>
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        :disabled="!valid"
+        :loading="loading"
+        @click="insertExperience"
+      >
+        Insert
+      </v-btn>
+    </div>
+  </dialog-base>
+</template>
+
+<script>
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import ExperienceForm from '/imports/ui/creature/experiences/ExperienceForm.vue';
+import { ExperienceSchema, insertExperience } from '/imports/api/creature/experience/Experiences.js';
+import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
+
+export default {
+  components: {
+		DialogBase,
+    ExperienceForm,
+	},
+  mixins: [schemaFormMixin],
+  provide: {
+    context: {
+      debounceTime: 0,
+    },
+  },
+  props: {
+    creatureIds: {
+      type: Array,
+      required: true,
+    },
+    startAsMilestone: {
+      type: Boolean,
+    },
+  },
+  data(){
+    let schema = ExperienceSchema.omit('creatureId');
+    let startingModel = {};
+    if (this.startAsMilestone){
+      startingModel.levels = 1;
+    }
+    return {
+      model: schema.clean(startingModel),
+      schema: schema,
+      validationContext: schema.newContext(),
+      debounceTime: 0,
+      loading: false,
+      error: undefined,
+    };
+  },
+  methods:{
+    insertExperience(){
+      this.loading = true;
+      let experience = this.schema.clean(this.model);
+      insertExperience.call({
+        experience,
+        creatureIds: this.creatureIds,
+      }, (error) =>  {
+        this.loading = false;
+        if (error){
+          this.error = error.message || error;
+          console.error(error);
+        } else {
+          this.$store.dispatch('popDialogStack');
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/creature/experiences/ExperienceListDialog.vue

@@ -0,0 +1,92 @@
+<template lang="html">
+  <dialog-base>
+    <template slot="toolbar">
+      <v-toolbar-title>
+        Experiences
+      </v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        icon
+        flat
+        @click="recompute"
+      >
+        <v-icon>refresh</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-tile
+        v-for="experience in experiences"
+        :key="experience._id"
+      >
+        <v-list-tile-content>
+          <v-list-tile-title>
+            {{ experience.name }}
+          </v-list-tile-title>
+        </v-list-tile-content>
+        <v-list-tile-action>
+          <v-btn
+            icon
+            flat
+            :loading="experiencesRemovalLoading.has(experience._id)"
+            @click="removeExperience(experience._id)"
+          >
+            <v-icon>delete</v-icon>
+          </v-btn>
+        </v-list-tile-action>
+      </v-list-tile>
+    </v-list>
+  </dialog-base>
+</template>
+
+<script>
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import Experiences, { removeExperience, recomputeExperiences } from '/imports/api/creature/experience/Experiences.js';
+export default {
+  components: {
+    DialogBase,
+  },
+  props: {
+    creatureId: {
+      type: String,
+      required: true,
+    },
+  },
+  data(){ return {
+    experiencesRemovalLoading: new Set(),
+    recomputeLoading: false,
+  }},
+  meteor: {
+    $subscribe: {
+      'experiences'(){
+        return [this.creatureId];
+      },
+    },
+    experiences(){
+      return Experiences.find({
+        creatureId: this.creatureId
+      }, {
+        sort: {date: 1}
+      });
+    }
+  },
+  methods: {
+    removeExperience(experienceId){
+      this.experiencesRemovalLoading.add(experienceId);
+      removeExperience.call({experienceId}, (error) => {
+        this.experiencesRemovalLoading.delete(experienceId);
+        if (error) console.error(error);
+      });
+    },
+    recompute(){
+      this.recomputeLoading = true;
+      recomputeExperiences.call({creatureId: this.creatureId}, error => {
+        this.recomputeLoading = false;
+        if (error) console.error(error);
+      });
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>