New client spell fixes (#8974)

* Prevented spells menu from apearing below lvl 11

* Expanding clickable casting area

* Persisted spell drawer close

* Added edit form modal to party

* Added spell toggle

* Added markdown notification

* Prevented casting on challenge and group tasks locally

* Quick fix for self cast

* Fixed lint issue

website/client/app.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#app
+#app(:class='{"casting-spell": castingSpell}')
   notifications
   router-view(v-if="!isUserLoggedIn || isStaticPage")
   template(v-else)
@@ -15,6 +15,12 @@
         app-footer
 </template>
 
+<style scoped>
+  .casting-spell {
+    cursor: crosshair;
+  }
+</style>
+
 <script>
 import axios from 'axios';
 import AppMenu from './components/appMenu';
@@ -42,6 +48,9 @@ export default {
     isStaticPage () {
       return this.$route.meta.requiresLogin === false ? true : false;
     },
+    castingSpell () {
+      return this.$store.state.spellOptions.castingSpell;
+    },
   },
   created () {
     // Set up Error interceptors

website/client/components/avatar.vue

@@ -190,7 +190,7 @@ export default {
       return result;
     },
     castEnd (e) {
-      if (!this.$store.state.castingSpell) return;
+      if (!this.$store.state.spellOptions.castingSpell) return;
       this.$root.$emit('castEnd', this.member, 'user', e);
     },
   },

website/client/components/groups/group.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 .row(v-if="group")
+  group-form-modal(v-if='isParty')
   invite-modal(:group='this.group')
   start-quest-modal(:group='this.group')
   .col-8.standard-page

website/client/components/tasks/spells.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div
+div(v-if='user.stats.lvl > 10')
   div.dragInfo.mouse(ref="clickPotionInfo", v-if="potionClickMode")
     .spell.col-12.row
       .col-8.details
@@ -10,7 +10,9 @@ div
 
   drawer(:title="$t('spells')",
     v-if='user.stats.class && !user.preferences.disableClasses',
-    v-mousePosition="30", @mouseMoved="mouseMoved($event)")
+    v-mousePosition="30", @mouseMoved="mouseMoved($event)",
+    :openStatus='openStatus',
+    v-on:toggled='drawerToggled')
     div(slot="drawer-slider")
       .container.spell-container
         .row
