Editor: hide things as per input JSON

js/editor.js

@@ -142,8 +142,16 @@ function makeCardSVG(deck, cardInputTemplate, templateSVG, card) {
     selected = {svg: cardSVG, json: card};
     setForm(cardInputTemplate, card);
   }, true);
-  Object.keys(cardInputTemplate.inputs).forEach(prop =>
+  Object.keys(cardInputTemplate.inputs).forEach(
-    wrapSVGText(cardSVG.querySelector('#' + prop), String(card[prop] || "")));
+    prop => wrapSVGText(cardSVG.querySelector('#' + prop), String(card[prop] || "")));
+  Object.entries(cardInputTemplate.hide).forEach(hidable => {
+    if (hidable[1] in card) {
+      cardSVG.querySelector('#' + hidable[0]).setAttribute('display', '');
+    }
+    else {
+      cardSVG.querySelector('#' + hidable[0]).setAttribute('display', 'none');
+    }
+  });
 }
 
 function upload() {

template/environment/deck.svg

@@ -324,21 +324,26 @@
   <use transform="translate(27,218)" width="100%" height="100%" mask="url(#mask26)" xlink:href="#surface769"/>
   <path transform="translate(102.05 132.99)" d="m52.857 111.95h-127.38v-26.102h127.38z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.25"/>
   <path transform="matrix(1,0,0,-1,0,774)" d="m183.05 740.01h-162v-121.59h162z" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
+
+  <text id="name" x="25.724066" y="30.655819" fill="url(#linear8)" font-family="'CrashLanding BB'" font-size="23px" width="100px" stroke="#000000" stroke-width=".7">Header</text>
+  <image x="25.724066" y="30.655819" width="100px" height="100px" id="image"/>
+
+  <g fill="#000000" font-family="'RedStateBlueState BB'">
+    <g id="keywordBox">
+      <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>
       <g clip-path="url(#clip87)">
         <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>
-  <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>
-  <text id="name" x="25.724066" y="30.655819" fill="url(#linear8)" font-family="'CrashLanding BB'" font-size="23px" width="100px" stroke="#000000" stroke-width=".7">Header</text>
-  <image x="25.724066" y="30.655819" width="100px" height="100px" id="image"/>
-  <g fill="#000000" font-family="'RedStateBlueState BB'">
       <text id="keywords" x="84" y="160" text-anchor="middle" font-size="11.696px" font-weight="bold"> <tspan>Keywords</tspan> </text>
+    </g>
     <text id="text" x="27" y="170" font-size="10px" width="152px" height="50px" xml:space="preserve"> <tspan>Text Here</tspan> </text>
     <text id="flavor" x="30px" y="226px" font-size="6px" width="123px" height="19px" font-style="italic"> <tspan>Text Here</tspan> </text>
     <text id="artist" x="180.13791" y="254.04294" fill="#ffffff" font-size="5.3px" text-align="end" text-anchor="end"> <tspan>art by</tspan> </text>
   </g>
+
   <g id="hpMark">
     <g clip-path="url(#clip155)">
       <g clip-path="url(#clip156)">
@@ -346,7 +351,7 @@
       </g>
     </g>
     <use transform="translate(135,15)" width="100%" height="100%" mask="url(#mask44)" xlink:href="#surface867"/>
-<g>
+    <g>
       <g clip-path="url(#clip160)">
         <path transform="translate(183.05 15.988)" d="m0.0014562-3.205e-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="none" stroke="#000" stroke-miterlimit="10" stroke-width=".8"/>
       </g>
@@ -356,8 +361,8 @@
       <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>
-</g>
+    </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 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>
-</g>
+  </g>
 </g>
 </svg>