whoa

data/borders/fullArtLandUnstable/border.js

@@ -1,14 +1,36 @@
 //============================================//
-//                 M15 Border                 //
+//        Full Art Land Unstable Border       //
 //============================================//
-//Restores default values
+//General Booleans
-cardData = defaultCardData
+cardData.miracle = false
-//Restores default masks
+cardData.nyx = false
-for (var i = 0; i < frameMaskList.length; i++) {
+cardData.legendary = false
-	if (window[frameMaskList[i]].src.includes("data/borders/m15/" + frameMaskList[i] + ".png") == false) {
+cardData.creature = false
-		window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
+cardData.rulesBox = false
-	}
+cardData.titleTypeBoxes = false
-}
+cardData.transparency = true
-//Loads the colors
+//Specific Values
-loadColors("white-White,blue-Blue,black-Black,red-Red,green-Green,gold-Gold,artifact-Artifact,colorless-Colorless,vehicle-Vehicle,clear-Clear,whiteLand-White Land,blueLand-Blue Land,blackLand-Black Land,redLand-Red Land,greenLand-Green Land,goldLand-Gold Land,colorlessLand-Colorless Land")
+cardData.cardArtX = 0
-//Changes anything needed to be changed
+cardData.cardArtY = 0
+cardData.titleAlignment = "center"
+cardData.titleX = cardWidth / 2
+cardData.titleY = cheight(48)
+cardData.titleRight = cwidth(999)
+cardData.manaSymbolDirection = "none"
+document.getElementById("inputTitleColor").value = "#ffffff"
+imgRareStamp.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
+imgRareStampRight.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
+cardData.setSymbolX = cardWidth / 2
+cardData.setSymbolY = cheight(80)
+cardData.setSymbolAlignment = "center"
+//Images
+imgArtMask.load("data/borders/fullArtLandUnstable/imgArtMask.png")
+imgBorderMask.load("data/borders/fullArtLandUnstable/imgBorderMask.png")
+imgFrameMask.load("data/borders/fullArtLandUnstable/imgFrameMask.png")
+imgPinlineMask.load("data/borders/fullArtLandUnstable/imgPinlineMask.png")
+//Loads the Colors
+loadColors("white-White,blue-Blue,black-Black,red-Red,green-Green,gold-Gold,colorless-Colorless")
+//Runs the things!
+sectionTextFunction()
+sectionFrameFunction()
+sectionOtherFunction()

data/borders/m15/border.js

@@ -1,14 +1,9 @@
 //============================================//
 //                 M15 Border                 //
 //============================================//
-//Restores default values
-cardData = defaultCardData
-//Restores default masks
-for (var i = 0; i < frameMaskList.length; i++) {
-	if (window[frameMaskList[i]].src.includes("data/borders/m15/" + frameMaskList[i] + ".png") == false) {
-		window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
-	}
-}
 //Loads the colors
 loadColors("white-White,blue-Blue,black-Black,red-Red,green-Green,gold-Gold,artifact-Artifact,colorless-Colorless,vehicle-Vehicle,clear-Clear,whiteLand-White Land,blueLand-Blue Land,blackLand-Black Land,redLand-Red Land,greenLand-Green Land,goldLand-Gold Land,colorlessLand-Colorless Land")
-//Changes anything needed to be changed
+//Runs the things!
+sectionTextFunction()
+sectionFrameFunction()
+sectionOtherFunction()

data/main.js

@@ -18,32 +18,57 @@ var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
 //Create the object that stores data for convencience :) It's what keeps track of values necessary to change between card frames
 var defaultCardData = {
 	version:"m15",
-	manaSymbolX:659, manaSymbolY:60, manaSymbolRadius:17.5, manaSymbolDirection:"left",
+	manaSymbolX:cwidth(659), manaSymbolY:cheight(60), manaSymbolRadius:cwidth(17.5), manaSymbolDirection:"left",
-	titleX:63, titleY:94, titleRight:687, titleFont:"belerenb", titleFontSize:40,
+	titleX:cwidth(63), titleY:cheight(94), titleRight:cwidth(687), titleFont:"belerenb", titleFontSize:cwidth(40), titleAlignment:"left",
-	typeX:63, typeY:630, typeRight:687, typeFont:"belerenb", typeFontSize:34,
+	typeX:cwidth(63), typeY:cheight(630), typeRight:cwidth(687), typeFont:"belerenb", typeFontSize:cwidth(34), typeAlignment:"left",
-	textX:63, textY:690, textRight:690, textFont:"mplantin",
+	textX:cwidth(63), textY:cheight(690), textRight:cwidth(690), textFont:"mplantin",
-	ptFont:"39px belerenb", ptX:645, ptY:975,
+	ptFont:"39px belerenb", ptX:cwidth(645), ptY:cheight(975),
-	ptBoxX:571, ptBoxY:929, ptBoxWidth:135, ptBoxHeight:76,
+	ptBoxX:cwidth(571), ptBoxY:cheight(929), ptBoxWidth:cwidth(135), ptBoxHeight:cheight(76),
-	setSymbolWidth:77, setSymbolHeight:42, setSymbolX:693, setSymbolY:620,
+	setSymbolWidth:cwidth(77), setSymbolHeight:cheight(42), setSymbolX:cwidth(693), setSymbolY:cheight(620), setSymbolAlignment:"right",
-	watermarkWidth:520, watermarkHeight:250, watermarkY:815,
+	watermarkWidth:cwidth(520), watermarkHeight:cheight(250), watermarkY:cheight(815),
-	cardArtX:58, cardArtY:118
+	cardArtX:cwidth(58), cardArtY:cheight(118),
+	miracle:true, nyx:true, legendary:true, creature:true, rulesBox:true, pinline:true, rareStamp:true, titleTypeBoxes:true,
+	transparency:false
 }
