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

feat: Create the ability use box

Browse Source
This commit is contained in:
Gergely Polonkai
2025-06-11 20:05:43 +02:00
parent dfbf305206
commit d5994439ae
1 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@@ -184,6 +184,11 @@
border-color: var(--box-border); border-color: var(--box-border);
} }
.warn {
color: red;
font-weight: bold;
}
/* Character roster box */ /* Character roster box */
#cont-character-roster { #cont-character-roster {
@@ -269,6 +274,8 @@
.input-unlocker:checked + label .input-unlocked { .input-unlocker:checked + label .input-unlocked {
display: initial; display: initial;
} }
/* Ability use box */
</style> </style>
</head> </head>
<body> <body>
@@ -383,6 +390,14 @@
</label> </label>
</div> </div>
</div> </div>
<div class="box">
<h2>Use Ability</h2>
<span id="dsp-ability-pool" class="warn">No pool selected!</span>
<strong>Initial cost</strong> <input type="number" id="inp-ability-cost" min-value="0" value="0">
<strong>Effort used</strong> <input type="number" id="inp-ability-effort" min-value="0" value="0">
<span id="dsp-ability-cost"></span>
<button id="btn-ability-do">Do it!</button>
</div>
</div> </div>
</div> </div>
<script> <script>
@@ -419,6 +434,8 @@
intellect: document.getElementById("inp-pool-edge-intellect"), intellect: document.getElementById("inp-pool-edge-intellect"),
}; };
const dspAbilityPool = document.getElementById("dsp-ability-pool");
var characterRoster = {}; var characterRoster = {};
var currentCharacter = null; var currentCharacter = null;
@@ -624,6 +641,20 @@
return (currentPoolSelector === null) ? null : currentPoolSelector.value; return (currentPoolSelector === null) ? null : currentPoolSelector.value;
}; };
const poolSelectionChanged = () => {
var currentPool = getSelectedPool();
clearContainer(dspAbilityPool);
if (currentPool === null) {
dspAbilityPool.appendChild(document.createTextNode("No pool selected!"));
dspAbilityPool.classList.add("warn");
} else {
dspAbilityPool.appendChild(document.createTextNode(capitalize(currentPool)));
dspAbilityPool.classList.remove("warn");
}
};
document.addEventListener( document.addEventListener(
"DOMContentLoaded", "DOMContentLoaded",
() => { () => {
@@ -636,6 +667,10 @@
.querySelectorAll(".input-unlocker") .querySelectorAll(".input-unlocker")
.forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)}); .forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
document
.querySelectorAll("input[name=pool-selector]")
.forEach((elem) => {elem.addEventListener("change", poolSelectionChanged)});
btnNoCharCreateCharacter.addEventListener("click", createCharacter); btnNoCharCreateCharacter.addEventListener("click", createCharacter);
btnCreateCharacter.addEventListener("click", createCharacter); btnCreateCharacter.addEventListener("click", createCharacter);
btnSaveCharacter.addEventListener("click", saveCurrentCharacter); btnSaveCharacter.addEventListener("click", saveCurrentCharacter);
@@ -649,6 +684,7 @@
clearSheet(); clearSheet();
loadCharacterRoster(true); loadCharacterRoster(true);
poolSelectionChanged();
}, },
); );
</script> </script>