alu/character-sheet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add local storage save feature

Browse Source
This commit is contained in:
Arthur Lu 2023-04-13 20:42:08 -07:00
parent 0fdebc12c9
commit f953bd8dae
3 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
sheet.js
View File

@ -1,3 +1,5 @@
import {serializeFormData, deserializeFormData, storeData, getData} from "./utils.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
let combatModifiers = [ let combatModifiers = [
@ -279,11 +281,25 @@ let features = [
function init () { function init () {
buildModifiers("#combat-modifiers", combatModifiers); buildModifiers("#combat-modifiers", combatModifiers);
window.setInterval(() => { calculateModifiers(combatModifiers) }, 250);
buildModifiers("#rp-modifiers", rpModifiers); buildModifiers("#rp-modifiers", rpModifiers);
calculateModifiers(rpModifiers);
window.setInterval(() => { calculateModifiers(rpModifiers) }, 250);
buildFeatures("#features", features); buildFeatures("#features", features);
let data = getData();
deserializeFormData("#character-data", data);
calculateModifiers(combatModifiers)
calculateModifiers(rpModifiers)
data = serializeFormData("#character-data");
storeData(data);
window.setInterval(() => {
calculateModifiers(combatModifiers)
calculateModifiers(rpModifiers)
data = serializeFormData("#character-data");
storeData(data);
}, 250);
} }
function buildModifiers(container, data) { function buildModifiers(container, data) {
@ -328,7 +344,7 @@ function buildFeatures (container) {
<p>${feature.name}</p> <p>${feature.name}</p>
<p>${feature.level}</p> <p>${feature.level}</p>
<div class="grow-wrap"> <div class="grow-wrap">
<textarea id="features-${i}" placeholder="Feature Name & Description" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1"></textarea> <textarea id="features-${i}" name="features-${i}" placeholder="Feature Name & Description" onInput="this.parentNode.dataset.replicatedValue = this.value" rows="1"></textarea>
</div> </div>
`; `;
} }

1
songs.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="sheet.css"> <link rel="stylesheet" href="sheet.css">
<script src="utils.js" type="module"></script>
<script src="sheet.js" type="module"></script> <script src="sheet.js" type="module"></script>
</head> </head>
<body style="padding: 16px;"> <body style="padding: 16px;">

45
utils.js Normal file
View File

@ -0,0 +1,45 @@
export function serializeFormData (formID) {
let out = {};
let form = document.querySelector(formID);
for (let i in form.elements) {
let element = form.elements[i];
if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
continue;
}
if (element.type === "checkbox") {
out[element.name] = {
type: element.type,
value: element.checked
};
}
else {
out[element.name] = {
type: element.type,
value: element.value
};
}
}
return out;
}
export function deserializeFormData (form, data) {
let area = document.querySelector(form);
for (let key in data) {
let element = data[key];
if (element.type === "checkbox") {
document.querySelector(`#${key}`).checked = element.value;
}
else {
document.querySelector(`#${key}`).value = element.value;
}
}
}
export function storeData (data) {
localStorage.setItem("character-data", JSON.stringify(data));
}
export function getData () {
let data = JSON.parse(localStorage.getItem("character-data"));
return data ? data : {};
}