diff --git a/data/borders/defaultBorder.js b/data/borders/defaultBorder.js index 8bbb722b..1145873f 100644 --- a/data/borders/defaultBorder.js +++ b/data/borders/defaultBorder.js @@ -6,6 +6,7 @@ var legendaryBorder = false var nyxBorder = false var miracleBorder = false var stampBorder = false +var flipBorder = false //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/icons/artifact.png b/data/borders/icons/artifact.png new file mode 100644 index 00000000..7a9b9f55 Binary files /dev/null and b/data/borders/icons/artifact.png differ diff --git a/data/borders/icons/blank.png b/data/borders/icons/blank.png new file mode 100644 index 00000000..ea7d9346 Binary files /dev/null and b/data/borders/icons/blank.png differ diff --git a/data/borders/icons/compass.png b/data/borders/icons/compass.png new file mode 100644 index 00000000..29947fce Binary files /dev/null and b/data/borders/icons/compass.png differ diff --git a/data/borders/icons/creature.png b/data/borders/icons/creature.png new file mode 100644 index 00000000..260d9300 Binary files /dev/null and b/data/borders/icons/creature.png differ diff --git a/data/borders/icons/day.png b/data/borders/icons/day.png new file mode 100644 index 00000000..ca9fded6 Binary files /dev/null and b/data/borders/icons/day.png differ diff --git a/data/borders/icons/eldrazi.png b/data/borders/icons/eldrazi.png new file mode 100644 index 00000000..358dc4d2 Binary files /dev/null and b/data/borders/icons/eldrazi.png differ diff --git a/data/borders/icons/enchantment.png b/data/borders/icons/enchantment.png new file mode 100644 index 00000000..6e31a49d Binary files /dev/null and b/data/borders/icons/enchantment.png differ diff --git a/data/borders/icons/instant.png b/data/borders/icons/instant.png new file mode 100644 index 00000000..d83599a4 Binary files /dev/null and b/data/borders/icons/instant.png differ diff --git a/data/borders/icons/land.png b/data/borders/icons/land.png new file mode 100644 index 00000000..68c43121 Binary files /dev/null and b/data/borders/icons/land.png differ diff --git a/data/borders/icons/moon.png b/data/borders/icons/moon.png new file mode 100644 index 00000000..8cc78a03 Binary files /dev/null and b/data/borders/icons/moon.png differ diff --git a/data/borders/icons/multitype.png b/data/borders/icons/multitype.png new file mode 100644 index 00000000..c3f23833 Binary files /dev/null and b/data/borders/icons/multitype.png differ diff --git a/data/borders/icons/night.png b/data/borders/icons/night.png new file mode 100644 index 00000000..d6118b70 Binary files /dev/null and b/data/borders/icons/night.png differ diff --git a/data/borders/icons/planeshift.png b/data/borders/icons/planeshift.png new file mode 100644 index 00000000..4f28c6e7 Binary files /dev/null and b/data/borders/icons/planeshift.png differ diff --git a/data/borders/icons/planeswalker.png b/data/borders/icons/planeswalker.png new file mode 100644 index 00000000..b7b519dc Binary files /dev/null and b/data/borders/icons/planeswalker.png differ diff --git a/data/borders/icons/sorcery.png b/data/borders/icons/sorcery.png new file mode 100644 index 00000000..97b4855d Binary files /dev/null and b/data/borders/icons/sorcery.png differ diff --git a/data/borders/icons/structure.png b/data/borders/icons/structure.png new file mode 100644 index 00000000..11f95066 Binary files /dev/null and b/data/borders/icons/structure.png differ diff --git a/data/borders/m15/artifact/flipCircle.png b/data/borders/m15/artifact/flipCircle.png new file mode 100644 index 00000000..2276f753 Binary files /dev/null and b/data/borders/m15/artifact/flipCircle.png differ diff --git a/data/borders/m15/artifact/flipTip.png b/data/borders/m15/artifact/flipTip.png new file mode 100644 index 00000000..c81eaf8f Binary files /dev/null and b/data/borders/m15/artifact/flipTip.png differ diff --git a/data/borders/m15/artifact/front.png b/data/borders/m15/artifact/front.png new file mode 100644 index 00000000..78edd1cc Binary files /dev/null and b/data/borders/m15/artifact/front.png differ diff --git a/data/borders/m15/black/flipCircle.png b/data/borders/m15/black/flipCircle.png new file mode 100644 index 00000000..6da1fe86 Binary files /dev/null and b/data/borders/m15/black/flipCircle.png differ diff --git a/data/borders/m15/black/flipTip.png b/data/borders/m15/black/flipTip.png new file mode 100644 index 00000000..24533114 Binary files /dev/null and b/data/borders/m15/black/flipTip.png differ diff --git a/data/borders/m15/blackLand/flipCircle.png b/data/borders/m15/blackLand/flipCircle.png new file mode 100644 index 00000000..6da1fe86 Binary files /dev/null and b/data/borders/m15/blackLand/flipCircle.png differ diff --git a/data/borders/m15/blackLand/flipTip.png b/data/borders/m15/blackLand/flipTip.png new file mode 100644 index 00000000..b257d684 Binary files /dev/null and b/data/borders/m15/blackLand/flipTip.png differ diff --git a/data/borders/m15/blue/flipCircle.png b/data/borders/m15/blue/flipCircle.png new file mode 100644 index 00000000..4e0f49ea Binary files /dev/null and b/data/borders/m15/blue/flipCircle.png differ diff --git a/data/borders/m15/blue/flipTip.png b/data/borders/m15/blue/flipTip.png new file mode 100644 index 00000000..32b10384 Binary files /dev/null and b/data/borders/m15/blue/flipTip.png differ diff --git a/data/borders/m15/blueLand/flipCircle.png b/data/borders/m15/blueLand/flipCircle.png new file mode 100644 index 00000000..4e0f49ea Binary files /dev/null and b/data/borders/m15/blueLand/flipCircle.png differ diff --git a/data/borders/m15/blueLand/flipTip.png b/data/borders/m15/blueLand/flipTip.png new file mode 100644 index 00000000..047b705c Binary files /dev/null and b/data/borders/m15/blueLand/flipTip.png differ diff --git a/data/borders/m15/border.js b/data/borders/m15/border.js index f03d4da3..7ab61a50 100644 --- a/data/borders/m15/border.js +++ b/data/borders/m15/border.js @@ -54,6 +54,7 @@ legendaryBorder = true stampBorder = true nyxBorder = true miracleBorder = true +flipBorder = true //With all the new values in place, the program will update it's border images updateBorder() //Any special functions go at the bottom \ No newline at end of file diff --git a/data/borders/m15/colorless/flipCircle.png b/data/borders/m15/colorless/flipCircle.png new file mode 100644 index 00000000..53bb5a53 Binary files /dev/null and b/data/borders/m15/colorless/flipCircle.png differ diff --git a/data/borders/m15/colorless/flipTip.png b/data/borders/m15/colorless/flipTip.png new file mode 100644 index 00000000..2995c85a Binary files /dev/null and b/data/borders/m15/colorless/flipTip.png differ diff --git a/data/borders/m15/colorlessLand/flipCircle.png b/data/borders/m15/colorlessLand/flipCircle.png new file mode 100644 index 00000000..53bb5a53 Binary files /dev/null and b/data/borders/m15/colorlessLand/flipCircle.png differ diff --git a/data/borders/m15/colorlessLand/flipTip.png b/data/borders/m15/colorlessLand/flipTip.png new file mode 100644 index 00000000..bc441473 Binary files /dev/null and b/data/borders/m15/colorlessLand/flipTip.png differ diff --git a/data/borders/m15/gold/flipCircle.png b/data/borders/m15/gold/flipCircle.png new file mode 100644 index 00000000..65c9f32d Binary files /dev/null and b/data/borders/m15/gold/flipCircle.png differ diff --git a/data/borders/m15/gold/flipTip.png b/data/borders/m15/gold/flipTip.png new file mode 100644 index 00000000..6caf7d8b Binary files /dev/null and b/data/borders/m15/gold/flipTip.png differ diff --git a/data/borders/m15/goldLand/flipCircle.png b/data/borders/m15/goldLand/flipCircle.png new file mode 100644 index 00000000..65c9f32d Binary files /dev/null and b/data/borders/m15/goldLand/flipCircle.png differ diff --git a/data/borders/m15/goldLand/flipTip.png b/data/borders/m15/goldLand/flipTip.png new file mode 100644 index 00000000..fd8c3573 Binary files /dev/null and b/data/borders/m15/goldLand/flipTip.png differ diff --git a/data/borders/m15/green/flipCircle.png b/data/borders/m15/green/flipCircle.png new file mode 100644 index 00000000..9e8edab5 Binary files /dev/null and b/data/borders/m15/green/flipCircle.png differ diff --git a/data/borders/m15/green/flipTip.png b/data/borders/m15/green/flipTip.png new file mode 100644 index 00000000..191ebcb8 Binary files /dev/null and b/data/borders/m15/green/flipTip.png differ diff --git a/data/borders/m15/greenLand/flipCircle.png b/data/borders/m15/greenLand/flipCircle.png new file mode 100644 index 00000000..9e8edab5 Binary files /dev/null and b/data/borders/m15/greenLand/flipCircle.png differ diff --git a/data/borders/m15/greenLand/flipTip.png b/data/borders/m15/greenLand/flipTip.png new file mode 100644 index 00000000..b4911cbe Binary files /dev/null and b/data/borders/m15/greenLand/flipTip.png differ diff --git a/data/borders/m15/red/flipCircle.png b/data/borders/m15/red/flipCircle.png new file mode 100644 index 00000000..55c33ebf Binary files /dev/null and b/data/borders/m15/red/flipCircle.png differ diff --git a/data/borders/m15/red/flipTip.png b/data/borders/m15/red/flipTip.png new file mode 100644 index 00000000..37043922 Binary files /dev/null and b/data/borders/m15/red/flipTip.png differ diff --git a/data/borders/m15/redLand/flipCircle.png b/data/borders/m15/redLand/flipCircle.png new file mode 100644 index 00000000..55c33ebf Binary files /dev/null and b/data/borders/m15/redLand/flipCircle.png differ diff --git a/data/borders/m15/redLand/flipTip.png b/data/borders/m15/redLand/flipTip.png new file mode 100644 index 00000000..4631d46a Binary files /dev/null and b/data/borders/m15/redLand/flipTip.png differ diff --git a/data/borders/m15/vehicle/flipCircle.png b/data/borders/m15/vehicle/flipCircle.png new file mode 100644 index 00000000..2276f753 Binary files /dev/null and b/data/borders/m15/vehicle/flipCircle.png differ diff --git a/data/borders/m15/vehicle/flipTip.png b/data/borders/m15/vehicle/flipTip.png new file mode 100644 index 00000000..c81eaf8f Binary files /dev/null and b/data/borders/m15/vehicle/flipTip.png differ diff --git a/data/borders/m15/white/flipCircle.png b/data/borders/m15/white/flipCircle.png new file mode 100644 index 00000000..ec148961 Binary files /dev/null and b/data/borders/m15/white/flipCircle.png differ diff --git a/data/borders/m15/white/flipTip.png b/data/borders/m15/white/flipTip.png new file mode 100644 index 00000000..14b2cfa6 Binary files /dev/null and b/data/borders/m15/white/flipTip.png differ diff --git a/data/borders/m15/whiteLand/flipCircle.png b/data/borders/m15/whiteLand/flipCircle.png new file mode 100644 index 00000000..ec148961 Binary files /dev/null and b/data/borders/m15/whiteLand/flipCircle.png differ diff --git a/data/borders/m15/whiteLand/flipTip.png b/data/borders/m15/whiteLand/flipTip.png new file mode 100644 index 00000000..83149024 Binary files /dev/null and b/data/borders/m15/whiteLand/flipTip.png differ diff --git a/index.html b/index.html index 35885501..c5b7846e 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,19 @@
Rare Stamp
+ Flip Icon +
+ Flip Tip + +
Silver Border
Border Color @@ -395,11 +408,14 @@ a:active { changeBorder() //set up initial variables var borderPath +var secondColor +var thirdColor +var titleRightShift = 0 //set up canvas var canvas = document.getElementById("canvas") var card = canvas.getContext("2d") //Load dynamic images -var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "secondBorderCreature", "thirdBorderCreature", "borderLegendary", "secondBorderLegendary", "thirdBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "LegendMultiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "borderNyx", "secondBorderNyx", "thirdBorderNyx", "borderMiracle", "secondBorderMiracle", "thirdBorderMiracle"] +var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip"] for (i = 0; i < dynamicImageList.length; i ++) { var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1) window[imgName] = new Image() @@ -457,10 +473,10 @@ setInterval(function() { } //These are for pinpointing coordinates while adjusting values for new border types //Vertical Line - //card.beginPath() - //card.moveTo(setSymbolRight, 0) - //card.lineTo(setSymbolRight, 1044) - //card.stroke() + // card.beginPath() + // card.moveTo(688, 0) + // card.lineTo(688, 1044) + // card.stroke() //Horizontal Line //card.beginPath() //card.moveTo(0, setSymbolY) @@ -481,7 +497,6 @@ function updateBorder() { imgFrameMask.src = borderPath + "frameMask.png" if (m15Info == true) { imgLegendFrameMask.src = borderPath + "legendFrameMask.png" - imgLegendMultiMask.src = borderPath + "legendMultiMask.png" imgRareStampMask.src = borderPath + "rareStampMask.png" imgBorderMask.src = borderPath + "borderMask.png" } else if (eighthInfo == true) { @@ -492,33 +507,56 @@ function updateBorder() { //Loads the images for the card frame, power toughness box, and rare stamp function updateColor() { borderPath = "data/borders/" + document.getElementById("borderSelection").value - var firstColor = borderPath + document.getElementById("colorSelection").value - var secondColor = borderPath + document.getElementById("secondColorSelection").value - var thirdColor = borderPath + document.getElementById("thirdColorSelection").value - imgBorderColor.src = firstColor + "/frame.png" - imgSecondBorderColor.src = secondColor + "/frame.png" - imgThirdBorderColor.src = thirdColor + "/frame.png" - imgBorderCreature.src = firstColor + "/pt.png" - imgSecondBorderCreature.src = secondColor + "/pt.png" - imgThirdBorderCreature.src = thirdColor + "/pt.png" + secondColor = document.getElementById("checkboxSecondColor").checked + thirdColor = document.getElementById("checkboxThirdColor").checked + var firstColorPath = borderPath + document.getElementById("colorSelection").value + var secondColorPath = borderPath + document.getElementById("secondColorSelection").value + var thirdColorPath = borderPath + document.getElementById("thirdColorSelection").value + imgBorderColor.src = firstColorPath + "/frame.png" + imgSecondBorderColor.src = secondColorPath + "/frame.png" + imgThirdBorderColor.src = thirdColorPath + "/frame.png" + if (thirdColor == true) { + imgBorderCreature.src = thirdColorPath + "/pt.png" + } else if (secondColor == true) { + imgBorderCreature.src = secondColorPath + "/pt.png" + } else { + imgBorderCreature.src = firstColorPath + "/pt.png" + } if (legendaryBorder == true) { - imgBorderLegendary.src = firstColor + "/legendary.png" - imgSecondBorderLegendary.src = secondColor + "/legendary.png" - imgThirdBorderLegendary.src = thirdColor + "/legendary.png" + imgBorderLegendary.src = firstColorPath + "/legendary.png" + imgSecondBorderLegendary.src = secondColorPath + "/legendary.png" } if (stampBorder == true) { - imgBorderRareStamp.src = firstColor + "/stamp.png" - imgSecondBorderRareStamp.src = secondColor + "/stamp.png" + imgBorderRareStamp.src = firstColorPath + "/stamp.png" + imgSecondBorderRareStamp.src = secondColorPath + "/stamp.png" } if (nyxBorder == true) { - imgBorderNyx.src = firstColor + "/nyx.png" - imgSecondBorderNyx.src = secondColor + "/nyx.png" - imgThirdBorderNyx.src = thirdColor + "/nyx.png" + if (thirdColor == true) { + imgBorderNyx.src = thirdColorPath + "/nyx.png" + } else { + imgBorderNyx.src = firstColorPath + "/nyx.png" + imgSecondBorderNyx.src = secondColorPath + "/nyx.png" + } } if (miracleBorder == true) { - imgBorderMiracle.src = firstColor + "/miracle.png" - imgSecondBorderMiracle.src = secondColor + "/miracle.png" - imgThirdBorderMiracle.src = thirdColor + "/miracle.png" + if (thirdColor == true) { + imgBorderMiracle.src = thirdColorPath + "/miracle.png" + } else { + imgBorderMiracle.src = firstColorPath + "/miracle.png" + imgSecondBorderMiracle.src = secondColorPath + "/miracle.png" + } + } + if (flipBorder == true) { + if (secondColor == true) { + imgBorderFlipTip.src = secondColorPath + "/flipTip.png" + } else { + imgBorderFlipTip.src = firstColorPath + "/flipTip.png" + } + titleRightShift = 50 + imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png" + imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value + } else { + titleRightShift = 0 } } //Draw Picture @@ -537,10 +575,10 @@ function drawBorder() { //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 such that when multiple border colors are used the gradients overlap correctly //MAIN CARD FRAME drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false) - if (document.getElementById("checkboxSecondColor").checked == true) { + if (secondColor == true) { drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond") } - if (document.getElementById("checkboxThirdColor").checked == true) { + if (thirdColor == true) { drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false) } //Draws the silver border usually on un-cards @@ -561,22 +599,22 @@ function drawBorder() { } //NYX if (document.getElementById("checkboxNyx").checked == true && nyxBorder == true) { - if (document.getElementById("checkboxThirdColor").checked == true) { - drawMask(imgThirdBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false) + if (thirdColor == true) { + drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false) } else { drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false) - if (document.getElementById("checkboxSecondColor").checked == true) { + if (secondColor == true) { drawMask(imgSecondBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond") } } } //MIRACLE if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true) { - if (document.getElementById("checkboxThirdColor").checked == true) { - drawMask(imgThirdBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false) + if (thirdColor == true) { + drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false) } else { drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false) - if (document.getElementById("checkboxSecondColor").checked == true) { + if (secondColor == true) { drawMask(imgSecondBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond") } } @@ -584,7 +622,7 @@ function drawBorder() { //LEGENDARY if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true) { drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, false, false) - if (document.getElementById("checkboxSecondColor").checked == true) { + if (secondColor == true) { drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, imgMultiGradient, "reverseSecond") } //redraws the custom-color border to match the legendary frame @@ -594,6 +632,18 @@ function drawBorder() { drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgLegendFrameMask, "reverseSecond") } } + //FLIP CARDS + if (document.getElementById("checkboxFlipIcon").checked == true && flipBorder == true) { + card.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height) + card.drawImage(imgBorderFlipIcon, 39, 51, 60, 60) + } + if (document.getElementById("checkboxFlipTip").checked == true && flipBorder == true) { + card.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height) + card.fillStyle="#666" + canvas.style.letterSpacing = "0px" + card.font = "28px belerenb" + card.fillText(document.getElementById("inputFlipTip").value, 688 - card.measureText(document.getElementById("inputFlipTip").value).width, 880) + } } //Draw Set Symbol function drawSetSymbol() { @@ -661,7 +711,7 @@ function writeText() { //Title canvas.style.letterSpacing = titleFontSpacing card.font = titleFont - card.fillText(document.getElementById("inputName").value, titleX, titleY) + card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY) //Type canvas.style.letterSpacing = typeFontSpacing card.font = typeFont @@ -673,13 +723,7 @@ function writeText() { drawText(text, textX, textY) //Power/Toughness if (document.getElementById("checkboxCreature").checked == true) { - if (document.getElementById("checkboxThirdColor").checked == true) { - card.drawImage(imgThirdBorderCreature, ptX, ptY, ptWidth, ptHeight) - } else if (document.getElementById("checkboxSecondColor").checked == true) { - card.drawImage(imgSecondBorderCreature, ptX, ptY, ptWidth, ptHeight) - } else { - card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight) - } + card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight) canvas.style.letterSpacing = ptFontSpacing card.font = ptFont powerToughness = document.getElementById("inputPowerToughness").value @@ -770,7 +814,7 @@ function drawText(text, xCoord, yCoord) { line = testLine + " " } if (wordIndex + 1 == words.length) { - card.fillText(line, x + textXShift, y) + card.fillText(line, x + textXShift, y) } } else { //Symbols and more! @@ -839,7 +883,7 @@ function drawText(text, xCoord, yCoord) { line = testLine } if (wordIndex + 1 == words.length) { - card.fillText(line, x + textXShift, y) + card.fillText(line, x + textXShift, y) } } } @@ -871,7 +915,7 @@ function loadSetSymbol() { //Best for last - downloads the image! function downloadCardImage(el) { alert("This may not work because the canvas is 'tainted' - if you know how to avoid this please tell me") - var cardImageData = canvas.toDataURL("image/jpg") + var cardImageData = canvas.toDataURL() el.href = cardImageData }