-var cardData = defaultCardData
+var cardData = {}
+Object.assign(cardData, defaultCardData)
 //Function that restores image values for various things :)
-function defaultImageValues() {
+function backToDefault(version) {
-	imgLegendary.load("none", 20, 20, 714, 186)
+	//Default image values
-	imgLegendaryRight.load("none", 20, 20, 714, 186)
+	imgLegendary.load("none", cwidth(20), cheight(20), cwidth(714), cheight(186))
-	imgRareStamp.load("none", 329, 949, 90, 50)
+	imgLegendaryRight.load("none", cwidth(20), cheight(20), cwidth(714), cheight(186))
-	imgRareStampRight.load("none", 329, 949, 90, 50)
+	imgRareStamp.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
-	imgStamp.load("none", 340, 965, 70, 37)
+	imgRareStampRight.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
-	imgNyx.load("none", 30, 30, 690, 586)
+	imgStamp.load("none", cwidth(340), cheight(965), cwidth(70), cheight(37))
-	imgNyxRight.load("none", 30, 30, 690, 586)
+	imgNyx.load("none", cwidth(30), cheight(30), cwidth(690), cheight(586))
-	imgMiracle.load("none", 30, 30, 689, 511)
+	imgNyxRight.load("none", cwidth(30), cheight(30), cwidth(690), cheight(586))
-	imgMiracleRight.load("none", 30, 30, 689, 511)
+	imgMiracle.load("none", cwidth(30), cheight(30), cwidth(689), cheight(511))
+	imgMiracleRight.load("none", cwidth(30), cheight(30), cwidth(689), cheight(511))
+	//Default card data, correct card version
+	Object.assign(cardData, defaultCardData)
+	cardData.version = version
+	//Default masks
+	for (var i = 0; i < frameMaskList.length; i++) {
+		if (window[frameMaskList[i]].src.includes("data/borders/m15/" + frameMaskList[i] + ".png") == false) {
+			window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
+		}
+	}
+	//Loads correct frame images
+	for (var i = 0; i < frameImageList.length; i++) {
+		window[frameImageList[i]].load("data/borders/" + cardData.version + "/white/frame.png")
+	}
+	//Fixes default font Colors
+	for (var i = 0; i < document.getElementsByClassName("fontColor").length; i++) {
+		document.getElementsByClassName("fontColor")[i].value = "#000000"
+	}
+	//Runs the finishing script
+	loadScript('data/borders/' + version + '/border.js')
 }
 
 //Set up canvases
 var cardCanvas = document.getElementById("cardCanvas")
+cardCanvas.width = cardWidth
+cardCanvas.height = cardHeight
 var card = cardCanvas.getContext("2d")
 function newCanvas(name) {
 	window[(name + "Canvas")] = document.createElement("canvas")
@@ -98,12 +123,12 @@ CanvasRenderingContext2D.prototype.mask = function(image, masks, color, opacity
 }
 
 //Text processor... kind of...
-CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, inputRightLimit, textFont, textFontSize, textColor, skipLines, outline, outlineColor) {
+CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, inputRightLimit, textFont, textFontSize, textColor, skipLines, outline, outlineColor, textAlignment = "left") {
 	this.font = textFontSize + "px " + textFont
 	this.fillStyle = textColor
 	this.strokeStyle = outlineColor
 	this.lineWidth = 2
-	this.textAlign = "left"
+	this.textAlign = textAlignment
 	var x = inputX
 	var y = inputY
 	var rightLimit = inputRightLimit
@@ -132,6 +157,7 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
 				this.fillText(currentString, currentX, currentY)
 				currentX += this.measureText(currentString).width
 				currentString = ""
+				//Then grind through the string for codes
 				while(splitText[i] != "") {
 					//There may be codes within! split up the string further incase there are multiple codes/words
 					var wordToWrite = ""
@@ -191,14 +217,14 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
 						splitText[i] = splitText[i].substr(possibleCode.length)
 					} else {
 						//It begins with a word. Write it.
-						if (splitText[i].includes("{")) {
+						if (splitText[i].includes("{") && splitText[i].charAt(0) != "{") {
 							//There still could be codes, leave those be.
 							wordToWrite = splitText[i].slice(0, splitText[i].indexOf("{"))
-						} else {
+						} else if (splitText[i] != "" && splitText != " ") {
 							//There aren't any codes left. Finish up.
 							wordToWrite = splitText[i] + " "
 						}
-						splitText[i] = splitText[i].substr(splitText[i].length)
+						splitText[i] = splitText[i].substring(wordToWrite.length)
 					}
 					//After extracting a word to write, write it (if it exists)
 					if (wordToWrite != "") {
@@ -218,7 +244,7 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
 							currentX += this.measureText(wordToWrite).width
 						}
 					}
-				}
+				} //WHILE LOOP ENDS HERE
 			} else if (this.measureText(currentString + " " + splitText[i]).width + currentX > rightLimit) {
 				//There aren't any codes, but the text doesn't fit. Finish writing the current line and move to the next one.
 				if (outline) {
@@ -249,20 +275,24 @@ CanvasRenderingContext2D.prototype.manaCost = function(input, x, y, size, path)
 	var currentX = x
 	var currentY = y
 	var manaCostList = input.toLowerCase().replace(/{/g, " ").replace(/}/g, " ").split(" ")
-	var manaSymbolWidth = 0
+	if (cardData.manaSymbolDirection == "left") {
-	for (var i = manaCostList.length - 1; i >= 0; i--) {
+		var manaSymbolWidth = 0
-		if (manaSymbolCodeList.indexOf(manaCostList[i]) != -1) {
+		for (var i = manaCostList.length - 1; i >= 0; i--) {
-			this.beginPath()
+			if (manaSymbolCodeList.indexOf(manaCostList[i]) != -1) {
-			this.arc(currentX + size - 1, currentY + size + 3.5, size, 0, 6.29, false)
+				this.beginPath()
-			this.fill()
+				this.arc(currentX + size - 1, currentY + size + 3.5, size, 0, 6.29, false)
-			this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(manaCostList[i])], currentX, currentY, size * 2, size * 2)
+				this.fill()
-			if (path == "left") {
+				this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(manaCostList[i])], currentX, currentY, size * 2, size * 2)
-				currentX -= 39
+				if (path == "left") {
-				manaSymbolWidth += 39
+					currentX -= 39
+					manaSymbolWidth += 39
+				}
 			}
 		}
+		return manaSymbolWidth
+	} else {
+		return 0
 	}
-	return manaSymbolWidth
 }
 
 //Function that autocrops the image
