This commit is contained in:
Kyle
2018-11-25 14:01:14 -08:00
parent e51c86287a
commit 9077f1ef56
20 changed files with 107 additions and 87 deletions

View File

@@ -26,10 +26,7 @@ var ptFont = "bold 48px matrix"
var ptFontSpacing = "0.3px"
var ptTextX = 626
var ptTextY = 936
var ptX = 541
var ptY = 920.5
var ptWidth = 162
var ptHeight = 84
imgBorderCreature.imgValues(541, 920.5, 162, 84)
var infoY = 956
@@ -52,11 +49,7 @@ finishTemplate()
var uniqueFunctionName = "bottomInfo8th"
function bottomInfo8th() {
if (document.getElementById("checkboxArtistColor").checked == true) {
card.fillStyle = "black"
} else {
card.fillStyle = "white"
}
card.fillStyle = document.getElementById("inputInfoColor").value
canvas.style.letterSpacing = "1px"
card.font = "25px matrixb"
card.fillText(document.getElementById("inputArtist").value, 116, infoY)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@@ -6,6 +6,9 @@ imgFrameMask.src = borderPath + "frameMask.png"
imgLegendFrameMask.src = borderPath + "legendFrameMask.png"
imgRareStampMask.src = borderPath + "rareStampMask.png"
imgBorderMask.src = borderPath + "borderMask.png"
imgRulesMask.src = borderPath + "rulesMask.png"
imgTypeMask.src = borderPath + "typeMask.png"
imgTitleMask.src = borderPath + "titleMask.png"
//Card Title
var titleFont = "40px belerenb" //40
var titleFontSpacing = "0.15px" //0.15

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -30,10 +30,7 @@ var ptFont = "32px belerenb"
var ptFontSpacing = "0.3px"
var ptTextX = 635
var ptTextY = 933
var ptX = 560
var ptY = 920
var ptWidth = 150
var ptHeight = 70
imgBorderCreature.imgValues(560, 920, 150, 70)
//Bottom Info
var infoY = 993
//Set Symbol

View File

@@ -58,11 +58,7 @@ finishTemplate()
var uniqueFunctionName = "bottomInfoPlanechase"
function bottomInfoPlanechase() {
card.textAlign = "left"
if (document.getElementById("checkboxArtistColor").checked == true) {
card.fillStyle = "black"
} else {
card.fillStyle = "white"
}
card.fillStyle = document.getElementById("inputInfoColor").value
var bottomLineFirst = document.getElementById("inputNumber").value + " " + document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
var bottomLineSecond
if (document.getElementById("inputInfo").value != "") {
@@ -78,7 +74,8 @@ function bottomInfoPlanechase() {
canvas.style.letterSpacing = cardWidth * -0.0002 + "px" //-0.2
card.font = "16px matrixbsc" //16
var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
card.mask("imgArtistBrush,source-over;" + card.fillStyle + ",source-in", cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134)
imgArtistBrush.imgValues(cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134)
card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle)
card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9400) //18, 704
//Left and Right side
canvas.style.letterSpacing = "0px"

View File

@@ -9,6 +9,7 @@ imgBorderMask.src = borderPath + "borderMask.png"
imgAbilityLineOdd.src = borderPath + "abilityLineOdd.png"
imgAbilityLineEven.src = borderPath + "abilityLineEven.png"
document.getElementById("textSize").value = 33
document.getElementById("inputCreatureColor").value = "#ffffff"
//Card Title
var titleFont = "40px belerenb" //40
var titleFontSpacing = "-0.1px" //-0.1
@@ -34,10 +35,7 @@ var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 655 //655
var ptTextY = 935 //935
var ptX = 598 //598
var ptY = 920 //920
var ptWidth = 118 //1318
var ptHeight = 75 //75
imgBorderCreature.imgValues(598, 920, 118, 75)
//Bottom Info
var infoY = 993 //993
//Set Symbol

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

View File

@@ -23,7 +23,7 @@ var borderCanvas = document.createElement("canvas")
var border = borderCanvas.getContext("2d")
//load template images (images that may change based off of the selected template)
var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask", "abilityLineOdd", "abilityLineEven"]
var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask", "abilityLineOdd", "abilityLineEven", "rulesMask", "typeMask", "titleMask"]
for (var i = 0; i < imgListTemplate.length; i ++) {
var imgName = "img" + imgListTemplate[i].charAt(0).toUpperCase() + imgListTemplate[i].slice(1)
window[imgName] = new Image()
@@ -67,7 +67,7 @@ for (var i = 0; i < imgListUser.length; i ++) {
}
//Load static images
var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
var imgListStatic = ["artistBrush", "foil", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
for (var i = 0; i < imgListStatic.length; i ++) {
var imgName = "img" + imgListStatic[i].charAt(0).toUpperCase() + imgListStatic[i].slice(1)
window[imgName] = new Image()
@@ -93,7 +93,7 @@ loadScript("data/borders/defaultBorder.js")
loadSetSymbol()
//Randomize the sample cards at the bottom
randomizeSampleCards(8)
randomizeSampleCards(9)
//Set up the initial clock!
var cardClockInterval
@@ -293,7 +293,9 @@ function createBorder() {
border.mask("imgMultiGradient,source-over;imgLegendFrameMask,source-in", imgSecondBorderLegendary)
}
//redraws the custom-color border to match the legendary frame
border.mask("imgLegendFrameMask,source-over;imgBorderMask,source-out", "none", document.getElementById("inputColor").value)
if (document.getElementById("checkboxBorderless").checked != true) {
border.mask("imgLegendFrameMask,source-over;imgBorderMask,source-out", "none", document.getElementById("inputColor").value)
}
//redraws the silver border usually on un-cards to match the legendary frame
if (document.getElementById("checkboxSilverBorder").checked == true) {
border.mask("imgLegendFrameMask,source-over;imgBorderMask,source-out", "none", "#a3aeb7")
@@ -339,6 +341,21 @@ function createBorder() {
titleRightShift = 0
}
}
//CLEAR ANYTHING UNWANTED
border.globalCompositeOperation = "destination-out"
if (document.getElementById("checkboxRulesVisibility").checked == false && imgRulesMask.width > 0) {
border.drawImage(imgRulesMask, 0, 0, cardWidth, cardHeight)
}
if (document.getElementById("checkboxTypeVisibility").checked == false && imgTypeMask.width > 0) {
border.drawImage(imgTypeMask, 0, 0, cardWidth, cardHeight)
}
if (document.getElementById("checkboxTitleVisibility").checked == false && imgTitleMask.width > 0) {
border.drawImage(imgTitleMask, 0, 0, cardWidth, cardHeight)
}
// if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true && document.getElementById("checkboxBorderless").checked == true && document.getElementById("checkboxSilverBorder").checked == false) {
// border.drawImage(imgBorderMask, 0, 0, cardWidth, cardHeight)
// }
border.globalCompositeOperation = "source-over"
//COLOR IDENTITY
if (document.getElementById("checkboxIdentity").checked == true) {
var identityList = document.getElementById("inputIdentity").value.toLowerCase().split(" ")
@@ -405,12 +422,12 @@ function createBorder() {
imgBorderRareStamp.imgValues(329, rareStampY - 15, 90, 50, "imgSecondBorderRareStamp,imgRareStampMask")
border.mask("imgCardMask,source-over", imgBorderRareStamp)
if (document.getElementById("checkboxSecondColor").checked == true) {
// border.mask("imgStampGradient,source-over;imgSecondBorderRareStamp,source-in", 329, rareStampY - 15, 90, 50)attention
border.mask("imgMultiGradient,source-over", imgSecondBorderRareStamp)
}
//Draws over the rare stamp (part that's usually black) to match custom border color
// border.mask("imgRareStampMask,source-over;" + document.getElementById("inputColor").value + ",source-in", 329, rareStampY - 15, 90, 50)attention
border.mask("imgCardMask,source-over", imgRareStampMask, document.getElementById("inputColor").value)
if (document.getElementById("checkboxBorderless").checked != true) {
//Draws over the rare stamp (part that's usually black) to match custom border color
border.mask("imgCardMask,source-over", imgRareStampMask, document.getElementById("inputColor").value)
}
//This is when the holo stamp is drawn
border.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
}
@@ -498,26 +515,29 @@ function writeText() {
//Draws the entered text onto the card, also draws the power/toughness box if necessary
//All use these:
card.textBaseline = "top"
if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
card.fillStyle = "White"
} else {
card.fillStyle = "Black"
}
// if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
// card.fillStyle = "White"//attention
// } else {
// card.fillStyle = "Black"
// }
//Title
card.fillStyle = document.getElementById("inputTitleColor").value
card.textAlign = titleAlign
canvas.style.letterSpacing = titleFontSpacing
card.font = titleFont
card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY)
//Type
card.fillStyle = document.getElementById("inputTypeColor").value
card.textAlign = typeAlign
canvas.style.letterSpacing = typeFontSpacing
card.font = typeFont
card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY)
//Power/Toughness
if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") {
card.fillStyle = "White"
}
// if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") {
// card.fillStyle = "White"//attention
// }
card.fillStyle = document.getElementById("inputCreatureColor").value
card.textAlign = "center"
card.drawImage(imgBorderCreature, imgBorderCreature.imgX, imgBorderCreature.imgY, imgBorderCreature.imgW, imgBorderCreature.imgH)
canvas.style.letterSpacing = ptFontSpacing
@@ -526,8 +546,9 @@ function writeText() {
card.fillText(powerToughness, ptTextX, ptTextY)
}
card.textAlign = "left"
card.fillStyle = "Black"
// card.fillStyle = "Black"//attention
//Rules Text
card.fillStyle = document.getElementById("inputRulesColor").value
canvas.style.letterSpacing = textFontSpacing + "px"
card.font = document.getElementById("textSize").value + textFont
var text = document.getElementById("inputText").value
@@ -536,11 +557,7 @@ function writeText() {
//Bottom info on M15 cards
function bottomInfoM15() {
if (document.getElementById("checkboxArtistColor").checked == true) {
card.fillStyle = "black"
} else {
card.fillStyle = "white"
}
card.fillStyle = document.getElementById("inputInfoColor").value
var shiftInfo = 442
canvas.style.letterSpacing = "0.8px"
card.font = "19.5px relaymedium"

View File

@@ -33,13 +33,13 @@
<div>
<div class="grid selectionGrid">
<div onclick="toggleView('color', 'cmm')">Color</div>
<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
<div onclick="toggleView('general', 'cmm')">General</div>
<div onclick="toggleView('text', 'cmm')">Text</div>
<div onclick="toggleView('info', 'cmm')">Info</div>
<div onclick="toggleView('art', 'cmm')">Art</div>
<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
<div onclick="toggleView('info', 'cmm')">Info</div>
<div onclick="toggleView('set', 'cmm')">Set</div>
<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
<div onclick="toggleView('download', 'cmm')">Download</div>
</div>
@@ -132,7 +132,7 @@
<label for="checkboxFlipTip" />
<div>Flip Tip</div>
</div>
<input id="inputFlipTip" value="" type="text" class="input"></input>
<input id="inputFlipTip" value="" type="text" class="input">
<div class="checkbox">
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
<label for="checkboxFlippedDark" />
@@ -143,7 +143,7 @@
<label for="checkboxSilverBorder" />
<div>Silver Border</div>
</div>
<input type="color" id="inputColor" onchange="createBorder()" value="#000000"> Border Color</input>
<input type="color" id="inputColor" onchange="createBorder()" value="#000000"> Border Color
<div class="checkbox">
<input type="checkbox" id="checkboxFoil" />
<label for="checkboxFoil" />
@@ -154,28 +154,47 @@
<label for="checkboxIdentity" />
<div>Color Identity</div>
</div>
<input id="inputIdentity" type="text" class="input" onchange="createBorder()"></input>
<input id="inputIdentity" type="text" class="input" onchange="createBorder()">
<div class="checkbox">
<input type="checkbox" id="checkboxBorderless" onchange="createBorder()" />
<label for="checkboxBorderless" />
<div>Borderless</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxTitleVisibility" checked="true" onchange="createBorder()">
<label for="checkboxTitleVisibility" />
<div>Title Visibility</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxTypeVisibility" checked="true" onchange="createBorder()">
<label for="checkboxTypeVisibility" />
<div>Type Visibility</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxRulesVisibility" checked="true" onchange="createBorder()">
<label for="checkboxRulesVisibility" />
<div>Rules Visibility</div>
</div>
<input type="color" id="inputTitleColor" value="#000000"> Title Color<br/>
<input type="color" id="inputTypeColor" value="#000000"> Type Color<br/>
<input type="color" id="inputRulesColor" value="#000000"> Rules Color<br/>
<input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br/>
</div>
<div class="cmm" id="cmm-general">
Name
<input id="inputName" type="text" class="input"></input>
<input id="inputName" type="text" class="input">
<br/>
Mana Cost
<input id="inputCost" type="text" class="input"></input>
<input id="inputCost" type="text" class="input">
<br/>
Type
<input id="inputType" type="text" class="input"></input>
<input id="inputType" type="text" class="input">
<div class="checkbox">
<input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" type="text"></input>
<input id="inputPowerToughness" class="input" type="text">
</div>
<div class="cmm" id="cmm-text">
Rules Text
@@ -183,80 +202,76 @@
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
<br/>
Rules Text Font Size
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"></input>
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
<br/>
Pixels Between Paragraphs
<input id="textShift" type="number" class="input" min="0" max="300" value="13"></input>
<input id="textShift" type="number" class="input" min="0" max="300" value="13">
<br/>
Shift All Text Down
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
<input id="textDown" type="number" class="input" min="0" max="300" value="0">
<br/>
Shift Mana Symbols Down
<input id="inputSymbolDown" type="number" class="input" value="0"></input>
<input id="inputSymbolDown" type="number" class="input" value="0">
</div>
<div class="cmm" id="cmm-art">
Image
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture">
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)">
<br/>
Image Zoom
<input id="imageSize" type="number" class="input" value="100" step="0.1"></input>
<input id="imageSize" type="number" class="input" value="100" step="0.1">
<br/>
Image Left
<input id="imageLeft" type="number" class="input" value="0" step="1"></input>
<input id="imageLeft" type="number" class="input" value="0" step="1">
<br/>
Image Up
<input id="imageUp" type="number" class="input" value="0" step="1"></input>
<input id="imageUp" type="number" class="input" value="0" step="1">
</div>
<div class="cmm" id="cmm-info">
Other Info
<input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
<input id="inputInfo" value="Not A Real Card" type="text" class="input">
<br/>
Card Number
<input id="inputNumber" value="001/001" type="text" class="input"></input>
<input id="inputNumber" value="001/001" type="text" class="input">
<br/>
Rarity
<input id="inputRarity" value="C" type="text" class="input"></input>
<input id="inputRarity" value="C" type="text" class="input">
<br/>
Set Abbreviation
<input id="inputSet" value="MTG" type="text" class="input"></input>
<input id="inputSet" value="MTG" type="text" class="input">
<br/>
Language
<input id="inputLanguage" value="EN" type="text" class="input"></input>
<input id="inputLanguage" value="EN" type="text" class="input">
<br/>
Artist Credit
<input id="inputArtist" value="" type="text" class="input"></input>
<input id="inputArtist" value="" type="text" class="input">
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" />
<div>Black Bottom Info</div>
</div>
<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br/>
</div>
<div class="cmm" id="cmm-set">
<div class="checkbox">
<input type="checkbox" id="checkboxSetSymbol" checked="true" />
<input type="checkbox" id="checkboxSetSymbol" checked="true">
<label for="checkboxSetSymbol" />
<div>Set Symbol</div>
</div>
Set Code
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input">
<br>
Set Symbol Rarity
<input type="text" onchange="loadSetSymbol()" value="c" id="setSymbolRarity" class="input"></input>
<input type="text" onchange="loadSetSymbol()" value="c" id="setSymbolRarity" class="input">
<br>
Custom Set Symbol
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol">
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)">
<br/>
Scale Set Symbol
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
</div>
<div class="cmm" id="cmm-download">
Frame Rate
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div>
<div class="cmm" id="cmm-watermark">
@@ -265,11 +280,11 @@
<label for="checkboxWatermark" />
<div>Watermark</div>
</div>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark">
<br/>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)">
<br/>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode">
<br/>
Watermark Color
<br/>
@@ -302,7 +317,7 @@
</select>
</span>
Watermark Opacity
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01">
</div>
<div class="cmm" id="cmm-planeswalker">
Planeswalker Ability Line Height
@@ -561,7 +576,7 @@ input[type="text"], input[type="number"], textarea, input[type="file"] {
input[type="color"] {
padding: 0px;
border: none;
background: var(--color-d);
background: var(--color-e);
}
/*Hyperlinks*/

BIN
sampleCards/card (1).png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB