From e22f6fad5a1fe5d1343acda35919bb62be538504 Mon Sep 17 00:00:00 2001 From: Gergely Polonkai Date: Fri, 6 Jun 2025 20:54:58 +0200 Subject: [PATCH] feat(character-sheet): Make some fields disabled but unlockable --- index.html | 97 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 89 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 735da08..98ee3fb 100644 --- a/index.html +++ b/index.html @@ -180,6 +180,10 @@ width: 4em; } + input[disabled] { + border-color: var(--box-border); + } + /* No character loaded box (AKA the welcome screen) */ #cont-no-loaded { @@ -209,6 +213,30 @@ font-weight: normal; font-size: 80%; } + + /* Input unlockers */ + + .input-unlocker { + display: none; + } + + .input-unlocker + label > .input-locked { + display: initial; + cursor: pointer; + } + + .input-unlocker + label > .input-unlocked { + display: none; + cursor: pointer; + } + + .input-unlocker:checked + label > .input-locked { + display: none; + } + + .input-unlocker:checked + label .input-unlocked { + display: initial; + } @@ -232,8 +260,18 @@

Character data

Campaign Name - Max Effort - Armor + Max Effort + + + Armor + +

Pools

@@ -245,9 +283,19 @@

Pool

/ - + + +

Edge

- + + +

@@ -257,9 +305,19 @@

Pool

/ - + + +

Edge

- + + +

@@ -269,9 +327,19 @@

Pool

/ - + + +

Edge

- + + +
@@ -297,6 +365,15 @@ } }; + const toggleInputLockedHandler = (evt) => { + let cb = evt.target; + let pool = cb.id.slice(cb.id.lastIndexOf("-") + 1); + let input = cb.previousElementSibling; + let toUnlock = cb.checked; + + input.disabled = !toUnlock; + }; + document.addEventListener( "DOMContentLoaded", () => { @@ -304,6 +381,10 @@ document.getElementById("warn-no-local-storage").style.display = "initial"; alert("Local Storage is not available, saving and loading data will be unavailable."); } + + document + .querySelectorAll(".input-unlocker") + .forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)}); }, );