Add character sheet

2 files changed, 80 insertions, 8 deletions

diff --git a/assets/charsheet/charsheet.css b/assets/charsheet/charsheet.css
index 571f2f2..ca2bcf7 100644
--- a/assets/charsheet/charsheet.css
+++ b/assets/charsheet/charsheet.css
@@ -11,7 +11,6 @@
         margin: 0.5rem !important;
         width: calc(100vw - 1rem) !important;
         height: calc(100vh - 1rem) !important;
-        overflow: scroll !important;
         grid-template-columns: 1fr !important;
         grid-auto-rows: 60vh !important;
     }
@@ -55,6 +54,45 @@ body {
     opacity: 1.0 !important;
 }
 
+#error {
+    border: 1px solid lightgrey;
+    background-color: white;
+    position: fixed;
+    left: 20vw;
+    top: 20vh;
+    width: 60vw;
+    height: 60vh;
+    padding: 0.5rem;
+    align-content: center;
+}
+#error > div {
+    opacity: 0.0;
+    transition: opacity 2s;
+}
+#error-message {
+    color: darkgrey;
+    font-size: 4rem;
+    font-variant: small-caps;
+    margin-top: -3rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+}
+.error-anim-unfold {
+    animation-duration: 0.5s;
+    animation-name: error-unfold;
+}
+@keyframes error-unfold {
+    from {
+        left: 50vw;
+        width: 0vw;
+    }
+    to {
+        left: 20vw;
+        width: 60vw;
+    }
+}
+
 #contents {
     border: 1px solid lightgrey;
     background-color: white;
@@ -70,7 +108,7 @@ body {
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 1fr);
     gap: 0.5rem;
-    overflow: hidden;
+    overflow: scroll;
 }
 .contents-anim-unfold {
     animation-duration: 0.5s;
@@ -96,6 +134,7 @@ body {
     grid-column-end: span 2;
 }
 #name > h1 {
+    text-transform: uppercase;
     position: absolute;
     transform: translateZ(0);
     backface-visibility: hidden;
diff --git a/assets/charsheet/charsheet.js b/assets/charsheet/charsheet.js
index 8c16137..d477a68 100644
--- a/assets/charsheet/charsheet.js
+++ b/assets/charsheet/charsheet.js
@@ -24,6 +24,22 @@ function showContents() {
     }
 }
 
+function showError() {
+    let elem = document.getElementById("error");
+    if (elem) {
+        elem.classList.remove("invisible");
+        elem.classList.add("error-anim-unfold");
+        let timeout = 500;
+        for (let c of elem.children) {
+            setTimeout(
+                () => c.classList.add("opaque"),
+                timeout
+            );
+            timeout += 200;
+        }
+    }
+}
+
 function scaleName() {
     let elem = document.getElementById("name");
     if (elem && elem.firstElementChild) {
@@ -167,7 +183,6 @@ function initGL() {
     UNIFORM_VIEW = GL.getUniformLocation(prog, "view");
     UNIFORM_POSITION = GL.getUniformLocation(prog, "position");
     const cube = uploadCube();
-    uploadImage("./assets/l.png");
     VERTS = cube.verts;
     IDXS = cube.idxs;
     requestAnimationFrame(render);
@@ -197,10 +212,28 @@ function render() {
     requestAnimationFrame(render);
 }
 
+function setField(nm, v) {
+    const elem = document.getElementById("info-" + nm);
+    if (elem) {
+        elem.innerText = v.toString();
+    }
+}
+
 initGL();
-setName("LCOLONQ");
 
-setTimeout(
-    () => showContents(),
-    1000
-);
+const uid = location.hash.slice(1);
+const resp = await fetch(`${globalThis.apiServer}/user/info/${uid}`);
+if (!resp.ok) {
+    showError();
+} else {
+    uploadImage(`${globalThis.apiServer}/user/avatar/${uid}.png`);
+    const info = await resp.json()
+    setName(info.properties["name"]);
+    for (let nm in info.stats) {
+        setField(nm, info.stats[nm]);
+    }
+    for (let nm in info.properties) {
+        setField(nm, info.properties[nm]);
+    }
+    showContents();
+}