azerothcore-armory/static/character.html

<link rel="stylesheet" href="/css/character.css">
<style>
	.iconlarge .border {
		background-image: url("{{aowow}}/static/images/Icon/large/border/default.png");
	}

	.iconlarge a {
		background: url("{{aowow}}/static/images/Icon/large/hilite/default.png") no-repeat 62px 0;
	}
</style>

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

{{> character-header }}

<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>
<br>

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

<input id="cb-hide-tabard" type="checkbox">
<label for="cb-hide-tabard">Hide tabard</label>
<br>

<div id="item-slot-template" class="iconlarge">
	<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,
		debug: () => { },
	};

	const charData = JSON.parse(`{{{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 characterModel = {
		type: ZamModelViewer.WOW,
		contentPath: "/data/",
		background: "background.png",
		container: $("#model"),
		hd: true,
		aspect: 0.76,
		charCustomization: {
			race: charData.race,
			gender: charData.gender,
			options: charData.customizationOptions,
			sheathMain: -1,
			sheathOff: -1,
		},
		cls: charData.class,
		items: charData.characterModelItems,
		models: {
			type: ZamModelViewer.Wow.Types.CHARACTER,
			id: `${races[charData.race]}${genders[charData.gender]}`,
		},
		mount: {
			type: ZamModelViewer.Wow.Types.NPC,
			//id: 25280,
			id: 0,
		},
	};
	const viewer = new ZamModelViewer(characterModel);

	$("#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);
	});

	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(","));
	}

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

	function createItemSlot(item, invSlot, icon, rel, container) {
		const $template = $("#item-slot-template");
		const $item = $template.clone(false);
		$item.removeAttr("id");
		$item.find(".inventory-slot").css("background-image", `url("/img/inventory-slot/${invSlot}.png")`);
		if (item !== undefined) {
			$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/large/${icon}.jpg")`);
			$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(":"));
				}
			}
			createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), rel.join("&"), side.element);
		}
	}
</script>