gergely/cypher-player-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(character-sheet): Make some fields disabled but unlockable

Browse Source
This commit is contained in:
Gergely Polonkai
2025-06-06 20:54:58 +02:00
parent 6b192a5c21
commit e22f6fad5a
1 changed files with 89 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
index.html
View File

@@ -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;
}
</style>
</head>
<body>
@@ -232,8 +260,18 @@
<h2>Character data</h2>
<strong>Campaign</strong> <input type="text" id="inp-campaign-name">
<strong>Name</strong> <input type="text" id="inp-character-name">
<strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1">
<strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0">
<strong>Max Effort</strong> <input type="number" id="inp-max-effort" min="1" value="1" disabled>
<input type="checkbox" class="input-unlocker" id="max-effort-unlocker">
<label for="max-effort-unlocker">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
<strong>Armor</strong> <input type="number" id="inp-armor" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="armor-unlocker">
<label for="armor-unlocker">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
</div>
<div class="box">
<h2>Pools</h2>
@@ -245,9 +283,19 @@
<h4>Pool</h4>
<input type="number" id="inp-pool-value-might" min="0" value="0">
/
<input type="number" id="inp-pool-max-might" min="0" value="0">
<input type="number" id="inp-pool-max-might" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-might">
<label for="pool-max-unlocker-might">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
<h4>Edge</h4>
<input type="number" id="inp-pool-edge-might" min="0" value="0">
<input type="number" id="inp-pool-edge-might" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-might">
<label id="pool-edge-unlocker-label-might" for="pool-edge-unlocker-might">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
</div>
<div class="pool-container">
<h3>
@@ -257,9 +305,19 @@
<h4>Pool</h4>
<input type="number" id="inp-pool-value-speed" min="0" value="0">
/
<input type="number" id="inp-pool-max-speed" min="0" value="0">
<input type="number" id="inp-pool-max-speed" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-speed">
<label for="pool-max-unlocker-speed">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
<h4>Edge</h4>
<input type="number" id="inp-pool-edge-speed" min="0" value="0">
<input type="number" id="inp-pool-edge-speed" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-speed">
<label id="pool-edge-unlocker-label-speed" for="pool-edge-unlocker-speed">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
</div>
<div class="pool-container">
<h3>
@@ -269,9 +327,19 @@
<h4>Pool</h4>
<input type="number" id="inp-pool-value-intellect" min="0" value="0">
/
<input type="number" id="inp-pool-max-intellect" min="0" value="0">
<input type="number" id="inp-pool-max-intellect" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="pool-max-unlocker-intellect">
<label for="pool-max-unlocker-intellect">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
<h4>Edge</h4>
<input type="number" id="inp-pool-edge-intellect" min="0" value="0">
<input type="number" id="inp-pool-edge-intellect" min="0" value="0" disabled>
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-intellect">
<label for="pool-edge-unlocker-intellect">
<span class="input-locked">🔒</span>
<span class="input-unlocked">🔓</span>
</label>
</div>
</div>
</div>
@@ -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)});
},
);
</script>