From 5931532f9bd2a28df60a416b2d1fda3bc1da616f Mon Sep 17 00:00:00 2001
From: Haowei Wen <yushijinhun@gmail.com>
Date: Sat, 12 Sep 2020 17:32:50 +0800
Subject: [PATCH] examples: use static layers_table

so its contents are preserved after refresh
---
 examples/index.html | 88 +++++++++++++++++++--------------------------
 1 file changed, 37 insertions(+), 51 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 8256ceb..7a132f6 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -150,7 +150,37 @@
 		<div class="control-section">
 			<h1>Skin Layers</h1>
 			<table id="layers_table">
-				<!-- table contents are generated using javascript -->
+				<thead>
+					<tr>
+						<th></th>
+						<th>head</th>
+						<th>body</th>
+						<th>right arm</th>
+						<th>left arm</th>
+						<th>right leg</th>
+						<th>left leg</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th>inner</th>
+						<td><input type="checkbox" data-layer="innerLayer" data-part="head" checked></td>
+						<td><input type="checkbox" data-layer="innerLayer" data-part="body" checked></td>
+						<td><input type="checkbox" data-layer="innerLayer" data-part="rightArm" checked></td>
+						<td><input type="checkbox" data-layer="innerLayer" data-part="leftArm" checked></td>
+						<td><input type="checkbox" data-layer="innerLayer" data-part="rightLeg" checked></td>
+						<td><input type="checkbox" data-layer="innerLayer" data-part="leftLeg" checked></td>
+					</tr>
+					<tr>
+						<th>outer</th>
+						<td><input type="checkbox" data-layer="outerLayer" data-part="head" checked></td>
+						<td><input type="checkbox" data-layer="outerLayer" data-part="body" checked></td>
+						<td><input type="checkbox" data-layer="outerLayer" data-part="rightArm" checked></td>
+						<td><input type="checkbox" data-layer="outerLayer" data-part="leftArm" checked></td>
+						<td><input type="checkbox" data-layer="outerLayer" data-part="rightLeg" checked></td>
+						<td><input type="checkbox" data-layer="outerLayer" data-part="leftLeg" checked></td>
+					</tr>
+				</tbody>
 			</table>
 		</div>
 
@@ -219,18 +249,8 @@
 
 	<script src="../bundles/skinview3d.bundle.js"></script>
 	<script>
-		const skinParts = {
-			head: "head",
-			body: "body",
-			rightArm: "right arm",
-			leftArm: "left arm",
-			rightLeg: "right leg",
-			leftLeg: "left leg"
-		};
-		const skinLayers = {
-			innerLayer: "inner",
-			outerLayer: "outer"
-		};
+		const skinParts = ["head", "body", "rightArm", "leftArm", "rightLeg", "leftLeg"];
+		const skinLayers = ["innerLayer", "outerLayer"];
 		const availableAnimations = {
 			walk: skinview3d.WalkingAnimation,
 			run: skinview3d.RunningAnimation
@@ -273,39 +293,6 @@
 			}
 		}
 
-		function initializeLayersTable() {
-			const table = document.getElementById("layers_table");
-			const thead = document.createElement("thead");
-			table.appendChild(thead);
-			const rowHead = document.createElement("tr");
-			rowHead.appendChild(document.createElement("th"));
-			thead.appendChild(rowHead);
-			for (const [part, partName] of Object.entries(skinParts)) {
-				const cellHead = document.createElement("th");
-				cellHead.innerText = partName;
-				rowHead.appendChild(cellHead);
-			}
-			const tbody = document.createElement("tbody");
-			table.appendChild(tbody);
-			for (const [layer, layerName] of Object.entries(skinLayers)) {
-				const row = document.createElement("tr");
-				tbody.appendChild(row);
-				const cellLayer = document.createElement("th");
-				cellLayer.innerText = layerName;
-				row.appendChild(cellLayer);
-				for (const part of Object.keys(skinParts)) {
-					const cell = document.createElement("td");
-					row.appendChild(cell);
-					const checkbox = document.createElement("input");
-					checkbox.type = "checkbox";
-					checkbox.dataset.layer = layer;
-					checkbox.dataset.part = part;
-					checkbox.checked = true;
-					cell.appendChild(checkbox);
-				}
-			}
-		}
-
 		function initializeControls() {
 			document.getElementById("canvas_width").addEventListener("change", e => skinViewer.width = e.target.value);
 			document.getElementById("canvas_height").addEventListener("change", e => skinViewer.height = e.target.value);
@@ -345,8 +332,8 @@
 			document.getElementById("control_rotate").addEventListener("change", e => oribitControl.enableRotate = e.target.checked);
 			document.getElementById("control_zoom").addEventListener("change", e => oribitControl.enableZoom = e.target.checked);
 			document.getElementById("control_pan").addEventListener("change", e => oribitControl.enablePan = e.target.checked);
-			for (const part of Object.keys(skinParts)) {
-				for (const layer of Object.keys(skinLayers)) {
+			for (const part of skinParts) {
+				for (const layer of skinLayers) {
 					document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`)
 						.addEventListener("change", e => skinViewer.playerObject.skin[part][layer].visible = e.target.checked);
 				}
@@ -407,8 +394,8 @@
 			oribitControl.enableRotate = document.getElementById("control_rotate").checked;
 			oribitControl.enableZoom = document.getElementById("control_zoom").checked;
 			oribitControl.enablePan = document.getElementById("control_pan").checked;
-			for (const part of Object.keys(skinParts)) {
-				for (const layer of Object.keys(skinLayers)) {
+			for (const part of skinParts) {
+				for (const layer of skinLayers) {
 					skinViewer.playerObject.skin[part][layer].visible =
 						document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`).checked;
 				}
@@ -417,7 +404,6 @@
 			reloadCape();
 		}
 
-		initializeLayersTable();
 		initializeControls();
 		initializeViewer();
 	</script>