From 86f497c8a9ece33e232bb86925d3a765c21d0d6c Mon Sep 17 00:00:00 2001 From: Jeremy Penner Date: Sat, 23 Dec 2023 11:23:33 -0500 Subject: [PATCH] Prop detail page --- detail.html | 41 +++++++++++++++++++++++++++++++++++++++++ index.html | 7 +++++++ index.js | 25 ++++++++++++++++--------- 3 files changed, 64 insertions(+), 9 deletions(-) create mode 100644 detail.html diff --git a/detail.html b/detail.html new file mode 100644 index 0000000..d99491f --- /dev/null +++ b/detail.html @@ -0,0 +1,41 @@ + + + + + Inhabitor - The Habitat Inspector + + + +

+
+

States

+
+
+

Cels

+
+
+

Data

+
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index ac6ffcd..f9e0e92 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,13 @@ function showErrors() { document.getElementById('errors').style.display = 'block' } + + const displayEverything = async () => { + await displayList("heads.json", "heads") + await displayList("props.json", "props") + } + + displayEverything() diff --git a/index.js b/index.js index 598d686..0629b26 100644 --- a/index.js +++ b/index.js @@ -332,12 +332,25 @@ const imageFromCanvas = (canvas) => { 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) => { for (const celmask of prop.celmasks) { const state = compositeCels(celsFromMask(prop, celmask)) const img = imageFromCanvas(state.canvas) 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 errNode = document.createElement("p") console.error(e) - errNode.innerHTML = `${filename}
${e.toString()}` + errNode.appendChild(linkDetail(textNode(filename, "b"), filename)) + errNode.appendChild(textNode(e.toString(), "p")) container.appendChild(errNode) } @@ -388,10 +402,3 @@ const displayList = async (indexFile, containerId) => { displayFile(filename, container) } } - -const doTheThing = async () => { - await displayList("heads.json", "heads") - await displayList("props.json", "props") -} - -doTheThing() \ No newline at end of file