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> <template>
<!-- style is inline for phantomjs --> <div class="deck">
<div style="white-space: nowrap;">
<div v-for="cardRow in chunkedCards"> <div v-for="cardRow in chunkedCards">
<span v-for="card in cardRow" @click="$emit('input', card)"> <Hero v-for="card in cardRow" v-model="selected"
<Hero v-bind="card.card" style="white-space: initial;"> </Hero> :type="card.type" :card="card.card"> </Hero>
</span>
</div> </div>
</div> </div>
</template> </template>
@ -43,3 +41,18 @@
}, },
} }
</script> </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, deck: this.deckInfo,
_id: this.deckID === 'new' ? undefined : this.deckID, _id: this.deckID === 'new' ? undefined : this.deckID,
dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el), dom: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
css: document.styleSheets[0].href,
})}) })})
.then(r => r.json()) .then(r => r.json())
.then(j => this.$router.replace('/edit/' + j.id)) .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; const json = req.body;
console.log("Making deck image"); console.log("Making deck image");
phantom.create().then(ph => ph.createPage().then( const ph = await phantom.create();
page => { const page = await ph.createPage();
page.on('onLoadFinished', status => {
if (status === 'success') { page.on('onLoadFinished', status => {
page.renderBase64(`PNG`).then(image => { if (status === 'success') {
db.update({_id: json.id}, page.renderBase64(`PNG`)
{deck: json.deck, image: image}, .then(image => db.update(
{upsert: true, returnUpdatedDocs: true}) {_id: json.id},
.then(doc => res.status(201).json({id: doc._id})); {deck: json.deck, image: image},
page.close().then(() => ph.exit()); {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'); else {
ph.exit(1); 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>');
})); page.property('zoomFactor', 2); // pretty arbitrary
page.property('content',
'<head><link rel="stylesheet" href="' + json.css + '"></head>' +
'<body style="margin:0;">' + json.dom + '</body>');
} }