Add character sheet

4 files changed, 98 insertions, 21 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();
+}
diff --git a/config/test.m4 b/config/test.m4
index a628df0..d46c62f 100644
--- a/config/test.m4
+++ b/config/test.m4
@@ -1,7 +1,7 @@
 define(`CONFIG_SUBST', `
 globalThis.mode = "api";
-globalThis.apiServer = "http://localhost:8000/api";
+globalThis.apiServer = "http://localhost:8080/api";
 globalThis.secureApiServer = "http://localhost:8000/api";
 globalThis.clientID = "q486jugzn2my4iw6l181o006ugye4j"
-globalThis.authRedirectURL = "http://localhost:8000/register";
+globalThis.authRedirectURL = "http://localhost:8080/register";
 ')
diff --git a/templates/api/charsheet.html b/templates/api/charsheet.html
index ebc2389..809fa57 100644
--- a/templates/api/charsheet.html
+++ b/templates/api/charsheet.html
@@ -14,6 +14,11 @@ CONFIG_SUBST
         <script type="module" src="./assets/charsheet/charsheet.js"></script>
     </head>
     <body>
+      <div id="error" class="invisible">
+        <div id="error-message">
+          an error occured
+        </div>
+      </div>
       <div id="contents" class="invisible">
         <div id="name">
           <h1>nameingwaying</h1>
@@ -32,25 +37,25 @@ CONFIG_SUBST
         <div id="infobox1" class="infobox">
           <div class="infobox-title">Table 1: Numerical Characteristics</div>
           <table>
-            <tr><td>equity</td><td>2%</td></tr>
-            <tr><td>boost power</td><td>2cc</td></tr>
-            <tr><td>talent points</td><td>1</td></tr>
-            <tr><td>cards drawn</td><td>99</td></tr>
+            <tr><td>equity</td><td id="info-equity">N/A</td></tr>
+            <tr><td>boost power</td><td id="info-boost">N/A</td></tr>
+            <tr><td>talent points</td><td id="info-talentpoints">N/A</td></tr>
+            <tr><td>cards drawn</td><td id="info-cardsdrawn">N/A</td></tr>
           </table>
           <div class="infobox-title">Table 1.1: Base Attributes</div>
           <table>
-            <tr><td>power</td><td>3</td></tr>
-            <tr><td>speed</td><td>17</td></tr>
-            <tr><td>majjyka</td><td>10</td></tr>
-            <tr><td>wisdom</td><td>5</td></tr>
+            <tr><td>power</td><td id="info-power">N/A</td></tr>
+            <tr><td>speed</td><td id="info-speed">N/A</td></tr>
+            <tr><td>majjyka</td><td id="info-majjyka">N/A</td></tr>
+            <tr><td>wisdom</td><td id="info-wisdom">N/A</td></tr>
           </table>
         </div>
         <div id="infobox2" class="infobox">
           <div class="infobox-title">Table 2: Tendencies / Affiliations</div>
           <table>
-            <tr><td>faction</td><td>UNALIGNED</td></tr>
-            <tr><td>elemental affinity</td><td>fire</td></tr>
-            <tr><td>color</td><td>#cccccc</td></tr>
+            <tr><td>faction</td><td id="info-faction">N/A</td></tr>
+            <tr><td>elemental affinity</td><td id="info-element">N/A</td></tr>
+            <tr><td>color</td><td id="info-color">N/A</td></tr>
           </table>
         </div>
       </div>