planeswalker

data/images/imageCSV.csv

@@ -1,13 +1,13 @@
 displayName,imagePath,maskOptions,framePickerOptions
-White,m15WFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+White,m15WFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Blue,m15UFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Blue,m15UFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Black,m15BFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Black,m15BFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Red,m15RFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Red,m15RFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Green,m15GFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Green,m15GFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Multicolored,m15MFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Multicolored,m15MFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Artifact,m15AFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Artifact,m15AFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Land,m15LFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Land,m15LFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
-Vehicle,m15VFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Vehicle,m15VFull.png,Full-0-0-744-1039;Title-0-0-744-1039;Type-0-0-744-1039;Rules Text-0-0-744-1039;Pinline-0-0-744-1039;Frame-0-0-744-1039;Box Topper-0-0-744-1039,Regular
 White PT,m15WPT.png,Full-567-921-140-81,Regular
 Blue PT,m15UPT.png,Full-567-921-140-81,Regular
 Black PT,m15BPT.png,Full-567-921-140-81,Regular
@@ -16,14 +16,14 @@ Green PT,m15GPT.png,Full-567-921-140-81,Regular
 Multicolored PT,m15MPT.png,Full-567-921-140-81,Regular
 Artifact PT,m15APT.png,Full-567-921-140-81,Regular
 Vehicle PT,m15VPT.png,Full-567-921-140-81,Regular
-White Legendary,m15WLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+White Legendary,m15WLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Blue Legendary,m15ULegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Blue Legendary,m15ULegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Black Legendary,m15BLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Black Legendary,m15BLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Red Legendary,m15RLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Red Legendary,m15RLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Green Legendary,m15GLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Green Legendary,m15GLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Multicolored Legendary,m15MLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Multicolored Legendary,m15MLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Artifact Legendary,m15ALegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Artifact Legendary,m15ALegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
-Colorless Legendary,m15CLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;LegendWithBorder-0-0-744-177,Regular
+Colorless Legendary,m15CLegendary.png,Full-0-0-744-177;Legend-0-0-744-177;Legend With Border-0-0-744-177,Regular
 White Rare Stamp,m15WRareStamp.png,Full-327-943-91-22,Regular
 Blue Rare Stamp,m15URareStamp.png,Full-327-943-91-22,Regular
 Black Rare Stamp,m15BRareStamp.png,Full-327-943-91-22,Regular
@@ -32,5 +32,5 @@ Green Rare Stamp,m15GRareStamp.png,Full-327-943-91-22,Regular
 Multicolored Rare Stamp,m15MRareStamp.png,Full-327-943-91-22,Regular
 Artifact Rare Stamp,m15ARareStamp.png,Full-327-943-91-22,Regular
 Colorless Rare Stamp,m15CRareStamp.png,Full-327-943-91-22,Regular
-Holo Stamp,stamp.png,Full-340-953-70-38,Regular
+Holo Stamp,stamp.png,Full-340-953-70-38,Regular;Eternal
-Black Border,masks/Border.png,Full-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Black Border,masks/Border.png,Full-0-0-744-1039;Box Topper-0-0-744-1039,Regular

data/images/nyxCSV.csv

@@ -0,0 +1,6 @@
+displayName,imagePath,maskOptions,framePickerOptions
+White Nyx,m15WNyx.png,Full-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Nyx
+Blue Nyx,m15UNyx.png,Full-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Nyx
+Black Nyx,m15BNyx.png,Full-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Nyx
+Red Nyx,m15RNyx.png,Full-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Nyx
+Green Nyx,m15GNyx.png,Full-0-0-744-1039;Frame-0-0-744-1039;BoxTopper-0-0-744-1039,Nyx

data/images/planeswalker/planeswalkerCSV.csv

@@ -0,0 +1,9 @@
+displayName,imagePath,maskOptions,framePickerOptions
+White,planeswalker/m15WPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Blue,planeswalker/m15UPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Black,planeswalker/m15BPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Red,planeswalker/m15RPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Green,planeswalker/m15GPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Multicolored,planeswalker/m15MPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Artifact,planeswalker/m15APlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker
+Colorless,planeswalker/m15CPlaneswalker.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039;Pinline Planeswalker-0-0-744-1039;Frame Planeswalker-0-0-744-1039;Loyalty Planeswalker-0-0-744-1039,Planeswalker

data/scripts/main.js

