feat: add checkboxes to hide helmet/cloak/tabard

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "azerothcore-armory",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",

src/armory/controllers/CharacterController.ts

@@ -108,7 +108,11 @@ export class CharacterController {
 	}
 
 	private getModelViewerItems(equipmentData: IEquipmentData[]): number[][] {
-		const visibleEquipment = equipmentData.filter(item => [0, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15, 16, 17, 18].includes(item.slot));
+		const visibleEquipment = equipmentData.
+			filter(item =>
+				[0, 2, 3, 4, 5, 6, 7, 8, 9, 14, 15, 16, 17, 18].includes(item.slot) && // visible slots
+				item.itemEntry !== 5976 // filter out Guild Tabard (displays blank otherwise)
+			);
 
 		const items: number[][] = [];
 		for (const equipment of visibleEquipment) {

static/character.html

@@ -1,5 +1,17 @@
 <div id="model" style="max-width: 608px; max-height: 800px;"></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>
+
 <script type="application/javascript" src="/js/viewer.min.js"></script>
 <script type="application/javascript">
 	window.WH = {
@@ -22,7 +34,7 @@
 	};
 	const genders = ["male", "female"];
 
-	const charactermodel = {
+	const characterModel = {
 		type: ZamModelViewer.WOW,
 		contentPath: "/data/",
 		background: "background.png",
@@ -48,5 +60,43 @@
 			id: 0,
 		},
 	};
-	const viewer = new ZamModelViewer(charactermodel);
+	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]);
+	}
 </script>

static/css/armory.css

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