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

Flatten editor.js code

Browse Source
This commit is contained in:
Adam Goldsmith 2017-10-02 04:27:28 -04:00
parent d43804896d
commit afcb1851cc
1 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
js/editor.js
View File

@ -1,46 +1,53 @@
let deckJSON;
window.addEventListener("load", () => { window.addEventListener("load", () => {
let xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => {
let respSVG = xhr.responseXML.children[0];
document.querySelector('#jsonUpload').addEventListener('change', event => { document.querySelector('#jsonUpload').addEventListener('change', event => {
let files = event.target.files; let files = event.target.files;
let reader = new FileReader(); let reader = new FileReader();
reader.onload = e => { reader.onload = handleUpload;
deckJSON = JSON.parse(e.target.result); reader.readAsText(files[0]);
});
});
function getSVGTemplate(name, callback) {
let xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => {
let respSVG = xhr.responseXML.children[0];
callback(respSVG);
});
xhr.open("GET", "/template/" + name + ".svg");
xhr.send();
}
function handleUpload(event) {
let deckJSON = JSON.parse(event.target.result);
let deck = document.querySelector('#deck'); let deck = document.querySelector('#deck');
getSVGTemplate("environment/card", templateSVG => {
deck.style.width = Math.ceil(Math.sqrt(deckJSON.deck.length)) * deck.style.width = Math.ceil(Math.sqrt(deckJSON.deck.length)) *
parseInt(respSVG.getAttribute("width")) + "pt"; parseInt(templateSVG.getAttribute("width")) + "pt";
deck.style.height = Math.ceil(Math.sqrt(deckJSON.deck.length)) * deck.style.height = Math.ceil(Math.sqrt(deckJSON.deck.length)) *
parseInt(respSVG.getAttribute("height")) + "pt"; parseInt(templateSVG.getAttribute("height")) + "pt";
deck.innerHTML = ""; deck.innerHTML = "";
deckJSON.deck.forEach((card, index) => { deckJSON.deck.forEach((card, index) => {
let cardSVG = respSVG.cloneNode(true); let cardSVG = templateSVG.cloneNode(true);
deck.appendChild(cardSVG); deck.appendChild(cardSVG);
for (let prop in card) { for (let prop in card) {
if (prop !== "count") { if (prop !== "count") {
wrapSVGText(cardSVG.querySelector('#' + prop), wrapSVGText(cardSVG.querySelector('#' + prop), String(card[prop]));
String(card[prop]));
} }
} }
}); });
});
// POST the generated SVGs to the server
let data = (new XMLSerializer()).serializeToString(deck); let data = (new XMLSerializer()).serializeToString(deck);
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.open('POST', "upload"); xhr.open('POST', "upload");
xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({body: data, json: deckJSON})); xhr.send(JSON.stringify({body: data, json: deckJSON}));
}; }
reader.readAsText(files[0]);
});
});
xhr.open("GET", "/template/environment/card.svg");
xhr.send();
});
function wrapSVGText(e, string) { function wrapSVGText(e, string) {
// TODO: bold or italic text // TODO: bold or italic text