Allow generating other types of cards (ie 'character' and 'character-back')

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],
+             card: card,
-             props: Hero.props,
+           }];
-           };
+           if (card.back) { // TODO: a little hacky
-           return Array(card.count || 1).fill(cardWrapper);
+             cardWrapper.push({
+               type: cardType + '-back',
+               card: card.back,
+             });
+           }
+           return Array(card.count || 1).fill(cardWrapper).flat();
          }));
      },
 

src/Editor.vue

@@ -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 === 'image'" type="file" accept="image/*"
-          <input v-if="type === 'file'" 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>

src/template/hero/Hero.vue

@@ -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() {

src/template/hero/character-back.svg

@@ -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">
+  <foreignObject x="16" y="194" width="150" height="20" fill="#000000" font-family="'RedStateBlueState BB'" font-size="8px">
-    <tspan x="15.184497" y="195.27484">{ Text Here</tspan>
+    <div xmlns="http://www.w3.org/1999/xhtml" v-html="card.incapacitated"> </div>
-    <tspan x="15.184497" y="214.02484">{ Text Here</tspan>
+  </foreignObject>
-    <tspan x="15.184497" y="232.77484">{ Text Here</tspan>
-  </text>
 </svg>

src/template/hero/character.svg

@@ -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 x="12.953" y="93.105858" fill="#ffffff" font-family="'Armor Piercing'" font-size="29px" stroke="#000000"> {{card.hp }} </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 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>
-  <text id="hp" x="12.953" y="93.105858" fill="#ffffff" font-family="'Armor Piercing'" font-size="29px" stroke="#000000">00</text>
+  <foreignObject x="21.452999" y="222" width="137.06" height="14.694" font-family="'RedStateBlueState BB'" font-size="8px">
-  <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>
+    <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>

src/template/hero/deck.svg

@@ -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>
+    <text x="14.173298" y="24.167526" font-family="'CrashLanding BB'" font-size="23px"> {{ card.name }} </text>
-    <g v-if="keywords">
+    <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="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">- {{ quoteCitation }} </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 {{ artist }} </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>