planeswalker

data/images/imageCSV.csv

@@ -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;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
@@ -128,9 +124,10 @@ class frameImage {
 			this.heightList[i] = scale(parseInt(splitIndividualMasks[4]));
 		}
         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) {
+        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 + ">"
-		return tempElement;
+            tempElement.innerHTML = "<img src=" + this.image.src + ">";
+            document.getElementById("framePicker").appendChild(tempElement);
+//            return tempElement;
+        } else {
+            return
+        }
 	}
 }
 
@@ -204,10 +208,10 @@ 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();
 	}
 }
 
@@ -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,7 +480,7 @@ 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)
 	var textSize = inputTextSize
 	lineContext.font = textSize + "px " + textFont
@@ -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
@@ -529,6 +550,10 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 				} else if (possibleCodeLower.includes("font")) {
 					textFont = possibleCodeLower.slice(5, possibleCodeLower.length)
 					lineContext.font = textSize + "px " + textFont
+                } 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
@@ -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,6 +616,12 @@ CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, te
 		verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2
 	}
 	this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight)
+    if (text != "") {
+//        console.log(text)
+    }
+    if (completionFunction) {
+        window[completionFunction]();
+    }
     return "done"
 }
 //Loads up all the mana symbol images
@@ -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()
+}
+
+
+
+

disclaimer.html

@@ -16,7 +16,13 @@
 		</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">

index.html

@@ -17,14 +17,16 @@
 				<canvas id="displayCanvas"></canvas>
 			</div>
 			<div class="cardMenu">
+                <div id="cardMenu">
                     <!-- Card editor tabs begin here! -->
-                <div class="tabMenu">
+                    <div class="tabMenu" id="mainTabMenu">
                         <div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div>
                         <div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div>
                         <div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div>
                         <div class="tabOption mainEditor" onclick="toggleTabs(event, 'collector', 'mainEditor')">Collector</div>
                         <div class="tabOption mainEditor" onclick="toggleTabs(event, 'set', 'mainEditor')">Set Symbol</div>
                         <div class="tabOption mainEditor" onclick="toggleTabs(event, 'watermark', 'mainEditor')">Watermark</div>
+                        <div class="tabOption mainEditor" onclick="toggleTabs(event, 'advanced', 'mainEditor')">Advanced</div>
                     </div>
                     <div class="tabContent mainEditor tabVisible" id="frame">
                         <div class="splitGrid">
@@ -120,6 +122,13 @@
                             </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>
 				<div>
@@ -141,12 +150,19 @@
 			</div>
 		</div>
 		<div class="layer">
-            <div class="title">Want More Customization?</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="title">Looking for the Original?</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">