SpindleyQ/inhabitor
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Prop detail page

Browse source
This commit is contained in:
Jeremy Penner 2023-12-23 11:23:33 -05:00
parent 490290932d
commit 86f497c8a9
3 changed files with 64 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
detail.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Inhabitor - The Habitat Inspector</title>
<script src="index.js"></script>
</head>
<body>
<h1 id="filename"></h1>
<div id="states">
<h2>States</h1>
</div>
<div id="cels">
<h2>Cels</h1>
</div>
<div id="data">
<h2>Data</h1>
</div>
<div id="errors"></div>
<script>
const dumpProp = (prop, container) => {
container.appendChild(textNode(JSON.stringify(prop, null, 2), "pre"))
}
const onload = async () => {
const q = new URLSearchParams(window.location.search)
const filename = q.get("f")
document.getElementById("filename").innerText = filename
try {
const prop = await decodeBinary(filename)
dumpProp(prop, document.getElementById("data"))
showStates(prop, document.getElementById("states"))
showCels(prop, document.getElementById("cels"))
} catch (e) {
showError(e, filename)
}
}
onload()
</script>
</body>
</html>

7
index.html
View file

@ -8,6 +8,13 @@
function showErrors() { function showErrors() {
document.getElementById('errors').style.display = 'block' document.getElementById('errors').style.display = 'block'
} }
const displayEverything = async () => {
await displayList("heads.json", "heads")
await displayList("props.json", "props")
}
displayEverything()
</script> </script>
</head> </head>
<body> <body>

25
index.js
View file

@ -332,12 +332,25 @@ const imageFromCanvas = (canvas) => {
return img return img
} }
const textNode = (text, type = "span") => {
const node = document.createElement(type)
node.innerText = text
return node
}
const linkDetail = (element, filename) => {
const detailLink = document.createElement("a")
detailLink.href = `detail.html?f=${filename}`
detailLink.appendChild(element)
return detailLink
}
const showStates = (prop, container) => { const showStates = (prop, container) => {
for (const celmask of prop.celmasks) { for (const celmask of prop.celmasks) {
const state = compositeCels(celsFromMask(prop, celmask)) const state = compositeCels(celsFromMask(prop, celmask))
const img = imageFromCanvas(state.canvas) const img = imageFromCanvas(state.canvas)
img.alt = prop.filename img.alt = prop.filename
container.appendChild(img) container.appendChild(linkDetail(img, prop.filename))
} }
} }
@ -363,7 +376,8 @@ const showError = (e, filename) => {
const container = document.getElementById("errors") const container = document.getElementById("errors")
const errNode = document.createElement("p") const errNode = document.createElement("p")
console.error(e) console.error(e)
errNode.innerHTML = `${filename}<br/>${e.toString()}` errNode.appendChild(linkDetail(textNode(filename, "b"), filename))
errNode.appendChild(textNode(e.toString(), "p"))
container.appendChild(errNode) container.appendChild(errNode)
} }
@ -388,10 +402,3 @@ const displayList = async (indexFile, containerId) => {
displayFile(filename, container) displayFile(filename, container)
} }
} }
const doTheThing = async () => {
await displayList("heads.json", "heads")
await displayList("props.json", "props")
}
doTheThing()