@@ -181,8 +183,14 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    openStatus () {
+      return this.$store.state.spellOptions.spellDrawOpen ? 1 : 0;
+    },
   },
   methods: {
+    drawerToggled (openChanged) {
+      this.$store.state.spellOptions.spellDrawOpen = openChanged;
+    },
     spellDisabled (skill) {
       if (skill === 'frost' && this.user.stats.buffs.streaks) {
         return true;
@@ -211,6 +219,11 @@ export default {
       return notes;
     },
     async castStart (spell) {
+      if (this.$store.state.spellOptions.castingSpell) {
+        this.castCancel();
+        return;
+      }
+
       if (this.user.stats.mp < spell.mana) return this.text(this.$t('notEnoughMana'));
 
       if (spell.immediateUse && this.user.stats.gp < spell.value) {
@@ -219,9 +232,8 @@ export default {
 
       this.potionClickMode = true;
       this.applyingAction = true;
-      this.$store.state.castingSpell = true;
+      this.$store.state.spellOptions.castingSpell = true;
       this.spell = spell;
-      document.querySelector('body').style.cursor = 'crosshair';
 
       if (spell.target === 'self') {
         this.castEnd(null, 'self');
@@ -236,6 +248,7 @@ export default {
         let party = await this.$store.dispatch('guilds:getGroup', {groupId: 'party'});
         party = isArray(party) ? party : [];
         party = party.concat(this.user);
+        this.$store.state.party.data = party;
         this.castEnd(party, 'party');
       } else if (spell.target === 'tasks') {
         let tasks = this.$store.state.tasks.habits.concat(this.user.dailys)
@@ -250,16 +263,17 @@ export default {
       }
     },
     async castEnd (target, type) {
-      if (!this.$store.state.castingSpell) return;
+      if (!this.$store.state.spellOptions.castingSpell) return;
       let beforeQuestProgress = this.questProgress();
 
       if (!this.applyingAction) return 'No applying action';
 
       if (this.spell.target !== type) return this.text(this.$t('invalidTarget'));
+      if (target && target.challenge && target.challenge.id) return this.text(this.$t('invalidTarget'));
+      if (target && target.group && target.group.id) return this.text(this.$t('invalidTarget'));
 
       // @TODO: just call castCancel?
-      document.querySelector('body').style.cursor = 'initial';
+      this.$store.state.spellOptions.castingSpell = false;
-      this.$store.state.castingSpell = false;
       this.potionClickMode = false;
 
       // @TODO: We no longer wrap the users (or at least we should not), but some common code
@@ -327,7 +341,7 @@ export default {
       this.applyingAction = false;
       this.spell = null;
       document.querySelector('body').style.cursor = 'initial';
-      this.$store.state.castingSpell = false;
+      this.$store.state.spellOptions.castingSpell = false;
     },
     questProgress () {
       let user = this.user;

website/client/components/tasks/task.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.task
+.task(@click='castEnd($event, task)')
   approval-header(:task='task', v-if='this.task.group.id', :group='group')
   .d-flex(:class="{'task-not-scoreable': isUser !== true}")
     // Habits left side control
@@ -379,10 +379,11 @@ export default {
 
       if (target.tagName === 'A') { // Link
         return;
-      } else if (!this.$store.state.castingSpell) {
+      } else if (!this.$store.state.spellOptions.castingSpell) {
         this.$emit('editTask', task);
       }
-
+    },
+    castEnd (e, task) {
       this.$root.$emit('castEnd', task, 'task', e);
     },
     async score (direction) {

website/client/components/ui/drawer.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 .drawer-container
-  .drawer-title(@click="open = !open")
+  .drawer-title(@click="toggle()")
     | {{title}}
-    .drawer-toggle-icon.svg-icon.icon-10(v-html="open ? icons.minimize : icons.expand", :class="{ closed: !open }")
+    .drawer-toggle-icon.svg-icon.icon-10(v-html="isOpen ? icons.minimize : icons.expand", :class="{ closed: !isOpen }")
   transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
-    .drawer-content(v-show="open")
+    .drawer-content(v-show="isOpen")
       slot(name="drawer-header")
       .drawer-slider
         slot(name="drawer-slider")
@@ -13,9 +13,9 @@
 </template>
 
 <style lang="scss">
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.drawer-container {
+  .drawer-container {
     z-index: 19;
     position: fixed;
     font-size: 12px;
@@ -31,9 +31,9 @@
       left: calc((100% + 16.67% - 968px) / 2);
       right: 0%;
     }
-}
+  }
 
-.drawer-toggle-icon {
+  .drawer-toggle-icon {
     float: right;
     margin-right: 16px;
     margin-top: 16px;
@@ -41,9 +41,9 @@
     &.closed {
       margin-top: 3px;
     }
-}
+  }
 
-.drawer-title {
+  .drawer-title {
     background-color: $gray-10;
     box-shadow: 0 1px 2px 0 rgba($black, 0.2);
     cursor: pointer;
@@ -53,9 +53,9 @@
     line-height: 1.67;
     color: $white;
     padding: 6px 0;
-}
+  }
 
-.drawer-content {
+  .drawer-content {
     line-height: 1.33;
     max-height: 300px;
     background-color: $gray-50;
@@ -64,9 +64,9 @@
     padding-top: 6px;
     padding-left: 24px;
     padding-right: 24px;
-}
+  }
 
-.drawer-tab {
+  .drawer-tab {
     &-container {
       display: flex;
       margin-left: 24px;
@@ -89,9 +89,9 @@
         border-color: $purple-400;
       }
     }
-}
+  }
 
-.drawer-slider {
+  .drawer-slider {
     padding: 12px 0 0 8px;
     overflow-x: auto;
     overflow-y: hidden;
@@ -114,16 +114,16 @@
         padding: 12px;
       }
     }
-}
+  }
 
-.slide-up-enter-active, .slide-up-leave-active {
+  .slide-up-enter-active, .slide-up-leave-active {
     transition-property: all;
     transition-duration: 450ms;
     transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-}
+  }
-.slide-up-enter, .slide-up-leave-to {
+  .slide-up-enter, .slide-up-leave-to {
     max-height: 0;
-}
+  }
 </style>
 
 <script>
@@ -139,6 +139,9 @@ export default {
     errorMessage: {
       type: String,
     },
+    openStatus: {
+      type: Number,
+    },
   },
   data () {
     return {
@@ -149,6 +152,13 @@ export default {
       }),
     };
   },
+  computed: {
+    isOpen () {
+      // Open status is a number so we can tell if the value was passed
+      if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
+      return this.open;
+    },
+  },
   methods: {
     adjustPagePadding () {
       let minPaddingBottom = 20;
@@ -156,6 +166,10 @@ export default {
       let standardPage = document.getElementsByClassName('standard-page')[0];
       standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
     },
+    toggle () {
+      this.open = !this.open;
+      this.$emit('toggled', this.open);
+    },
   },
   mounted () {
     // Make sure the page has enough space so the drawer does not overlap content

website/client/mixins/notifications.js

@@ -1,3 +1,5 @@
+import habiticaMarkdown from 'habitica-markdown';
+
 export default {
   methods: {
     /**
@@ -74,9 +76,8 @@ export default {
     },
     markdown (val) {
       if (!val) return;
-      // @TODO: Implement markdown library
+      let parsedMarkdown = habiticaMarkdown.render(val);
-      // let parsed_markdown = $filter("markdown")(val);
+      this.notify(parsedMarkdown, 'info');
-      // this.notify(parsed_markdown, 'info');
     },
     mp (val) {
       this.notify(`${this.sign(val)} ${this.round(val)} ${this.$t('mana')}`, 'mp', 'glyphicon glyphicon-fire');

website/client/store/index.js

@@ -76,7 +76,10 @@ export default function () {
       hideHeader: false,
       viewingMembers: [],
       openedItemRows: [],
+      spellOptions: {
         castingSpell: false,
+        spellDrawOpen: true,
+      },
     },
   });