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

Allow for using CSS in PhantomJS deck rendering

Browse Source
This commit is contained in:
Adam Goldsmith 2019-01-06 09:47:19 -05:00
parent 9ad1329962
commit 9e16ea14ad
3 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Deck.vue
View File

@ -1,10 +1,8 @@
<template>
<!-- style is inline for phantomjs -->
<div style="white-space: nowrap;">
<div class="deck">
<div v-for="cardRow in chunkedCards">
<span v-for="card in cardRow" @click="$emit('input', card)">
<Hero v-bind="card.card" style="white-space: initial;"> </Hero>
</span>
<Hero v-for="card in cardRow" v-model="selected"
:type="card.type" :card="card.card"> </Hero>
</div>
</div>
</template>
@ -43,3 +41,18 @@
},
}
</script>
<style>
.deck {
white-space: nowrap;
}
.deck svg {
white-space: initial;
}
.deck svg p {
margin-top: 0;
margin-bottom: .5em;
}
</style>

1
src/Editor.vue
View File

@ -124,6 +124,7 @@
deck: this.deckInfo,
_id: this.deckID === 'new' ? undefined : this.deckID,
dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
css: document.styleSheets[0].href,
})})
.then(r => r.json())
.then(j => this.$router.replace('/edit/' + j.id))

45
src/server.js
View File

@ -94,28 +94,31 @@ function getTTSJSON(req, res) {
});
}
function handleUpload(req, res) {
async function handleUpload(req, res) {
const json = req.body;
console.log("Making deck image");
phantom.create().then(ph => ph.createPage().then(
page => {
page.on('onLoadFinished', status => {
if (status === 'success') {
page.renderBase64(`PNG`).then(image => {
db.update({_id: json.id},
{deck: json.deck, image: image},
{upsert: true, returnUpdatedDocs: true})
.then(doc => res.status(201).json({id: doc._id}));
page.close().then(() => ph.exit());
});
}
else {
console.log('Failed to load page');
ph.exit(1);
}
});
page.property('zoomFactor', 2); // pretty arbitrary
page.property('content', '<body style="margin:0;">' + json.dom + '</body>');
}));
const ph = await phantom.create();
const page = await ph.createPage();
page.on('onLoadFinished', status => {
if (status === 'success') {
page.renderBase64(`PNG`)
.then(image => db.update(
{_id: json.id},
{deck: json.deck, image: image},
{upsert: true, returnUpdatedDocs: true}))
.then(doc => res.status(201).json({id: doc._id}))
.then(() => page.close().then(() => ph.exit()));
}
else {
console.log('Failed to load page');
ph.exit(1);
}
});
page.property('zoomFactor', 2); // pretty arbitrary
page.property('content',
'<head><link rel="stylesheet" href="' + json.css + '"></head>' +
'<body style="margin:0;">' + json.dom + '</body>');
}