diff --git a/data/borders/plane/border.js b/data/borders/plane/border.js
index 88fc3cb3..524d65e3 100644
--- a/data/borders/plane/border.js
+++ b/data/borders/plane/border.js
@@ -18,8 +18,8 @@ var typeY = 502
var typeAlign = "center"
//Rules/Flavor Text
var textFont = "px mplantin"
-var textFontSpacing = 0.3
-var textX = 125
+var textFontSpacing = 0.2
+var textX = 124
var textY = 535
var textWidth = 925
document.getElementById("textSize").value = 26
diff --git a/data/borders/plane/white/frame.png b/data/borders/plane/white/frame.png
index 1ebde358..d8259f71 100644
Binary files a/data/borders/plane/white/frame.png 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
deleted file mode 100644
index d8259f71..00000000
Binary files a/data/borders/plane/white/old.png and /dev/null differ
diff --git a/data/manaSymbols/56.png b/data/manaSymbols/56.png
new file mode 100644
index 00000000..60428e96
Binary files /dev/null and b/data/manaSymbols/56.png differ
diff --git a/index.html b/index.html
index 55bef4ce..d99dac04 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,9 @@
Border
@@ -35,7 +35,7 @@
Third Color
- Power/Toughness
+ Power/Toughness
@@ -151,7 +151,7 @@
Set Symbol
Set Code
-
+
Set Symbol Rarity
@@ -433,7 +433,7 @@ a:active {
var borderCanvas = document.createElement("canvas")
borderCanvas.width = 749; borderCanvas.height = 1044
var border = borderCanvas.getContext("2d")
-document.body.appendChild(borderCanvas)
+//document.body.appendChild(borderCanvas)
//Load the initial border (m15)
changeTemplate()
//set up initial variables
@@ -442,24 +442,47 @@ var secondColor
var thirdColor
var titleRightShift = 0
var typeRightShift = 0
+var imagesToLoad
//set up canvas
var canvas = document.getElementById("canvas")
var card = canvas.getContext("2d")
-//Load dynamic images
-var dynamicImageList = ["art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "border", "borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark", "artMask"]
-for (i = 0; i < dynamicImageList.length; i ++) {
- var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1)
+//load template images (images that may change based off of the selected template)
+var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask"]
+for (i = 0; i < imgListTemplate.length; i ++) {
+ var imgName = "img" + imgListTemplate[i].charAt(0).toUpperCase() + imgListTemplate[i].slice(1)
+ window[imgName] = new Image()
+}
+//Load border images (images that are determined by border settings)
+var imgListBorder = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark"]
+for (i = 0; i < imgListBorder.length; i ++) {
+ var imgName = "img" + imgListBorder[i].charAt(0).toUpperCase() + imgListBorder[i].slice(1)
+ window[imgName] = new Image()
+ imgListBorder[i] = window[imgName]
+ imgListBorder[i].onload = function() {
+ if (this.hasToLoad == true) {
+ this.hasToLoad = false
+ imagesToLoad --
+ if (imagesToLoad == 0) {
+ createBorder()
+ }
+ }
+ }
+}
+//Load dynamic images (images that are input by the user)
+var imgListUser = ["art", "setSymbol", "watermark", "border"]
+for (i = 0; i < imgListUser.length; i ++) {
+ var imgName = "img" + imgListUser[i].charAt(0).toUpperCase() + imgListUser[i].slice(1)
window[imgName] = new Image()
}
//Load static images
-var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
-for (i = 0; i < staticImageList.length; i ++) {
- var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
+var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
+for (i = 0; i < imgListStatic.length; i ++) {
+ var imgName = "img" + imgListStatic[i].charAt(0).toUpperCase() + imgListStatic[i].slice(1)
window[imgName] = new Image()
- window[imgName].src = "data/borders/" + staticImageList[i] + ".png"
+ window[imgName].src = "data/borders/" + imgListStatic[i] + ".png"
}
//Mana symbol Array setup
-var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "snow", "c", "t","untap", "e", "y", "z", "half", "infinity"]
+var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "snow", "c", "t","untap", "e", "y", "z", "half", "infinity", "chaos"]
var manaSymbolImages = new Array()
for (var i = 0; i < manaSymbolCode.length; i++) {
manaSymbolImages[i] = new Image()
@@ -518,9 +541,9 @@ function cardClock() {
}
//Sets up the initial clock
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//The two following functions load border images
function changeTemplate() {
//the loadScript function is located in data/scripts/loadScript.js. It sets values to variables such as set symbol coordinates or title font
@@ -606,9 +629,18 @@ function updateBorder() {
imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value
}
- //This creates a short pause in order to allow all images to finish loading
- imgBorderColor.onload = function() {
- setTimeout(createBorder, 50)
+ //This allows all the images to be loaded
+ imagesToLoad = 0
+ //Makes a count of all images that are loading, also tags them
+ for (i = 0; i < imgListBorder.length; i++) {
+ if (imgListBorder[i].complete == false) {
+ imagesToLoad ++
+ imgListBorder[i].hasToLoad = true
+ }
+ }
+ //If no images needed to be loaded, runs the createBorder function anyways
+ if (imagesToLoad == 0) {
+ createBorder()
}
}
//Once the border images have finished loading, they are all drawn into a temporary canvas then saved to a single image
@@ -998,7 +1030,16 @@ function drawText(text, xCoord, yCoord) {
card.drawImage(imgBar, canvas.width / 2 - imgBar.width / 2, y + textSize + lineSpace + 5)
textXShift = 0
y += 2 * lineSpace + textSize + 3
+ } else if (megaSplit[0] == "chaos") {
+ //The chaos symbol (on planar cards) needs to be a bit bigger
+ card.drawImage(manaSymbolImages[56], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize, manaSymbolImages[56].height * textSize / manaSymbolImages[56].width)
+ textXShift += textSize * 1
+ } else if (megaSplit[0] == "plane") {
+ //This draws the large chaos symbol found on planar cards and permenantly shifts the text over
+ card.drawImage(manaSymbolImages[56], x, y + 6, 48, 42)
+ x += 58
} else {
+ //It's an image (mana symbol, tap, etc...)
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize * 0.77, textSize * 0.77)
textXShift += textSize * 0.84
}
@@ -1055,7 +1096,7 @@ function resizeThings() {
}
}
-//runs the autocrop function for the chosen set symbol
+//Loads the set symbol from my seperate repository
function loadSetSymbol() {
imgSetSymbol.crossOrigin = "Anonymous"
imgSetSymbol.src = "https://raw.githubusercontent.com/ImKyle4815/MTG-Set-Symbols/master/setSymbols/" + document.getElementById("setSymbolCode").value.toUpperCase() + "_" + document.getElementById("setSymbolRarity").value.toUpperCase() + ".png"
@@ -1065,7 +1106,7 @@ function loadSetSymbol() {
function downloadCardImage(linkElement) {
var cardImageData = canvas.toDataURL()
if (cardImageData == undefined) {
- alert("Sorry, it seems that you cannot download your card. Please try using a different browser.")
+ alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
}
linkElement.href = cardImageData
}