better border loading

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

index.html

@@ -20,9 +20,9 @@
 				<div class="togglee shown">
 					Border
 					<select id="borderSelection" onchange="changeTemplate()">
-						<option value="plane/">Plane</option>
 						<option value="m15/">M15</option>
 						<option value="map/">Map (Ixalan)</option>
+						<option value="plane/">Plane</option>
 						<option value="8th/">8th</option>
 					</select>
 					<br/>
@@ -35,7 +35,7 @@
 					<br/>
 					<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()">Third Color <select id="thirdColorSelection" onchange="updateBorder()"></select></input>
 					<br/>
-					<input type="checkbox" id="checkboxCreature" onchange="updateBorder()">Power/Toughness
+					<input type="checkbox" id="checkboxCreature">Power/Toughness
 					<input id="inputPowerToughness" value="" type="text"></input>
 				</div>
 			</div>
@@ -151,7 +151,7 @@
 					<input type="checkbox" id="checkboxSetSymbol" checked="true">Set Symbol</input>
 					<br>
 					Set Code
-					<input type="text" onchange="loadSetSymbol()" value="pca" id="setSymbolCode"></input>
+					<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode"></input>
 					<br>
 					Set Symbol Rarity
 					<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity"></input>
@@ -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
 }