feat(character): add equipment tooltips

config.default.json

@@ -10,5 +10,12 @@
 				"database": "acore_characters"
 			}
 		}
-	]
+	],
+	"worldDatabase": {
+		"host": "localhost",
+		"port": 3306,
+		"user": "root",
+		"password": "root",
+		"database": "acore_world"
+	}
 }

src/armory/Armory.ts

@@ -14,6 +14,7 @@ export class Armory {
 	public characterCustomization: CharacterCustomization;
 	public dbcReader: DbcReader;
 	public config: Config;
+	public worldDb: Connection;
 
 	private charsDbs: { [key: string]: Connection };
 
@@ -27,14 +28,19 @@ export class Armory {
 		const app: Express = express();
 		const listenPort = 48733;
 
+		console.log("Loading config...");
 		this.config = await Config.load();
+		console.log("Loading data files...");
 		await this.dbcReader.loadAllFiles();
 		await this.characterCustomization.loadData();
 
+		console.log("Connecting to databases...");
+		this.worldDb = await createConnection(this.config.worldDatabase);
 		for (const realm of this.config.realms) {
 			this.charsDbs[realm.name.toLowerCase()] = await createConnection(realm.database);
 		}
 
+		console.log("Starting server...");
 		app.engine(".html", handlebarsEngine({
 			extname: "html",
 			partialsDir: path.join(process.cwd(), "static", "partials"),
@@ -47,6 +53,7 @@ export class Armory {
 
 		app.use("/js", express.static(`static/js`));
 		app.use("/css", express.static(`static/css`));
+		app.use("/img", express.static(`static/img`));
 		app.use("/data/mo3", express.static(`data/mo3`));
 		app.use("/data/meta", express.static(`data/meta`));
 		app.use("/data/bone", express.static(`data/bone`));
@@ -57,6 +64,7 @@ export class Armory {
 		app.get("/", indexController.index.bind(indexController));
 		
 		const charsController = new CharacterController(this);
+		await charsController.load();
 		app.get("/character/:realm/:name", charsController.character.bind(charsController));
 
 		app.listen(listenPort, "0.0.0.0", () => {

src/armory/Config.ts

@@ -16,6 +16,7 @@ export interface IRealmConfig {
 
 export class Config {
 	public realms: IRealmConfig[];
+	public worldDatabase: IDatabaseConfig;
 
 	private static checkedMissingField: boolean = false;
 

src/armory/controllers/CharacterController.ts

@@ -31,19 +31,56 @@ interface ICustomizationOption {
 	choiceId: number;
 }
 
+const ITEM_CLASS_GEM = 3;
+
 export class CharacterController {
 	private armory: Armory;
 	private itemInventoryTypes: { [key: number]: number };
+	private itemIcons: { [key: number]: number };
+	private gemItems: { [key: number]: boolean };
+	private enchantSrcItems: { [key: number]: number };
+	private itemSocketBonuses: { [key: number]: number };
 
 	public constructor(armory: Armory) {
 		this.armory = armory;
+	}
+
+	public async load(): Promise<void> {
 		this.itemInventoryTypes = {};
-		for (const item of armory.dbcReader.dbcItem) {
-			const retailItem = armory.dbcReader.dbcItemRetail.find(row => row.id === item.id);
+		for (const item of this.armory.dbcReader.dbcItem) {
+			const retailItem = this.armory.dbcReader.dbcItemRetail.find(row => row.id === item.id);
 			if (retailItem !== undefined) {
 				this.itemInventoryTypes[item.id] = retailItem.inventoryType;
 			}
 		}
+
+		this.itemIcons = {};
+		const itemIconsByDisplayInfoId: { [key: number]: number } = {};
+		for (const row of this.armory.dbcReader.dbcItemDisplayInfo) {
+			itemIconsByDisplayInfoId[row.id] = row.inventoryIcon0;
+		}
+		for (const item of this.armory.dbcReader.dbcItem) {
+			const icon = itemIconsByDisplayInfoId[item.displayInfoId];
+			if (icon !== undefined) {
+				this.itemIcons[item.id] = icon;
+			}
+		}
+
+		this.gemItems = {};
+		for (const row of this.armory.dbcReader.dbcItem.filter(item => item.classId === ITEM_CLASS_GEM)) {
+			this.gemItems[row.id] = true;
+		}
+
+		this.enchantSrcItems = {};
+		for (const row of this.armory.dbcReader.dbcSpellItemEnchantment) {
+			this.enchantSrcItems[row.id] = row.srcItemId;
+		}
+
+		this.itemSocketBonuses = {};
+		let [rows, fields] = await this.armory.worldDb.query("SELECT entry, socketBonus FROM item_template WHERE socketBonus <> 0");
+		for (const row of rows as RowDataPacket[]) {
+			this.itemSocketBonuses[row.entry] = row.socketBonus;
+		}
 	}
 
 	public async character(req: express.Request, res: express.Response): Promise<void> {
@@ -62,12 +99,14 @@ export class CharacterController {
 			res.sendStatus(404);
 			return;
 		}
-		let equipmentData = await this.getEquipmentData(realm, charData.guid);
-		if (charData.class !== 3) {
-			// Keep ranged weapon only if the character is a hunter
-			equipmentData = equipmentData.filter(row => row.slot !== 17);
-		}
+		const equipmentData = await this.getEquipmentData(realm, charData.guid);
 		const customization = await this.getCustomizationOptions(charData);
+		const equipment = equipmentData.map(row => {
+			(row as any).icon = this.itemIcons[row.itemEntry];
+			(row as any).gems = this.getGemsFromEnchantments(row.enchantments);
+			(row as any).enchantments = this.filterEnchantments(row.itemEntry, row.enchantments);
+			return row;
+		});
 
 		res.render("character.html", {
 			title: `Armory - ${charName}`,
@@ -78,8 +117,9 @@ export class CharacterController {
 				gender: charData.gender,
 				level: charData.level,
 				online: charData.online === 1,
-				characterModelItems: this.getModelViewerItems(equipmentData),
+				characterModelItems: this.getModelViewerItems(equipmentData, charData.class),
 				customizationOptions: customization,
+				equipment,
 			}),
 		});
 	}
@@ -107,7 +147,11 @@ export class CharacterController {
 		return rows as RowDataPacket[] as IEquipmentData[];
 	}
 
-	private getModelViewerItems(equipmentData: IEquipmentData[]): number[][] {
+	private getModelViewerItems(equipmentData: IEquipmentData[], charClass: number): number[][] {
+		if (charClass !== 3) {
+			// Keep ranged weapon only if the character is a hunter
+			equipmentData = equipmentData.filter(row => row.slot !== 17);
+		}
 		const visibleEquipment = equipmentData.
 			filter(item =>
 				[0, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15, 16, 17, 18].includes(item.slot) && // visible slots
@@ -131,6 +175,26 @@ export class CharacterController {
 		return items;
 	}
 
+	private parseEnchantmentsString(enchantments: string): number[] {
+		return enchantments
+			.trim()
+			.split(" ")
+			.map(enchant => parseInt(enchant))
+			.filter(enchant => enchant !== 0);
+	}
+
+	private getGemsFromEnchantments(enchantments: string): number[] {
+		return this.parseEnchantmentsString(enchantments)
+			.filter(enchant => enchant in this.enchantSrcItems && this.enchantSrcItems[enchant] in this.gemItems)
+			.map(enchant => this.enchantSrcItems[enchant]);
+	}
+
+	private filterEnchantments(item: number, enchantments: string): number[] {
+		const socketBonus = this.itemSocketBonuses[item];
+		return this.parseEnchantmentsString(enchantments)
+			.filter(enchant => enchant in this.enchantSrcItems && !(this.enchantSrcItems[enchant] in this.gemItems) && enchant !== socketBonus);
+	}
+
 	private async getCustomizationOptions(charData: ICharacterData): Promise<ICustomizationOption[]> {
 		const data = this.armory.characterCustomization.getCharacterCustomizationData(charData.race, charData.gender);
 		const options = [];

src/armory/data/DbcReader.ts

@@ -47,6 +47,11 @@ export interface IItemModifiedAppearanceDbc {
 	transmogSourceTypeEnum: number;
 }
 
+export interface IItemDisplayInfoDbc {
+	id: number;
+	inventoryIcon0: number;
+}
+
 export interface IMountDbc {
 	nameLang: string;
 	sourceTextLang: string;
@@ -75,14 +80,21 @@ export interface ISpellDbc {
 	mechanic: number;
 }
 
+export interface ISpellItemEnchantmentDbc {
+	id: number;
+	srcItemId: number;
+}
+
 export class DbcReader {
 	public dbcItem: IItemDbc[];
 	public dbcItemRetail: IItemRetailDbc[];
 	public dbcItemAppearance: IItemAppearanceDbc[];
 	public dbcItemModifiedAppearance: IItemModifiedAppearanceDbc[];
+	public dbcItemDisplayInfo: IItemDisplayInfoDbc[];
 	public dbcMount: IMountDbc[];
 	public dbcMountDisplay: IMountXDisplayDbc[];
 	public dbcSpell: ISpellDbc[];
+	public dbcSpellItemEnchantment: ISpellItemEnchantmentDbc[];
 
 	public readDbcFile<T>(file: string): Promise<T[]> {
 		return new Promise((res, rej) => {
@@ -108,8 +120,10 @@ export class DbcReader {
 		this.dbcItemRetail = await this.readDbcFile<IItemRetailDbc>(path.join(dir, "Item_9.2.0_41462.csv"));
 		this.dbcItemAppearance = await this.readDbcFile<IItemAppearanceDbc>(path.join(dir, "ItemAppearance_9.2.0_41462.csv"));
 		this.dbcItemModifiedAppearance = await this.readDbcFile<IItemModifiedAppearanceDbc>(path.join(dir, "ItemModifiedAppearance_9.2.0_41462.csv"));
+		this.dbcItemDisplayInfo = await this.readDbcFile<IItemDisplayInfoDbc>(path.join(dir, "ItemDisplayInfo_3.3.5_12340.csv"));
 		this.dbcMount = await this.readDbcFile<IMountDbc>(path.join(dir, "Mount_9.2.0_41462.csv"));
 		this.dbcMountDisplay = await this.readDbcFile<IMountXDisplayDbc>(path.join(dir, "MountXDisplay_9.2.0_41462.csv"));
 		this.dbcSpell = await this.readDbcFile<ISpellDbc>(path.join(dir, "Spell_3.3.5_12340.csv"));
+		this.dbcSpellItemEnchantment = await this.readDbcFile<ISpellItemEnchantmentDbc>(path.join(dir, "SpellItemEnchantment_3.3.5_12340.csv"));
 	}
 }

static/character.html

@@ -1,4 +1,18 @@
-<div id="model" style="max-width: 608px; max-height: 800px;"></div>
+<link rel="stylesheet" href="/css/character.css">
+
+<script type="application/javascript" src="/js/viewer.min.js"></script>
+<script type="application/javascript" src="https://wotlkdb.com/static/widgets/power.js"></script>
+
+<div style="display: flex; max-width: 580px; height: 580px;">
+	<div id="equipment-col-left" style="flex: 12%;"></div>
+	<div id="model" style="flex: 76%; height: 100%;"></div>
+	<div id="equipment-col-right" style="flex: 12%;"></div>
+</div>
+<div style="display: flex; max-width: 580px; height: 70px; text-align: center;">
+	<div style="flex: 12%;"></div>
+	<div id="equipment-bottom" style="flex: 76%; height: 100%;"></div>
+	<div style="flex: 12%;"></div>
+</div>
 
 <input id="cb-hide-helmet" type="checkbox">
 <label for="cb-hide-helmet">Hide helmet</label>
@@ -12,7 +26,13 @@
 <label for="cb-hide-tabard">Hide tabard</label>
 <br>
 
-<script type="application/javascript" src="/js/viewer.min.js"></script>
+<div id="item-slot-template">
+	<div class="inventory-slot"></div>
+	<div class="icon"></div>
+	<div class="border"></div>
+	<a target="_blank"></a>
+</div>
+
 <script type="application/javascript">
 	window.WH = {
 		//debug: console.log,
@@ -99,4 +119,40 @@
 		});
 		viewer.method("setItems", [data]);
 	}
+
+	function createItemSlot(item, invSlot, icon, rel, container) {
+		const $template = $("#item-slot-template");
+		const $item = $template.clone(false);
+		$item
+			.removeAttr("id")
+			.addClass("iconlarge");
+		$item.find(".inventory-slot").css("background-image", `url("/img/inventory-slot/${invSlot}.png")`);
+		if (item !== undefined) {
+			$item.find(".icon").css("background-image", `url("https://wotlkdb.com/static/images/wow/icons/large/${icon}.jpg")`);
+			$item.find("a").attr("href", `https://wotlkdb.com/?item=${item}`);
+			$item.find("a").attr("rel", rel);
+		}
+		$item.appendTo($(container));
+	}
+	const invSlotContainers = [
+		{ element: "#equipment-col-left", slots: [0, 1, 2, 14, 4, 3, 18, 8] },
+		{ element: "#equipment-col-right", slots: [9, 5, 6, 7, 10, 11, 12, 13] },
+		{ element: "#equipment-bottom", slots: [15, 16, 17] }
+	];
+	for (const side of invSlotContainers) {
+		for (const slot of side.slots) {
+			const item = charData.equipment.find(item => item.slot === slot);
+			const rel = [];
+			if (item !== undefined) {
+				rel.push("pcs=" + charData.equipment.map(item => item.itemEntry).join(":"));
+				if (item.gems.length !== 0) {
+					rel.push("gems=" + item.gems.join(":"));
+				}
+				if (item.enchantments.length !== 0) {
+					rel.push("ench=" + item.enchantments.join(":"));
+				}
+			}
+			createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), rel.join("&"), side.element);
+		}
+	}
 </script>

static/css/armory.css

@@ -2,7 +2,3 @@ html {
 	background-color: #202124;
 	color: white;
 }
-
-#model {
-	margin-bottom: 16px;
-}

static/css/character.css

@@ -0,0 +1,55 @@
+#item-slot-template {
+	display: none;
+}
+
+.iconlarge {
+	width: 68px;
+	height: 68px;
+	position: relative;
+	display: inline-block;
+}
+
+.iconlarge .inventory-slot {
+	width: 56px;
+	height: 56px;
+	left: 6px;
+	top: 6px;
+	position: absolute;
+	background-repeat: no-repeat;
+}
+
+.iconlarge .icon {
+	width: 56px;
+	height: 56px;
+	left: 6px;
+	top: 6px;
+	position: absolute;
+	background-repeat: no-repeat;
+}
+
+.iconlarge .border {
+	width: 68px;
+	height: 68px;
+	background-image: url("https://wotlkdb.com/static/images/Icon/large/border/default.png");
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-repeat: no-repeat;
+}
+
+.iconlarge a {
+	width: 62px;
+	height: 62px;
+	background: url("https://wotlkdb.com/static/images/Icon/large/hilite/default.png") no-repeat 62px 0;
+	position: absolute;
+	left: 3px;
+	top: 3px;
+}
+
+.iconlarge a:hover {
+	background-position: 0 0;
+}
+
+.wowhead-tooltip .whtt-sellprice {
+	display: none;
+}

static/layout.html

@@ -3,7 +3,7 @@
 
 <head>
 	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<title>{{title}}</title>
 
 	<link rel="stylesheet" href="/css/armory.css">