mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-04 13:09:41 +00:00
876552b922
* add hourglass to header * multiple quest fixes - show quest info in popover/modal * pin backgrounds * unpin gem-purchable items / change pinType of quest to quests * check if hatching potion is allowed on egg - wide hatching info * fix (perf): items - request text()/notes() only once * change items margin to 23px * list cards + open modal to choose a target + add space between market items * buy card from task-list * fix tests - unpin items on purchasing eggs / hatchingPotions
88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template lang="pug">
|
|
div.row
|
|
span.col-4(v-if="quest.collect") {{ $t('collect') }}
|
|
span.col-8(v-if="quest.collect")
|
|
div(v-for="(collect, key) of quest.collect")
|
|
span {{ collect.count }} {{ collect.text }}
|
|
|
|
span.col-4 {{ $t('difficulty') }}
|
|
span.col-8
|
|
span.svg-icon.inline.icon-16(v-for="star of stars()", v-html="icons[star]")
|
|
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
.col-4{
|
|
text-align: left;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
height: 16px;
|
|
width: 80px;
|
|
}
|
|
|
|
.col-8 {
|
|
text-align: right;
|
|
}
|
|
|
|
.col-8:not(:last-child) {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
span.svg-icon.inline.icon-16 {
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import svgStar from 'assets/svg/difficulty-star.svg';
|
|
import svgStarHalf from 'assets/svg/difficulty-star-half.svg';
|
|
import svgStarEmpty from 'assets/svg/difficulty-star-empty.svg';
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
star: svgStar,
|
|
starHalf: svgStarHalf,
|
|
starEmpty: svgStarEmpty,
|
|
}),
|
|
};
|
|
},
|
|
computed: {
|
|
difficulty () {
|
|
if (this.quest.boss) {
|
|
return this.quest.boss.str;
|
|
}
|
|
|
|
return 1;
|
|
},
|
|
},
|
|
methods: {
|
|
stars () {
|
|
let result = [];
|
|
let difficulty = this.difficulty;
|
|
|
|
for (let i = 1; i <= 4; i++) {
|
|
let diff = difficulty - i;
|
|
|
|
if (diff >= 0) {
|
|
result.push('star');
|
|
} else if (diff <= -1) {
|
|
result.push('starEmpty');
|
|
} else {
|
|
result.push('starHalf');
|
|
}
|
|
}
|
|
|
|
return result;
|
|
},
|
|
},
|
|
props: {
|
|
quest: {
|
|
type: Object,
|
|
},
|
|
},
|
|
};
|
|
</script>
|