diff --git a/data/borders/defaultBorder.js b/data/borders/defaultBorder.js index 1e59cc71..bcfa9697 100644 --- a/data/borders/defaultBorder.js +++ b/data/borders/defaultBorder.js @@ -10,6 +10,7 @@ var flipBorder = false var creatureBorder = true var thirdBorder = true var secondBorder = true +var transparentBorder = false //Shifted text titleRightShift = 0 typeRightShift = 0 @@ -20,6 +21,11 @@ var typeAlign = "left" var centerSetSymbol = 1 //1=not centered, 2=centered var artX = 58 var artY = 118 +//card size +canvas.width = 749 +canvas.height = 1044 +borderCanvas.width = 749 +borderCanvas.height = 1044 //Loads the correct border data borderPath = "data/borders/" + document.getElementById("borderSelection").value loadScript(borderPath + "border.js") \ No newline at end of file diff --git a/data/borders/plane/artMask.png b/data/borders/plane/artMask.png new file mode 100644 index 00000000..15c2d171 Binary files /dev/null and b/data/borders/plane/artMask.png differ diff --git a/data/borders/plane/border.js b/data/borders/plane/border.js new file mode 100644 index 00000000..88fc3cb3 --- /dev/null +++ b/data/borders/plane/border.js @@ -0,0 +1,68 @@ +//Plane Border +//Anything to do with... +//Card Title +var titleFont = "34px belerenb" +var titleFontSpacing = "0.15px" +var titleX = 522 +var titleY = 40 +var titleAlign = "center" +//Mana Cost +var manaCostRadius = 0 +var manaCostX = 1000 +var manaCostY = 1000 +//Card Type +var typeFont = "26px belerenb" +var typeFontSpacing = "0px" +var typeX = 522 +var typeY = 502 +var typeAlign = "center" +//Rules/Flavor Text +var textFont = "px mplantin" +var textFontSpacing = 0.3 +var textX = 125 +var textY = 535 +var textWidth = 925 +document.getElementById("textSize").value = 26 +// //Power Toughness +// var ptFont = "39px belerenb" +// var ptFontSpacing = "0.3px" +// var ptTextX = 645 +// var ptTextY = 936 +// var ptX = 571 +// var ptY = 929 +// var ptWidth = 137 +// var ptHeight = 75 +//Bottom Info +var eighthInfo = false +var eighthInfoY = 992 +var m15Info = true +var m15InfoY = 993 +//Set Symbol +var setSymbolY = 519 +var setSymbolRight = 814 +var setSymbolWidth = 42 +var setSymbolHeight = 24 +//Watermark +var watermarkWidth = 0 //520 +var watermarkHeight = 0 //250 +var watermarkY = 600 +// //Rare Stamp +// var rareStampY = 958 +//Color Options +loadColors("white-Regular,high-Bottom,mid-Middle,low-Top,none-Single") +document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML +document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML +//Other +canvas.width = 1044 +canvas.height = 749 +borderCanvas.width = 1044 +borderCanvas.height = 749 +var creatureBorder = false +var thirdBorder = false +var secondBorder = false +var artX = 33 +var artY = 33 +transparentBorder = true +//With all the new values in place, the program will update it's border images +finishTemplate() +//Any special functions go at the bottom \ No newline at end of file diff --git a/data/borders/plane/borderMask.png b/data/borders/plane/borderMask.png new file mode 100644 index 00000000..11a252d8 Binary files /dev/null and b/data/borders/plane/borderMask.png differ diff --git a/data/borders/plane/frameMask.png b/data/borders/plane/frameMask.png new file mode 100644 index 00000000..36d1d3df Binary files /dev/null and b/data/borders/plane/frameMask.png differ diff --git a/data/borders/plane/high/frame.png b/data/borders/plane/high/frame.png new file mode 100644 index 00000000..40d29079 Binary files /dev/null and b/data/borders/plane/high/frame.png differ diff --git a/data/borders/plane/low/frame.png b/data/borders/plane/low/frame.png new file mode 100644 index 00000000..feb7dbd2 Binary files /dev/null and b/data/borders/plane/low/frame.png differ diff --git a/data/borders/plane/mid/frame.png b/data/borders/plane/mid/frame.png new file mode 100644 index 00000000..fb337eef Binary files /dev/null and b/data/borders/plane/mid/frame.png differ diff --git a/data/borders/plane/none/frame.png b/data/borders/plane/none/frame.png new file mode 100644 index 00000000..539ca471 Binary files /dev/null and b/data/borders/plane/none/frame.png differ diff --git a/data/borders/plane/white/frame.png b/data/borders/plane/white/frame.png new file mode 100644 index 00000000..1ebde358 Binary files /dev/null and b/data/borders/plane/white/frame.png differ diff --git a/data/borders/plane/white/old.png b/data/borders/plane/white/old.png new file mode 100644 index 00000000..d8259f71 Binary files /dev/null and b/data/borders/plane/white/old.png differ diff --git a/index.html b/index.html index 39238516..55bef4ce 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@
Border Set Symbol
Set Code - +
Set Symbol Rarity @@ -432,6 +433,7 @@ a:active { var borderCanvas = document.createElement("canvas") borderCanvas.width = 749; borderCanvas.height = 1044 var border = borderCanvas.getContext("2d") +document.body.appendChild(borderCanvas) //Load the initial border (m15) changeTemplate() //set up initial variables @@ -480,7 +482,11 @@ function cardClock() { //Draws the card image, then... drawPicture() //draws the card frame on top - drawMask(imgBorder, 0, 0, canvas.width, canvas.height, card, imgArtMask, false, false) + if (transparentBorder == false) { + drawMask(imgBorder, 0, 0, canvas.width, canvas.height, card, imgArtMask, false, false) + } else { + card.drawImage(imgBorder, 0, 0, canvas.width, canvas.height) + } //draws the set symbol, mana cost, and watermark drawSetSymbol() drawManaCost() @@ -552,12 +558,14 @@ function updateBorder() { } else { altframe = "" } - if (thirdColor == true) { - imgBorderCreature.src = thirdColorPath + "/" + altframe + "pt.png" - } else if (secondColor == true) { - imgBorderCreature.src = secondColorPath + "/" + altframe + "pt.png" - } else { - imgBorderCreature.src = firstColorPath + "/" + altframe + "pt.png" + if (creatureBorder == true) { + if (thirdColor == true) { + imgBorderCreature.src = thirdColorPath + "/" + altframe + "pt.png" + } else if (secondColor == true) { + imgBorderCreature.src = secondColorPath + "/" + altframe + "pt.png" + } else { + imgBorderCreature.src = firstColorPath + "/" + altframe + "pt.png" + } } if (legendaryBorder == true) { imgBorderLegendary.src = firstColorPath + "/legendary.png" @@ -607,7 +615,8 @@ function updateBorder() { function createBorder() { //These if else statements check to see whether or not to draw different parts of the card, like the legendary border or rare stamp, and draws them in the appropriate order so that when multiple border colors are used the gradients overlap correctly //BACKGROUND COLOR - drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgCardMask, false, false) + border.clearRect(0, 0, canvas.width, canvas.height) + drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgArtMask, false, false) //MAIN CARD FRAME drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) if (secondColor == true && secondBorder == true) { @@ -766,9 +775,9 @@ function drawPicture() { var imageLeftShift = parseInt(document.getElementById("imageLeft").value) var imageUpShift = parseInt(document.getElementById("imageUp").value) if (imgArt.width > 0) { + card.drawImage(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale) //drawMask(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale, card, imgArtMask, false, false) } - card.drawImage(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale) } //Draw Set Symbol function drawSetSymbol() { @@ -849,7 +858,7 @@ function writeText() { card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY) //Power/Toughness card.textAlign = "left" - if (document.getElementById("checkboxCreature").checked == true) { + if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) { card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight) canvas.style.letterSpacing = ptFontSpacing card.font = ptFont @@ -969,12 +978,12 @@ function drawText(text, xCoord, yCoord) { card.font = "normal " + textSize + textFont } else if (megaSplit[0] == "center") { card.textAlign="center" - x = 749/2 + x = canvas.width / 2 tempTextWidth = textWidth * 1.5 } else if (megaSplit[0] == "right") { card.textAlign="right" tempTextWidth = textWidth * 1.9 - x = 749 - xCoord + x = canvas.width - xCoord } else if (megaSplit[0] == "left") { card.textAlign="left" tempTextWidth = textWidth @@ -1039,7 +1048,7 @@ function toggleSection(target) { //Resizes anything that may need to be resized function resizeThings() { - if (window.innerWidth > 1100) { + if (window.innerWidth > 1100 && canvas.width <= 770) { document.getElementById("optionsColumn").style = "width: calc(100% - 777px)" } else { document.getElementById("optionsColumn").style = "width: 100%"