@@ -17,25 +17,21 @@ function initiate() {
 	window.cardWidth = 744;
 	window.cardHeight = 1039;
 	window.frameList = new Array();
-	window.maskNameList = ["Right Half", "Corners", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame", "Border", "Legend", "LegendWithBorder", "BoxTopper"];
+	window.maskNameList = [];
 	window.maskList = [];
 	window.selectedFrame = -1;
 	window.selectedMask = "";
 	window.updateTextDelay = setTimeout(rewriteText, 500);
-	for (var i = 0; i < maskNameList.length; i++) {
-		var imageSource = "data/images/masks/" + maskNameList[i].replace(" ", "") + ".png";
-		maskList[i] = new Image();
-		maskList[i].src = imageSource;
-	}
 	window.cardMaster = document.getElementById("cardMaster");
 	window.displayCanvas = document.getElementById("displayCanvas");
 	document.getElementById("displayCanvas").width = cardWidth;
 	document.getElementById("displayCanvas").height = cardHeight;
 	window.displayContext = displayCanvas.getContext("2d");
+    window.textCanvasesPadding = 100
 	newCanvas("frameMask");
 	newCanvas("frameFinal");
 	newCanvas("text");
-	newCanvas("line");
+	newCanvas("line", textCanvasesPadding);
 	newCanvas("paragraph");
 	newCanvas("bottomInfo");
 	newCanvas("setSymbol");
@@ -86,7 +82,7 @@ function loadImageCSV(targetCSV) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
             if (this.readyState == 4) {
-                var splitImageCSV = xhttp.responseText.split("\n");
+                var splitImageCSV = (xhttp.responseText + " ").split("\n");
                 for (var i = 1; i < splitImageCSV.length; i++) {
                     var splitIndividualImageCSV = splitImageCSV[i].split(",");
                     frameList[frameList.length] = new frameImage(splitIndividualImageCSV[0], "data/images/" + splitIndividualImageCSV[1], splitIndividualImageCSV[2], splitIndividualImageCSV[3].toString());
@@ -95,7 +91,7 @@ function loadImageCSV(targetCSV) {
                     }
                 }
                 for (var i = 0; i < frameList.length; i++) {
-                    document.getElementById("framePicker").appendChild(frameList[i].framePickerElement());
+                    frameList[i].framePickerElement();
                 }
                 console.log("image csv loaded, happy card conjuring!");
                 //            setTimeout(testFunction, 0); //deleteme
@@ -127,10 +123,11 @@ class frameImage {
 			this.widthList[i] = scale(parseInt(splitIndividualMasks[3]));
 			this.heightList[i] = scale(parseInt(splitIndividualMasks[4]));
 		}
-        this.framePickerClasses =["frameOption"]
+        this.framePickerClasses = ["frameOption"]
-        if (classes[0] == "f") {
+        if (classes.length > 0) {
             this.framePickerClasses = ("frameOption;" + classes.slice(0,classes.length - 1)).replace(/;/g, ";frameClass").split(";");
         }
+        this.addedToFramePicker = false;
 	}
 	cardMasterElement(targetMask) {
 		var tempElement = document.createElement("div");
@@ -140,14 +137,21 @@ class frameImage {
 		return tempElement
 	}
 	framePickerElement(targetElement) {
-		var tempElement = document.createElement("div");
+        if (!this.addedToFramePicker) {
-		tempElement.id = "frameIndex" + frameList.indexOf(this);
+            this.addedToFramePicker = true;
-        for (var i = 0; i < this.framePickerClasses.length; i++) {
+            var tempElement = document.createElement("div");
-            tempElement.classList.add(this.framePickerClasses[i]);
+            tempElement.id = "frameIndex" + frameList.indexOf(this);
+            for (var i = 0; i < this.framePickerClasses.length; i++) {
+                tempElement.classList.add(this.framePickerClasses[i]);
+//                console.log(this.framePickerClasses)
+            }
+            tempElement.onclick = frameOptionClicked;
+            tempElement.innerHTML = "<img src=" + this.image.src + ">";
+            document.getElementById("framePicker").appendChild(tempElement);
+//            return tempElement;
+        } else {
+            return
         }
-		tempElement.onclick = frameOptionClicked;
-		tempElement.innerHTML = "<img src=" + this.image.src + ">"
-		return tempElement;
 	}
 }
 
@@ -170,7 +174,7 @@ function frameOptionClicked(event) {
 		selectedFrame = parseInt(clickedElementIndex);
 		document.getElementById("maskPicker").innerHTML = "";
 		for (var i = 0; i < frameList[selectedFrame].maskOptionList.length; i++) {
-			document.getElementById("maskPicker").innerHTML += "<div class='maskOption' onclick='maskOptionClicked(event)' id='maskName" + frameList[selectedFrame].maskOptionList[i] + "'><img src='" + maskList[maskNameList.indexOf(frameList[selectedFrame].maskOptionList[i])].src + "'>" + frameList[selectedFrame].maskOptionList[i] + "</div>";
+            document.getElementById("maskPicker").innerHTML += "<div class='maskOption' onclick='maskOptionClicked(event)' id='maskName" + frameList[selectedFrame].maskOptionList[i] + "'><img src='" + maskList[maskNameList.indexOf(frameList[selectedFrame].maskOptionList[i])].src + "'>" + frameList[selectedFrame].maskOptionList[i] + "</div>";
 		}
 		document.getElementsByClassName("maskOption")[0].classList.add("maskOptionSelected");
 		selectedMask = document.getElementsByClassName("maskOption")[0].id.replace("maskName", "");
@@ -204,17 +208,17 @@ function deleteCardMasterElement(event) {
 	cardMasterUpdated();
 }
 function addNewFrameOption(imageSource) {
-	frameList[frameList.length] = new frameImage("Custom", imageSource, "Full-0-0-" + cardWidth + "-" + cardHeight + ";Title-0-0-" + cardWidth + "-" + cardHeight + ";Type-0-0-" + cardWidth + "-" + cardHeight + ";Rules Text-0-0-" + cardWidth + "-" + cardHeight + ";Pinline-0-0-" + cardWidth + "-" + cardHeight + ";Frame-0-0-" + cardWidth + "-" + cardHeight + ";Border-0-0-" + cardWidth + "-" + cardHeight);
+    frameList[frameList.length] = new frameImage("Custom", imageSource, "Full-0-0-" + cardWidth + "-" + cardHeight + ";Title-0-0-" + cardWidth + "-" + cardHeight + ";Type-0-0-" + cardWidth + "-" + cardHeight + ";Rules Text-0-0-" + cardWidth + "-" + cardHeight + ";Pinline-0-0-" + cardWidth + "-" + cardHeight + ";Frame-0-0-" + cardWidth + "-" + cardHeight + ";Border-0-0-" + cardWidth + "-" + cardHeight + ";Box Topper-0-0-" + cardWidth + "-" + cardHeight, "Eternal;Custom ");
 	frameList[frameList.length - 1].image.customVar = frameList.length - 1
 	frameList[frameList.length - 1].image.onload = function() {
-		document.getElementById("framePicker").appendChild(frameList[this.customVar].framePickerElement());
+		frameList[this.customVar].framePickerElement();
 	}
 }
 
 
 /* Card Master Cool Stuff! */
 function cardMasterUpdated() {
-	// console.log("The card master is updating!");
+//    console.log("The card master is updating!");
 	frameFinalContext.clearRect(0, 0, cardWidth, cardHeight);
 	for (var i = cardMaster.children.length - 1; i >= 0; i--) {
 		var targetChild = cardMaster.children[i];
@@ -268,6 +272,9 @@ function cardImageUpdated() {
 	//Draw the art, frame, text, bottom info, mana cost, watermark, and set symbol
 	// cardFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
 	cardFinalContext.drawImage(frameFinalCanvas, 0, 0, cardWidth, cardHeight);
+    if (version.currentVersion == "planeswalker") {
+        cardFinalContext.drawImage(planeswalkerCanvas, 0, 0, cardWidth, cardHeight);
+    }
 	cardFinalContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight);
 	cardFinalContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight);
 	cardFinalContext.drawManaCost(document.getElementById("inputManaCost").value, version.manaCostX, version.manaCostY, version.manaCostDiameter, version.manaCostDistance, version.manaCostDirection)
@@ -284,9 +291,17 @@ function cardImageUpdated() {
 
 /* Loading/manipulating card versions */
 function changeVersionTo(versionToChangeTo) {
-	loadScript("data/versions/" + versionToChangeTo + ".js")
+    loadScript("data/versions/" + versionToChangeTo + ".js");
 }
 function finishChangingVersion(targetCSV = false) {
+    for (var i = 0; i < version.masksToAdd.length; i++) {
+        if (!maskNameList.includes(version.masksToAdd[i])) {
+            maskNameList[maskNameList.length] = version.masksToAdd[i];
+            maskList[maskList.length] = new Image();
+            maskList[maskList.length - 1].src = "data/images/masks/" + version.masksToAdd[i].replace(/ /g, "") + ".png";
+        }
+    }
+    document.getElementById("inputWhichTextTabs").innerHTML = ""
 	for (var i = 0; i < version.textList.length; i ++) {
 		document.getElementById("inputWhichTextTabs").innerHTML += "<div class='textTabButton' onclick='textTabFunction(event, `" + version.textList[i][0] + "`)'>" + version.textList[i][0] + "</div>"
         if (i == 0) {
@@ -333,7 +348,13 @@ function updateText() {
 function rewriteText() {
 	textContext.clearRect(0, 0, cardWidth, cardHeight)
     for (var i = 0; i < version.textList.length; i ++) {
-        textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9])
+        if (version.textList[i][10]) {
+            if (version.textList[i][10] != "ignore") {
+                window[version.textList[i][10]]();
+            }
+        } else {
+            textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9]);
+        }
     }
     cardImageUpdated()
 }
@@ -355,10 +376,10 @@ function getValue(elementId) {
 
 
 /* Functions that make stuff */
-function newCanvas(newCanvasName) {
+function newCanvas(newCanvasName, padding = 0) {
 	window[newCanvasName + "Canvas"] = document.createElement("canvas");
-	window[newCanvasName + "Canvas"].width = cardWidth;
+	window[newCanvasName + "Canvas"].width = cardWidth + padding * 2;
-	window[newCanvasName + "Canvas"].height = cardHeight;
+	window[newCanvasName + "Canvas"].height = cardHeight + padding * 2;
 	window[newCanvasName + "Context"] = window[newCanvasName + "Canvas"].getContext("2d");
 }
 
@@ -459,8 +480,8 @@ function updateWatermark() {
 }
 
 //Custom text function! This acts on any codes and makes things look nice :)
-CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="") {
+CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="", completionFunction) {
-	paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
+    paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
 	var textSize = inputTextSize
 	lineContext.font = textSize + "px " + textFont
 	lineContext.fillStyle = textColor
@@ -471,8 +492,8 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 	}
 	lineContext.strokeStyle = outline
 	lineContext.lineWidth = outlineWidth
-	var currentLineX = 0
+	var currentLineX = textCanvasesPadding
-	var currentLineY = textY + textSize * 0.45
+	var currentLineY = textY + (textSize * 0.45) //+ textCanvasesPadding
 	var uniqueSplitter = "9dn57gwbt4sh"
 	var splitString = text.replace(/ /g, uniqueSplitter +  " " + uniqueSplitter).replace(/{/g, uniqueSplitter + "{").replace(/}/g, "}" + uniqueSplitter).split(uniqueSplitter)
 	splitString[splitString.length] = " "
@@ -494,7 +515,7 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 					finishLine = true
 					var barWidth = manaSymbolImageList[63].width
 					var barHeight = manaSymbolImageList[63].height
-					paragraphContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight)
+					lineContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight)
 					currentLineY += textSize * 0.8
 					if (possibleCodeLower == "flavor") {
 						lineContext.font = "italic " + (textSize - 3) + "px " + textFont
@@ -526,10 +547,14 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 					currentLineX += artistBrushWidth * 1.1
 				} else if (possibleCodeLower.includes("fontcolor")) {
 					lineContext.fillStyle = possibleCodeLower.slice(9, possibleCodeLower.length)
-				}else if (possibleCodeLower.includes("font")) {
+				} else if (possibleCodeLower.includes("font")) {
 					textFont = possibleCodeLower.slice(5, possibleCodeLower.length)
 					lineContext.font = textSize + "px " + textFont
-				} else if (manaSymbolCodeList.includes(possibleCodeLower)) {
+                } else if (possibleCodeLower.includes("outline:")) {
+                    outline = true;
+                    lineContext.strokeStyle = possibleCodeLower.replace("outline:", "").split(",")[0];
+                    lineContext.lineWidth = parseInt(possibleCodeLower.replace("outline:", "").split(",")[1]);
+                } else if (manaSymbolCodeList.includes(possibleCodeLower)) {
 					//THIS HAS TO BE THE LAST ONE
 					var manaSymbolDiameter = textSize * 0.77
 					lineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower)], currentLineX, currentLineY - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
@@ -545,10 +570,10 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 					//forces the last artificially added space to be too wide, making sure the last line is drawn in.
 					currentWordWidth = textWidth + 1
 				}
-				if (currentLineX + currentWordWidth > textWidth || finishLine) {
+				if (currentLineX - textCanvasesPadding + currentWordWidth > textWidth || finishLine) {
 					//Finish the line
 					if (oneLine && i != splitString.length - 1 && inputTextSize > 1) {
-						lineContext.clearRect(0, 0, cardWidth, cardHeight)
+						lineContext.clearRect(0, 0, cardWidth + 2 * textCanvasesPadding, cardHeight + 2 * textCanvasesPadding)
 						this.writeText(text, textX, textY, textWidth, textHeight, textFont, inputTextSize - 1, textColor, other)
 						return
 					}
@@ -558,17 +583,17 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 							currentLineX -= textContext.measureText("   ").width
 						}
 						if (textAlign == "center") {
-							alignAdjust = textWidth / 2 - currentLineX  / 2 + textX
+							alignAdjust = textWidth / 2 - (currentLineX - textCanvasesPadding) / 2 + textX
 						} else if (textAlign == "right") {
-							alignAdjust = textWidth + textX - currentLineX
+							alignAdjust = textWidth + textX - currentLineX + textCanvasesPadding
 						}
 					} else {
 						alignAdjust += textX
 					}
-					paragraphContext.drawImage(lineCanvas, 0 + alignAdjust, 0, cardWidth, cardHeight)
+					paragraphContext.drawImage(lineCanvas, 0 + alignAdjust - textCanvasesPadding, 0, cardWidth + 2 * textCanvasesPadding, cardHeight + 2 * textCanvasesPadding)
-					lineContext.clearRect(0, 0, cardWidth, cardHeight)
+					lineContext.clearRect(0, 0, cardWidth + 2 * textCanvasesPadding, cardHeight + 2 * textCanvasesPadding)
 					currentLineY += textSize * lineSpace
-					currentLineX = 0
+					currentLineX = textCanvasesPadding
 					if (wordToWrite == " ") {
 						currentWordWidth = 0
 					}
@@ -591,7 +616,13 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 		verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2
 	}
 	this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight)
-	return "done"
+    if (text != "") {
+//        console.log(text)
+    }
+    if (completionFunction) {
+        window[completionFunction]();
+    }
+    return "done"
 }
 //Loads up all the mana symbol images
 function loadManaSymbolImages() {
@@ -602,7 +633,7 @@ function loadManaSymbolImages() {
 }
 //Draws a mana cost
 CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbolsY, diameter = 50, distance = -50, direction = "horizontal") {
-	var splitManaCost = text.replace(/{/g, " ").replace(/}/g, " ").split(" ")
+	var splitManaCost = text.toLowerCase().replace(/{/g, " ").replace(/}/g, " ").split(" ")
 	var currentSymbolIndex = 0
 	var currentX = symbolsX
 	var currentY = symbolsY
@@ -839,7 +870,8 @@ function textCodeTutorial() {
 	_down#-moves the following text # pixels down
 	_left#-moves the following text # pixels left
 	_right#-moves the following text # pixels right
-	_SYMBOL-creates a mana symbol, where SYMBOL can be: w, u, b, r, g, 1, 2, 3, etc...`
+	_SYMBOL-creates a mana symbol, where SYMBOL can be: w, u, b, r, g, 1, 2, 3, etc...
+    _outline:*,#-outlines the following text with # thickness and * color`
 	var textCodeTutorialArray = textCodeTutorialString.split("_")
 	for (var i = 0; i < textCodeTutorialArray.length; i ++) {
 		document.getElementById("textCodeTutorial").innerHTML += "<div class='selectable'><b>{" + textCodeTutorialArray[i].split("-")[0] + "}</b></div><div>" + textCodeTutorialArray[i].split("-")[1] + "</div>"
@@ -848,3 +880,20 @@ function textCodeTutorial() {
 
 // //textCodeTutorial()
 textCodeTutorial()
+
+
+
+function loadPlaneswalkerFrames() {
+    changeVersionTo("planeswalker");
+}
+
+function filterFramePicker(classToShow) {
+    var framePickerList = document.getElementsByClassName("frameOption")
+    for (var i = 0; i < framePickerList.length; i++) {
+        if (!framePickerList[i].classList.contains("hidden") && !framePickerList[i].classList.contains(classToShow) && !framePickerList[i].classList.contains("frameClassEternal")) {
+            framePickerList[i].classList.add("hidden")
+        } else if (framePickerList[i].classList.contains(classToShow) && framePickerList[i].classList.contains("hidden")) {
+            framePickerList[i].classList.remove("hidden")
+        }
+    }
+}

data/site/styles.css

@@ -40,12 +40,14 @@
 	--shifting-color-1-light: #c8ff64;
 	--light-color: #eee;
 	--dark-color: #333;
-    --clear-light: #fff2;
+    --clear-light: #fff3;
-    --clear-mid: #fff4;
+    --clear-mid: #fff6;
-    --clear-dark: #fff6;
+    --clear-dark: #fff9;
+    --clear-darker: #aaa3;
+    --clear-darkerer: #aaa6;
+    --background-gradient: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
 }
 
-
 /*Background & Footer*/
 html {
 	background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
@@ -58,8 +60,12 @@ html {
 	font-size: 8pt;
 }
 body {
-	margin: 0px;
+    margin: 0;
+    border: 0;
+    padding: 0;
 	background-image: url(images/lowpoly.png);
+    background-position: left;
+    background-repeat: no-repeat;
 	background-attachment: fixed;
 	background-size: cover;
 }
@@ -370,11 +376,10 @@ footer a:hover {
 }
 
 
-
+/* Text code tutorial */
 #textCodeTutorial {
 	display: grid;
 	grid-template-columns: 6.5em auto;
-	/*padding: 0.5em;*/
 }
 #textCodeTutorial > div {
 	padding: 0.25em 0;
@@ -388,3 +393,43 @@ footer a:hover {
 input[type="checkbox"], .frameOption, .maskOption, .button {
 	cursor: pointer;
 }
+
+
+/* image links */
+.proxyFactoryLimitedGrid {
+    margin: 0 auto;
+    max-width: 32em;
+}
+.imageLinkGrid {
+    margin-top: 1em;
+    display: grid;
+    justify-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
+    
+}
+.showBackgroundThrough {
+    display: inline-block;
+    background: url(images/lowpoly.png) left top no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+}
+.imageLink {
+    width: 12em;
+    padding: 0.5em;
+    border-radius: 1em;
+    display: grid;
+    grid-template-columns: 4em auto;
+    align-items: center;
+    justify-items: left;
+    border: 1px solid var(--dark-color);
+}
+.imageLink:hover {
+    background-color: var(--clear-darkerer);
+}
+.imageLink > img {
+    max-height: 3em;
+    max-width: 4em;
+}
+.imageLink > div {
+    font: 1.5em belerenbsc;
+}

data/versions/m15.js

@@ -21,6 +21,7 @@ version.manaCostDirection = "horizontal"
 version.watermarkWidth = scale(520)
 version.watermarkHeight = scale(250)
 version.watermarkY = scale(800)
+version.masksToAdd = ["Right Half", "Corners", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame", "Border", "Legend", "Legend With Border", "Box Topper"]
 //Name, text, x, y, width, height, font, size, color, other
 version.textList = [
 	["Title", "", scale(64), scale(83), scale(630), 0, "belerenb", 37, "black", "oneLine=true"],

data/versions/planeswalker.js

@@ -0,0 +1,164 @@
+//============================================//
+//       Card Conjurer, by Kyle Burton        //
+//============================================//
+version.currentVersion = "planeswalker"
+version.artX = scale(58)
+version.artY = scale(118)
+version.setSymbolRight = scale(687)
+version.setSymbolVertical = scale(612)
+version.setSymbolWidth = scale(90)
+version.setSymbolHeight = scale(42)
+version.bottomInfoFunction = "m15PlaneswalkerBottomInfo"
+version.manaCostX = scale(653)
+version.manaCostY = scale(60)
+version.manaCostDiameter = scale(34)
+version.manaCostDistance = scale(-38)
+version.manaCostDirection = "horizontal"
+version.watermarkWidth = scale(520)
+version.watermarkHeight = scale(250)
+version.watermarkY = scale(800)
+version.masksToAdd = ["Title Planeswalker", "Type Planeswalker", "Pinline Planeswalker", "Frame Planeswalker", "Border Planeswalker", "Loyalty Planeswalker", "Rules Text Planeswalker"]
+filterFramePicker("frameClassPlaneswalker")
+//Name, text, x, y, width, height, font, size, color, other, alternative-function
+version.textList = [
+	["Title", "", scale(65), scale(65), scale(630), 0, "belerenb", scale(39), "black", "oneLine=true"],
+	["Type", "", scale(65), scale(615), scale(630), 0, "belerenb", scale(33), "black", "oneLine=true"],
+	["First Ability","",,,,,,,,,"planeswalkerAbilities"],
+    ["Second Ability", "",,,,,,,,,"ignore"],
+    ["Third Ability", "",,,,,,,,,"ignore"],
+    ["Fourth Ability", "",,,,,,,,,"ignore"],
+	["Loyalty", "", scale(615), scale(958), scale(79), 0, "belerenb", scale(38), "white", "oneLine=true,textAlign='center'"]
+]
+function m15PlaneswalkerBottomInfo() {    //remember to ctrl+f for 'artistBrushWidth' and adjust that when fixing these values!
+    bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
+    bottomInfoContext.writeText(document.getElementById("inputInfoNumber").value + " " + document.getElementById("inputInfoRarity").value + " *Not For Sale*", scale(46), scale(982), scale(329), 0, "gothammedium", scale(17), "white", "oneLine=true")
+    bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + "  \u2022  " + document.getElementById("inputInfoLanguage").value + "  {font:belerenbsc}{artistBrush}{fontsize1}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1002), scale(375), 0, "gothammedium", 17, "white", "oneLine=true")
+    bottomInfoContext.writeText("\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast", cardWidth / 2, scale(1001), scale(322), 0, "mplantin", scale(17), "white", "oneLine=true,textAlign='right'")
+    cardImageUpdated()
+}
+if (!version.addedPlaneswalker) {
+    version.addedPlaneswalker = true
+    document.getElementById("mainTabMenu").innerHTML += "<div class='tabOption mainEditor' onclick='toggleTabs(event, `planeswalker`, `mainEditor`)'>Planeswalker</div>"
+    var planeswalkerTab = document.createElement("div")
+    planeswalkerTab.classList.add("tabContent")
+    planeswalkerTab.classList.add("mainEditor")
+    planeswalkerTab.id = "planeswalker"
+    planeswalkerTab.innerHTML = `
+            One: <input type="number" class="input number" id="inputPlaneswalker1" oninput="planeswalkerAbilities()" value="99" min="0" max="1039"><input type="text" class="input text" id="inputPlaneswalker1Icon" oninput="planeswalkerAbilities()" value="+1">
+            Two: <input type="number" class="input number" id="inputPlaneswalker2" oninput="planeswalkerAbilities()" value="100" min="0" max="1039"><input type="text" class="input text" id="inputPlaneswalker2Icon" oninput="planeswalkerAbilities()" value="0">
+            Three: <input type="number" class="input number" id="inputPlaneswalker3" oninput="planeswalkerAbilities()" value="101" min="0" max="1039"><input type="text" class="input text" id="inputPlaneswalker3Icon" oninput="planeswalkerAbilities()" value="-3">
+            Four: <input type="number" class="input number" id="inputPlaneswalker4" oninput="planeswalkerAbilities()" value="0" min="0" max="1039"><input type="text" class="input text" id="inputPlaneswalker4Icon" oninput="planeswalkerAbilities()" value="-9"><br>
+    For two-ability Planeswalkers only:<br>
+    <input type="checkbox" onchange="changePlaneswalkerAbilityLayout()" id="inputWARSpacing"> Use War of the Spark ability spacing<br>
+    <input type="checkbox" onchange="changePlaneswalkerAbilityLayout()" id="inputWARReverse"> Reverse War of the Spark ability spacing`
+    document.getElementById("cardMenu").appendChild(planeswalkerTab)
+    newCanvas("planeswalker");
+    var planeswalkerPlus = new Image()
+    planeswalkerPlus.src = "data/images/planeswalker/planeswalkerPlus.png"
+    var planeswalkerNeutral = new Image()
+    planeswalkerNeutral.src = "data/images/planeswalker/planeswalkerNeutral.png"
+    var planeswalkerMinus = new Image()
+    planeswalkerMinus.src = "data/images/planeswalker/planeswalkerMinus.png"
+    var lightToDarkPlaneswalker = new Image()
+    lightToDarkPlaneswalker.src = "data/images/planeswalker/abilityLineOdd.png"
+    var darkToLightPlaneswalker = new Image()
+    darkToLightPlaneswalker.onload = function() {planeswalkerAbilities()}
+    darkToLightPlaneswalker.src = "data/images/planeswalker/abilityLineEven.png"
+}
+
+m15PlaneswalkerBottomInfo()
+finishChangingVersion("data/images/planeswalker/planeswalkerCSV.csv")
+
+var planeswalkerAbilityLayout = [[0], [0, scale(784)], [0, scale(730), scale(863)], [0, scale(697), scale(784), scale(878)], [0, scale(100), scale(200), scale(300), scale(400)]]
+var planeswalkerAbilityCount = 3;
+var ability1Y = 0, ability2Y = 0, ability3Y = 0, ability4Y = 0, ability5Y = cardHeight;
+//planeswalkerContext.writeText(version.textList[2][1], 64, ability1Y, 616, 0, "mplantin", 38, "black", "lineSpace=0.97");
+function planeswalkerAbilities() {
+    planeswalkerContext.clearRect(0, 0, cardWidth, cardHeight)
+    planeswalkerAbilityCount = 0
+    for (var i = 1; i < 5; i++) {
+        if (getValue("inputPlaneswalker" + i) != 0) {
+            planeswalkerAbilityCount += 1;
+        } else {
+            break
+        }
+    }
+    if (planeswalkerAbilityCount > 0) {
+        ability1Y = scale(648)
+        if (planeswalkerAbilityCount > 1) {
+            window.ability2Y = getValue("inputPlaneswalker1") + ability1Y
+            if (planeswalkerAbilityCount > 2) {
+                ability3Y = getValue("inputPlaneswalker2") + ability2Y
+                if (planeswalkerAbilityCount > 3) {
+                    ability4Y = getValue("inputPlaneswalker3") + ability3Y
+                    planeswalkerContext.writeText(version.textList[5][1], scale(133), ability4Y + (scale(950) - ability4Y) / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97");
+                }
+                planeswalkerContext.writeText(version.textList[4][1], scale(133), ability3Y + getValue("inputPlaneswalker3") / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97");
+            }
+            planeswalkerContext.writeText(version.textList[3][1], scale(133), ability2Y + getValue("inputPlaneswalker2") / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97");
+        }
+        planeswalkerContext.writeText(version.textList[2][1], scale(133), ability1Y + getValue("inputPlaneswalker1") / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97", "planeswalkerTextFunction");
+    }
+}
+function planeswalkerTextFunction() {
+    planeswalkerContext.globalCompositeOperation = "destination-over"
+    var lastAdjust = 0
+    for (var i = 1; i < planeswalkerAbilityCount + 1; i++) {
+        if (i == planeswalkerAbilityCount) {
+            lastAdjust = 2 * cardHeight
+        }
+        if (i % 2 == 1) {
+            planeswalkerContext.fillStyle = "white"
+            planeswalkerContext.globalAlpha = 0.608
+            planeswalkerContext.fillRect(scale(91), window["ability" + i + "Y"] + scale(10), scale(599), window["ability" + (i + 1) + "Y"] - window["ability" + i + "Y"] - scale(20) + lastAdjust)
+            if (i == 1 && planeswalkerAbilityCount != 1) {
+                planeswalkerContext.fillRect(scale(91), window["ability" + i + "Y"], scale(599), scale(10))
+            }
+            planeswalkerContext.globalAlpha = 1
+            planeswalkerContext.drawImage(lightToDarkPlaneswalker, scale(91), window["ability" + (i + 1) + "Y"] - scale(10) + lastAdjust, scale(599), scale(20))
+        } else {
+            planeswalkerContext.fillStyle = "#a4a4a4"
+            planeswalkerContext.globalAlpha = 0.706
+            planeswalkerContext.fillRect(scale(91), window["ability" + i + "Y"] + scale(10), scale(599), window["ability" + (i + 1) + "Y"] - window["ability" + i + "Y"] - scale(20) + lastAdjust)
+            planeswalkerContext.globalAlpha = 1
+            planeswalkerContext.drawImage(darkToLightPlaneswalker, scale(91), window["ability" + (i + 1)+ "Y"] - scale(10) + lastAdjust, scale(599), scale(20))
+        }
+    }
+    planeswalkerContext.globalCompositeOperation = "destination-in"
+    planeswalkerContext.drawImage(maskList[maskNameList.indexOf("Rules Text Planeswalker")], 0, 0, cardWidth, cardHeight)
+    planeswalkerContext.globalCompositeOperation = "source-over"
+    planeswalkerContext.fillStyle = "white"
+    planeswalkerContext.font = "30px belerenbsc"
+    planeswalkerContext.textAlign = "center"
+    for (var i = 1; i < planeswalkerAbilityCount + 1; i++) {
+        var planeswalkerIconValue = document.getElementById("inputPlaneswalker" + i + "Icon").value
+        var planeswalkerMidpoint = getValue("inputPlaneswalker" + i + "") / 2 + window["ability" + i + "Y"]
+        if (planeswalkerIconValue.includes("+")) {
+            planeswalkerContext.drawImage(planeswalkerPlus, scale(22), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] - scale(35), scale(105), scale(76))
+            planeswalkerContext.fillText(planeswalkerIconValue, scale(77), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] + scale(10))
+        } else if (planeswalkerIconValue.includes("-")) {
+            planeswalkerContext.drawImage(planeswalkerMinus, scale(21), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] - scale(24), scale(106), scale(74))
+            planeswalkerContext.fillText(planeswalkerIconValue, scale(77), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] + scale(11))
+        } else if (planeswalkerIconValue != "") {
+            planeswalkerContext.drawImage(planeswalkerNeutral, scale(21), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] - scale(24), scale(106), scale(64))
+            planeswalkerContext.fillText(planeswalkerIconValue, scale(77), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] + scale(12))
+        }
+    }
+    cardImageUpdated()
+}
+function changePlaneswalkerAbilityLayout() {
+    if (document.getElementById("inputWARSpacing").checked) {
+        if (document.getElementById("inputWARReverse").checked) {
+            planeswalkerAbilityLayout[2] = [0, scale(784), scale(878)]
+        } else {
+            planeswalkerAbilityLayout[2] = [0, scale(697), scale(784)]
+        }
+    } else {
+        planeswalkerAbilityLayout[2] = [0, scale(730), scale(863)]
+    }
+    planeswalkerAbilities()
+}
+
+
+
+

disclaimer.html

@@ -16,9 +16,15 @@
 		</div>
 		<div class="layer">
 			<div class="paragraph indent">
-				Card Conjurer is in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Mana symbols and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
+				Card Conjurer is in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Fonts, Mana symbols, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
 			</div>
 		</div>
+        <div class="layer">
+            <div class="paragraph">
+                Most of the card frames were created by the following:<br>
+                Kentu, Narb777, CXA26843, FPM, Xander, Chrome Kaldra, CBG, Trancebam, Larme, RoblinTheGoblin, and White Dragon.
+            </div>
+        </div>
 		<div class="layer">
 			<div class="paragraph">
 				Some fonts and/or images used in this program have been gathered from the following sources under the <a target="blank" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons BY-NC-SA 2.5 License</a>:<br>

index.html

@@ -17,108 +17,117 @@
 				<canvas id="displayCanvas"></canvas>
 			</div>
 			<div class="cardMenu">
-                <!-- Card editor tabs begin here! -->
+                <div id="cardMenu">
-                <div class="tabMenu">
+                    <!-- Card editor tabs begin here! -->
-                	<div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div>
+                    <div class="tabMenu" id="mainTabMenu">
-                	<div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div>
+                        <div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div>
-                	<div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div>
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div>
-                	<div class="tabOption mainEditor" onclick="toggleTabs(event, 'collector', 'mainEditor')">Collector</div>
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div>
-                	<div class="tabOption mainEditor" onclick="toggleTabs(event, 'set', 'mainEditor')">Set Symbol</div>
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'collector', 'mainEditor')">Collector</div>
-                	<div class="tabOption mainEditor" onclick="toggleTabs(event, 'watermark', 'mainEditor')">Watermark</div>
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'set', 'mainEditor')">Set Symbol</div>
-                </div>
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'watermark', 'mainEditor')">Watermark</div>
-                <div class="tabContent mainEditor tabVisible" id="frame">
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'advanced', 'mainEditor')">Advanced</div>
-                	<div class="splitGrid">
+                    </div>
-                		<div id="framePicker" class="frameGrid"></div>
+                    <div class="tabContent mainEditor tabVisible" id="frame">
-                		<div id="maskPicker"></div>
+                        <div class="splitGrid">
-                	</div>
+                            <div id="framePicker" class="frameGrid"></div>
-                	<div class="splitGrid">
+                            <div id="maskPicker"></div>
-		            	<button onclick="addFrameToCardMaster()" class="button">Add</button>
+                        </div>
-		            	<button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
+                        <div class="splitGrid">
-                	</div>
+                            <button onclick="addFrameToCardMaster()" class="button">Add</button>
-                	<div id="selectedFramePreview">No frame selected</div>
+                            <button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
-                	<div id="cardMaster">
+                        </div>
-                		<div id="frameIndex-1" class="cardMasterElement"><span class="handle">|||</span><div>Card Art Placeholder <img id="artPlaceholderImage"></div><span></span></div>
+                        <div id="selectedFramePreview">No frame selected</div>
-                	</div>
+                        <div id="cardMaster">
-                	<div class="bar"></div>
+                            <div id="frameIndex-1" class="cardMasterElement"><span class="handle">|||</span><div>Card Art Placeholder <img id="artPlaceholderImage"></div><span></span></div>
-                	<div>Upload your own frame images:</div>
+                        </div>
-                	<div class="autoGrid">
+                        <div class="bar"></div>
-                		<input type="file" class="input file" accept="image/*" onchange="retrieveLocalURL(event)" placeholder="Via File Upload">
+                        <div>Upload your own frame images:</div>
-						<input type="text" class="input text" placeholder="Via URL" onchange="addNewFrameOption(this.value)">
+                        <div class="autoGrid">
-                	</div>
+                            <input type="file" class="input file" accept="image/*" onchange="retrieveLocalURL(event)" placeholder="Via File Upload">
-                </div>
+                            <input type="text" class="input text" placeholder="Via URL" onchange="addNewFrameOption(this.value)">
-                <div class="tabContent mainEditor" id="text">
+                        </div>
-                	<div id="inputWhichTextTabs" class="textTab"></div>
+                    </div>
-					<textarea class="textarea" id="inputText" placeholder="" oninput="updateText()"></textarea>
+                    <div class="tabContent mainEditor" id="text">
-					<input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="cardImageUpdated()" value="">
+                        <div id="inputWhichTextTabs" class="textTab"></div>
-					<div class="bar"></div>
+                        <textarea class="textarea" id="inputText" placeholder="" oninput="updateText()"></textarea>
-					<div class="title">How To Use Text Codes</div>
+                        <input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="cardImageUpdated()" value="">
-					<div class="paragraph indent">
+                        <div class="bar"></div>
-						Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
+                        <div class="title">How To Use Text Codes</div>
-					</div>
+                        <div class="paragraph indent">
-					<div id="textCodeTutorial"></div>
+                            Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
-                </div>
+                        </div>
-                <div class="tabContent mainEditor" id="art">
+                        <div id="textCodeTutorial"></div>
-                	<div class="splitGrid">
+                    </div>
-						<div>
+                    <div class="tabContent mainEditor" id="art">
-							<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
+                        <div class="splitGrid">
-							<input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
+                            <div>
-							<input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
+                                <input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
-							<input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
+                                <input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
-						</div>
+                                <input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
-						<div>
+                                <input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
-                            <div style="text-align: center; margin: 0.18em 0px">X, Y, &amp; Zoom:</div>
+                            </div>
-							<input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardMasterUpdated()">
+                            <div>
-							<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardMasterUpdated()">
+                                <div style="text-align: center; margin: 0.18em 0px">X, Y, &amp; Zoom:</div>
-							<input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardMasterUpdated()">
+                                <input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardMasterUpdated()">
-						</div>
+                                <input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardMasterUpdated()">
-					</div>
+                                <input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardMasterUpdated()">
-                </div>
+                            </div>
-                <div class="tabContent mainEditor" id="collector">
+                        </div>
-                	<div class="autoGrid">
+                    </div>
-						<input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value="">
+                    <div class="tabContent mainEditor" id="collector">
-						<input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P">
+                        <div class="autoGrid">
-						<input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG">
+                            <input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value="">
-						<input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN">
+                            <input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P">
-						<input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value="">
+                            <input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG">
-					</div>
+                            <input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN">
-                </div>
+                            <input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value="">
-                <div class="tabContent mainEditor" id="set">
+                        </div>
-                	<div class="autoGrid">
+                    </div>
-						<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
+                    <div class="tabContent mainEditor" id="set">
-						<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)">
+                        <div class="autoGrid">
-						<input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)">
+                            <input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
-						<input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)">
+                            <input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)">
-						<button class="button" onclick="randomSet()">Random</button>
+                            <input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)">
-					</div>
+                            <input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)">
-                </div>
+                            <button class="button" onclick="randomSet()">Random</button>
-                <div class="tabContent mainEditor" id="watermark">
+                        </div>
-                	<div class="autoGrid">
+                    </div>
-						<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
+                    <div class="tabContent mainEditor" id="watermark">
-						<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)">
+                        <div class="autoGrid">
-						<input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')">
+                            <input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
-						<select class="select" id="inputWatermarkPrimary" onchange="updateWatermark()">
+                            <input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)">
-							<option value="none">None</option>
+                            <input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')">
-							<option value="default">Default</option>
+                            <select class="select" id="inputWatermarkPrimary" onchange="updateWatermark()">
-							<option value="#ccc8b1" selected="selected">White</option>
+                                <option value="none">None</option>
-							<option value="#b0c3d5">Blue</option>
+                                <option value="default">Default</option>
-							<option value="#b3b3b3">Black</option>
+                                <option value="#ccc8b1" selected="selected">White</option>
-							<option value="#ddac9b">Red</option>
+                                <option value="#b0c3d5">Blue</option>
-							<option value="#b9c8b5">Green</option>
+                                <option value="#b3b3b3">Black</option>
-							<option value="#e4d49b">Gold</option>
+                                <option value="#ddac9b">Red</option>
-							<option value="#cfc8be">Artifact/Colorless</option>
+                                <option value="#b9c8b5">Green</option>
-						</select>
+                                <option value="#e4d49b">Gold</option>
-						<select class="select" id="inputWatermarkSecondary" onchange="updateWatermark()">
+                                <option value="#cfc8be">Artifact/Colorless</option>
-							<option value="none">None</option>
+                            </select>
-							<option value="default">Default</option>
+                            <select class="select" id="inputWatermarkSecondary" onchange="updateWatermark()">
-							<option value="#ccc8b1">White</option>
+                                <option value="none">None</option>
-							<option value="#b0c3d5">Blue</option>
+                                <option value="default">Default</option>
-							<option value="#b3b3b3">Black</option>
+                                <option value="#ccc8b1">White</option>
-							<option value="#ddac9b">Red</option>
+                                <option value="#b0c3d5">Blue</option>
-							<option value="#b9c8b5">Green</option>
+                                <option value="#b3b3b3">Black</option>
-							<option value="#e4d49b">Gold</option>
+                                <option value="#ddac9b">Red</option>
-							<option value="#cfc8be">Artifact/Colorless</option>
+                                <option value="#b9c8b5">Green</option>
-						</select>
+                                <option value="#e4d49b">Gold</option>
-					</div>
+                                <option value="#cfc8be">Artifact/Colorless</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="tabContent mainEditor" id="advanced">
+                        <div class="paragraph indent">
+                            Click on one of the following buttons to load the described image frame set:
+                        </div>
+                        <button onclick="loadPlaneswalkerFrames()" class="button">Planeswalker</button>
+                    </div>
                 </div>
                 <!-- Card editor tabs end here! -->
                 <div class="bar"></div>
