feat(character): colored item borders for quality (#20)

src/armory/controllers/CharacterController.ts

@@ -31,6 +31,7 @@ interface IEquipmentData {
 	randomPropertyId: number;
 	classId: number;
 	subclassId: number;
+	quality: number;
 }
 
 interface ICustomizationOption {
@@ -331,7 +332,7 @@ export class CharacterController {
 	}
 
 	private async getEquipmentData(realm: string, charGuid: number): Promise<IEquipmentData[]> {
-		const [rows, fields] = await this.armory.getCharactersDb(realm).query({
+		let [rows, fields] = await this.armory.getCharactersDb(realm).query({
 			sql: `
 				SELECT character_inventory.slot, item_instance.itemEntry, item_instance.flags, item_instance.enchantments, item_instance.randomPropertyId
 				FROM character_inventory
@@ -350,6 +351,16 @@ export class CharacterController {
 			row.subclassId = item.subclassId;
 		}
 
+		[rows, fields] = await this.armory.worldDb.query({
+			sql: "SELECT entry, quality FROM item_template WHERE entry IN (?)",
+			values: [data.map((row) => row.itemEntry)],
+			timeout: this.armory.config.dbQueryTimeout,
+		});
+		for (const row of rows as RowDataPacket[]) {
+			const item = data.find((item) => item.itemEntry === row.entry);
+			item.quality = row.quality;
+		}
+
 		return data;
 	}
 

static/character.hbs

@@ -134,10 +134,11 @@
 		characterModel.items.push(...items);
 	}
 
-	function createItemSlot(item, invSlot, icon, rel, container) {
+	function createItemSlot(item, invSlot, icon, quality, rel, container) {
 		const $item = $itemSlotTemplate.clone();
 		$item
 			.data("icon", icon)
+			.data("quality", quality)
 			.find(".inventory-slot")
 			.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
 		if (item !== undefined) {
@@ -168,7 +169,7 @@
 					rel.push("rand=" + item.randomPropertyId);
 				}
 			}
-			createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), rel.join("&"), side.element);
+			createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), item?.quality, rel.join("&"), side.element);
 		}
 	}
 	const nbItemRows = Math.max($("#equipment-col-left").children().length, $("#equipment-col-right").children().length);
@@ -186,9 +187,13 @@
 				const $item = $(el);
 				const item = $item.data("item");
 				const icon = $item.data("icon");
+				const quality = $item.data("quality");
 				if (item !== undefined) {
 					$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
 				}
+				if (quality !== undefined) {
+					$item.find(".border").css("background-image", `url("{{websiteRoot}}/img/icon-border/${iconSize}/q${quality}.png")`);
+				}
 			});
 
 		if (!init) {

static/partials/icons.hbs

@@ -1,7 +1,7 @@
 <link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/icons.css">
 <style>
 	.iconlarge .border {
-		background-image: url("{{aowow}}/static/images/Icon/large/border/default.png");
+		background-image: url("{{websiteRoot}}/img/icon-border/large/default.png");
 	}
 
 	.iconlarge a {
@@ -9,7 +9,7 @@
 	}
 
 	.iconmedium .border {
-		background-image: url("{{aowow}}/static/images/Icon/medium/border/default.png");
+		background-image: url("{{websiteRoot}}/img/icon-border/medium/default.png");
 	}
 
 	.iconmedium a {