From f158852be57917a40111db1473881841b062d2fe Mon Sep 17 00:00:00 2001
From: Jason Mishi Carvalho <jml123carvalho@gmail.com>
Date: Sat, 27 Aug 2022 01:52:04 +0530
Subject: [PATCH] Grey out skill when insufficient mana fixes #13286 (#14100)

* disable spell if user doesn't have enough mana

* differenciate insufficient mana and disabled spell

* linting

* reduce opacity, no hover state when insufficient mana

* display that lvl insufficient in spell tooltip

* change spell text color when spell has no effect

change spell-text color to blue-500 when spell has no effect
---
 .../client/src/components/tasks/spells.vue    | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)
 mode change 100644 => 100755 website/client/src/components/tasks/spells.vue

diff --git a/website/client/src/components/tasks/spells.vue b/website/client/src/components/tasks/spells.vue
old mode 100644
new mode 100755
index 8e690aee94..bcdcfff581
--- a/website/client/src/components/tasks/spells.vue
+++ b/website/client/src/components/tasks/spells.vue
@@ -68,7 +68,8 @@
               </b-popover>
               <div
                 class="spell-border"
-                :class="{ disabled: spellDisabled(key) || user.stats.lvl < skill.lvl }"
+                :class="{ disabled: spellDisabled(key) || user.stats.lvl < skill.lvl,
+                 'insufficient-mana': user.stats.mp < skill.mana }"
               >
                 <div
                   class="spell"
@@ -87,19 +88,6 @@
                       <div>Level {{ skill.lvl }}</div>
                     </div>
                   </div>
-                  <div
-                    v-else-if="spellDisabled(key) === true"
-                    class="mana"
-                  >
-                    <div class="mana-text">
-                      <div
-                        v-once
-                        class="svg-icon"
-                        v-html="icons.mana"
-                      ></div>
-                      <div>{{ skill.mana }}</div>
-                    </div>
-                  </div>
                   <div
                     v-else
                     class="mana"
@@ -200,7 +188,7 @@
     border-radius: 4px;
     margin-bottom: 1rem;
 
-    &:hover:not(.disabled) {
+    &:hover:not(.disabled):not(.insufficient-mana) {
       background-color: $purple-400;
       cursor: pointer;
       box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16),
@@ -216,6 +204,10 @@
           background-color: rgba(26, 24, 29, 0.5);
         }
 
+        .mana-text {
+          color: $blue-500;
+        }
+
         .level {
           color: $white;
           font-weight: normal;
@@ -223,6 +215,10 @@
       }
     }
 
+    &.insufficient-mana:not(.disabled) {
+      opacity: 0.5;
+    }
+
     .spell {
       background: $white;
       border-radius: 4px;
@@ -481,7 +477,9 @@ export default {
     skillNotes (skill) {
       let notes = skill.notes();
 
-      if (skill.key === 'frost' && this.spellDisabled(skill.key)) {
+      if (this.user.stats.lvl < skill.lvl) {
+        notes = this.$t('spellLevelTooHigh', { level: skill.lvl });
+      } else if (skill.key === 'frost' && this.spellDisabled(skill.key)) {
         notes = this.$t('spellAlreadyCast');
       } else if (skill.key === 'stealth' && this.spellDisabled(skill.key)) {
         notes = this.$t('spellAlreadyCast');