sudoxreboot/habitica
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica.git synced 2026-04-14 19:56:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Grey out skill when insufficient mana fixes #13286 (#14100)

Browse source 
* 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
This commit is contained in:
Jason Mishi Carvalho 2022-08-27 01:52:04 +05:30 committed by GitHub
parent 6e19a0ef2e
commit f158852be5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
website/client/src/components/tasks/spells.vue Normal file → Executable file
View file

@ -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');