diff options
| -rw-r--r-- | assets/charsheet/charsheet.css | 43 | ||||
| -rw-r--r-- | assets/charsheet/charsheet.js | 45 | ||||
| -rw-r--r-- | config/test.m4 | 4 | ||||
| -rw-r--r-- | templates/api/charsheet.html | 27 |
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> |