diff --git a/data/borders/m15/border.js b/data/borders/m15/border.js index 2b0298a8..967be62e 100644 --- a/data/borders/m15/border.js +++ b/data/borders/m15/border.js @@ -49,7 +49,7 @@ var watermarkY = 805 //805 //Rare Stamp var rareStampY = 958 //958 //Color Options -loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact,vehicle-Vehicle") +loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact,vehicle-Vehicle,clear-Clear") document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML //Things The Card Can Do diff --git a/data/borders/m15/clear/darkmiracle.png b/data/borders/m15/clear/darkmiracle.png new file mode 100644 index 00000000..2380e626 Binary files /dev/null and b/data/borders/m15/clear/darkmiracle.png differ diff --git a/data/borders/m15/clear/darkpt.png b/data/borders/m15/clear/darkpt.png new file mode 100644 index 00000000..1ed50325 Binary files /dev/null and b/data/borders/m15/clear/darkpt.png differ diff --git a/data/borders/m15/clear/flipCircle.png b/data/borders/m15/clear/flipCircle.png new file mode 100644 index 00000000..af3a0d2a Binary files /dev/null and b/data/borders/m15/clear/flipCircle.png differ diff --git a/data/borders/m15/clear/flipTip.png b/data/borders/m15/clear/flipTip.png new file mode 100644 index 00000000..279dd50c Binary files /dev/null and b/data/borders/m15/clear/flipTip.png differ diff --git a/data/borders/m15/clear/flippedDark.png b/data/borders/m15/clear/flippedDark.png new file mode 100644 index 00000000..8c93c024 Binary files /dev/null and b/data/borders/m15/clear/flippedDark.png differ diff --git a/data/borders/m15/clear/frame.png b/data/borders/m15/clear/frame.png new file mode 100644 index 00000000..e902aa90 Binary files /dev/null and b/data/borders/m15/clear/frame.png differ diff --git a/data/borders/m15/clear/legendary.png b/data/borders/m15/clear/legendary.png new file mode 100644 index 00000000..988f7c73 Binary files /dev/null and b/data/borders/m15/clear/legendary.png differ diff --git a/data/borders/m15/clear/miracle.png b/data/borders/m15/clear/miracle.png new file mode 100644 index 00000000..730d5013 Binary files /dev/null and b/data/borders/m15/clear/miracle.png differ diff --git a/data/borders/m15/clear/nyx.png b/data/borders/m15/clear/nyx.png new file mode 100644 index 00000000..22a2b300 Binary files /dev/null and b/data/borders/m15/clear/nyx.png differ diff --git a/data/borders/m15/clear/pt.png b/data/borders/m15/clear/pt.png new file mode 100644 index 00000000..4fa6c833 Binary files /dev/null and b/data/borders/m15/clear/pt.png differ diff --git a/data/borders/m15/clear/stamp.png b/data/borders/m15/clear/stamp.png new file mode 100644 index 00000000..99a1fb1d Binary files /dev/null and b/data/borders/m15/clear/stamp.png differ diff --git a/data/scripts/main.js b/data/scripts/main.js index 40c60d94..caa453a0 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -23,7 +23,7 @@ if (isChrome == true && isSafari == true) { isSafari = false } if (isSafari == true) { - textBaselineShift = -6 + textBaselineShift = -0.15 } //Set up canvas @@ -33,6 +33,7 @@ var card = canvas.getContext("2d") //Create the canvas for creating the border image var borderCanvas = document.createElement("canvas") var border = borderCanvas.getContext("2d") +document.body.appendChild(borderCanvas) //load template images (images that may change based off of the selected template) var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask", "abilityLineOdd", "abilityLineEven", "rulesMask", "typeMask", "titleMask"] @@ -270,7 +271,9 @@ 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 border.clearRect(0, 0, cardWidth, cardHeight) - if (document.getElementById("checkboxBorderless").checked == false) { + if (document.getElementById("colorSelection").value.includes("clear") == true) { + border.mask("imgArtMask,source-over;imgFrameMask,destination-out", "none", document.getElementById("inputColor").value) + } else if (document.getElementById("checkboxBorderless").checked == false) { border.mask("imgArtMask,source-over", "none", document.getElementById("inputColor").value) } //Draws the silver border usually on un-cards @@ -547,13 +550,13 @@ function writeText() { card.textAlign = titleAlign canvas.style.letterSpacing = titleFontSpacing card.font = titleFont - card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift) + card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift * card.font.split("px")[0]) //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 + textBaselineShift) + card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY + textBaselineShift * card.font.split("px")[0]) //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/") { @@ -565,7 +568,7 @@ function writeText() { canvas.style.letterSpacing = ptFontSpacing card.font = ptFont powerToughness = document.getElementById("inputPowerToughness").value - card.fillText(powerToughness, ptTextX, ptTextY + textBaselineShift) + card.fillText(powerToughness, ptTextX, ptTextY + textBaselineShift * card.font.split("px")[0]) } card.textAlign = "left" // card.fillStyle = "Black"//attention @@ -581,7 +584,7 @@ function writeText() { card.fillStyle="#666" canvas.style.letterSpacing = "0px" card.font = "28px belerenb" - card.fillText(document.getElementById("inputFlipTip").value, 688, 886 + textBaselineShift) + card.fillText(document.getElementById("inputFlipTip").value, 688, 886 + textBaselineShift * card.font.split("px")[0]) card.textAlign = "left" } } @@ -593,7 +596,7 @@ function bottomInfoM15() { canvas.style.letterSpacing = "1.5px" card.font = "19px relaymedium" var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value - card.fillText(bottomLine, 48, infoY + textBaselineShift) + card.fillText(bottomLine, 48, infoY + textBaselineShift * card.font.split("px")[0]) var artistBrushShift = card.measureText(bottomLine).width + 58 imgArtistBrush.imgValues(artistBrushShift, infoY + 1, 21, 13) card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle) @@ -602,14 +605,14 @@ function bottomInfoM15() { if (card.measureText(document.getElementById("inputNumber").value).width > artistBrushShift - 58) { artistBrushShift = card.measureText(document.getElementById("inputNumber").value).width + 58 } - card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20 + textBaselineShift) - card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20 + textBaselineShift) + card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20 + textBaselineShift * card.font.split("px")[0]) + card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20 + textBaselineShift * card.font.split("px")[0]) if (446 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("checkboxCreature").checked == false) { shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width + 5 } canvas.style.letterSpacing = "-0.1px" card.font = "22px matrixbsc" - card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY - 1 + textBaselineShift) + card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY - 1 + textBaselineShift * card.font.split("px")[0]) if (446 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("checkboxCreature").checked == true) { shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputArtist").value).width + 26 } @@ -624,9 +627,9 @@ function bottomInfoM15() { bottomInfo = "\u2122 & \u00a9 " + year + " Wizards of the Coast" } if (document.getElementById("checkboxCreature").checked == true) { - card.fillText(bottomInfo, shiftInfo, infoY + 1 + textBaselineShift) + card.fillText(bottomInfo, shiftInfo, infoY + 1 + textBaselineShift * card.font.split("px")[0]) } else { - card.fillText(bottomInfo, shiftInfo, infoY - 17 + textBaselineShift) + card.fillText(bottomInfo, shiftInfo, infoY - 17 + textBaselineShift * card.font.split("px")[0]) } } } @@ -652,7 +655,7 @@ function drawText(text, xCoord, yCoord) { var lineWidth = card.measureText(testLine).width if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) { //Word is too big - card.fillText(line, x + textXShift, y + textBaselineShift) + card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0]) line = words[wordIndex] + " " y += textSize + 1 textXShift = 0 @@ -661,14 +664,14 @@ function drawText(text, xCoord, yCoord) { line = testLine + " " } if (wordIndex + 1 == words.length) { - card.fillText(line, x + textXShift, y + textBaselineShift) + card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0]) } } else { //Symbols and more! var splitWord = words[wordIndex].split("<") for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) { //Write what's there first! - card.fillText(line, x + textXShift, y + textBaselineShift) + card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0]) textXShift += card.measureText(line).width line = "" if (splitWord[splitIndex].includes(">")) { @@ -713,7 +716,7 @@ function drawText(text, xCoord, yCoord) { x += 58 } else { //It's an image (mana symbol, tap, etc...) - card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0].toLowerCase())], x + textXShift + textSize * 0.054, y + textSize * 0.075 + parseInt(document.getElementById("inputSymbolDown").value) + textBaselineShift, textSize * 0.77, textSize * 0.77) + card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0].toLowerCase())], x + textXShift + textSize * 0.054, y + textSize * 0.075 + parseInt(document.getElementById("inputSymbolDown").value) + textBaselineShift * card.font.split("px")[0], textSize * 0.77, textSize * 0.77) textXShift += textSize * 0.84 } if (megaSplit[1] != "") { @@ -730,7 +733,7 @@ function drawText(text, xCoord, yCoord) { var lineWidth = card.measureText(testLine).width if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) { //Word is too big - card.fillText(line, x + textXShift, y + textBaselineShift) + card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0]) line = plainWord y += textSize + 1 textXShift = 0 @@ -739,7 +742,7 @@ function drawText(text, xCoord, yCoord) { line = testLine } if (wordIndex + 1 == words.length) { - card.fillText(line, x + textXShift, y + textBaselineShift) + card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0]) } } }