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
-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
-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
-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
-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
-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
-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
-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
-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
+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;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;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;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;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;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;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;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;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
-Blue Legendary,m15ULegendary.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;LegendWithBorder-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
-Green Legendary,m15GLegendary.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;LegendWithBorder-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
-Colorless Legendary,m15CLegendary.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;Legend With Border-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;Legend With Border-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;Legend With Border-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;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
-Black Border,masks/Border.png,Full-0-0-744-1039;BoxTopper-0-0-744-1039,Regular
+Holo Stamp,stamp.png,Full-340-953-70-38,Regular;Eternal
+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"]
-        if (classes[0] == "f") {
+        this.framePickerClasses = ["frameOption"]
+        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");
-		tempElement.id = "frameIndex" + frameList.indexOf(this);
-        for (var i = 0; i < this.framePickerClasses.length; i++) {
-            tempElement.classList.add(this.framePickerClasses[i]);
+        if (!this.addedToFramePicker) {
+            this.addedToFramePicker = true;
+            var tempElement = document.createElement("div");
+            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"].height = cardHeight;
+	window[newCanvasName + "Canvas"].width = cardWidth + padding * 2;
+	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="") {
-	paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
+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)
 	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 currentLineY = textY + textSize * 0.45
+	var currentLineX = textCanvasesPadding
+	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)
-					lineContext.clearRect(0, 0, cardWidth, cardHeight)
+					paragraphContext.drawImage(lineCanvas, 0 + alignAdjust - textCanvasesPadding, 0, cardWidth + 2 * textCanvasesPadding, cardHeight + 2 * textCanvasesPadding)
+					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-mid: #fff4;
-    --clear-dark: #fff6;
+    --clear-light: #fff3;
+    --clear-mid: #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()
+}
+
+
+
+