azerothcore-armory/static/character.hbs

<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character.css">
{{> icons }}

<script type="application/javascript" src="{{websiteRoot}}/js/viewer.min.js"></script>
<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>

{{> character-header }}

<div id="model-container">
	<div id="equipment-col-left"></div>
	<div id="model"></div>
	<div id="equipment-col-right"></div>
</div>
<div id="equipment-bottom"></div>

<span data-icon-size="large" class="icon-size is-hidden-mobile"></span>
<span data-icon-size="medium" class="icon-size is-hidden-tablet"></span>

<br>
<div id="char-options" class="columns">
	<div class="column is-one-quarter">
		<label class="checkbox">
			<input id="cb-hide-helmet" type="checkbox">
			Hide helmet
		</label>
		<br>

		<label class="checkbox">
			<input id="cb-hide-cloak" type="checkbox">
			Hide cloak
		</label>
		<br>

		<label class="checkbox">
			<input id="cb-hide-tabard" type="checkbox">
			Hide tabard
		</label>
	</div>

	<div id="mounts-container" class="column">
		<button id="btn-mounts" class="button is-primary">Mounts</button>

		<div id="mount-template" class="iconmedium">
			<div class="icon"></div>
			<div class="border"></div>
			<a target="_blank"></a>
		</div>
		<div id="mounts" class="box" style="display: none;"></div>
	</div>
</div>

<div id="item-slot-template" class="item-slot">
	<div class="inventory-slot"></div>
	<div class="icon"></div>
	<div class="border"></div>
	<a target="_blank"></a>
</div>

