Allow for other deck types

This commit is contained in:
Adam Goldsmith 2019-01-12 16:56:37 -05:00
parent 57f6b355cf
commit 170ea7b303
16 changed files with 145 additions and 212 deletions

40
src/Card.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<span @click="$emit('input', {card: card, props: props})">
<v-runtime-template :template="template"> </v-runtime-template>
</span>
</template>
<script>
import HTMLEmbed from './HTMLEmbed.vue';
import VRuntimeTemplate from "v-runtime-template";
import propTypes from './template/*/input.yaml';
import templates from './template/*/*.svg';
export default {
name: 'Card',
props: ['deckType', 'type', 'card'],
components: {VRuntimeTemplate, HTMLEmbed},
computed: {
props() {
return {count: 'number', ...propTypes[this.deckType][this.type]};
},
template() {
return templates[this.deckType][this.type]
.replace('<?xml version="1.0" encoding="UTF-8"?>\n', '');
},
},
}
</script>
<style>
.htmlEmbed {
line-height: .8em;
}
.htmlEmbed p {
margin-top: 0;
margin-bottom: .5em;
}
</style>

View File

@ -1,19 +1,20 @@
<template>
<div class="deck">
<div v-for="cardRow in chunkedCards">
<Hero v-for="card in cardRow" v-model="selected"
:type="card.type" :card="card.card"> </Hero>
<Card v-for="card in cardRow" v-model="selected"
:deckType="deckInfo.meta.type"
:type="card.type" :card="card.card"> </Card>
</div>
</div>
</template>
<script>
import Hero from './template/hero/Hero.vue'
import Card from './Card.vue'
export default {
name: 'Deck',
props: ['cards'],
components: {Hero},
props: ['deckInfo'],
components: {Card},
data() {
return {
@ -30,8 +31,8 @@
computed: {
allCards() {
return Object
.keys(this.cards)
.flatMap(cardType => this.cards[cardType].flatMap((card, index) => {
.keys(this.deckInfo.cards)
.flatMap(cardType => this.deckInfo.cards[cardType].flatMap((card, index) => {
let cardWrapper = [{
type: cardType,
card: card,

View File

@ -51,7 +51,7 @@
</div>
</div>
<Deck ref="deck" :cards="deckInfo.cards" v-model="selected"> </Deck>
<Deck ref="deck" :deckInfo="deckInfo" v-model="selected"> </Deck>
</div>
</template>

16
src/RawStringAsset.js Normal file
View File

@ -0,0 +1,16 @@
const { Asset } = require('parcel-bundler');
class RawStringAsset extends Asset {
constructor(filename, options) {
super(filename, options);
this.type = 'js';
}
parse(str) {
return JSON.stringify(str);
}
generate() {
return `module.exports = ${this.ast}`;
}
}
module.exports = RawStringAsset;

View File

@ -22,6 +22,7 @@ app.get('/decks.json', getDecksList);
app.post('/upload', handleUpload);
let bundler = new Bundler(path.join(__dirname, 'index.html'));
bundler.addAssetType('.svg', require.resolve('./RawStringAsset'));
app.use(bundler.middleware());
app.listen(port, () => console.log(`App listening on port ${port}!`));

View File

@ -320,10 +320,10 @@
<path d="m143.36 238.45h-127.38v-26.102h127.38z" fill="#94dc63" stroke="#000" stroke-miterlimit="10" stroke-width=".75"/>
<use transform="translate(15.453 211.51)" width="100%" height="100%" mask="url(#mask26)" xlink:href="#surface769"/>
<path d="m143.36 238.45h-127.38v-26.102h127.38z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.25"/>
<text id="name" x="14.177066" y="24.167519" width="100" fill="url(#linearGradient583)" font-family="'CrashLanding BB'" font-size="23px" stroke="#000000" stroke-width=".7">Header</text>
<image id="image" x="9.453" y="27.512" width="162" height="121" preserveAspectRatio="xMidYMid"/>
<text x="14.177066" y="24.167519" width="100" fill="url(#linearGradient583)" font-family="'CrashLanding BB'" font-size="23px" stroke="#000000" stroke-width=".7"> {{ card.name }} </text>
<image v-bind:xlink:href="card.art" x="9.453" y="27.512" width="162" height="121" preserveAspectRatio="xMidYMid"/>
<path d="m171.5 27.502h-162v121.59h162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<g id="keywordBox" transform="translate(-11.547,-6.4883)" font-family="'RedStateBlueState BB'">
<g v-if="card.keywords" transform="translate(-11.547,-6.4883)" font-family="'RedStateBlueState BB'">
<g clip-path="url(#clip90)">
<path d="m138.51 151.36h-108.41v12.805h108.41zm-0.75 12.055h-106.91v-11.305h106.91z"/>
</g>
@ -331,18 +331,16 @@
<path d="m137.76 163.41h-106.91v-11.305h106.91z" fill="#4fb84a"/>
<use transform="translate(30,152)" width="100%" height="100%" mask="url(#mask35)" xlink:href="#surface823"/>
</g>
<text id="keywords" x="84" y="160" font-size="11.696px" font-weight="bold" text-anchor="middle">
<tspan>Keywords</tspan>
</text>
<text x="84" y="160" font-size="11.696px" font-weight="bold" text-anchor="middle"> {{ card.keywords }} </text>
</g>
<text id="text" x="15.453" y="163.5117" width="152" height="50" fill="#000000" font-family="'RedStateBlueState BB'" font-size="10px" xml:space="preserve"><tspan>Text Here</tspan></text>
<text id="flavor" x="18.452999" y="219.5117" width="123" height="19" fill="#000000" font-family="'RedStateBlueState BB'" font-size="6px" font-style="italic">
<tspan>Text Here</tspan>
</text>
<text id="artist" x="168.59091" y="247.55464" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end">
<tspan>art by</tspan>
</text>
<g id="hpMark" transform="translate(-11.547,-6.4883)">
<foreignObject x="15.453" y="163.5117" width="152" height="50" fill="#000000" font-family="'RedStateBlueState BB'" font-size="10px" xml:space="preserve">
<div xmlns="http://www.w3.org/1999/xhtml" v-html="card.text"> Text Here </div>
</foreignObject>
<foreignObject x="18.452999" y="219.5117" width="123" height="19" fill="#000000" font-family="'RedStateBlueState BB'" font-size="6px" font-style="italic">
<div xmlns="http://www.w3.org/1999/xhtml" v-html="card.flavor"> Flavor Text Here </div>
</foreignObject>
<text x="168.59091" y="247.55464" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end"> Art By {{ card.artist }} </text>
<g v-if="card.hp" transform="translate(-11.547,-6.4883)">
<g clip-path="url(#clip155)">
<g clip-path="url(#clip156)">
<path d="m183.05 15.988h-46.879v39.898h46.879z" fill="url(#linearGradient585)"/>
@ -358,6 +356,6 @@
<g clip-path="url(#clip162)">
<path transform="translate(183.05,15.988)" d="m0.0014562-3.205e-5h-34.301" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
</g>
<text id="hp" x="165.95107" y="37.060463" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle" xml:space="preserve">3</text>
<text x="165.95107" y="37.060463" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle" xml:space="preserve"> {{ card.hp }} </text>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 278 KiB

After

Width:  |  Height:  |  Size: 278 KiB

View File

@ -1,20 +0,0 @@
{
"cardTypes": {
"deck": {
"meta": ["count"],
"inputs": {
"name": "text",
"keywords": "text",
"text": "textarea",
"flavor": "textarea",
"artist": "text",
"hp": "number",
"image": "image"
},
"hide": {
"hpMark": "hp",
"keywordBox": "keywords"
}
}
}
}

View File

@ -0,0 +1,8 @@
deck:
name: text
art: image
hp: number
keywords: text
text: textarea
flavor: textarea
artist: text

View File

@ -1,67 +0,0 @@
<template>
<span @click="$emit('input', {card: card, props: props})">
<v-runtime-template :template="template">
</v-runtime-template>
</span>
</template>
<script>
import fs from 'fs';
import HTMLEmbed from './HTMLEmbed.vue';
import VRuntimeTemplate from "v-runtime-template";
let propTypes = {
character: {
hp: "number",
power: "text",
art: "image",
powerText: "textarea"
},
"character-back": {
incapacitated: "textarea"
},
deck: {
name: "text",
hp: "number",
art: "image",
keywords: "text",
text: "textarea",
quote: "textarea",
quoteCitation: "text",
artist: "text"
}
};
const templates = {
'character': fs.readFileSync(__dirname + '/character.svg', 'utf8'),
'character-back': fs.readFileSync(__dirname + '/character-back.svg', 'utf8'),
'deck': fs.readFileSync(__dirname + '/deck.svg', 'utf8'),
}
export default {
name: 'HeroCharacter',
props: ['type', 'card'],
components: {VRuntimeTemplate, HTMLEmbed},
data() {
return {
props: {count: 'number',
...propTypes[this.type]},
}
},
computed: {
template() {
return templates[this.type]
.replace('<?xml version="1.0" encoding="UTF-8"?>\n', '');
},
},
}
</script>
<style>
.htmlEmbed p {
margin-top: 0;
margin-bottom: .5em;
}
</style>

View File

@ -1,32 +0,0 @@
{
"cardTypes": {
"character": {
"back": {
"inputs": {
"incapacitated": "text"
}
},
"inputs": {
"hp": "number",
"power": "text",
"powerText": "textarea"
}
},
"deck": {
"inputs": {
"name": "text",
"hp": "number",
"image": "image",
"keywords": "text",
"text": "textarea",
"quote": "textarea",
"quoteCitation": "text",
"artist": "text"
},
"hide": {
"hpMark": "hp",
"keywordBox": "keywords"
}
}
}
}

View File

@ -0,0 +1,16 @@
character:
hp: number
power: text
art: image
powerText: textarea
character-back:
incapacitated: textarea
deck:
name: text
hp: number
art: image
keywords: text
text: textarea
quote: textarea
quoteCitation: text
artist: text

View File

@ -14,9 +14,9 @@
<path d="m111.53 226.71h-81.75v-8.5h81.75z" fill="#ebe130" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10"/>
<path d="m154 208.87c-6.6953 0-12.145 5.4492-12.145 12.145s5.4492 12.148 12.145 12.148c6.6953 0 12.145-5.4531 12.145-12.148s-5.4492-12.145-12.145-12.145m0 0.24219c6.5703 0 11.898 5.3281 11.898 11.902s-5.3281 11.902-11.898 11.902c-6.5742 0-11.902-5.3281-11.902-11.902s5.3281-11.902 11.902-11.902"/>
<use transform="matrix(.044443 0 0 .044443 140.66 207.66)" width="100%" height="100%" mask="url(#mask0)" xlink:href="#image404"/>
<text id="title" x="89.850975" y="235.60347" fill="#000000" font-family="'RedStateBlueState BB'" font-size="11px" font-style="italic" text-align="center" text-anchor="middle">Villain Title</text>
<text x="58.169796" y="225.06613" fill="#000000" font-family="'RedStateBlueState BB'" font-size="10px" font-style="italic">villain</text>
<text id="name" transform="scale(.98507 1.0152)" x="14.22963" y="42.862007" fill="#000000" font-family="'Armor Piercing'" font-size="28.676px" stroke-width=".98507">Villain Name</text>
<text id="hp" x="155.13855" y="43.5117" fill="#ffffff" font-family="'Armor Piercing'" font-size="30px" stroke="#000000" stroke-width=".75" text-align="center" text-anchor="middle">000</text>
<text id="artist" x="168.59201" y="247.54639" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end">Art By</text>
<text x="89.850975" y="235.60347" fill="#000000" font-family="'RedStateBlueState BB'" font-size="11px" font-style="italic" text-align="center" text-anchor="middle"> {{ card.title }} </text>
<text x="58.169796" y="225.06613" fill="#000000" font-family="'RedStateBlueState BB'" font-size="10px" font-style="italic"> villain </text>
<text transform="scale(.98507 1.0152)" x="14.22963" y="42.862007" fill="#000000" font-family="'Armor Piercing'" font-size="28.676px" stroke-width=".98507"> {{ card.name }} </text>
<text x="155.13855" y="43.5117" fill="#ffffff" font-family="'Armor Piercing'" font-size="30px" stroke="#000000" stroke-width=".75" text-align="center" text-anchor="middle"> {{ card.hp }} </text>
<text x="168.59201" y="247.54639" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end"> {{ card.artist }} </text>
</svg>

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -285,7 +285,7 @@
<path d="m0.503 252.5h180v-252h-180z" stroke="#000" stroke-miterlimit="10"/>
<path d="m9.503 243.5h162v-234h-162z" fill="#fff" stroke="#000" stroke-miterlimit="10"/>
<path d="m171.5 27.502h-162v121.59h162z" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<image id="image" x="10" y="29" width="162px" height="121px" preserveAspectRatio="xMidYMid"/>
<image v-bind:xlink:href="card.art" x="10" y="29" width="162px" height="121px" preserveAspectRatio="xMidYMid"/>
<path d="m171.5 217.03h-162v-67.938h162z" fill="#e6e1ba" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<use transform="translate(9.449 148.51)" width="100%" height="100%" mask="url(#mask32)" xlink:href="#surface1165"/>
<path d="m171.5 217.03h-162v-67.938h162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
@ -323,22 +323,22 @@
<path d="m171.5 27.502h-162v121.59h162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<path d="m171.5 9.4997v14.668" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<path d="m171.5 9.4997h-34.301" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<text id="name" x="14.173298" y="24.167526" font-family="'CrashLanding BB'" font-size="23px">Header</text>
<g id="keywordBox">
<text x="14.173298" y="24.167526" font-family="'CrashLanding BB'" font-size="23px"> {{ card.name }} </text>
<g v-if="card.keywords">
<path d="m126.21 156.92h-106.91v-11.305h106.91z" fill="#e11c1c"/>
<use transform="translate(18.449 145.51)" width="100%" height="100%" mask="url(#mask44)" xlink:href="#surface1237"/>
<path d="m126.96 144.87h-108.41v12.805h108.41zm-0.75 12.055h-106.91v-11.305h106.91z"/>
<text id="keywords" x="21.05547" y="154.41197" font-family="'RedStateBlueState BB'" font-size="11.5px" font-weight="bold">Keywords</text>
<text x="21.05547" y="154.41197" font-family="'RedStateBlueState BB'" font-size="11.5px" font-weight="bold"> {{ card.keywords }} </text>
</g>
<text id="text" x="14.5" y="165.175" width="152" height="48.5" font-family="'RedStateBlueState BB'" font-size="8.7px">Text Here</text>
<text id="quote" x="72.514046" y="221.9552" font-family="'RedStateBlueState BB'" font-size="6.8px" font-style="italic" text-align="center" text-anchor="middle">"Type Quote Here!"</text>
<text id="quoteCitation" x="101.80201" y="229.85782" font-family="'RedStateBlueState BB'" font-size="5.8px" text-align="end" text-anchor="end">- Name, Comic #</text>
<text id="artist" x="168.4621" y="247.85452" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end">Art By</text>
<g id="hpMark" transform="translate(-375.55 -6.4883)" style="">
<HTMLEmbed x="14.5" y="165.175" width="152" height="48.5" font-family="'RedStateBlueState BB'" font-size="8.7px" :html="card.text"> </HTMLEmbed>
<text x="72.514046" y="221.9552" font-family="'RedStateBlueState BB'" font-size="6.8px" font-style="italic" text-align="center" text-anchor="middle"> {{ card.quote }} </text>
<text x="101.80201" y="229.85782" font-family="'RedStateBlueState BB'" font-size="5.8px" text-align="end" text-anchor="end"> {{ card.quoteCitation }} </text>
<text x="168.4621" y="247.85452" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end"> Art By {{ card.artist }} </text>
<g v-if="card.hp" transform="translate(-375.55 -6.4883)" style="">
<path d="m547.05 15.988h-46.879v39.898h46.879z" clip-path="url(#clip174-7)" fill="url(#linear6)"/>
<path d="m547.05 15.988h-29.047l-17.832 3.8359 16.25 5.9336-14.375 8.5625 13.312-0.25-9.5 13.379 15.312-8.2539-8.25 15.941 13.875-13.004 5.0625 13.754 7.125-19.379 6.9375 4.3125-3.0898-9.9141 4.2188-0.25z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width=".8"/>
<path d="m547.05 15.988v14.668" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<path d="m547.05 15.988h-34.301" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
<text id="hp" x="529.58063" y="36.929356" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle" xml:space="preserve">3</text>
<text x="529.58063" y="36.929356" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle" xml:space="preserve"> {{ card.hp }} </text>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 316 KiB

View File

@ -1,55 +0,0 @@
{
"cardTypes": {
"character": {
"back": {
"template": "character",
"inputs": {
"name": "text",
"hp": "number",
"title": "text"
}
},
"inputs": {
"name": "text",
"hp": "number",
"title": "text"
}
},
"instructions": {
"back": {
"template": "instructions",
"inputs": {
"name": "text",
"title": "text",
"gameplay": "textarea"
},
"hide": {
"setupBox": "setup"
}
},
"inputs": {
"name": "text",
"title": "text",
"setup": "textarea",
"gameplay": "textarea",
"advanced": "textarea"
}
},
"deck": {
"inputs": {
"name": "text",
"hp": "number",
"image": "image",
"keywords": "text",
"text": "textarea",
"quote": "textarea",
"quoteCitation": "text",
"artist": "text"
},
"hide": {
"hpMark": "hp",
"keywordBox": "keywords"
}
}
}
}

View File

@ -0,0 +1,27 @@
character:
name: text
hp: number
title: text
character-back:
name: text
hp: number
title: text
instructions:
name: text
title: text
setup: textarea
gameplay: textarea
advanced: textarea
instructions-back:
name: text
title: text
gameplay: textarea
deck:
name: text
hp: number
art: image
keywords: text
text: textarea
quote: textarea
quoteCitation: text
artist: text