Make it possible to create a new character
This commit is contained in:
parent
dc7b48e2d0
commit
5e4b97bcc7
224
index.html
224
index.html
@ -8,19 +8,22 @@
|
||||
<style>
|
||||
:root {
|
||||
/* Dark Color Scheme */
|
||||
--dark-bg: black;
|
||||
--dark-text: white;
|
||||
--dark-bg: #111111;
|
||||
--dark-text: #eeeeee;
|
||||
--dark-box-border: #333333;
|
||||
--dark-hl-box-border: #cccccc;
|
||||
|
||||
/* Light Color Scheme */
|
||||
--light-bg: white;
|
||||
--light-text: black;
|
||||
--light-bg: #eeeeee;
|
||||
--light-text: #111111;
|
||||
--light-box-border: #cccccc;
|
||||
--light-hl-box-border: #333333;
|
||||
|
||||
/* Defaults */
|
||||
--bg: var(--light-bg);
|
||||
--text: var(--light-text);
|
||||
--box-border: var(--light-box-border);
|
||||
--hl-box-border: var(--light-hl-box-border);
|
||||
}
|
||||
|
||||
#color-scheme {
|
||||
@ -31,6 +34,7 @@
|
||||
--bg: var(--dark-bg);
|
||||
--text: var(--dark-text);
|
||||
--box-border: var(--dark-box-border);
|
||||
--hl-box-border: var(--dark-hl-box-border);
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||
@ -54,12 +58,14 @@
|
||||
--bg: var(--dark-bg);
|
||||
--text: var(--dark-text);
|
||||
--box-border: var(--dark-box-border);
|
||||
--hl-box-border: var(--dark-hl-box-border);
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper {
|
||||
--bg: var(--light-bg);
|
||||
--text: var(--light-text);
|
||||
--box-border: var(--light-box-border);
|
||||
--hl-box-border: var(--light-hl-box-border);
|
||||
}
|
||||
|
||||
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
|
||||
@ -146,9 +152,92 @@
|
||||
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;
|
||||
}
|
||||
|
||||
#no-loaded-container {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -165,11 +254,100 @@
|
||||
<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>
|
||||
<div id="no-loaded-container" class="box">
|
||||
No character is loaded.
|
||||
No character is loaded.<br>
|
||||
<button id="btn-no-char-create-character">Create one</button>
|
||||
</div>
|
||||
<div id="character-container">
|
||||
<div id="character-base-data-container" 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">
|
||||
</div>
|
||||
<div id="abilities-container" 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>
|
||||
</div>
|
||||
<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");
|
||||
|
||||
var characterRoster = {};
|
||||
var currentCharacter = null;
|
||||
|
||||
const checkLocalStorage = () => {
|
||||
let storage;
|
||||
@ -201,6 +379,36 @@
|
||||
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;
|
||||
};
|
||||
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
() => {
|
||||
@ -210,6 +418,12 @@
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
btnNoCharCreateCharacter.addEventListener("click", createCharacter);
|
||||
|
||||
document
|
||||
.querySelectorAll(".input-unlocker")
|
||||
.forEach((elem) => {elem.addEventListener("change", toggleInputLockedHandler)});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user