<script type="application/javascript">
	const $model = $("#model");
	const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
	const $mountTemplate = $("#mount-template").detach().removeAttr("id");

	window.WH = {
		//debug: console.log,
		debug: () => { },
	};

	const charData = {{{ JSONstringify data }}};
	const races = {
		1: "human",
		2: "orc",
		3: "dwarf",
		4: "nightelf",
		5: "scourge",
		6: "tauren",
		7: "gnome",
		8: "troll",
		10: "bloodelf",
		11: "draenei",
	};
	const genders = ["male", "female"];

	const hideHelm = (charData.flags & 0x0400) === 0x0400;
	$("#cb-hide-helmet").prop("checked", hideHelm);
	const hideCloak = (charData.flags & 0x0800) === 0x0800;
	$("#cb-hide-cloak").prop("checked", hideCloak);

	$("#cb-hide-helmet").change(() => {
		const hide = $("#cb-hide-helmet").prop("checked");
		setSlotVisible(1, !hide);
	});
	$("#cb-hide-cloak").change(() => {
		const hide = $("#cb-hide-cloak").prop("checked");
		setSlotVisible(16, !hide);
	});
	$("#cb-hide-tabard").change(() => {
		const hide = $("#cb-hide-tabard").prop("checked");
		setSlotVisible(19, !hide);
	});

	let viewer;
	function createViewer() {
		viewer?.destroy();
		viewer = new ZamModelViewer(characterModel);
	}

	function setSlotVisible(slot, visible) {
		if (visible) {
			const item = charData.characterModelItems.find(([sl, appearance]) => sl === slot);
			if (item !== undefined) {
				setItems([item]);
			}
		} else {
			clearSlots([slot]);
		}
	}

	function clearSlots(slots) {
		viewer.method("clearSlots", slots.join(","));
		characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
	}

	function setItems(items) {
		const data = items.map(([slot, display]) => {
			return {
				slot,
				display,
			};
		});
		viewer.method("setItems", [data]);

		characterModel.items = characterModel.items.filter(item => !items.some(item2 => item[0] === item2[0]));
		characterModel.items.push(...items);
	}

	function createItemSlot(item, invSlot, icon, rel, container) {
		const $item = $itemSlotTemplate.clone();
		$item
			.data("icon", icon)
			.find(".inventory-slot")
			.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
		if (item !== undefined) {
			$item.data("item", item);
			$item.find("a").attr("href", `{{aowow}}/?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(":"));
				}
				if (item.randomPropertyId !== 0) {
					rel.push("rand=" + item.randomPropertyId);
				}
			}
			createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), rel.join("&"), side.element);
		}
	}
	const nbItemRows = Math.max($("#equipment-col-left").children().length, $("#equipment-col-right").children().length);

	function onResize(init = false) {
		const iconSize = $(".icon-size:visible").data("icon-size");
		const iconSizePx = iconSize === "medium" ? 44 : 68;

		$("#model-container").css("height", (iconSizePx * nbItemRows) + "px");

		$(".item-slot")
			.removeClass("iconmedium iconlarge")
			.addClass(`icon${iconSize}`)
			.each((idx, el) => {
				const $item = $(el);
				const item = $item.data("item");
				const icon = $item.data("icon");
				if (item !== undefined) {
					$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
				}
			});

		if (!init) {
			characterModel.aspect = $model.outerWidth() / $model.outerHeight();
			createViewer();
		}
	}
	onResize(true);

	function setMount(mountId) {
		if (characterModel.mount.id === mountId) {
			return;
		}

		if (mountId !== 0) {
			const mainHand = charData.equipment.find(e => e.slot === 15);
			const offHand = charData.equipment.find(e => e.slot === 16);
			const ranged = charData.equipment.find(e => e.slot === 17);

			characterModel.charCustomization.sheathMain = sheathTypes[mainHand.classId][mainHand.subclassId];
			if (offHand !== undefined) {
				characterModel.charCustomization.sheathOff = sheathTypes[offHand.classId][offHand.subclassId];
			} else if (ranged !== undefined) {
				characterModel.charCustomization.sheathOff = sheathTypes[ranged.classId][ranged.subclassId];
			} else {
				characterModel.charCustomization.sheathOff = -1;
			}

			if (characterModel.charCustomization.sheathMain === undefined) {
				characterModel.charCustomization.sheathMain = 0;
			}
			if (characterModel.charCustomization.sheathOff === undefined) {
				characterModel.charCustomization.sheathOff = 0;
			}
		} else {
			characterModel.charCustomization.sheathMain = -1;
			characterModel.charCustomization.sheathOff = -1;
		}

		characterModel.mount.id = mountId;
		createViewer();
	}

	if (charData.mounts.length === 0) {
		$("#mounts-container").hide();
	} else {
		const $dismount = $mountTemplate.clone();
		$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
		$dismount.find("a")
			.on("click", () => {
				setMount(0);
				return false;
			});
		$("#mounts").append($dismount);

		for (const mount of charData.mounts) {
			const $mount = $mountTemplate.clone();
			$mount.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${mount.icon}.jpg")`);
			$mount.find("a")
				.attr("href", `{{aowow}}/?spell=${mount.spell}`)
				.on("click", () => {
					setMount(mount.creatureDisplayId);
					return false;
				});
			$("#mounts").append($mount);
		}
	}
	$("#btn-mounts").on("click", () => {
		$("#mounts").slideToggle("fast");
	});

	const sheathTypes = {
		2: {
			// One handed weapons
			0: 3,
			4: 3,
			7: 3,
			14: 3,
			15: 3,
			17: 3,
			20: 3,

			// Two handed weapons
			1: 1,
			5: 1,
			8: 1,

			// Others
			10: 2, // Staff
			6: 1, // Polearm
			2: 4, // Bow
			3: 4, // Gun
			18: 4, // Crossbow
			13: 0, // Fist weapons
			19: 3, // Wand
			20: 1, // Fishing pole
		},
		4: {
			0: 3, // Held in off-hand
			6: 9, // Shield
		},
	};

	const characterModel = {
		type: ZamModelViewer.WOW,
		contentPath: "{{websiteRoot}}/data/",
		background: "background.png",
		container: $model,
		hd: true,
		aspect: $model.outerWidth() / $model.outerHeight(),
		charCustomization: {
			race: charData.race,
			gender: charData.gender,
			options: charData.customizationOptions,
			sheathMain: -1,
			sheathOff: -1,
		},
		cls: charData.class,
		items: charData.characterModelItems.filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))),
		models: {
			type: ZamModelViewer.Wow.Types.CHARACTER,
			id: `${races[charData.race]}${genders[charData.gender]}`,
		},
		mount: {
			type: ZamModelViewer.Wow.Types.NPC,
			id: 0,
		},
	};
	createViewer();

	function debounce(func, timeout) {
		let timer;
		return (...args) => {
			clearTimeout(timer);
			timer = setTimeout(() => { func.apply(this, args); }, timeout);
		};
	}

	let windowWidth = $(window).width();
	$(window).resize(debounce(() => {
		const newWidth = $(window).width();
		if (windowWidth === newWidth) {
			// Do nothing if only the height changed.
			// This prevents triggering a resize when the navigation bar moves on mobile when scrolling.
			return;
		}
		windowWidth = newWidth;
		onResize();
	}, 500));
</script>