@@ -141,14 +150,21 @@
 			</div>
 		</div>
 		<div class="layer">
-            <div class="title">Want More Customization?</div>
+            <div class="title">Looking for the Original?</div>
-			<!-- <div class="paragraph indent">
-                If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device.
-			</div> -->
             <div class="paragraph indent">
-                This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
+                This version of the website is currently a work in progress, so it doesn't have the same features that the original Card Conjurer had. If you want to go back to the old version, <a href="old/index.html">click here</a>.
             </div>
 		</div>
+        <div class="layer">
+            <div class="title">The Proxy Factory</div>
+            <div class="paragraph indent">If you'd like to delve deeper into making custom Magic: The Gathering cards, check out The Proxy Factory! They're a community full of individuals interested in creating custom cards, and are very welcoming to new members.</div>
+            <div class="proxyFactoryLimitedGrid">
+                <div class="imageLinkGrid">
+                    <a class="imageLink showBackgroundThrough" style="color: #ff4500;" href="https://www.reddit.com/r/TheProxyFactory/"><img src="data/site/icons/reddit.png"><div>Reddit</div></a>
+                    <a class="imageLink showBackgroundThrough" style="color: #738adb;" href="https://discordapp.com/invite/xBCQprM"><img src="data/site/icons/discord.png"><div>Discord</div></a>
+                </div>
+            </div>
+        </div>
 		<div class="layer">
 			<div class="title">Have Any Questions?</div>
 			<div class="paragraph indent">