@@ -410,7 +440,7 @@ for (var i = 0; i < frameImageList.length; i++) {
 createImage("imgPowerToughness", "sectionText")
 imgPowerToughness.load("data/borders/m15/white/pt.png")
 //masks for the card frame
-var frameMaskList = ["imgTypeMask", "imgTitleMask", "imgPinlineMask", "imgRulesMask", "imgFrameMask", "imgArtMask"]
+var frameMaskList = ["imgTypeMask", "imgTitleMask", "imgPinlineMask", "imgRulesMask", "imgFrameMask", "imgArtMask", "imgBorderMask"]
 for (var i = 0; i < frameMaskList.length; i++) {
 	createImage(frameMaskList[i], "sectionFrame")
 	window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
@@ -457,8 +487,6 @@ for (var i = 0; i < manaSymbolCodeList.length; i++) {
 		document.getElementById(this.name).src = this.src
 	}
 }
-//changeme
-imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputSetSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("inputSetSymbolRarity").value.toUpperCase(), imgSetSymbol, "needsBoth")
 
 //============================================//
 //             Draw The Sections!             //
@@ -467,35 +495,39 @@ function sectionFrameFunction() {
 	//Whenever images for the card from finish loading this function will run
 	//Draw the primary frame stuff!
 	frameContext.clearRect(0, 0, cardWidth, cardHeight)
-	frameContext.mask(imgFrame)
+	if (cardData.transparency && document.getElementById("inputCheckboxFrameRight").checked) {
+		frameContext.mask(imgFrame, "imgMultiGradient,source-over;imgWhite,source-out")
+	} else {
+		frameContext.mask(imgFrame)
+	}
 	if (document.getElementById("inputCheckboxFrameRight").checked) {
 		frameContext.mask(imgFrameRight, "imgMultiGradient,source-over")
 	}
-	if (document.getElementById("inputCheckboxRulesBox").checked) {
+	if (document.getElementById("inputCheckboxRulesBox").checked && cardData.rulesBox) {
 		frameContext.mask(imgRulesBox, "imgRulesMask,source-over")
 		if (document.getElementById("inputCheckboxRulesBoxRight").checked) {
 			frameContext.mask(imgRulesBoxRight, "imgRulesMask,source-over;imgMultiGradient,source-in")
 		}
 	}
-	if (document.getElementById("inputCheckboxTitleTypeBoxes").checked) {
+	if (document.getElementById("inputCheckboxTitleTypeBoxes").checked && cardData.titleTypeBoxes) {
 		frameContext.mask(imgTitleTypeBoxes, "imgTitleMask,source-over;imgTypeMask,source-over")
 		if (document.getElementById("inputCheckboxTitleTypeBoxesRight").checked) {
 			frameContext.mask(imgTitleTypeBoxesRight, "imgTitleMask,source-over;imgTypeMask,source-over;imgMultiGradient,source-in")
 		}
 	}
-	if (document.getElementById("inputCheckboxNyx").checked) {
+	if (document.getElementById("inputCheckboxNyx").checked && cardData.nyx) {
 		frameContext.mask(imgNyx)
 		if (document.getElementById("inputCheckboxFrameRight").checked) {
 			frameContext.mask(imgNyxRight, "imgMultiGradient,source-over")
 		}
 	}
-	if (document.getElementById("inputCheckboxPinline").checked) {
+	if (document.getElementById("inputCheckboxPinline").checked && cardData.pinline) {
 		frameContext.mask(imgPinline, "imgPinlineMask,source-over")
 		if (document.getElementById("inputCheckboxPinlineRight").checked) {
 			frameContext.mask(imgPinlineRight, "imgPinlineMask,source-over;imgMultiGradient,source-in")
 		}
 	}
-	if (document.getElementById("inputCheckboxMiracle").checked) {
+	if (document.getElementById("inputCheckboxMiracle").checked && cardData.miracle) {
 		if ((document.getElementById("inputCheckboxTitleTypeBoxes").checked && document.getElementById("inputCheckboxTitleTypeBoxesRight").checked) || (document.getElementById("inputCheckboxFrameRight").checked && document.getElementById("inputCheckboxTitleTypeBoxes").checked == false)) {
 			frameContext.mask(imgMiracle) //changeme
 			frameContext.mask(imgMiracleRight, "imgMultiGradient,source-over")
@@ -503,7 +535,8 @@ function sectionFrameFunction() {
 			frameContext.mask(imgMiracle)
 		}
 	}
-	if (document.getElementById("inputCheckboxLegendary").checked) {
+	frameContext.mask(imgBorderMask, "none", document.getElementById("inputBorderColor").value)
+	if (document.getElementById("inputCheckboxLegendary").checked && cardData.legendary) {
 		frameContext.fillStyle = "black"
 		frameContext.fillRect(0, 0, cardWidth, 50)
 		frameContext.mask(imgLegendary, "imgTitleMask,source-over;imgWhite,source-out")
@@ -511,8 +544,7 @@ function sectionFrameFunction() {
 			frameContext.mask(imgLegendaryRight, "imgTitleMask,source-over;imgMultiGradient,source-out")
 		}
 	}
-	
+	if (document.getElementById("inputCheckboxRareStamp").checked && cardData.rareStamp) {
-	if (document.getElementById("inputCheckboxRareStamp").checked) {
 		frameContext.mask(imgRareStamp)
 		if ((document.getElementById("inputCheckboxPinline").checked && document.getElementById("inputCheckboxPinlineRight").checked) || (document.getElementById("inputCheckboxFrameRight").checked && document.getElementById("inputCheckboxPinline").checked == false)) {
 			frameContext.mask(imgRareStampRight, "imgMultiGradient,source-over")
@@ -521,7 +553,7 @@ function sectionFrameFunction() {
 	}
 	//Erase anything if needed (includes opacity fun)
 	frameContext.globalCompositeOperation = "destination-out"
-	frameContext.mask(imgArtMask)
+	// frameContext.mask(imgArtMask)
 	frameContext.mask(imgCornerMask)
 	frameContext.mask(imgWhite, "imgTitleMask,source-over;imgTypeMask,source-over", "none", 1 - (parseInt(document.getElementById("inputTitleTypeOpacity").value) / 100))
 	frameContext.mask(imgWhite, "imgRulesMask,source-over", "none", 1 - (parseInt(document.getElementById("inputRulesBoxOpacity").value) / 100))
@@ -537,11 +569,11 @@ function sectionTextFunction() {
 	textContext.clearRect(0, 0, cardWidth, cardHeight)
 	//mana cost, name, type, text
 	var manaSymbolWidth = textContext.manaCost(document.getElementById("inputCost").value, cardData.manaSymbolX, cardData.manaSymbolY, cardData.manaSymbolRadius, cardData.manaSymbolDirection)
-	textContext.writeText(document.getElementById("inputName").value, cardData.titleX, cardData.titleY, cardData.titleRight - manaSymbolWidth, cardData.titleFont, cardData.titleFontSize, document.getElementById("inputTitleColor").value, false, document.getElementById("inputCheckboxTitleOutline").checked, document.getElementById("inputTitleOutlineColor").value)
+	textContext.writeText(document.getElementById("inputName").value, cardData.titleX, cardData.titleY, cardData.titleRight - manaSymbolWidth, cardData.titleFont, cardData.titleFontSize, document.getElementById("inputTitleColor").value, false, document.getElementById("inputCheckboxTitleOutline").checked, document.getElementById("inputTitleOutlineColor").value, cardData.titleAlignment)
-	textContext.writeText(document.getElementById("inputType").value, cardData.typeX, cardData.typeY, cardData.typeRight, cardData.typeFont, cardData.typeFontSize, document.getElementById("inputTypeColor").value, false, document.getElementById("inputCheckboxTypeOutline").checked, document.getElementById("inputTypeOutlineColor").value)
+	textContext.writeText(document.getElementById("inputType").value, cardData.typeX, cardData.typeY, cardData.typeRight, cardData.typeFont, cardData.typeFontSize, document.getElementById("inputTypeColor").value, false, document.getElementById("inputCheckboxTypeOutline").checked, document.getElementById("inputTypeOutlineColor").value, cardData.typeAlignment)
 	textContext.writeText(document.getElementById("inputText").value, cardData.textX, cardData.textY + parseInt(document.getElementById("inputTextDown").value), cardData.textRight, cardData.textFont, parseInt(document.getElementById("inputTextSize").value), document.getElementById("inputRulesColor").value, true, document.getElementById("inputCheckboxRulesOutline").checked, document.getElementById("inputRulesOutlineColor").value)
 	//Power Toughness
-	if (document.getElementById("inputCheckboxPowerToughness").checked) {
+	if (document.getElementById("inputCheckboxPowerToughness").checked && cardData.creature) {
 		imgPowerToughness.xVal = cardData.ptBoxX
 		imgPowerToughness.yVal = cardData.ptBoxY
 		imgPowerToughness.wVal = cardData.ptBoxWidth
@@ -587,22 +619,29 @@ function sectionTextFunction() {
 		infoCopyright = ""
 	}
 	var copyrightY = 997
-	if (document.getElementById("inputCheckboxPowerToughness").checked) {
+	if (document.getElementById("inputCheckboxPowerToughness").checked && cardData.creature) {
 		copyrightY = 1016
 	}
 	textContext.fillText(infoCopyright, 700, copyrightY)
 	textContext.textAlign = "left"
 	drawCard()
 }
-//changeme
-setTimeout(function(){sectionTextFunction()}, 500)
-setTimeout(function(){sectionTextFunction()}, 1000)
 
 function sectionOtherFunction() {
 	//clears the 'other' canvas
 	otherContext.clearRect(0, 0, cardWidth, cardHeight)
 	if (document.getElementById("inputCheckboxSetSymbol").checked) {
 		//Set Symbol
+		switch(cardData.setSymbolAlignment) {
+			case "left":
+				setSymbolAlignment = -1
+				break
+			case "center":
+				setSymbolAlignment = 1/2
+				break
+			default:
+				setSymbolAlignment = 1
+		}
 		var setSymbolWidth = cardData.setSymbolWidth
 		var setSymbolHeight = imgSetSymbol.height / imgSetSymbol.width * setSymbolWidth
 		if (setSymbolHeight > cardData.setSymbolHeight) {
@@ -611,7 +650,7 @@ function sectionOtherFunction() {
 		}
 		setSymbolWidth *= parseInt(document.getElementById("inputSetSymbolScale").value) / 100
 		setSymbolHeight *= parseInt(document.getElementById("inputSetSymbolScale").value) / 100
-		otherContext.drawImage(imgSetSymbol, cardData.setSymbolX - setSymbolWidth, cardData.setSymbolY - setSymbolHeight / 2, setSymbolWidth, setSymbolHeight)
+		otherContext.drawImage(imgSetSymbol, cardData.setSymbolX - setSymbolWidth * setSymbolAlignment, cardData.setSymbolY - setSymbolHeight / 2, setSymbolWidth, setSymbolHeight)
 	}
 	if (document.getElementById("inputCheckboxWatermark").checked) {
 		//Watermark
@@ -639,7 +678,8 @@ function sectionOtherFunction() {
 
 function drawCard() {
 	//Clears the card
-	card.clearRect(0, 0, cardWidth, cardHeight)
+	// card.clearRect(0, 0, cardWidth, cardHeight)
+	card.mask(imgWhite, "none", document.getElementById("inputBorderColor").value)
 	//Draws the card art
 	card.drawImage(imgCardArt, parseInt(document.getElementById("inputCardArtX").value) + cardData.cardArtX, parseInt(document.getElementById("inputCardArtY").value) + cardData.cardArtY, imgCardArt.width * document.getElementById("inputCardArtZoom").value / 100, imgCardArt.height * document.getElementById("inputCardArtZoom").value / 100)
 	//Draws the card frame
@@ -781,35 +821,43 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
 //           Special Image Loading            //
 //============================================//
 function loadLegendaryImages() {
-	if (document.getElementById("inputCheckboxPinline").checked) {
+	if (cardData.legendary) {
-		imgLegendary.load(imgPinline.src.replace("frame.png", "legendary.png"))
+		if (document.getElementById("inputCheckboxPinline").checked) {
-		imgLegendaryRight.load(imgPinlineRight.src.replace("frame.png", "legendary.png"))
+			imgLegendary.load(imgPinline.src.replace("frame.png", "legendary.png"))
-	} else {
+			imgLegendaryRight.load(imgPinlineRight.src.replace("frame.png", "legendary.png"))
-		imgLegendary.load(imgFrame.src.replace("frame.png", "legendary.png"))
+		} else {
-		imgLegendaryRight.load(imgFrameRight.src.replace("frame.png", "legendary.png"))
+			imgLegendary.load(imgFrame.src.replace("frame.png", "legendary.png"))
+			imgLegendaryRight.load(imgFrameRight.src.replace("frame.png", "legendary.png"))
+		}
 	}
 }
 function loadRareStampImages() {
-	if (document.getElementById("inputCheckboxPinline").checked) {
+	if (cardData.rareStamp) {
-		imgRareStamp.load(imgPinline.src.replace("frame.png", "stamp.png"))
+		if (document.getElementById("inputCheckboxPinline").checked) {
-		imgRareStampRight.load(imgPinlineRight.src.replace("frame.png", "stamp.png"))
+			imgRareStamp.load(imgPinline.src.replace("frame.png", "stamp.png"))
-	} else {
+			imgRareStampRight.load(imgPinlineRight.src.replace("frame.png", "stamp.png"))
-		imgRareStamp.load(imgFrame.src.replace("frame.png", "stamp.png"))
+		} else {
-		imgRareStampRight.load(imgFrameRight.src.replace("frame.png", "stamp.png"))
+			imgRareStamp.load(imgFrame.src.replace("frame.png", "stamp.png"))
+			imgRareStampRight.load(imgFrameRight.src.replace("frame.png", "stamp.png"))
+		}
 	}
 }
 function loadMiracleImages() {
-	if (document.getElementById("inputCheckboxTitleTypeBoxes").checked) {
+	if (cardData.miracle) {
-		imgMiracle.load(imgTitleTypeBoxes.src.replace("frame.png", "miracle.png"))
+		if (document.getElementById("inputCheckboxTitleTypeBoxes").checked) {
-		imgMiracleRight.load(imgTitleTypeBoxesRight.src.replace("frame.png", "miracle.png"))
+			imgMiracle.load(imgTitleTypeBoxes.src.replace("frame.png", "miracle.png"))
-	} else {
+			imgMiracleRight.load(imgTitleTypeBoxesRight.src.replace("frame.png", "miracle.png"))
-		imgMiracle.load(imgFrame.src.replace("frame.png", "miracle.png"))
+		} else {
-		imgMiracleRight.load(imgFrameRight.src.replace("frame.png", "miracle.png"))
+			imgMiracle.load(imgFrame.src.replace("frame.png", "miracle.png"))
+			imgMiracleRight.load(imgFrameRight.src.replace("frame.png", "miracle.png"))
+		}
 	}
 }
 function loadNyxImages() {
-	imgNyx.load(imgFrame.src.replace("frame.png", "nyx.png"))
+	if (cardData.nyx) {
-	imgNyxRight.load(imgFrameRight.src.replace("frame.png", "nyx.png"))
+		imgNyx.load(imgFrame.src.replace("frame.png", "nyx.png"))
+		imgNyxRight.load(imgFrameRight.src.replace("frame.png", "nyx.png"))
+	}
 }
 for (var i = 0; i < document.getElementsByClassName("changesFrame").length; i++) {
 	document.getElementsByClassName("changesFrame")[i].addEventListener("change", function() {loadLegendaryImages(); loadRareStampImages(); loadNyxImages(); loadMiracleImages()}, false)
@@ -821,8 +869,88 @@ for (var i = 0; i < document.getElementsByClassName("changesPinline").length; i+
 	document.getElementsByClassName("changesPinline")[i].addEventListener("change", function() {loadLegendaryImages(); loadRareStampImages()}, false)
 }
 
+//============================================//
+//                Brower Stuff!               //
+//============================================//
+//Determine browser
+if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ) {
+	var isMobile = true
+} else {
+	var isMobile = false
+}
+var isChrome = navigator.userAgent.indexOf("Chrome") > -1
+var isExplorer = navigator.userAgent.indexOf("MSIE") > -1
+var isFirefox = navigator.userAgent.indexOf("Firefox") > -1
+var isSafari = navigator.userAgent.indexOf("Safari") > -1
+if (isChrome == true && isSafari == true) {
+	isSafari = false
+}
+//Now act on different browser craziness...
+if (isSafari == true) {
+	if (isMobile == true) {
+		//Safari for iOS
+		textBaselineShift = [-0.17, -0.08]
+	} else {
+		//Safari for macOS
+		textBaselineShift = [-0.17, 0]
+	}
+}
+function setCookie(cookieName, cookieValue) {
+  	var tempDate = new Date();
+  	tempDate.setTime(tempDate.getTime() + (31 * 24 * 60 * 60 * 1000)); //days*hours*minutes*seconds*milliseconds
+  	var expires = "expires=" + tempDate.toUTCString();
+  	document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
+}
+function getCookie(cookieName) {
+  	var name = cookieName + "=";
+  	var cookieArray = document.cookie.split(";");
+  	for(var i = 0; i < cookieArray.length; i++) {
+    	var tempCookie = cookieArray[i];
+    	while (tempCookie.charAt(0) == " ") {
+      		tempCookie = tempCookie.substring(1);
+    	}
+    	if (tempCookie.indexOf(name) == 0) {
+     		return tempCookie.substring(name.length, tempCookie.length);
+    	}
+  	}
+  	return "";
+}
+function checkCookies() {
+	if (getCookie("visited") != "true") {
+		if (isMobile == true) {
+            alert("Thanks for using Card Conjurer! Unfortunately some users have been experiencing difficulty on mobile devices when uploading pictures they took on that mobile device. An easy solution is to quickly edit that picture by cropping it slightly. Otherwise, images from URLs and other sources should work normally.")
+        } else if (isSafari == false && isChrome == false) {
+            alert("Thanks for using Card Conjurer! Unfortunately different browsers treat custom fonts differently and it appears that you are using a browser other than Safari or Chrome. Everything may work perfectly, but if you notice that the cards look odd try using Safari or Chrome.")
+        }
+        setCookie("visited", "true")
+	} else {
+		console.log("Welcome back to Card Conjurer!")
+	}
+}
+
+//============================================//
+//                    OTHER                   //
+//============================================//
+//changeme (FIND A BETTER PLACE FOR THIS)
+function cwidth(originalValue = 750, originalCardWidth = 750) {
+	return (originalValue / originalCardWidth * cardWidth)
+}
+function cheight(originalValue = 1050, originalCardHeight = 1050) {
+	return (originalValue / originalCardHeight * cardHeight)
+}
+
 //Runs stuff at the very end (once everything is set up)
-defaultImageValues()
+checkCookies()
+backToDefault("m15")
+loadScript("data/other/setCodeList.js")
+//changeme
+setTimeout(function(){sectionTextFunction()}, 100)
+setTimeout(function(){sectionTextFunction()}, 250)
+//Only for working on frames n' stuff :)
+// setTimeout(function(){
+// 	document.getElementById("inputCardVersion").value = "fullArtLandUnstable"
+// 	document.getElementById("inputCardVersion").onchange()
+// }, 50)
 
 //============================================//
 //            RIP OLD CARD CONJURER           //

data/other/setCodeList.js

@@ -0,0 +1,90 @@
+/*
+This is a list of set codes.
+It has all been typed manually, so there are possibly errors, but let's hope not!
+Duplicates found and removed: ORI, W17, CED
+Sets not found: Astral, Deckmasters, Duels of the Planeswalkers
+The codes have been resourced from the following:
+https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets
+Last updated: 3-29-19
+Last set added: 
+*/
+//Common through Rare
+var setCodeListPreMythic = ['1E', '2E', '2U', '3E', '4E', '5E', '6E', '7E', '8ED', '9ED', '10E', 'AN', 
+'AQ', 'LE', 'DK', 'FE', 'HM', 'IA', 'AL', 'MI', 'VI', 'WL', 'TE', 'ST', 'EX', 'UZ', 'GU', 'AP', 'OD', 
+'TOR', 'JUD', 'ONS', 'LGN', 'SCG', 'MRD', 'DST', '5DN', 'CHK', 'BOK', 'SOK', 'RAV', 'GPT', 'DIS', 'CSP', 
+'TSP', 'PLC', 'FUT', 'LRW', 'MOR', 'SHM', 'EVE', 'PO', 'P2', 'PK', 'P3', 'P4', 'CH', 'BR', 'BD', 'EVG', 
+'UG', 'UNH', 'MED', 'ME2', 'ME3', 'ME4']
+//Common through Mythic
+var setCodeListPostMythic = ['M10', 'M11', 'M12', 'M13', 'M14', 'M15', 'ORI', 'M19', 'ALA', 'CON', 
+'ARB', 'ZEN', 'WWK', 'ROE', 'SOM', 'MBS', 'NPH', 'ISD', 'DKA', 'AVR', 'RTR', 'GTC', 'DGM', 'THS', 'BNG', 
+'JOU', 'KTK', 'FRF', 'DTK', 'BFZ', 'OGW', 'SOI', 'EMN', 'KLD', 'AER', 'AKH', 'HOU', 'XLN', 'RIX', 'DOM', 
+'GRN', 'RNA', /*'MH1',*/ 'GS1', 'MD1', 'DD2', 'DDC', 'DDD', 'DDE', 'DDF', 'DDG', 'DDH', 'DDI', 'DDJ', 'DDK', 
+'DDL', 'DDM', 'DDN', 'DDP', 'DDQ', 'DDR', 'DDS', 'DDT', 'DDU', 'SS1', 'H09', 'PD2', 'PD3', 'MMA', 'MM2', 
+'EMA', 'MM3', 'IMA', 'A25', 'UMA', 'HOP', 'PC2', 'PCA', 'ARC', 'E01', 'CMD', 'CM1', 'C13', 'C14', 'C15', 
+'C16', 'CMA', 'C17', 'CM2', 'C18', 'CNS', 'CN2', 'E02', 'BBD', 'UST', 'VMA', 'TPR', 'W16', 'W17', 
+'GK1_IZZET', 'GK1_SELESN', 'GK1_BOROS', 'GK1_GOLGAR', 'GK2_RAKDOS', 'GK2_AZORIU', 'GK2_SIMIC', 
+'GK2_GRUUL', 'GK2_ORZHOV']
+//Only Rare
+var setCodeListRareOnly = ['DRB']
+//Only Mythic
+var setCodeListMythicOnly = ['V09', 'V10', 'V11', 'V12', 'V13', 'V14', 'V15', 'V16', 'V17', 'EXP', 'MPS_GRN']
+//Only Special
+var setCodeListSpecialOnly = ['MPS_KLD', 'MPS_AKH']
+
+randomSet()
+function randomSet() {
+	var totalSetCount = setCodeListPreMythic.length + setCodeListPostMythic.length + setCodeListMythicOnly.length + setCodeListSpecialOnly.length
+	var randomSet = Math.floor(Math.random() * totalSetCount)
+	var possibleRarities, rarity, set
+	if (randomSet < setCodeListPreMythic.length) {
+		set = setCodeListPreMythic[randomSet]
+		possibleRarities = 3
+	} else {
+		randomSet -= setCodeListPreMythic.length
+		if (randomSet < setCodeListPostMythic.length) {
+			set = setCodeListPostMythic[randomSet]
+			possibleRarities = 4
+		} else {
+			randomSet -= setCodeListPostMythic.length
+			if (randomSet < setCodeListRareOnly.length) {
+				set = setCodeListRareOnly[randomSet]
+				possibleRarities = 7
+			} else {
+				randomSet -= setCodeListRareOnly.length
+				if (randomSet < setCodeListMythicOnly.length) {
+					set = setCodeListMythicOnly[randomSet]
+					possibleRarities = 8
+				} else {
+					randomSet -= setCodeListMythicOnly.length
+					set = setCodeListSpecialOnly[randomSet]
+					possibleRarities = 9
+				}
+			}
+			
+		}
+	}
+	if (possibleRarities == 7) {
+		rarity = "R"
+	} else if (possibleRarities == 8) {
+		rarity = "M"
+	} else if (possibleRarities == 9) {
+		rarity = "S"
+	} else {
+		switch(Math.floor(Math.random() * possibleRarities)) {
+			case 3:
+				rarity = "M"
+				break
+			case 2:
+				rarity = "R"
+				break
+			case 1:
+				rarity = "U"
+				break
+			default:
+				rarity = "C"
+		}
+	}
+	document.getElementById("inputSetSymbolCode").value = set
+	document.getElementById("inputSetSymbolRarity").value = rarity
+	imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + set + "&size=large&rarity=" + rarity, imgSetSymbol, "needsBoth")
+}

index.html

@@ -61,7 +61,7 @@
 	<div class="title"><img src="images/title.png"></div>
 	<div class="grid mainGrid">
 		<div class="canvasContainer">
-			<canvas id="cardCanvas" width="750" height="1050"></canvas>
+			<canvas id="cardCanvas"></canvas>
 		</div>
 		<div class="cmmArea">
 			<div class="grid selectionGrid">
@@ -89,7 +89,7 @@
 				<div class="cmm shown" id="cmm-frame">
 					Border
 					<span class="dropdown">
-						<select onchange="loadScript('data/borders/' + this.value + '/border.js')">
+						<select onchange="backToDefault(this.value)" id="inputCardVersion">
 							<option value="m15">M15</option>
 							<option value="fullArtLandUnstable">Full Art Land (Unstable)</option>
 						</select>
@@ -97,7 +97,7 @@
 					<br><br>
 					Frame
 					<span class="dropdown">
-						<select class="selectColor changesFrame" onchange="imgFrame.load(this.value + 'frame.png')"></select>
+						<select class="selectColor changesFrame" onchange="imgFrame.load(this.value + 'frame.png')" id="inputFrameColor"></select>
 					</span>
 					<br>
 					<div class="checkbox">
@@ -197,25 +197,27 @@
 					Pinline Opacity
 					<input id="inputPinlineOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
 					<br><br>
-					Title Color <input type="color" id="inputTitleColor" value="#000000" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#ffffff" onchange="sectionTextFunction()">
+					Title Color <input type="color" id="inputTitleColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
 					<div class="checkbox">
 						<input type="checkbox" id="inputCheckboxTitleOutline" onchange="sectionTextFunction()">
 						<label for="inputCheckboxTitleOutline" />
 						<div>Title Outline</div>
 					</div>
-					Type Color <input type="color" id="inputTypeColor" value="#000000" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#ffffff" onchange="sectionTextFunction()">
+					Type Color <input type="color" id="inputTypeColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
 					<div class="checkbox">
 						<input type="checkbox" id="inputCheckboxTypeOutline" onchange="sectionTextFunction()">
 						<label for="inputCheckboxTypeOutline" />
 						<div>Type Outline</div>
 					</div>
-					Rules Color <input type="color" id="inputRulesColor" value="#000000" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#ffffff" onchange="sectionTextFunction()">
+					Rules Color <input type="color" id="inputRulesColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
 					<div class="checkbox">
 						<input type="checkbox" id="inputCheckboxRulesOutline" onchange="sectionTextFunction()">
 						<label for="inputCheckboxRulesOutline" />
 						<div>Rules Outline</div>
 					</div>
-					<input type="color" id="inputCreatureColor" value="#000000" onchange="sectionTextFunction()"> Power/Toughness Color<br>
+					<input type="color" id="inputCreatureColor" value="#000000" onchange="sectionTextFunction()"> Power/Toughness Color
+					<br><br>
+					<input type="color" id="inputBorderColor" value="#000000" onchange="sectionFrameFunction()"> Border Color
 				</div>
 				<div class="cmm" id="cmm-text">
 					Name