Made spells into a special kind of action

app/imports/api/properties/Spells.js

@@ -1,4 +1,4 @@
-import { AttackSchema } from '/imports/api/properties/Attacks.js';
+import { ActionSchema } from '/imports/api/properties/Actions.js';
 import SimpleSchema from 'simpl-schema';
 
 const magicSchools = [
@@ -13,7 +13,7 @@ const magicSchools = [
 ];
 
 let SpellSchema = new SimpleSchema({})
-.extend(AttackSchema)
+.extend(ActionSchema)
 .extend({
 	name: {
 		type: String,
@@ -29,6 +29,10 @@ let SpellSchema = new SimpleSchema({})
   castWithoutSpellSlots: {
     type: Boolean,
     optional: true,
+  },
+  hasAttackRoll: {
+    type: Boolean,
+    optional: true,
   },
 	// Spell lists that this spell appears on
   spellLists: {
@@ -87,6 +91,11 @@ let SpellSchema = new SimpleSchema({})
 		defaultValue: 'abjuration',
 		allowedValues: magicSchools,
 	},
+  // Set better defaults for the action
+  actionType: {
+    type: String,
+    defaultValue: 'spell',
+  },
 });
 
 export { SpellSchema };

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

@@ -1,20 +1,40 @@
 <template>
   <div class="character-sheet layout column">
     <v-toolbar
-			app clipped-left
+      app
+      clipped-left
       :color="character.color || 'secondary'"
       :dark="isDarkColor(character.color || theme.primary)"
     >
-      <v-btn v-if="showMenuButton" flat icon @click="toggleDrawer">
+      <v-btn
+        v-if="showMenuButton"
+        flat
+        icon
+        @click="toggleDrawer"
+      >
         <v-icon>menu</v-icon>
       </v-btn>
-			<div class="flex">{{character.name}}</div>
+      <div class="flex">
-			<v-btn flat icon @click="recompute(character._id)">
+        {{ character.name }}
+      </div>
+      <v-btn
+        flat
+        icon
+        @click="recompute(character._id)"
+      >
         <v-icon>refresh</v-icon>
       </v-btn>
-			<v-menu bottom left transition="slide-y-transition" data-id="creature-menu">
+      <v-menu
-	      <template v-slot:activator="{ on }">
+        bottom
-	 				<v-btn icon v-on="on">
+        left
+        transition="slide-y-transition"
+        data-id="creature-menu"
+      >
+        <template #activator="{ on }">
+          <v-btn
+            icon
+            v-on="on"
+          >
             <v-icon>more_vert</v-icon>
           </v-btn>
         </template>
@@ -37,8 +57,8 @@
         </v-list>
       </v-menu>
       <v-tabs
-				v-model="tab"
         slot="extension"
+        v-model="tab"
         centered
         grow
       >
@@ -62,7 +82,10 @@
         </v-tab>
       </v-tabs>
     </v-toolbar>
-    <v-content class="flex" v-if="$subReady.singleCharacter">
+    <v-content
+      v-if="$subReady.singleCharacter"
+      class="flex"
+    >
       <v-tabs-items v-model="tab">
         <v-tab-item>
           <stats-tab :creature-id="creatureId" />
@@ -94,7 +117,7 @@
 	import Creatures from '/imports/api/creature/Creatures.js';
 	import removeCreature from '/imports/api/creature/removeCreature.js';
 	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
-	import { mapMutations } from "vuex";
+	import { mapMutations } from 'vuex';
 	import { theme } from '/imports/ui/theme.js';
 	import StatsTab from '/imports/ui/creature/character/characterSheetTabs/StatsTab.vue';
 	import FeaturesTab from '/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue';
@@ -105,10 +128,6 @@
 	import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
 
 	export default {
-		props: {
-			showMenuButton: Boolean,
-			creatureId: String,
-		},
 		components: {
 			StatsTab,
 			FeaturesTab,
@@ -117,13 +136,20 @@
 			PersonaTab,
 			TreeTab,
 		},
+		props: {
+			showMenuButton: Boolean,
+			creatureId: {
+        type: String,
+        required: true,
+      },
+		},
 		data(){return {
 			theme,
 			tab: 0,
 		}},
 		methods: {
       ...mapMutations([
-        "toggleDrawer",
+        'toggleDrawer',
       ]),
 			recompute(charId){
 				recomputeCreature.call({charId});
@@ -160,7 +186,7 @@
 					},
 					callback(confirmation){
 						if(!confirmation) return;
-						removeCreature.call({charId: that.creatureId}, (error, result) => {
+						removeCreature.call({charId: that.creatureId}, (error) => {
 							if (error) {
 								console.error(error);
 							} else {
@@ -182,6 +208,9 @@
 				return Creatures.findOne(this.creatureId) || {};
 			},
 		},
+    provide: {
+      creature: this.character,
+    }
 	}
 </script>
 

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

@@ -1,20 +1,21 @@
 <template lang="html">
   <div class="stats-tab ma-2">
-
     <div class="px-2 pt-2">
       <health-bar-card-container :creature-id="creatureId" />
     </div>
 
     <column-layout>
-
       <div class="ability-scores">
         <v-card>
           <v-list>
             <template v-for="(ability, index) in abilities">
-							<v-divider v-if="index !== 0"/>
+              <v-divider
+                v-if="index !== 0"
+                :key="index"
+              />
               <ability-list-tile
-								v-bind="ability"
                 :key="ability._id"
+                v-bind="ability"
                 :data-id="ability._id"
                 @click="clickProperty({_id: ability._id})"
               />
@@ -23,7 +24,11 @@
         </v-card>
       </div>
 
-			<div v-for="stat in stats" class="stat" :key="stat._id">
+      <div
+        v-for="stat in stats"
+        :key="stat._id"
+        class="stat"
+      >
         <attribute-card
           v-bind="stat"
           :data-id="stat._id"
@@ -31,16 +36,26 @@
         />
       </div>
 
-			<div v-for="modifier in modifiers" class="modifier" :key="modifier._id">
+      <div
-				<attribute-card modifier
+        v-for="modifier in modifiers"
+        :key="modifier._id"
+        class="modifier"
+      >
+        <attribute-card
+          modifier
           v-bind="modifier"
           :data-id="modifier._id"
           @click="clickProperty({_id: modifier._id})"
         />
       </div>
 
-			<div v-for="check in checks" class="check" :key="check._id">
+      <div
-				<attribute-card modifier
+        v-for="check in checks"
+        :key="check._id"
+        class="check"
+      >
+        <attribute-card
+          modifier
           v-bind="check"
           :data-id="check._id"
           @click="clickProperty({_id: check._id})"
@@ -52,11 +67,14 @@
           <v-list>
             <v-subheader>Hit Dice</v-subheader>
             <template v-for="(hitDie, index) in hitDice">
-							<v-divider v-if="index !== 0" :key="hitDice._id + 'divider'"/>
+              <v-divider
+                v-if="index !== 0"
+                :key="hitDie._id + 'divider'"
+              />
               <hit-dice-list-tile
+                :key="hitDie._id"
                 v-bind="hitDie"
                 :data-id="hitDie._id"
-								:key="hitDice._id"
                 @click="clickProperty({_id: hitDie._id})"
                 @change="e => incrementChange(hitDie._id, e)"
               />
@@ -65,14 +83,17 @@
         </v-card>
       </div>
 
-			<div class="saving-throws" v-show="true">
+      <div
+        v-show="true"
+        class="saving-throws"
+      >
         <v-card>
           <v-list>
             <v-subheader>Saving Throws</v-subheader>
             <skill-list-tile
               v-for="save in savingThrows"
-							v-bind="save"
               :key="save._id"
+              v-bind="save"
               :data-id="save._id"
               @click="clickProperty({_id: save._id})"
             />
@@ -86,8 +107,8 @@
             <v-subheader>Skills</v-subheader>
             <skill-list-tile
               v-for="skill in skills"
-							v-bind="skill"
               :key="skill._id"
+              v-bind="skill"
               :data-id="skill._id"
               @click="clickProperty({_id: skill._id})"
             />
@@ -108,14 +129,17 @@
         />
       </div>
 
-			<div class="spell-slots" v-if="spellSlots.length">
+      <div
+        v-if="spellSlots.length"
+        class="spell-slots"
+      >
         <v-card>
           <v-list>
             <v-subheader>Spell Slots</v-subheader>
             <spell-slot-list-tile
               v-for="spellSlot in spellSlots"
-							v-bind="spellSlot"
               :key="spellSlot._id"
+              v-bind="spellSlot"
               :data-id="spellSlot._id"
               @click="clickProperty({_id: spellSlot._id})"
               @change="e => incrementChange(spellSlot._id, e)"
@@ -123,6 +147,24 @@
           </v-list>
         </v-card>
       </div>
+
+      <div
+        v-if="actions.length"
+        class="actions"
+      >
+        <v-card>
+          <v-list>
+            <v-subheader>Actions</v-subheader>
+            <action-list-tile
+              v-for="action in actions"
+              :key="action._id"
+              :model="action"
+              :data-id="action._id"
+              @click="clickProperty({_id: action._id})"
+            />
+          </v-list>
+        </v-card>
+      </div>
     </column-layout>
   </div>
 </template>
@@ -137,8 +179,7 @@
 	import SkillListTile from '/imports/ui/properties/components/skills/SkillListTile.vue';
 	import ResourceCard from '/imports/ui/properties/components/attributes/ResourceCard.vue';
 	import SpellSlotListTile from '/imports/ui/properties/components/attributes/SpellSlotListTile.vue';
-
+  import ActionListTile from '/imports/ui/properties/components/actions/ActionListTile.vue';
-	let adjustAttribute = insertAttribute = () => console.error("this shit isn't defined");
 
 	const getAttributeOfType = function(charId, type){
 		return CreatureProperties.find({
@@ -164,9 +205,6 @@
 	};
 
 	export default {
-		props: {
-			creatureId: String,
-		},
 		components: {
 			AbilityListTile,
 			AttributeCard,
@@ -176,6 +214,13 @@
 			SkillListTile,
 			ResourceCard,
 			SpellSlotListTile,
+      ActionListTile,
+		},
+		props: {
+			creatureId: {
+        type: String,
+        required: true,
+      },
 		},
 		meteor: {
 			abilities(){
@@ -247,6 +292,14 @@
 					sort: {order: 1},
 				});
 			},
+      actions(){
+				return CreatureProperties.find({
+					'ancestors.id': this.creatureId,
+					type: 'action',
+				}, {
+					sort: {order: 1},
+				});
+			},
 		},
 		methods: {
 			clickProperty({_id}){

app/imports/ui/properties/components/actions/ActionListTile.vue

@@ -0,0 +1,34 @@
+<template lang="html">
+  <v-list-tile
+    class="ability-list-tile"
+    v-on="hasClickListener ? {click} : {}"
+  >
+    <v-list-tile-content>
+      {{ model.name }}
+    </v-list-tile-content>
+  </v-list-tile>
+</template>
+
+<script>
+export default {
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    }
+  },
+  computed: {
+		hasClickListener(){
+      return this.$listeners && this.$listeners.click
+		},
+	},
+  methods: {
+    click(e){
+			this.$emit('click', e);
+		},
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/properties/components/attributes/AbilityListTile.vue

@@ -1,6 +1,8 @@
 <template lang="html">
-	<v-list-tile class="ability-list-tile" v-on="hasClickListener ? {click} : {}">
+  <v-list-tile
-
+    class="ability-list-tile"
+    v-on="hasClickListener ? {click} : {}"
+  >
     <v-list-tile-action class="mr-4">
       <div class="display-1 mod">
         {{ numberToSignedString(mod) }}
@@ -15,7 +17,6 @@
         {{ name }}
       </v-list-tile-title>
     </v-list-tile-content>
-
   </v-list-tile>
 </template>
 
@@ -27,16 +28,16 @@ export default {
 		mod: Number,
 		name: String,
 	},
+	computed: {
+		hasClickListener(){
+      return this.$listeners && this.$listeners.click
+		},
+	},
 	methods: {
 		numberToSignedString,
 		click(e){
 			this.$emit('click', e);
 		},
-	},
-	computed: {
-		hasClickListener(){
-    	return this.$listeners && this.$listeners.click
-		},
 	}
 }
 </script>

app/imports/ui/properties/forms/SpellForm.vue

@@ -100,9 +100,9 @@
       :debounce-time="debounceTime"
       @change="(value, ack) => $emit('change', {path: ['description'], value, ack})"
     />
+    <form-sections>
       <form-section
         name="Advanced"
-      standalone
       >
         <v-combobox
           label="Spell lists"
@@ -115,15 +115,27 @@
           @change="(value) => $emit('change', {path: ['spellLists'], value})"
         />
       </form-section>
+      <form-section
+        name="Casting"
+      >
+        <action-form
+          v-bind="$props"
+          v-on="$listeners"
+        />
+      </form-section>
+    </form-sections>
   </div>
 </template>
 
 <script>
-	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+	import FormSection, { FormSections } from '/imports/ui/properties/forms/shared/FormSection.vue';
+  import ActionForm from '/imports/ui/properties/forms/ActionForm.vue'
 
 	export default {
 		components: {
+      FormSections,
 			FormSection,
+      ActionForm,
 		},
 		props: {
 			model: {

app/package.json

@@ -68,7 +68,7 @@
       }
     ],
     "parserOptions": {
-      "ecmaVersion": 6
+      "ecmaVersion": 2018
     },
     "env": {
       "es6": true,