2023-12-27 20:34:56 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8"/>
|
|
|
|
|
<title>Inhabitor - The Habitat Inspector</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
|
|
|
|
margin:40px auto;
|
|
|
|
|
line-height:1.6;
|
|
|
|
|
font-size:18px;
|
|
|
|
|
color:#444;
|
|
|
|
|
padding:0 10px
|
|
|
|
|
}
|
|
|
|
|
h1,h2,h3 {
|
|
|
|
|
line-height:1.2
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1 id="filename"></h1>
|
2023-12-28 21:57:39 +00:00
|
|
|
<div id="actions">
|
|
|
|
|
<h2>Actions</h2>
|
|
|
|
|
</div>
|
2023-12-28 21:10:00 +00:00
|
|
|
<div id="limbs">
|
|
|
|
|
<h2>Limbs</h2>
|
|
|
|
|
</div>
|
2023-12-27 20:34:56 +00:00
|
|
|
<div id="cels">
|
|
|
|
|
<h2>Cels</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="data">
|
|
|
|
|
<h2>Data</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="errors"></div>
|
|
|
|
|
<a href="index.html">Back</a>
|
2024-01-03 07:50:44 +00:00
|
|
|
<script type="module">
|
|
|
|
|
import { decodeBody, choreographyActions } from "./codec.js"
|
|
|
|
|
import { docBuilder, decodeBinary, showAll, actionShower, limbAnimationShower, celShower, textNode } from "./show.js"
|
|
|
|
|
|
2023-12-27 20:34:56 +00:00
|
|
|
const propFilter = (key, value) => {
|
|
|
|
|
if (key != "bitmap" && key != "data" && key != "canvas") {
|
|
|
|
|
return value
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const dumpProp = (prop, container) => {
|
|
|
|
|
container.appendChild(textNode(JSON.stringify(prop, propFilter, 2), "pre"))
|
|
|
|
|
}
|
|
|
|
|
|
2023-12-28 21:10:00 +00:00
|
|
|
const limbNames = ["legs", "legs2", "left arm", "torso", "face", "right arm"]
|
|
|
|
|
const labelLimb = (container, ilimb) => {
|
|
|
|
|
container.appendChild(textNode(ilimb < limbNames.length ? limbNames[ilimb] : `Limb #${ilimb}??`, "div"))
|
|
|
|
|
}
|
2023-12-27 20:34:56 +00:00
|
|
|
const onload = async () => {
|
|
|
|
|
const q = new URLSearchParams(window.location.search)
|
|
|
|
|
const filename = q.get("f")
|
|
|
|
|
document.getElementById("filename").innerText = filename
|
2024-01-03 07:50:44 +00:00
|
|
|
const doc = docBuilder({ errorContainer: document.getElementById("errors") })
|
2023-12-27 20:34:56 +00:00
|
|
|
try {
|
2024-01-03 07:50:44 +00:00
|
|
|
const body = await decodeBinary(filename, decodeBody)
|
2023-12-27 20:34:56 +00:00
|
|
|
dumpProp(body, document.getElementById("data"))
|
|
|
|
|
if (body.error) {
|
2024-01-03 07:50:44 +00:00
|
|
|
doc.showError(body.error, filename)
|
2023-12-27 20:34:56 +00:00
|
|
|
} else {
|
|
|
|
|
const celContainer = document.getElementById("cels")
|
2023-12-28 21:10:00 +00:00
|
|
|
const limbContainer = document.getElementById("limbs")
|
|
|
|
|
for (const [ilimb, limb] of body.limbs.entries()) {
|
2024-01-03 07:50:44 +00:00
|
|
|
labelLimb(celContainer, ilimb)
|
|
|
|
|
showAll(doc, celContainer, filename, limb.cels, celShower())
|
2023-12-28 21:10:00 +00:00
|
|
|
|
|
|
|
|
labelLimb(limbContainer, ilimb)
|
2024-01-03 07:50:44 +00:00
|
|
|
showAll(doc, limbContainer, filename, limb.animations, limbAnimationShower(limb))
|
2023-12-27 20:34:56 +00:00
|
|
|
}
|
2023-12-28 21:57:39 +00:00
|
|
|
const actionContainer = document.getElementById("actions")
|
2024-01-03 07:50:44 +00:00
|
|
|
showAll(doc, actionContainer, filename, choreographyActions, (action) => {
|
2023-12-28 21:57:39 +00:00
|
|
|
if (action == "stand" || body.actions[action] != body.actions["stand"]) {
|
2024-01-03 07:50:44 +00:00
|
|
|
return [textNode(action, "div"), actionShower(body)(action)]
|
2023-12-28 21:57:39 +00:00
|
|
|
}
|
2024-01-03 07:50:44 +00:00
|
|
|
})
|
2023-12-27 20:34:56 +00:00
|
|
|
}
|
|
|
|
|
} catch (e) {
|
2024-01-03 07:50:44 +00:00
|
|
|
doc.showError(e, filename)
|
2023-12-27 20:34:56 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
onload()
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
