Requires ${name}`); + } + + return locks; + } + + // todo (med): information will get lost if one vendor sells one item multiple times with different costs (e.g. for item 54637) + // wowhead seems to have had the same issues + private async getExtendedCost(entry: number, flagsExtra: number, buyPrice: number): Promise
| ${dmg} | Speed ${speed.toFixed(2)} |
|---|
${dmg}`; + } + + // secondary damage is set + /* istanbul ignore next */ + if ((dmgmin2 || dmgmax2) && dmgmin2 !== dmgmax2) { + damageText += ITEM_CONSTANTS.damage.range[sc2 ? 3 : 2] + .replace('%d', String(dmgmin2)) + .replace('%d', String(dmgmax2)) + .replace('%s', sc2 ? ITEM_CONSTANTS.sc[sc2] : ''); + } else if (dmgmin2) { + damageText += ITEM_CONSTANTS.damage.single[sc2 ? 3 : 2] + .replace('%d', String(dmgmin2)) + .replace('%s', sc2 ? ITEM_CONSTANTS.sc[sc2] : ''); + } + + if (itemClass === ITEM_TYPE.WEAPON) { + damageText += `
${ITEM_CONSTANTS.dps.replace('%.1f', dps.toFixed(2))}`; + } + + // display FeralAttackPower if set + const fap = this.getFeralAP(itemClass, subclass, dps); + if (fap) { + damageText += `
(${fap} ${ITEM_CONSTANTS.fap})`; + } + } + + return damageText; + } + + private getStats(itemTemplate: ItemTemplate, greenText: string[]): string { + let stats = ''; + + const requiredLevel = Number(itemTemplate.RequiredLevel); + + for (let i = 1; i <= 10; i++) { + const type = Number(itemTemplate['stat_type' + i]); + const qty = Number(itemTemplate['stat_value' + i]); + + if (!qty || !type || type <= 0) { + continue; + } + // base stat + switch (type) { + case ITEM_MOD.MANA: + case ITEM_MOD.HEALTH: + // type += 1; // offsets may be required somewhere + case ITEM_MOD.AGILITY: + case ITEM_MOD.STRENGTH: + case ITEM_MOD.INTELLECT: + case ITEM_MOD.SPIRIT: + case ITEM_MOD.STAMINA: + stats += `
${(qty > 0 ? '+' : '-') + Math.abs(qty)} ${ITEM_CONSTANTS.statType[type]}`; + break; + default: // rating with % for reqLevel + greenText.push(this.parseRating(type, qty, requiredLevel)); + } + } + + return stats; + } + + private async getItemSet(entry: number, itemset: number): Promise
' + ITEM_CONSTANTS.setName + .replace('%s', `${itemsetAttr['name'] ?? ''}`) + .replace('%d', '0') + .replace('%d', itemsName.length.toString()) + + ''; + + // if require skill + if (!!itemsetAttr['skillId']) { + itemsetText += `
Requires ${await this.sqliteQueryService.getSkillNameById(itemsetAttr['skillId'])}`; + + if (!!itemsetAttr['skillLevel']) { + itemsetText += ` (${itemsetAttr['skillLevel']})`; + } + } + + // list pieces + itemsetText += `
${itemsName.join('
')}
`;
+
+ // get bonuses
+ const setSpellsAndIdx = [];
+
+ for (let j = 1; j <= 8; j++) {
+ const spell = itemsetAttr['spell' + j];
+
+ if (!!spell) {
+ setSpellsAndIdx[spell] = j;
+ }
+ }
+
+ const setSpells = [];
+ if (setSpellsAndIdx && setSpellsAndIdx.length > 0) {
+ const spellsIDs = Object.keys(setSpellsAndIdx);
+ for (const s of spellsIDs) {
+ setSpells.push({
+ tooltip: await this.sqliteQueryService.getSpellDescriptionById(s),
+ entry: itemsetAttr['spell' + setSpellsAndIdx[s]],
+ bonus: itemsetAttr['bonus' + setSpellsAndIdx[s]],
+ });
+ }
+ }
+
+ // sort and list bonuses
+ let tmpBonus = '';
+ for (let i = 0; i < setSpells.length; i++) {
+ for (let j = i; j < setSpells.length; j++) {
+ if (setSpells[j]['bonus'] >= setSpells[i]['bonus']) {
+ continue;
+ }
+
+ const tmp = setSpells[i];
+ setSpells[i] = setSpells[j];
+ setSpells[j] = tmp;
+ }
+
+ const bonusText = setSpells[i]['bonus'] && setSpells[i]['tooltip']
+ ? ITEM_CONSTANTS.setBonus
+ .replace('%d', setSpells[i]['bonus'])
+ .replace('%s', setSpells[i]['tooltip'])
+ : '';
+
+ if (!!bonusText) {
+ tmpBonus += `')}
${bonusText}`; + } + } + + if (tmpBonus !== '') { + itemsetText += `${tmpBonus}`; + } + + return itemsetText; + } + + private async getBonding(itemTemplate: ItemTemplate): Promise
' + this.ITEM_CONSTANTS.bonding[0]; + } else if (bonding) { + bondingText += '
' + this.ITEM_CONSTANTS.bonding[bonding]; + } + + // unique || unique-equipped || unique-limited + if (maxcount === 1) { + bondingText += '
' + this.ITEM_CONSTANTS['unique'][0]; + } else if (!!maxcount && bagFamily !== 8192) { // not for currency tokens + bondingText += '
' + this.ITEM_CONSTANTS['unique'][1].replace('%d', maxcount.toString()); + } else if (flags & ITEM_FLAG.UNIQUEEQUIPPED) { + bondingText += '
' + this.ITEM_CONSTANTS['uniqueEquipped'][0]; + } else if (!!itemLimitCategory) { + let limit: any = await this.getItemLimitCategoryById(itemLimitCategory); + + if (limit && limit.length > 0) { + limit = limit[0]; + + const index = limit && limit.isGem ? 'uniqueEquipped' : 'unique'; + bondingText += `
${ + ITEM_CONSTANTS[index][2].replace('%s', limit.name).replace('%d', limit.count) + }`; + } + } + + return bondingText; + } + + private getClassText(inventoryType: number, itemClass: number, subclass: number): string { + let classText = ''; + + let textRight = ''; + if ([ITEM_TYPE.ARMOR, ITEM_TYPE.WEAPON, ITEM_TYPE.AMMUNITION].includes(itemClass)) { + let classTmpText = '
| ${ITEM_CONSTANTS.inventoryType[inventoryType]} | `; + textRight = ' style="text-align: right;"'; + } + + // Subclass + /* istanbul ignore else */ + if (itemClass === ITEM_TYPE.ARMOR && subclass > 0) { + classTmpText += `
${ITEM_CONSTANTS.inventoryType[subclass]}`; + } + + return classText; + } + + private getArmorText(itemTemplate: ItemTemplate): string { + let armorText = ''; + + // Armor + const armorDamageModifier = itemTemplate.ArmorDamageModifier; + const armor = itemTemplate.armor; + const itemClass: number = Number(itemTemplate.class); + if (itemClass === ITEM_TYPE.ARMOR && armorDamageModifier > 0 && !!armor) { + armorText += `
${ITEM_CONSTANTS.armor.replace('%s', String(armor))}`; + } else if (armor) { + armorText += `
${ITEM_CONSTANTS.armor.replace('%s', String(armor))}`; + } + + // Block (note: block value from field block and from field stats or parsed from itemSpells are displayed independently) + const block = itemTemplate.block; + if (block) { + armorText += `
${ITEM_CONSTANTS.block.replace('%s', String(block))}`; + } + + return armorText; + } + + private async getRequiredText(itemTemplate: ItemTemplate): Promise
Classes: ${classes.join(', ')}`; + } + + // required races + const races = this.getRaceString(itemTemplate.AllowableRace); + if (races) { + requiredText += `
Races: ${races.join(', ')}`; + } + + // required honorRank (not used anymore) + if (!!itemTemplate.requiredhonorrank) { + requiredText += `
Requires ${ITEM_CONSTANTS.pvpRank[itemTemplate.requiredhonorrank]}`; + } + + // required CityRank -> the value is always 0 + + // required level + if ((itemTemplate.Flags & ITEM_FLAG.ACCOUNTBOUND) && itemTemplate.Quality === ITEMS_QUALITY.HEIRLOOM) { + + requiredText += '
' + ITEM_CONSTANTS.reqLevelRange + .replace('%d', '1') + .replace('%d', MAX_LEVEL.toString()) + .replace('%s', MAX_LEVEL.toString()); + + } else if (itemTemplate.RequiredLevel > 1) { + requiredText += '
' + ITEM_CONSTANTS.reqMinLevel.replace('%d', String(itemTemplate.RequiredLevel)); + } + + // required arena team rating / personal rating / todo (low): sort out what kind of rating + const [res, reqRating] = await this.getExtendedCost(itemTemplate.entry, itemTemplate.FlagsExtra, itemTemplate.BuyPrice); + + if (!!res && !!reqRating && res[itemTemplate.entry] && Object.keys(res[itemTemplate.entry]).length > 0 && reqRating.length > 0) { + requiredText += '
' + ITEM_CONSTANTS.reqRating[reqRating[1]].replace('%d', reqRating[0]); + } + + // item level + const itemClass = Number(itemTemplate.class); + const itemLevel = itemTemplate.ItemLevel; + if (itemLevel > 0 && [ITEM_TYPE.ARMOR, ITEM_TYPE.WEAPON].includes(itemClass)) { + requiredText += `
${ITEM_CONSTANTS.itemLevel.replace('%d', String(itemLevel))}`; + } + + // required skill + const requiredSkill = itemTemplate.RequiredSkill; + const requiredSkillRank = itemTemplate.RequiredSkillRank; + if (!!requiredSkill && requiredSkill > 0) { + let reqSkill = await this.sqliteQueryService.getSkillNameById(requiredSkill); + if (requiredSkillRank > 0) { + reqSkill += ` (${requiredSkillRank})`; + } + + requiredText += `
Requires: ${reqSkill}`; + } + + // required spell + const requiredSpell = itemTemplate.requiredspell; + if (!!requiredSpell && requiredSpell > 0) { + requiredText += `
Requires ${await this.sqliteQueryService.getSpellNameById(requiredSpell)}`; + } + + // required reputation w/ faction + const requiredFaction = itemTemplate.RequiredReputationFaction; + const requiredFactionRank = itemTemplate.RequiredReputationRank; + if (!!requiredFaction && requiredFaction > 0) { + let reqFaction = await this.sqliteQueryService.getFactionNameById(requiredFaction); + if (requiredFactionRank > 0) { + reqFaction += ` (${requiredFactionRank})`; + } + requiredText += `
Requires ${reqFaction}`; + } + + return requiredText; + } + + private async getRequiredZone(map: number, area: number): Promise
${mapName}` : ''; + } + + // require area + if (!!area) { + const areaName = await this.sqliteQueryService.getAreaNameById(area); + requiredZone += areaName && areaName !== '' ? `
${areaName}` : ''; + } + + return requiredZone; + } + + private getDuration(duration: number, flagsCustom: number): string { + let durationText = ''; + + // max duration + if (duration) { + let rt = ''; + if (flagsCustom & 0x1) { // if CU_DURATION_REAL_TIME + rt = ' (real time)'; + } + durationText += `
Duration: ${this.formatTime(duration * 1000)}${rt}`; + } + + return durationText; + } + + private getMagicResistances(itemTemplate: ItemTemplate): string { + let magicRsistances = ''; + + // magic resistances + resistanceFields.forEach((rowName, idx) => { + const resField = itemTemplate[rowName + '_res']; + if (rowName != null && resField != null && resField !== 0) { + magicRsistances += `
+${resField} ${ITEM_CONSTANTS.resistances[idx]}`; + } + }); + + return magicRsistances; + } + + private getMisc(itemTemplate: ItemTemplate): string { + const xMisc = []; + + const spellId1 = itemTemplate.spellid_1; + const spellId2 = itemTemplate.spellid_2; + const description = itemTemplate.description; + + // yellow text at the bottom, omit if we have a recipe + if (!!description && !this.canTeachSpell(spellId1, spellId2)) { + xMisc.push(`
"${description}"`); + } + + // readable + const PageText = itemTemplate.PageText; + if (PageText > 0) { + xMisc.push(`
${ITEM_CONSTANTS.readClick}`); + } + + // charges (I guess, checking first spell is enough) + const spellCharges1 = itemTemplate.spellcharges_1; + if (!!spellCharges1) { + + let charges = ITEM_CONSTANTS.charges.replace('%d', Math.abs(spellCharges1).toString()); + if (Math.abs(spellCharges1) === 1) { + charges = charges.replace('Charges', 'Charge'); + } + + /* istanbul ignore else */ + if (!!charges && charges !== '') { + xMisc.push(`
${charges}`); + } + } + + return xMisc.length > 0 ? xMisc.join('') : ''; + } + + private async getGemEnchantment(entry: number): Promise
${gemEnch['name']}`; + } + + // activation conditions for meta gems + if (!!gemEnch['conditionId']) { + + let gemCnd = await this.getItemEnchantmentConditionById(gemEnch['conditionId']); + if (!gemCnd || (gemCnd && gemCnd.length === 0)) { return ''; } + + gemCnd = gemCnd[0]; + + if (!!gemCnd) { + + for (let i = 1; i < 6; i++) { + const gemCndColor = Number(gemCnd[`color${i}`]); + + if (!gemCndColor) { + continue; + } + + const gemCndCmpColor = Number(gemCnd[`cmpColor${i}`]); + const gemCndComparator = Number(gemCnd[`comparator${i}`]); + const gemCndValue = Number(gemCnd[`value${i}`]); + + let vspfArgs: any = ['', '']; + + switch (gemCndComparator) { + case 2: // requires less
Requires ${gemEnchText}`; + } + } + } + } + + return gemEnchantmentText; + } + + private async getSocketEnchantment(itemTemplate: ItemTemplate): Promise
${ITEM_CONSTANTS.socket[colorId]}`; + } + + const socketBonus = itemTemplate.socketBonus; + if (!!socketBonus) { + const sbonus = await this.sqliteQueryService.getSocketBonusById(socketBonus); + const socketBonusText = `${ITEM_CONSTANTS.socketBonus.replace('%s', sbonus)}`; + socketText += `
${socketBonusText}`; + } + + return socketText; + } + + private async getSpellDesc(itemTemplate: ItemTemplate, green: string[]) { + const spellId1 = itemTemplate.spellid_1; + const spellId2 = itemTemplate.spellid_2; + + if (!this.canTeachSpell(spellId1, spellId2)) { + const itemSpellsAndTrigger = []; + for (let j = 1; j <= 5; j++) { + const spellid = itemTemplate['spellid_' + j]; + + if (spellid > 0) { + let cooldown = itemTemplate['spellcooldown_' + j]; + const cooldownCategory = itemTemplate['spellcategory_' + j]; + + if (cooldown < cooldownCategory) { + cooldown = cooldownCategory; + } + + cooldown = cooldown < 5000 ? '' : ` ( ${this.formatTime(Number(cooldown))} cooldown)`; + + itemSpellsAndTrigger[spellid] = [itemTemplate['spelltrigger_' + j], cooldown]; + } + } + + if (itemSpellsAndTrigger && itemSpellsAndTrigger.length > 0) { + const spellIDs = Object.keys(itemSpellsAndTrigger); + for (const spellID of spellIDs) { + const spellTrigger = itemSpellsAndTrigger[spellID]; + const parsed = await this.sqliteQueryService.getSpellDescriptionById(spellID); // TODO: parseText correctly + + /* istanbul ignore next */ + if (spellTrigger[0] || parsed || spellTrigger[1]) { + /* istanbul ignore next */ + green.push(ITEM_CONSTANTS.trigger[spellTrigger[0]] ?? '' + parsed ?? '' + ' ' + ITEM_CONSTANTS.trigger[spellTrigger[1]] ?? ''); + } + } + + } + } + } + + // TODO: recipes, vanity pets, mounts + private async getLearnSpellText(itemTemplate: ItemTemplate): Promise
${ITEM_CONSTANTS.trigger[0]} ${desc}`; + } + + // TODO: spell description for recipe + // // recipe handling (some stray Techniques have subclass == 0), place at bottom of tooltipp + // if (itemClass === ITEM_CLASS_RECIPE || bagFamily === 16) { + // let craftItem = craftSpell->curTpl['effect1CreateItemId']; + + // if (!!craftItem) { + + // const reagentItems = {}; + + // for (let i = 1; i <= 8; i++) { + // if (rId = craftSpell->getField('reagent' + i)) { + // reagentItems[rId] = craftSpell->getField('reagentCount' + i); + // } + // } + + // if (!!xCraft && !!reagentItems) { + // let reagents = Object.keys(reagentItems); + // let reqReag = []; + + // for (const _ of reagents) { + // reqReag.push(`${reagents->getField('name', true)} (${reagentItems[reagents->id]})`); + // } + + // xCraft += '
Requires: ' + reqReag.join(', ') + '
Locked${lockData.join('')}`; + } else if (flags & ITEM_FLAG.OPENABLE) { + lockText += `
${ITEM_CONSTANTS.openClick}`; + } + } + + return lockText; + } + + public async calculatePreview(itemTemplate: ItemTemplate): Promise
Heroic'; + } + + tmpItemPreview += await this.getRequiredZone(Number(itemTemplate.Map), Number(itemTemplate.area)); + + // conjured + if (flags & ITEM_FLAG.CONJURED) { + tmpItemPreview += '
Conjured Item'; + } + + tmpItemPreview += await this.getBonding(itemTemplate); + tmpItemPreview += this.getDuration(itemTemplate.duration, itemTemplate.flagsCustom); + + // required holiday + const holiday = itemTemplate.HolidayId; + if (!!holiday) { + const eventName = await this.sqliteQueryService.getEventNameByHolidayId(holiday); + tmpItemPreview += `
Requires ${eventName}`; + } + + // item begins a quest + const startquest: number = Number(itemTemplate.startquest); + if (!!startquest && startquest > 0) { + tmpItemPreview += `
This Item Begins a Quest`; + } + + // containerType (slotCount) + const containerSlots: number = Number(itemTemplate.ContainerSlots); + if (containerSlots > 0) { + const fam = bagFamily ? Math.log2(bagFamily) + 1 : 0; + tmpItemPreview += `
${containerSlots} Slot ${ITEM_CONSTANTS.bagFamily[fam]}`; + } + + tmpItemPreview += this.getClassText(itemTemplate.InventoryType, itemTemplate.class, itemTemplate.subclass); + tmpItemPreview += this.getDamageText(itemTemplate); + tmpItemPreview += this.getArmorText(itemTemplate); + + // Item is a gem (don't mix with sockets) + tmpItemPreview += await this.getGemEnchantment(itemTemplate.entry); + + // Random Enchantment - if random enchantment is set, prepend stats from it + const RandomProperty: number = itemTemplate.RandomProperty; + const RandomSuffix: number = itemTemplate.RandomSuffix; + if (!!RandomProperty || !!RandomSuffix) { + tmpItemPreview += `
${ITEM_CONSTANTS.randEnchant}`; + } + + // itemMods (display stats and save ratings for later use) + tmpItemPreview += this.getStats(itemTemplate, green); + + tmpItemPreview += this.getMagicResistances(itemTemplate); + + // Socket & Enchantment (TODO) + tmpItemPreview += await this.getSocketEnchantment(itemTemplate); + + // durability + const durability = itemTemplate.MaxDurability; + if (durability) { + tmpItemPreview += `
${ITEM_CONSTANTS.durability.replace(/%d/g, durability.toString())}`; + } + + tmpItemPreview += await this.getRequiredText(itemTemplate); + + const lockid = itemTemplate.lockid; + tmpItemPreview += await this.getLockText(flags, lockid); + + // spells on item + await this.getSpellDesc(itemTemplate, green); + + if (!!green && green.length > 0) { + for (const bonus of green) { + if (!!bonus) { + tmpItemPreview += `
${bonus}`; + } + } + } + + tmpItemPreview += await this.getItemSet(itemTemplate.entry, itemTemplate.itemset); + + // recipes, vanity pets, mounts + tmpItemPreview += await this.getLearnSpellText(itemTemplate); + + tmpItemPreview += this.getMisc(itemTemplate); + + const sellPrice = itemTemplate.SellPrice; + if (!!sellPrice && sellPrice > 0) { + tmpItemPreview += '
Sell Price: ' + this.formatMoney(sellPrice); + } + + return tmpItemPreview; + } + +} diff --git a/src/app/features/item/item-template/item-preview.ts b/src/app/features/item/item-template/item-preview.ts new file mode 100644 index 00000000000..bdf0d1a73c0 --- /dev/null +++ b/src/app/features/item/item-template/item-preview.ts @@ -0,0 +1,104 @@ +import { ITEM_MOD } from '@keira-shared/constants/options/item-class'; +import { TableRow } from '@keira-shared/types/general'; + +export class Lock extends TableRow { + id: number; + type1: number; + type2: number; + type3: number; + type4: number; + type5: number; + properties1: number; + properties2: number; + properties3: number; + properties4: number; + properties5: number; + reqSkill1: number; + reqSkill2: number; + reqSkill3: number; + reqSkill4: number; + reqSkill5: number; +} + +export const MAX_LEVEL = 80; + +export const lvlIndepRating = [ // rating doesn't scale with level + ITEM_MOD.MANA, + ITEM_MOD.HEALTH, + ITEM_MOD.ATTACK_POWER, + ITEM_MOD.MANA_REGENERATION, + ITEM_MOD.SPELL_POWER, + ITEM_MOD.HEALTH_REGEN, + ITEM_MOD.SPELL_PENETRATION, + ITEM_MOD.BLOCK_VALUE, +]; + +export const gtCombatRatings = { + 12: 1.5, + 13: 13.8, + 14: 13.8, + 15: 5, + 16: 10, + 17: 10, + 18: 8, + 19: 14, + 20: 14, + 21: 14, + 22: 10, + 23: 10, + 24: 8, + 25: 0, + 26: 0, + 27: 0, + 28: 10, + 29: 10, + 30: 10, + 31: 10, + 32: 14, + 33: 0, + 34: 0, + 35: 28.75, + 36: 10, + 37: 2.5, + 44: 4.26, +}; + +export const resistanceFields = [ + // null, + 'holy', + 'fire', + 'nature', + 'frost', + 'shadow', + 'arcane', +]; + +export enum CLASSES { + WARRIOR = 0x001, + PALADIN = 0x002, + HUNTER = 0x004, + ROGUE = 0x008, + PRIEST = 0x010, + DEATHKNIGHT = 0x020, + SHAMAN = 0x040, + MAGE = 0x080, + WARLOCK = 0x100, + DRUID = 0x400, + MASK_ALL = 0x5FF, +} + +export enum RACE { + HUMAN = 0x001, + ORC = 0x002, + DWARF = 0x004, + NIGHTELF = 0x008, + UNDEAD = 0x010, + TAUREN = 0x020, + GNOME = 0x040, + TROLL = 0x080, + BLOODELF = 0x200, + DRAENEI = 0x400, + MASK_ALLIANCE = 0x44D, + MASK_HORDE = 0x2B2, + MASK_ALL = 0x6FF, +} diff --git a/src/app/features/item/item-template/item-template.component.html b/src/app/features/item/item-template/item-template.component.html index 90a38916eec..de810065793 100644 --- a/src/app/features/item/item-template/item-template.component.html +++ b/src/app/features/item/item-template/item-template.component.html @@ -1,11 +1,12 @@
+
Loading...
+
@@ -75,9 +76,9 @@= 0
+ && editorService.form.controls.class.value < ITEM_SUBCLASS.length"
[control]="editorService.form.controls.subclass"
[config]="{ options: ITEM_SUBCLASS[editorService.form.controls.class.value], name: 'subclass' }"
[modalClass]="'modal-md'"
@@ -89,7 +90,7 @@
@@ -75,9 +76,9 @@
-
+
-
+
-
+
- Requirements
-
+ Requirements
+
- Resistance
-
+ Resistance
+
@@ -420,7 +421,7 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- Stats
-
+ Stats
+
@@ -614,9 +615,9 @@
-
- Socket
-
+
+ Socket
+
@@ -668,8 +669,8 @@
- Weapon
-
+ Weapon
+
@@ -696,7 +697,7 @@
-
+
- Spell
-
+ Spell
+
diff --git a/src/app/features/item/item-template/item-template.component.scss b/src/app/features/item/item-template/item-template.component.scss
index e69de29bb2d..0b3f0293267 100644
--- a/src/app/features/item/item-template/item-template.component.scss
+++ b/src/app/features/item/item-template/item-template.component.scss
@@ -0,0 +1,51 @@
+.item-preview {
+ text-align: center;
+ margin: auto;
+
+ .icon {
+ width: 100px;
+ height: 100px;
+ position: relative;
+ margin: auto;
+ margin-top: 5px;
+ border: 1px solid #6b6d78;
+
+ img {
+ width: 90px;
+ height: 90px;
+ margin-top: 3px;
+ }
+ }
+
+ .item-stats, .icon {
+ border-radius: 3px;
+ }
+
+ .item-stats {
+ text-align: left;
+ font-family: Verdana, "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 15px;
+
+ line-height: 25px;
+ width: auto;
+ min-width: 200px;
+ padding: 12px;
+
+ color: #ccc;
+ }
+
+ .stackable {
+ position: absolute;
+ margin-left: -33px;
+ bottom: -5px;
+ font-weight: 700;
+ font-size: 30px;
+ white-space: nowrap;
+ text-shadow: 2px 2px #000;
+ }
+
+ .stackable-100 {
+ margin-left: -48px;
+ }
+
+}
diff --git a/src/app/features/item/item-template/item-template.component.ts b/src/app/features/item/item-template/item-template.component.ts
index 8d636cd3c47..d11fe626d9e 100644
--- a/src/app/features/item/item-template/item-template.component.ts
+++ b/src/app/features/item/item-template/item-template.component.ts
@@ -1,34 +1,38 @@
-import { Component } from '@angular/core';
-
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { SingleRowEditorComponent } from '@keira-abstract/components/editors/single-row-editor.component';
-import { ItemTemplate } from '@keira-types/item-template.type';
-import { ItemTemplateService } from './item-template.service';
-import { ItemHandlerService } from '../item-handler.service';
-import { ITEM_CLASS, ITEM_SUBCLASS } from '@keira-constants/options/item-class';
-import { ITEM_QUALITY } from '@keira-constants/options/item-quality';
-import { ITEM_FLAGS } from '@keira-constants/flags/item-flags';
-import { ITEM_FLAGS_EXTRA } from '@keira-constants/flags/item-flags-extra';
-import { INVENTORY_TYPE } from '@keira-constants/options/inventory-type';
import { ALLOWABLE_CLASSES } from '@keira-constants/flags/allowable-classes';
import { ALLOWABLE_RACES } from '@keira-constants/flags/allowable-races';
-import { FACTION_RANK } from '@keira-constants/options/faction-rank';
import { BAG_FAMILY } from '@keira-constants/flags/bag-family';
+import { ITEM_FLAGS } from '@keira-constants/flags/item-flags';
+import { ITEM_FLAGS_CUSTOM } from '@keira-constants/flags/item-flags-custom';
+import { ITEM_FLAGS_EXTRA } from '@keira-constants/flags/item-flags-extra';
import { SOCKET_COLOR } from '@keira-constants/flags/socket-color';
+import { DAMAGE_TYPE } from '@keira-constants/options/damage-type';
+import { FACTION_RANK } from '@keira-constants/options/faction-rank';
+import { FOOD_TYPE } from '@keira-constants/options/foot-type';
+import { INVENTORY_TYPE } from '@keira-constants/options/inventory-type';
import { ITEM_BONDING } from '@keira-constants/options/item-bonding';
+import { ITEM_CLASS, ITEM_SUBCLASS } from '@keira-constants/options/item-class';
import { ITEM_MATERIAL } from '@keira-constants/options/item-material';
+import { ITEM_QUALITY } from '@keira-constants/options/item-quality';
import { ITEM_SHEAT } from '@keira-constants/options/item-sheath';
-import { TOTEM_CATEGORY } from '@keira-constants/options/totem-category';
-import { FOOD_TYPE } from '@keira-constants/options/foot-type';
-import { ITEM_FLAGS_CUSTOM } from '@keira-constants/flags/item-flags-custom';
-import { DAMAGE_TYPE } from '@keira-constants/options/damage-type';
import { STAT_TYPE } from '@keira-constants/options/stat-type';
+import { TOTEM_CATEGORY } from '@keira-constants/options/totem-category';
+import { SqliteQueryService } from '@keira-shared/services/sqlite-query.service';
+import { ItemTemplate } from '@keira-types/item-template.type';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { ItemHandlerService } from '../item-handler.service';
+import { ItemPreviewService } from './item-preview.service';
+import { ItemTemplateService } from './item-template.service';
@Component({
selector: 'keira-item-template',
templateUrl: './item-template.component.html',
styleUrls: ['./item-template.component.scss']
})
-export class ItemTemplateComponent extends SingleRowEditorComponent {
+export class ItemTemplateComponent extends SingleRowEditorComponent implements OnInit {
public readonly ITEM_CLASS = ITEM_CLASS;
public readonly ITEM_SUBCLASS = ITEM_SUBCLASS;
@@ -50,11 +54,49 @@ export class ItemTemplateComponent extends SingleRowEditorComponent;
+ public itemPreview: SafeHtml = this.sanitizer.bypassSecurityTrustHtml('loading...');
+
+ private async loadItemPreview() {
+ this.itemPreview = this.sanitizer.bypassSecurityTrustHtml(
+ await this.itemPreviewService.calculatePreview(this.editorService.form.getRawValue())
+ );
+ }
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.loadItemPreview();
+ this.icon = this.sqliteQueryService.getIconByItemDisplayId(this.editorService.form.controls.displayid.value);
+
+ this.subscriptions.push(
+ this.editorService.form.controls.displayid.valueChanges.subscribe((icon: number) => {
+ this.icon = this.sqliteQueryService.getIconByItemDisplayId(icon);
+ })
+ );
+
+ this.subscriptions.push(
+ this.editorService.form.valueChanges.pipe(
+ debounceTime(600),
+ /* TODO */
+ distinctUntilChanged(
+ /* istanbul ignore next */
+ (a, b) => JSON.stringify(a) === JSON.stringify(b)
+ ),
+ ).subscribe(this.loadItemPreview.bind(this))
+ );
+ }
+
}
diff --git a/src/app/features/item/item-template/item-template.module.ts b/src/app/features/item/item-template/item-template.module.ts
index c5507b050b6..e51c4f1c540 100644
--- a/src/app/features/item/item-template/item-template.module.ts
+++ b/src/app/features/item/item-template/item-template.module.ts
@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { TooltipModule } from 'ngx-bootstrap';
import { ToastrModule } from 'ngx-toastr';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { toastrConfig } from '@keira-config/toastr.config';
import { TopBarModule } from '@keira-shared/modules/top-bar/top-bar.module';
@@ -12,6 +13,7 @@ import { SingleValueSelectorModule } from '@keira-shared/modules/selectors/singl
import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selector/flags-selector.module';
import { ItemTemplateService } from './item-template.service';
import { SpellSelectorModule } from '@keira-shared/modules/selectors/spell-selector/spell-selector.module';
+import { ItemPreviewService } from './item-preview.service';
import { FactionSelectorModule } from '@keira-shared/modules/selectors/faction-selector/faction-selector.module';
import { MapSelectorModule } from '@keira-shared/modules/selectors/map-selector/map-selector.module';
import { AreaSelectorModule } from '@keira-shared/modules/selectors/area-selector/area-selector.module';
@@ -21,6 +23,7 @@ import { LanguageSelectorModule } from '@keira-shared/modules/selectors/language
import { ItemLimitCategorySelectorModule } from '@keira-shared/modules/selectors/item-limit-category-selector/item-limit-category-selector.module';
import { QuestSelectorModule } from '@keira-shared/modules/selectors/quest-selector/quest-selector.module';
+
@NgModule({
declarations: [
ItemTemplateComponent,
@@ -32,6 +35,7 @@ import { QuestSelectorModule } from '@keira-shared/modules/selectors/quest-selec
QueryOutputModule,
TooltipModule.forRoot(),
ToastrModule.forRoot(toastrConfig),
+ PerfectScrollbarModule,
SingleValueSelectorModule,
FlagsSelectorModule,
SpellSelectorModule,
@@ -49,6 +53,7 @@ import { QuestSelectorModule } from '@keira-shared/modules/selectors/quest-selec
],
providers: [
ItemTemplateService,
+ ItemPreviewService,
],
})
export class ItemTemplateModule {}
diff --git a/src/app/main/main-window/sidebar/sidebar.component.html b/src/app/main/main-window/sidebar/sidebar.component.html
index 1ff4a0468f6..be1f1df569e 100644
--- a/src/app/main/main-window/sidebar/sidebar.component.html
+++ b/src/app/main/main-window/sidebar/sidebar.component.html
@@ -1,11 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+ ![]()
+ {{ editorService.form.controls.stackable.value }}
+ {{ editorService.form.controls.stackable.value }}
+
+
+
+
+
+