Compare commits
No commits in common. "notebook-wip" and "main" have entirely different histories.
notebook-w
...
main
500
index.html
500
index.html
@ -11,19 +11,16 @@
|
|||||||
--dark-bg: #111111;
|
--dark-bg: #111111;
|
||||||
--dark-text: #eeeeee;
|
--dark-text: #eeeeee;
|
||||||
--dark-box-border: #333333;
|
--dark-box-border: #333333;
|
||||||
--dark-hl-box-border: #cccccc;
|
|
||||||
|
|
||||||
/* Light Color Scheme */
|
/* Light Color Scheme */
|
||||||
--light-bg: #eeeeee;
|
--light-bg: #eeeeee;
|
||||||
--light-text: #111111;
|
--light-text: #111111;
|
||||||
--light-box-border: #cccccc;
|
--light-box-border: #cccccc;
|
||||||
--light-hl-box-border: #333333;
|
|
||||||
|
|
||||||
/* Defaults */
|
/* Defaults */
|
||||||
--bg: var(--light-bg);
|
--bg: var(--light-bg);
|
||||||
--text: var(--light-text);
|
--text: var(--light-text);
|
||||||
--box-border: var(--light-box-border);
|
--box-border: var(--light-box-border);
|
||||||
--hl-box-border: var(--light-hl-box-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#color-scheme {
|
#color-scheme {
|
||||||
@ -34,7 +31,6 @@
|
|||||||
--bg: var(--dark-bg);
|
--bg: var(--dark-bg);
|
||||||
--text: var(--dark-text);
|
--text: var(--dark-text);
|
||||||
--box-border: var(--dark-box-border);
|
--box-border: var(--dark-box-border);
|
||||||
--hl-box-border: var(--dark-hl-box-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||||
@ -58,14 +54,12 @@
|
|||||||
--bg: var(--dark-bg);
|
--bg: var(--dark-bg);
|
||||||
--text: var(--dark-text);
|
--text: var(--dark-text);
|
||||||
--box-border: var(--dark-box-border);
|
--box-border: var(--dark-box-border);
|
||||||
--hl-box-border: var(--dark-hl-box-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper {
|
#color-scheme:checked ~ .color-scheme-wrapper {
|
||||||
--bg: var(--light-bg);
|
--bg: var(--light-bg);
|
||||||
--text: var(--light-text);
|
--text: var(--light-text);
|
||||||
--box-border: var(--light-box-border);
|
--box-border: var(--light-box-border);
|
||||||
--hl-box-border: var(--light-hl-box-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||||
@ -152,114 +146,9 @@
|
|||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box h2 {
|
|
||||||
color: var(--box-border);
|
|
||||||
font-size: 100%;
|
|
||||||
font-weight: normal;
|
|
||||||
display: initial;
|
|
||||||
background-color: var(--bg);
|
|
||||||
position: relative;
|
|
||||||
top: -1.8em;
|
|
||||||
padding: 0 .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box h2::after {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
margin-bottom: -1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
border: 1px solid var(--hl-box-border);
|
|
||||||
background-color: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
width: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.or {
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin: .5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#character-roster-container {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#no-loaded-container {
|
#no-loaded-container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#character-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#character-id-container {
|
|
||||||
margin: -2em 0 .5em 0;
|
|
||||||
color: var(--box-border);
|
|
||||||
font-size: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#character-id-container::before {
|
|
||||||
content: "ID: ";
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container {
|
|
||||||
display: inline-block;
|
|
||||||
border-width: 2px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: var(--box-border);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 32%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container:has(> h3 > input[name="pool-selector"]:checked) {
|
|
||||||
border-color: var(--hl-box-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container h4 {
|
|
||||||
color: var(--hl-box-border);
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[name="pool-selector"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pool-container input {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btn-load-character {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btn-create-character {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -275,160 +164,11 @@
|
|||||||
Cypher Player Assistant
|
Cypher Player Assistant
|
||||||
<span id="no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
|
<span id="no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div id="character-roster-container" class="box">
|
|
||||||
<select id="character-roster"><option></option></select>
|
|
||||||
<button id="btn-load-character">Load Character</button>
|
|
||||||
<button id="btn-create-character">Create Character</button>
|
|
||||||
</div>
|
|
||||||
<div id="no-loaded-container" class="box">
|
<div id="no-loaded-container" class="box">
|
||||||
No character is loaded. Load one from the menu above
|
No character is loaded.
|
||||||
<div class="or">— or —</div>
|
|
||||||
<button id="btn-no-char-create-character">Create one</button>
|
|
||||||
</div>
|
|
||||||
<div id="character-container">
|
|
||||||
<div class="box">
|
|
||||||
<h2>Character data</h2>
|
|
||||||
<div id="character-id-container"></div>
|
|
||||||
<strong>Campaign</strong> <input type="text" id="campaign-name">
|
|
||||||
<strong>Name</strong> <input type="text" id="character-name">
|
|
||||||
<strong>Max Effort</strong> <input type="number" id="max-effort" min="1" value="1">
|
|
||||||
Armor <input type="number">
|
|
||||||
<button>Save Character</button>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Abilities</h2>
|
|
||||||
<div class="pool-container">
|
|
||||||
<h3>
|
|
||||||
<input id="pool-selector-might" type="radio" name="pool-selector" value="might">
|
|
||||||
<label for="pool-selector-might">Might</label>
|
|
||||||
</h3>
|
|
||||||
<h4>Pool</h4>
|
|
||||||
<input type="number" id="pool-value-might" min="0" value="0">
|
|
||||||
/
|
|
||||||
<input type="number" id="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="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>
|
|
||||||
<input id="pool-selector-speed" type="radio" name="pool-selector" value="speed">
|
|
||||||
<label for="pool-selector-speed">Speed</label>
|
|
||||||
</h3>
|
|
||||||
<h4>Pool</h4>
|
|
||||||
<input type="number" id="pool-value-speed" min="0" value="0">
|
|
||||||
/
|
|
||||||
<input type="number" id="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="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>
|
|
||||||
<input id="pool-selector-intellect" type="radio" name="pool-selector" value="intellect">
|
|
||||||
<label for="pool-selector-intellect">Intellect</label>
|
|
||||||
</h3>
|
|
||||||
<h4>Pool</h4>
|
|
||||||
<input type="number" id="pool-value-intellect" min="0" value="0">
|
|
||||||
/
|
|
||||||
<input type="number" id="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="pool-edge-intellect" min="0" value="0" disabled>
|
|
||||||
<input type="checkbox" class="input-unlocker" id="pool-edge-unlocker-intellect">
|
|
||||||
<label id="pool-edge-unlocker-label-intellect" for="pool-edge-unlocker-intellect">
|
|
||||||
<span class="input-locked">🔒</span>
|
|
||||||
<span class="input-unlocked">🔓</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Use Ability</h2>
|
|
||||||
<select id="ability-selector">
|
|
||||||
<option>Custom</option>
|
|
||||||
<option data-pool="might" data-cost="3">Golem Grip</option>
|
|
||||||
<option data-pool="speed" data-cost="1">Some Speedy Thing</option>
|
|
||||||
</select>
|
|
||||||
Initial cost <input type="number" id="ability-cost">
|
|
||||||
Effort <input type="number" id="ability-effort">
|
|
||||||
<span id="ability-cost-display"></span>
|
|
||||||
<button id="roll-ability">Do it!</button>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Do a Task</h2>
|
|
||||||
Training
|
|
||||||
<select>
|
|
||||||
<option>Inability</option>
|
|
||||||
<option selected>Practised</option>
|
|
||||||
<option>Trained</option>
|
|
||||||
<option>Specialised</option>
|
|
||||||
</select>
|
|
||||||
Effort <input type="number">
|
|
||||||
<button>Roll!</button>
|
|
||||||
<button>Do it!</button>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Take Damage</h2>
|
|
||||||
<input type="number"><button>Ouch!</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
const characterIDChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
||||||
const btnNoCharCreateCharacter = document.getElementById("btn-no-char-create-character");
|
|
||||||
const containerNoCharacter = document.getElementById("no-loaded-container");
|
|
||||||
const containerCharacter = document.getElementById("character-container");
|
|
||||||
const containerCharacterID = document.getElementById("character-id-container");
|
|
||||||
const inputCharacterName = document.getElementById("character-name");
|
|
||||||
const inputCampaignName = document.getElementById("campaign-name");
|
|
||||||
const inputMaxEffort = document.getElementById("max-effort");
|
|
||||||
const characterSelector = document.getElementById("character-roster");
|
|
||||||
const abilitySelector = document.getElementById("ability-selector");
|
|
||||||
const abilityInitialCost = document.getElementById("ability-cost");
|
|
||||||
const abilityEffort = document.getElementById("ability-effort");
|
|
||||||
const abilityRoller = document.getElementById("roll-ability");
|
|
||||||
const abilityCostDisplay = document.getElementById("ability-cost-display");
|
|
||||||
const poolChoices = {
|
|
||||||
might: document.getElementById("pool-selector-might"),
|
|
||||||
speed: document.getElementById("pool-selector-speed"),
|
|
||||||
intellect: document.getElementById("pool-selector-intellect"),
|
|
||||||
};
|
|
||||||
const poolValues = {
|
|
||||||
might: document.getElementById("pool-value-might"),
|
|
||||||
speed: document.getElementById("pool-value-speed"),
|
|
||||||
intellect: document.getElementById("pool-value-intellect"),
|
|
||||||
};
|
|
||||||
const poolEdges = {
|
|
||||||
might: document.getElementById("pool-edge-might"),
|
|
||||||
speed: document.getElementById("pool-edge-speed"),
|
|
||||||
intellect: document.getElementById("pool-edge-intellect"),
|
|
||||||
};
|
|
||||||
|
|
||||||
var characterRoster = {};
|
|
||||||
var currentCharacter = null;
|
|
||||||
|
|
||||||
const checkLocalStorage = () => {
|
const checkLocalStorage = () => {
|
||||||
let storage;
|
let storage;
|
||||||
try {
|
try {
|
||||||
@ -449,201 +189,6 @@
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const generateID = () => {
|
|
||||||
var result = "";
|
|
||||||
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
result += characterIDChars.charAt(Math.floor(Math.random() * characterIDChars.length));
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadCharacter = (characterID) => {
|
|
||||||
containerNoCharacter.style.display = "none";
|
|
||||||
containerCharacter.style.display = "initial";
|
|
||||||
|
|
||||||
characterData = characterRoster[characterID] || {};
|
|
||||||
|
|
||||||
containerCharacterID.textContent = characterID;
|
|
||||||
inputCharacterName.value = characterData.name || "";
|
|
||||||
inputCampaignName.value = characterData.campaign || "";
|
|
||||||
inputMaxEffort.value = characterData.max_effort || 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
const createCharacter = () => {
|
|
||||||
let newID = generateID();
|
|
||||||
|
|
||||||
characterRoster[newID] = {};
|
|
||||||
currentCharacter = newID;
|
|
||||||
|
|
||||||
loadCharacter(newID);
|
|
||||||
};
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveCharacterRoster = () => {
|
|
||||||
if (!checkLocalStorage()) {
|
|
||||||
alert("Local Storage is not available, cannot save roster.");
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem("character-roster", JSON.stringify())
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadCharacterRoster = (noSkipLocalStorageCheck) => {
|
|
||||||
if (!noSkipLocalStorageCheck && !checkLocalStorage()) {
|
|
||||||
alert("Local storage is not available, cannot load roster.")
|
|
||||||
}
|
|
||||||
|
|
||||||
var newRoster = localStorage.getItem("character-roster");
|
|
||||||
|
|
||||||
characterRoster = (newRoster === null) ? {} : JSON.parse(newRoster);
|
|
||||||
|
|
||||||
characterRoster = {
|
|
||||||
deadBeef: {
|
|
||||||
campaign: "Campaign One",
|
|
||||||
name: "Character One",
|
|
||||||
},
|
|
||||||
otherChr: {
|
|
||||||
campaign: "Campaign Two",
|
|
||||||
name: "Character Two",
|
|
||||||
},
|
|
||||||
thirdChr: {
|
|
||||||
campaign: "Campaign One",
|
|
||||||
name: "Character Three",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
while (characterSelector.firstChild) {
|
|
||||||
characterSelector.removeChild(characterSelector.lastChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
let placeHolder = document.createElement("option");
|
|
||||||
placeHolder.appendChild(document.createTextNode("Choose a character to load"));
|
|
||||||
characterSelector.appendChild(placeHolder);
|
|
||||||
|
|
||||||
let characterList = new Array();
|
|
||||||
|
|
||||||
for (let [characterID, characterData] of Object.entries(characterRoster)) {
|
|
||||||
if (characterRoster.hasOwnProperty(characterID)) {
|
|
||||||
characterList.push([characterID, characterData.campaign, characterData.name]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (characterList.length == 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
characterList.sort((a, b) => {
|
|
||||||
const campaignA = a[1].toUpperCase();
|
|
||||||
const campaignB = b[1].toUpperCase();
|
|
||||||
const nameA = a[2].toUpperCase();
|
|
||||||
const nameB = b[2].toUpperCase();
|
|
||||||
|
|
||||||
// Sort by campaign name first
|
|
||||||
if (campaignA < campaignB) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (campaignA > campaignB) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort by character name within the same campaign
|
|
||||||
if (nameA < nameB) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (nameA > nameB) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If all else fails, sort by the character ID
|
|
||||||
if (a[0] < b[0]) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (a[0] > b[0]) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
let currentGroup = null;
|
|
||||||
let previousCampaign = null;
|
|
||||||
|
|
||||||
characterList.forEach(([characterID, campaignName, characterName]) => {
|
|
||||||
if ((previousCampaign !== null) && (previousCampaign !== campaignName)) {
|
|
||||||
console.log("Found a new campaign", campaignName);
|
|
||||||
characterSelector.appendChild(currentGroup);
|
|
||||||
currentGroup = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentGroup === null) {
|
|
||||||
currentGroup = document.createElement("optgroup");
|
|
||||||
currentGroup.label = campaignName;
|
|
||||||
}
|
|
||||||
|
|
||||||
let newOption = document.createElement("option");
|
|
||||||
newOption.value = characterID;
|
|
||||||
newOption.appendChild(document.createTextNode(characterName));
|
|
||||||
currentGroup.appendChild(newOption);
|
|
||||||
previousCampaign = campaignName;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (currentGroup !== null) {
|
|
||||||
characterSelector.appendChild(currentGroup);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const d20 = () => Math.floor(Math.random() * 20) + 1;
|
|
||||||
|
|
||||||
const getSelectedAttribute = () => {
|
|
||||||
var currentPoolSelector = document.querySelector("input[name=pool-selector]:checked");
|
|
||||||
|
|
||||||
return (currentPoolSelector === null) ? null : currentPoolSelector.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getSelectedPool = () => {
|
|
||||||
if ((currentPool = getSelectedAttribute()) === null) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Number(poolValues[currentPool].value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getSelectedEdge = () => {
|
|
||||||
if ((currentPool = getSelectedAttribute()) === null) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Number(poolEdges[currentPool].value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateAbilityCost = () => {
|
|
||||||
var cost = Number(abilityInitialCost.value);
|
|
||||||
var usedEffort = Number(abilityEffort.value);
|
|
||||||
var effortCost = (usedEffort > 0) ? 3 + Math.max(usedEffort - 1, 0) * 2 : 0;
|
|
||||||
cost += effortCost - getSelectedEdge();
|
|
||||||
|
|
||||||
return Math.max(cost, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateAbilityCost = () => {
|
|
||||||
var cost = calculateAbilityCost();
|
|
||||||
abilityCostDisplay.innerHTML = String(cost);
|
|
||||||
};
|
|
||||||
|
|
||||||
document.addEventListener(
|
document.addEventListener(
|
||||||
"DOMContentLoaded",
|
"DOMContentLoaded",
|
||||||
() => {
|
() => {
|
||||||
@ -651,51 +196,8 @@
|
|||||||
document.getElementById("no-local-storage").style.display = "initial";
|
document.getElementById("no-local-storage").style.display = "initial";
|
||||||
alert("Local Storage is not available, saving and loading data will be unavailable.");
|
alert("Local Storage is not available, saving and loading data will be unavailable.");
|
||||||
}
|
}
|
||||||
|
|
||||||
loadCharacterRoster(true);
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
abilitySelector.addEventListener(
|
|
||||||
"change",
|
|
||||||
(evt) => {
|
|
||||||
var selectedOption = evt.target.selectedOptions[0];
|
|
||||||
|
|
||||||
if (selectedOption.dataset.pool !== null) {
|
|
||||||
var poolChooser = poolChoices[selectedOption.dataset.pool];
|
|
||||||
poolChooser.checked = true;
|
|
||||||
abilityInitialCost.value = Number(selectedOption.dataset.cost);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
abilityInitialCost.addEventListener("input", updateAbilityCost);
|
|
||||||
|
|
||||||
var abilityEffortChecking = false;
|
|
||||||
|
|
||||||
abilityEffort.addEventListener(
|
|
||||||
"input",
|
|
||||||
(evt) => {
|
|
||||||
if (abilityEffortChecking) return;
|
|
||||||
|
|
||||||
abilityEffortChecking = true;
|
|
||||||
|
|
||||||
if (evt.target.value < 0) {
|
|
||||||
evt.target.value = 0;
|
|
||||||
} else if (evt.target.value >= inputMaxEffort.value) {
|
|
||||||
evt.target.value = maxEffort.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateAbilityCost();
|
|
||||||
abilityEffortChecking = false;
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
btnNoCharCreateCharacter.addEventListener("click", createCharacter);
|
|
||||||
|
|
||||||
document
|
|
||||||
.querySelectorAll(".input-unlocker")
|
|
||||||
.forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user