adam/SotM_Playfield
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Editor: hide things as per input JSON

Browse Source
This commit is contained in:
Adam Goldsmith 2017-10-09 00:46:58 -04:00
parent 8d511a18be
commit 6ed9667dfb
2 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/editor.js
View File

@ -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 =>
wrapSVGText(cardSVG.querySelector('#' + prop), String(card[prop] || "")));
Object.keys(cardInputTemplate.inputs).forEach(
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() {

45
template/environment/deck.svg
View File

@ -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"/>
<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 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>
<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,18 +351,18 @@
</g>
</g>
<use transform="translate(135,15)" width="100%" height="100%" mask="url(#mask44)" xlink:href="#surface867"/>
<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>
<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>
<g clip-path="url(#clip161)">
<path transform="translate(183.05 15.988)" d="m0.0014562-3.205e-5v14.668" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
</g>
<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>
<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 clip-path="url(#clip161)">
<path transform="translate(183.05 15.988)" d="m0.0014562-3.205e-5v14.668" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
</g>
<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>
<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>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 276 KiB

After

Width:  |  Height:  |  Size: 276 KiB