Allow for other deck types

src/Card.vue

@@ -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>

src/Deck.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="deck">
     <div v-for="cardRow in chunkedCards">
-      <Hero v-for="card in cardRow" v-model="selected"
+      <Card v-for="card in cardRow" v-model="selected"
-            :type="card.type" :card="card.card"> </Hero>
+            :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'],
+   props: ['deckInfo'],
-   components: {Hero},
+   components: {Card},
 
    data() {
      return {
@@ -30,8 +31,8 @@
    computed: {
      allCards() {
        return Object
-         .keys(this.cards)
+         .keys(this.deckInfo.cards)
-         .flatMap(cardType => this.cards[cardType].flatMap((card, index) => {
+         .flatMap(cardType => this.deckInfo.cards[cardType].flatMap((card, index) => {
            let cardWrapper = [{
              type: cardType,
              card: card,

src/Editor.vue

@@ -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>
 

src/RawStringAsset.js

@@ -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;

src/server.js

@@ -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}!`));

src/template/environment/deck.svg

@@ -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>
+  <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 id="image" x="9.453" y="27.512" width="162" height="121" preserveAspectRatio="xMidYMid"/>
+  <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">
+    <text x="84" y="160" font-size="11.696px" font-weight="bold" text-anchor="middle"> {{ card.keywords }} </text>
-      <tspan>Keywords</tspan>
-    </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>
+  <foreignObject x="15.453" y="163.5117" width="152" height="50" fill="#000000" font-family="'RedStateBlueState BB'" font-size="10px" xml:space="preserve">
-  <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">
+    <div xmlns="http://www.w3.org/1999/xhtml" v-html="card.text"> Text Here </div>
-    <tspan>Text Here</tspan>
+  </foreignObject>
-  </text>
+  <foreignObject x="18.452999" y="219.5117" width="123" height="19" fill="#000000" font-family="'RedStateBlueState BB'" font-size="6px" font-style="italic">
-  <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">
+    <div xmlns="http://www.w3.org/1999/xhtml" v-html="card.flavor"> Flavor Text Here </div>
-    <tspan>art by</tspan>
+  </foreignObject>
-  </text>
+  <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 id="hpMark" transform="translate(-11.547,-6.4883)">
+  <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>

src/template/environment/input.json

@@ -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"
-      }
-    }
-  }
-}

src/template/environment/input.yaml

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

src/template/hero/Hero.vue

@@ -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>

src/template/hero/input.json

@@ -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"
-      }
-    }
-  }
-}

src/template/hero/input.yaml

@@ -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

src/template/villain/character.svg

@@ -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="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 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 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 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 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 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="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>

src/template/villain/deck.svg

@@ -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>
+  <text x="14.173298" y="24.167526" font-family="'CrashLanding BB'" font-size="23px"> {{ card.name }} </text>
-  <g id="keywordBox">
+  <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>
+  <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 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 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 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 x="101.80201" y="229.85782" font-family="'RedStateBlueState BB'" font-size="5.8px" text-align="end" text-anchor="end"> {{ card.quoteCitation }} </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>
+  <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 id="hpMark" transform="translate(-375.55 -6.4883)" style="">
+  <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>

src/template/villain/input.json

@@ -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"
-      }
-    }
-  }
-}

src/template/villain/input.yaml

@@ -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