adam/SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add basic card editing

Browse Source
This commit is contained in:
Adam Goldsmith 2017-10-08 16:32:49 -04:00
parent 7a6ecc2202
commit 6f5ab8b595
2 changed files with 59 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
html/editor.html
View File

@ -6,6 +6,23 @@
</head>
<body>
<input id="jsonUpload" type="file"><br>
<form id="deckForm">
<div> <label> Deck Name: <input type="text" id="deckName"></label> </div>
<div>
<label> Deck Type: <select id="deckType">
<option value="hero">hero</option>
<option value="villain">villain</option>
<option value="environment">environment</option>
</select> </label>
</div>
</form>
<form id="cardForm">
<div><label> Name: <input type="text" id="cardName"> </label></div>
<div><label> Keywords: <input type="text" id="cardKeywords"> </label></div>
<div><label> Count: <input type="number" id="cardCount"> </label></div>
<div><label> Text: <textarea id="cardText"></textarea> </label></div>
</form>
<div id="deck"></div>
</body>

43
js/editor.js
View File

@ -1,12 +1,38 @@
let deckJSON;
let selected = 0;
document.title = "Editor|" + window.location.pathname.split('/')[2];
window.addEventListener("load", () => {
// deck JSON uploader
document.querySelector('#jsonUpload').addEventListener('change', event => {
let files = event.target.files;
let reader = new FileReader();
reader.onload = handleUpload;
reader.readAsText(files[0]);
});
// handle changes to deck editor
document.querySelector('#deckForm').addEventListener('input', event => {
let prop = event.target.id.substring(4).toLowerCase();
deckJSON[prop] = event.target.value;
});
// handle changes to card editor
document.querySelector('#cardForm').addEventListener('input', event => {
let deck = document.querySelector('#deck');
let prop = event.target.id.substring(4).toLowerCase();
if (prop !== "count") {
wrapSVGText(deck.children[selected].querySelector('#' + prop),
String(event.target.value));
}
if (event.target.value) {
deckJSON.deck[selected][prop] = event.target.value;
}
else {
delete deckJSON.deck[selected][prop];
}
});
});
function getSVGTemplate(name, callback) {
@ -20,7 +46,10 @@ function getSVGTemplate(name, callback) {
}
function handleUpload(event) {
let deckJSON = JSON.parse(event.target.result);
deckJSON = JSON.parse(event.target.result);
document.querySelector('#deckName').value = deckJSON.name || "";
document.querySelector('#deckType').value = deckJSON.type || "";
let deck = document.querySelector('#deck');
@ -32,8 +61,16 @@ function handleUpload(event) {
deck.innerHTML = "";
// build card SVGs
deckJSON.deck.forEach((card, index) => {
let cardSVG = templateSVG.cloneNode(true);
cardSVG.addEventListener('click', event => {
selected = index;
document.querySelector('#cardName').value = card.name || "";
document.querySelector('#cardKeywords').value = card.keywords || "";
document.querySelector('#cardCount').value = card.count || 1;
document.querySelector('#cardText').value = card.text || "";
}, true);
deck.appendChild(cardSVG);
for (let prop in card) {
if (prop !== "count") {
@ -42,6 +79,10 @@ function handleUpload(event) {
}
});
});
}
function upload() {
let deck = document.querySelector('#deck');
// POST the generated SVGs to the server
let data = (new XMLSerializer()).serializeToString(deck);