diff options
| -rw-r--r-- | assets/charsheet/charsheet.css | 22 | ||||
| -rw-r--r-- | assets/charsheet/charsheet.js | 51 | ||||
| -rw-r--r-- | templates/api/charsheet-private.html | 8 |
3 files changed, 75 insertions, 6 deletions
diff --git a/assets/charsheet/charsheet.css b/assets/charsheet/charsheet.css index 84e658f..753ea55 100644 --- a/assets/charsheet/charsheet.css +++ b/assets/charsheet/charsheet.css @@ -46,6 +46,17 @@ body { background-size: 1rem 1rem; } +button { + background-color: black; + color: white; + border: none; + cursor: pointer; + padding: 0.25rem; +} +button:active { + background-color: darkgrey; +} + .invisible { visibility: hidden !important; } @@ -213,7 +224,7 @@ body { } table { - width: 80%; + width: 100%; margin-bottom: 0.5rem; } table tr td:first-child { @@ -224,6 +235,12 @@ table tr td:first-child { position: absolute; z-index: 5; } +#talent-reset { + position: absolute; + bottom: 0px; + right: 0px; + z-index: 5; +} #edit-scrollable { overflow: scroll; @@ -296,3 +313,6 @@ table tr td:first-child { transition: opacity 0.5s !important; overflow: auto; } +#edit-selected-tooltip-buy { + width: 100%; +} diff --git a/assets/charsheet/charsheet.js b/assets/charsheet/charsheet.js index 2b76912..108cd14 100644 --- a/assets/charsheet/charsheet.js +++ b/assets/charsheet/charsheet.js @@ -7,6 +7,8 @@ let UNIFORM_PROJECTION = null; let UNIFORM_VIEW = null; let UNIFORM_POSITION = null; let CUBE_ROTATION = 0.0; +let UID = null; +let USER = {}; let TALENTS = {}; let TALENT_SELECTED = null; @@ -62,7 +64,7 @@ function scaleName() { } function setName(nm) { let elem = document.getElementById("name"); - if (elem && elem.firstElementChild) { + if (elem && elem.firstElementChild && elem.firstElementChild.innerText.toLowerCase().trim() != nm) { elem.firstElementChild.innerText = nm scaleName(); new ResizeObserver(scaleName).observe(elem); @@ -263,6 +265,8 @@ async function fetchUser(uid) { } else { uploadImage(`${globalThis.apiServer}/user/avatar/${uid}.png`); const info = await resp.json() + UID = uid; + USER = info; setName(info.properties["name"]); for (let nm in info.stats) { setField(nm, info.stats[nm]); @@ -270,12 +274,12 @@ async function fetchUser(uid) { for (let nm in info.properties) { setField(nm, info.properties[nm]); } + setField("unallocated", info.stats["talentpoints"] - info.stats["allocatedtalentpoints"]); const badges = document.getElementById("badges"); if (badges) { const badges_resp = await fetch(`${globalThis.apiServer}/user/badges/${uid}`); if (badges_resp.ok) { const bs = await badges_resp.json(); - console.log(bs); for (let b of bs) { addBadge(b); } @@ -351,6 +355,32 @@ function selectTalent(elem) { name.innerText = TALENTS[TALENT_SELECTED].name; const tooltip = document.getElementById("edit-selected-tooltip"); tooltip.innerText = TALENTS[TALENT_SELECTED].desc; + const allocated = document.getElementById("edit-selected-tooltip-allocated"); + allocated.innerText = (USER.talents[TALENT_SELECTED] || 0).toString(); + } +} +async function buySelectedTalent() { + if (TALENT_SELECTED) { + const resp = await fetch(`${globalThis.secureApiServer}/talent/${TALENT_SELECTED}/purchase`, { + method: "POST", + }); + if (resp.ok) { + console.log(await resp.text()); + await fetchUser(UID); + const allocated = document.getElementById("edit-selected-tooltip-allocated"); + allocated.innerText = (USER.talents[TALENT_SELECTED] || 0).toString(); + } + } +} +async function resetTalents() { + const resp = await fetch(`${globalThis.secureApiServer}/talent/reset`, { + method: "POST", + }); + if (resp.ok) { + console.log(await resp.text()); + await fetchUser(UID); + const allocated = document.getElementById("edit-selected-tooltip-allocated"); + allocated.innerText = "0"; } } @@ -363,7 +393,20 @@ globalThis.mainSecure = async () => { if (await fetchUser(uid)) { showContentsSecure(); } + const buy = document.getElementById("edit-selected-tooltip-buy"); + buy.addEventListener("click", buySelectedTalent); + const reset = document.getElementById("talent-reset"); + reset.addEventListener("click", resetTalents); TALENTS = await fetchTalents(); - renderTalent("bigjoel", basex + 0, basey + 0); - renderTalent("shaderopacity", basex + 100, basey + 0); + const dim = 100; + let x = 0; + let y = 0; + for (let tid in TALENTS) { + renderTalent(tid, basex + x * dim, basey + y * dim); + x += 1; + if (x > 4) { + x = 0; + y += 1; + } + } } diff --git a/templates/api/charsheet-private.html b/templates/api/charsheet-private.html index a961399..b5e3a7b 100644 --- a/templates/api/charsheet-private.html +++ b/templates/api/charsheet-private.html @@ -30,15 +30,21 @@ CONFIG_SUBST <div id="name" class="edit-panel"> <h1>player unknown</h1> <span id="edit-mode">edit mode</span> + <button id="talent-reset">reset talents</button> </div> <div id="edit-infobox"> <div class="infobox-title">Table 3: Statistical Summary</div> <table> - <tr><td>unspent points</td><td id="info-talentpoints">N/A</td></tr> + <tr><td>total points</td><td id="info-talentpoints">N/A</td></tr> + <tr><td>unallocated</td><td id="info-unallocated">N/A</td></tr> </table> </div> <div id="edit-selected-tooltip-box" data-skipfade="true"> <div id="edit-selected-tooltip-name" class="infobox-title">empty</div> + <table> + <tr><td>allocated</td><td id="edit-selected-tooltip-allocated">N/A</td></tr> + </table> + <button id="edit-selected-tooltip-buy">buy now</button> <div id="edit-selected-tooltip">empty</div> </div> </div> |