Allow generating other types of cards (ie 'character' and 'character-back')
This commit is contained in:
parent
c414f096cf
commit
a4bd5f0605
27
src/Deck.vue
27
src/Deck.vue
@ -15,17 +15,34 @@
|
||||
props: ['cards'],
|
||||
components: {Hero},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selected() {
|
||||
this.$emit('input', this.selected);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
allCards() {
|
||||
return Object
|
||||
.keys(this.cards)
|
||||
.flatMap(cardType => this.cards[cardType].flatMap((card, index) => {
|
||||
let cardWrapper = {
|
||||
let cardWrapper = [{
|
||||
type: cardType,
|
||||
card: this.cards[cardType][index],
|
||||
props: Hero.props,
|
||||
};
|
||||
return Array(card.count || 1).fill(cardWrapper);
|
||||
card: card,
|
||||
}];
|
||||
if (card.back) { // TODO: a little hacky
|
||||
cardWrapper.push({
|
||||
type: cardType + '-back',
|
||||
card: card.back,
|
||||
});
|
||||
}
|
||||
return Array(card.count || 1).fill(cardWrapper).flat();
|
||||
}));
|
||||
},
|
||||
|
||||
|
||||
@ -42,10 +42,10 @@
|
||||
<button class="close-editor" @click="selected = null">X</button>
|
||||
<div v-for="(type, prop) in selected.props">
|
||||
<label> {{ prop }}
|
||||
<input v-if="type === Number" v-model="selected.card[prop]"/>
|
||||
<input v-if="type === 'file'" type="file" accept="image/*"
|
||||
<input v-if="type === 'image'" type="file" accept="image/*"
|
||||
@change="fileUploaded(prop, $event)" />
|
||||
<textarea v-else rows="1" v-model="selected.card[prop]"> </textarea>
|
||||
<textarea v-else-if="type === 'textarea'" v-model="selected.card[prop]"> </textarea>
|
||||
<input v-else :type="type" v-model="selected.card[prop]"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,36 @@
|
||||
<template>
|
||||
<v-runtime-template :template="template"> </v-runtime-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 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'),
|
||||
@ -14,7 +39,7 @@
|
||||
|
||||
export default {
|
||||
name: 'HeroCharacter',
|
||||
props: ['name', 'hp', 'keywords', 'text', 'quote', 'quoteCitation', 'artist'],
|
||||
props: ['type', 'card'],
|
||||
components: {VRuntimeTemplate},
|
||||
|
||||
data() {
|
||||
|
||||
@ -4,9 +4,7 @@
|
||||
<path d="m9.498 243.5h162v-234h-162z" fill="#fff" stroke="#000" stroke-miterlimit="10"/>
|
||||
<path d="m9.5 243.5h162v-234h-162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path d="m168.08 239.87h-154.91v-52.371h154.91z" fill="#cfd1d4" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10"/>
|
||||
<text id="incapacitated" x="15.184497" y="195.27484" fill="#000000" font-family="'RedStateBlueState BB'" font-size="8px">
|
||||
<tspan x="15.184497" y="195.27484">{ Text Here</tspan>
|
||||
<tspan x="15.184497" y="214.02484">{ Text Here</tspan>
|
||||
<tspan x="15.184497" y="232.77484">{ Text Here</tspan>
|
||||
</text>
|
||||
<foreignObject x="16" y="194" width="150" height="20" fill="#000000" font-family="'RedStateBlueState BB'" font-size="8px">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" v-html="card.incapacitated"> </div>
|
||||
</foreignObject>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 845 B After Width: | Height: | Size: 760 B |
@ -9,7 +9,7 @@
|
||||
</defs>
|
||||
<path d="m0.501 252.5h180v-252h-180z" stroke="#000"/>
|
||||
<path d="m9.501 243.5h162v-234h-162z" fill="#fff" stroke="#000" stroke-miterlimit="10"/>
|
||||
<image id="art" x="10.453" y="10.34" width="160.08" height="232.32" preserveAspectRatio="xMidYMid"/>
|
||||
<image v-bind:xlink:href="card.art" x="10.453" y="10.34" width="160.08" height="232.32" preserveAspectRatio="xMidYMid"/>
|
||||
<path d="m9.504 243.5h162v-234h-162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<path d="m162 240.04h-143.5v-28.039h143.5z" fill="#cfd1d4" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10"/>
|
||||
<use transform="matrix(.044443 0 0 .044443 140.66 198.67)" width="100%" height="100%" mask="url(#mask0)" xlink:href="#image607"/>
|
||||
@ -26,8 +26,10 @@
|
||||
<path d="m26.301 21.242h-0.81641l-0.39844-2.9102v2.9102h-0.81641v-6.4844h0.88281l0.33203 2.2812v-2.2812h0.81641z"/>
|
||||
<path d="m28.453 21.242h-1.6094v-6.4844h1.6094v0.65625h-0.78906v1.6992h0.78906v0.65234h-0.78906v2.8008h0.78906z"/>
|
||||
<path d="m30.672 21.242h-1.6094v-6.4844h0.81641v5.8086h0.79297z"/>
|
||||
<text id="power" x="90.2556" y="220.35289" font-family="'RedStateBlueState BB'" font-size="10px" font-style="italic" text-align="center" text-anchor="middle">Power name</text>
|
||||
<text id="powerText" x="21.452999" y="227.5" width="137.06" height="14.694" font-family="'RedStateBlueState BB'" font-size="8px">Power: Text Here</text>
|
||||
<text id="hp" x="12.953" y="93.105858" fill="#ffffff" font-family="'Armor Piercing'" font-size="29px" stroke="#000000">00</text>
|
||||
<text id="artist" x="168.46541" y="247.8423" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end">Art By</text>
|
||||
<text x="12.953" y="93.105858" fill="#ffffff" font-family="'Armor Piercing'" font-size="29px" stroke="#000000"> {{card.hp }} </text>
|
||||
<text x="90.2556" y="220.35289" font-family="'RedStateBlueState BB'" font-size="10px" font-style="italic" text-align="center" text-anchor="middle"> {{ card.power }} </text>
|
||||
<foreignObject x="21.452999" y="222" width="137.06" height="14.694" font-family="'RedStateBlueState BB'" font-size="8px">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" v-html="card.powerText"> Power Text </div>
|
||||
</foreignObject>
|
||||
<text x="168.46541" y="247.8423" fill="#ffffff" font-family="'RedStateBlueState BB'" font-size="5.3px" text-align="end" text-anchor="end">Art By {{ card.artist }} </text>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
@ -310,23 +310,23 @@
|
||||
<path d="m133.05 234.55c-7.6094 4.4883-21.801 7.2969-31.816 8.4258h-56.82c-17.391-2.0781-28.762-5.7461-34.582-10.348l4e-3 -9.8086c7.7344-6.6289 31.883-12.094 62.988-12.094 36.301 0 65.734 7.6094 65.734 17 0 0.36719-0.13672 1.0977-0.13672 1.0977 10.293 1.4922 9.9648 10.367 9.9648 10.367-7.5196-7.125-15.336-4.6406-15.336-4.6406z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.25"/>
|
||||
<path d="m171.5 27.502h-162v121.59h162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
|
||||
<g font-family="'RedStateBlueState BB'">
|
||||
<text x="14.173298" y="24.167526" font-family="'CrashLanding BB'" font-size="23px"> {{ name }} </text>
|
||||
<g v-if="keywords">
|
||||
<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="#f8c711"/>
|
||||
<use transform="translate(18.45,145.7) matrix(.68531 0 0 .70654 .85059 .10938)" width="100%" height="100%" mask="url(#f)" xlink:href="#l"/>
|
||||
<path d="m126.96 144.87h-108.41v12.805h108.41zm-0.75 12.055h-106.91v-11.305h106.91z"/>
|
||||
<text x="21.05547" y="154.41197" font-size="11.5px" font-weight="bold"> {{ keywords }} </text>
|
||||
<text x="21.05547" y="154.41197" font-size="11.5px" font-weight="bold"> {{ card.keywords }} </text>
|
||||
</g>
|
||||
<g v-if="hp">
|
||||
<g v-if="card.hp">
|
||||
<path d="m171.5 9.5h-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="url(#k)" stroke="#000" stroke-width=".8"/>
|
||||
<text x="154.03" y="30.44" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle"> {{ hp }} </text>
|
||||
<text x="154.03" y="30.44" fill="#000000" font-family="'CrashLanding BB'" font-size="35px" text-align="center" text-anchor="middle"> {{ card.hp }} </text>
|
||||
</g>
|
||||
<image id="image" x="21" y="34" width="162px" height="121px" preserveAspectRatio="xMidYMid"/>
|
||||
<image v-bind:xlink:href="card.art" x="21" y="34" width="162px" height="121px" preserveAspectRatio="xMidYMid"/>
|
||||
<foreignObject x="14.5" y="160" width="152" height="48.5" font-family="'RedStateBlueState BB'" font-size="8.7px">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" v-html="text"> {{ text }} </div>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" v-html="card.text"> Text Here </div>
|
||||
</foreignObject>
|
||||
<text x="72.514046" y="222" font-size="6.8px" font-style="italic" text-align="center" text-anchor="middle"> {{ quote }} </text>
|
||||
<text x="101.80201" y="230" font-size="5.8px" text-align="end" text-anchor="end">- {{ 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 {{ artist }} </text>
|
||||
<text x="72.514046" y="222" font-size="6.8px" font-style="italic" text-align="center" text-anchor="middle"> {{ card.quote }} </text>
|
||||
<text x="101.80201" y="230" 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>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 314 KiB After Width: | Height: | Size: 314 KiB |
Loading…
Reference in New Issue
Block a user