diff --git a/data/borders/8th/border.js b/data/borders/8th/border.js index a0d3e3c3..dc0db7e9 100644 --- a/data/borders/8th/border.js +++ b/data/borders/8th/border.js @@ -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) diff --git a/data/borders/foil.png b/data/borders/foil.png index 6aeaa216..4c1d7624 100644 Binary files a/data/borders/foil.png and b/data/borders/foil.png differ diff --git a/data/borders/m15/black/stamp.png b/data/borders/m15/black/stamp.png index eb8a2458..b350817d 100644 Binary files a/data/borders/m15/black/stamp.png and b/data/borders/m15/black/stamp.png differ diff --git a/data/borders/m15/border.js b/data/borders/m15/border.js index c54893bd..ed7db62f 100644 --- a/data/borders/m15/border.js +++ b/data/borders/m15/border.js @@ -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 diff --git a/data/borders/m15/goldLand - Shortcut.lnk b/data/borders/m15/goldLand - Shortcut.lnk deleted file mode 100644 index 3942facf..00000000 Binary files a/data/borders/m15/goldLand - Shortcut.lnk and /dev/null differ diff --git a/data/borders/m15/legendMultiMask.png b/data/borders/m15/legendMultiMask.png deleted file mode 100644 index ec439368..00000000 Binary files a/data/borders/m15/legendMultiMask.png and /dev/null differ diff --git a/data/borders/m15/rareStampMask.png b/data/borders/m15/rareStampMask.png index 96d78d86..53aeb352 100644 Binary files a/data/borders/m15/rareStampMask.png and b/data/borders/m15/rareStampMask.png differ diff --git a/data/borders/m15/rulesMask.png b/data/borders/m15/rulesMask.png new file mode 100644 index 00000000..45e19d9e Binary files /dev/null and b/data/borders/m15/rulesMask.png differ diff --git a/data/borders/m15/titleMask.png b/data/borders/m15/titleMask.png new file mode 100644 index 00000000..b72aa9ec Binary files /dev/null and b/data/borders/m15/titleMask.png differ diff --git a/data/borders/m15/typeMask.png b/data/borders/m15/typeMask.png new file mode 100644 index 00000000..f05d77a3 Binary files /dev/null and b/data/borders/m15/typeMask.png differ diff --git a/data/borders/map/border.js b/data/borders/map/border.js index e2e2caf0..a38a151b 100644 --- a/data/borders/map/border.js +++ b/data/borders/map/border.js @@ -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 diff --git a/data/borders/plane/border.js b/data/borders/plane/border.js index 46c46e3c..a71cc2fc 100644 --- a/data/borders/plane/border.js +++ b/data/borders/plane/border.js @@ -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" diff --git a/data/borders/planeswalker/border.js b/data/borders/planeswalker/border.js index 08685d21..18cd1ffe 100644 --- a/data/borders/planeswalker/border.js +++ b/data/borders/planeswalker/border.js @@ -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 diff --git a/data/borders/planeswalker/loyaltyDown.png b/data/borders/planeswalker/loyaltyDown.png deleted file mode 100644 index aef16f82..00000000 Binary files a/data/borders/planeswalker/loyaltyDown.png and /dev/null differ diff --git a/data/borders/planeswalker/loyaltyUp.png b/data/borders/planeswalker/loyaltyUp.png deleted file mode 100644 index a051fa3e..00000000 Binary files a/data/borders/planeswalker/loyaltyUp.png and /dev/null differ diff --git a/data/borders/planeswalker/loyaltyZero.png b/data/borders/planeswalker/loyaltyZero.png deleted file mode 100644 index 3f8e6565..00000000 Binary files a/data/borders/planeswalker/loyaltyZero.png and /dev/null differ diff --git a/data/borders/stampGradient.png b/data/borders/stampGradient.png deleted file mode 100644 index c78b03ab..00000000 Binary files a/data/borders/stampGradient.png and /dev/null differ diff --git a/data/scripts/main.js b/data/scripts/main.js index 3ca80ecf..ac2f201f 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -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" diff --git a/index.html b/index.html index cbf985da..89103a7d 100644 --- a/index.html +++ b/index.html @@ -33,13 +33,13 @@