planeswalkers

data/borders/defaultBorder.js

@@ -1,4 +1,6 @@
 //Default Border
+//Fixes images
+imgMultiGradient.src = "data/borders/multiGradient.png"
 //card size
 var cardWidth = 749
 var cardHeight = 1044

data/borders/m15/border.js

@@ -40,7 +40,7 @@ var infoY = 993 //993
 //Set Symbol
 var setSymbolY = 616 //616
 var setSymbolRight = 693 //693
-var setSymbolWidth = 77 //77
+var setSymbolWidth = 84 //77
 var setSymbolHeight = 44 //44
 //Watermark
 var watermarkWidth = 520 //520

data/borders/planeswalker/border.js

@@ -0,0 +1,147 @@
+//Planeswalker Border
+//Anything to do with...
+//Loading Images
+imgMultiGradient.src = borderPath + "multiGradient.png"
+imgMultiMask.src = borderPath + "multiMask.png"
+imgFrameMask.src = borderPath + "frameMask.png"
+imgRareStampMask.src = borderPath + "rareStampMask.png"
+imgBorderMask.src = borderPath + "borderMask.png"
+imgAbilityLineOdd.src = borderPath + "abilityLineOdd.png"
+imgAbilityLineEven.src = borderPath + "abilityLineEven.png"
+imgLoyaltyUp.src = borderPath + "loyaltyUp.png"
+imgLoyaltyDown.src = borderPath + "LoyaltyDown.png"
+imgLoyaltyZero.src = borderPath + "loyaltyZero.png"
+document.getElementById("textSize").value = 33
+//Card Title
+var titleFont = "40px belerenb" //40
+var titleFontSpacing = "-0.1px" //-0.1
+var titleX = 62 //62
+var titleY = 42 //42
+//Mana Cost
+var manaCostRadius = 17.5 //17.5
+var manaCostX = 657 //657
+var manaCostY = 46 //46
+//Card Type
+var typeFont = "33.5px belerenb" //33.5
+var typeFontSpacing = "0.05px" //0.05
+var typeX = 62 //62
+var typeY = 596 //596
+//Rules/Flavor Text
+var textFont = "px mplantin"
+var textFontSpacing = -0.4 //-0.4
+var textX = 134 //134
+var textY = 650 //650
+var textWidth = 682 //682
+//Power Toughness
+var ptFont = "39px belerenb" //39
+var ptFontSpacing = "0.3px" //0.3
+var ptTextX = 655 //655
+var ptTextY = 935 //935
+var ptX = 598 //598
+var ptY = 920 //920
+var ptWidth = 118 //1318
+var ptHeight = 75 //75
+//Bottom Info
+var infoY = 993 //993
+//Set Symbol
+var setSymbolY = 615 //615
+var setSymbolRight = 695 //695
+var setSymbolWidth = 90 //90
+var setSymbolHeight = 42 //42
+//Watermark
+var watermarkWidth = 520 //520
+var watermarkHeight = 250 //250
+var watermarkY = 805 //805
+//Rare Stamp
+var rareStampY = 955 //955
+//Color Options
+loadColors("white-White,blue-Blue,black-Black,red-Red,green-Green,gold-Gold,colorless-Colorless,artifact-Artifact")
+document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
+document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
+//"Being a Planeswalker is being able to do what a card do"
+// —Unknown AP English Student
+stampBorder = true
+var artX = 52
+var artY = 106
+//With all the new values in place, the program will update it's border images
+finishTemplate()
+//Any special functions go at the bottom
+var uniqueFunctionName = "planeswalkerCustomFunction"
+function planeswalkerCustomFunction() {
+	//Bottom info is important
+	bottomInfoM15()
+	//But now it has to draw/write the loyalty things!
+	var abilityLineY = 650
+	for (i = 0; i < abilityLines.length; i ++) {
+		var loyaltyValue = document.getElementById("abilityValue" + i).value
+		if (loyaltyValue != "") {
+			card.fillStyle = "white"
+			card.textAlign = "center"
+			card.font = "31px belerenbsc"
+			if (loyaltyValue.charAt(0) == "-") {
+				card.drawImage(imgLoyaltyDown, 34, abilityLineY + abilityLines[i] / 2 - 28, 84, 64)
+				card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 22)
+			} else if (loyaltyValue.charAt(0) == "+") {
+				card.drawImage(imgLoyaltyUp, 34, abilityLineY + abilityLines[i] / 2 - 38, 82, 62)
+				card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 24)
+			} else {
+				card.drawImage(imgLoyaltyZero, 34, abilityLineY + abilityLines[i] / 2 - 28, 82, 56)
+				card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 21)
+			}
+			card.font = "37px mplantin"
+			card.fillStyle = "black"
+			card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 28)
+		}
+		abilityLineY += abilityLines[i]
+	}
+}
+var savedFrameMask = new Image()
+savedFrameMask.src = borderPath + "frameMask.png"
+var abilityLineCanvas = document.createElement("canvas")
+abilityLineCanvas.width = cardWidth
+abilityLineCanvas.height = cardHeight
+var abilityLineContext = abilityLineCanvas.getContext("2d")
+var abilityLines = []
+function planeswalkerAbilityLines() {
+	abilityLines = []
+	if (document.getElementById("abilityLine1").value > 0) {abilityLines[abilityLines.length] = parseInt(document.getElementById("abilityLine1").value)}
+	if (document.getElementById("abilityLine2").value > 0) {abilityLines[abilityLines.length] = parseInt(document.getElementById("abilityLine2").value)}
+	if (document.getElementById("abilityLine3").value > 0) {abilityLines[abilityLines.length] = parseInt(document.getElementById("abilityLine3").value)}
+	if (document.getElementById("abilityLine4").value > 0) {abilityLines[abilityLines.length] = parseInt(document.getElementById("abilityLine4").value)}
+	abilityLineContext.clearRect(0, 0, cardWidth, cardHeight)
+	var abilityLineY = 645
+	for (i = 0; i < abilityLines.length; i ++) {
+		if (i == abilityLines.length - 1) {
+			// abilityLines[i] += cardHeight - abilityLines[i]
+			if (i % 2 === 0) {
+				abilityLineContext.fillStyle = "#95959595"
+			} else {
+				abilityLineContext.fillStyle = "#6a6a6a6a"
+			}
+			abilityLineContext.fillRect(50, abilityLineY + 5, cardWidth - 100, cardHeight - abilityLineY - 90)
+		} else {
+			if (i % 2 === 0) {
+				abilityLineContext.fillStyle = "#95959595"
+				abilityLineContext.drawImage(imgAbilityLineOdd, 93, abilityLineY + abilityLines[i] - 5, 596, 10)
+			} else {
+				abilityLineContext.fillStyle = "#6a6a6a6a"
+				abilityLineContext.drawImage(imgAbilityLineEven, 93, abilityLineY + abilityLines[i] - 5, 596, 10)
+			}
+			abilityLineContext.fillRect(50, abilityLineY + 5, cardWidth - 100, abilityLines[i] - 10)
+		}
+		abilityLineY += abilityLines[i]
+	}
+	abilityLineContext.drawImage(savedFrameMask, 0, 0, cardWidth, cardHeight)
+    imgFrameMask.src = abilityLineCanvas.toDataURL()
+    imgFrameMask.hasToLoad = true
+}
+imgFrameMask.onload = function() {
+	if (imgFrameMask.hasToLoad == true) {
+		imgFrameMask.hasToLoad = false
+		createBorder()
+	}
+}
+//Reveals the planeswalker card manipulation menu section
+document.getElementById("cmmPlaneswalker").style.display = "block"
+//After a second the first ability lines will be generated
+setTimeout(function(){planeswalkerAbilityLines()}, 1000)

data/scripts/main.js

@@ -22,7 +22,7 @@ var borderCanvas = document.createElement("canvas")
 var border = borderCanvas.getContext("2d")
 
 //load template images (images that may change based off of the selected template)
-var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask"]
+var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask", "abilityLineOdd", "abilityLineEven", "loyaltyUp", "loyaltyDown", "loyaltyZero"]
 for (i = 0; i < imgListTemplate.length; i ++) {
 	var imgName = "img" + imgListTemplate[i].charAt(0).toUpperCase() + imgListTemplate[i].slice(1)
 	window[imgName] = new Image()
@@ -74,7 +74,7 @@ for (i = 0; i < imgListStatic.length; i ++) {
 }
 
 //Mana symbol Array setup
-var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "snow", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane"]
+var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane"]
 var manaSymbolImages = new Array()
 for (var i = 0; i < manaSymbolCode.length; i++) {
 	manaSymbolImages[i] = new Image()
@@ -118,11 +118,7 @@ function cardClock() {
 	//Draws the card image, then...
 	drawPicture()
 	//draws the card frame on top
-	if (transparentBorder != true) {
-        drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
-    } else {
     card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
-    }
 	//draws the set symbol, mana cost, and watermark
 	drawSetSymbol()
 	drawManaCost()
@@ -160,6 +156,7 @@ function finishTemplate() {
 	canvas.height = cardHeight
 	borderCanvas.width = cardWidth
 	borderCanvas.height = cardHeight
+	imgArtMask.src = borderPath + "artMask.png"
 	document.getElementById("colorSelection").value = "white"
 	updateBorder()
 }
@@ -171,7 +168,6 @@ function updateBorder() {
 	var secondColorPath = borderPath + document.getElementById("secondColorSelection").value
 	var thirdColorPath = borderPath + document.getElementById("thirdColorSelection").value
 	var altframe = ""
-	imgArtMask.src = borderPath + "artMask.png"
 	imgBorderColor.src = firstColorPath + "/frame.png"
 	imgSecondBorderColor.src = secondColorPath + "/frame.png"
 	imgThirdBorderColor.src = thirdColorPath + "/frame.png"
@@ -402,7 +398,6 @@ function createBorder() {
 	//RARE STAMP
 	if (document.getElementById("checkboxRareStamp").checked == true && stampBorder == true) {
 		border.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
-
 		if (document.getElementById("checkboxSecondColor").checked == true) {
 			drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, border, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
 		}
@@ -512,7 +507,7 @@ function writeText() {
 	card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY)
 	//Power/Toughness
 	if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
-		if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png") {
+		if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") {
 			card.fillStyle = "White"
 		}
 		card.textAlign = "center"

index.html

@@ -9,7 +9,7 @@
 	<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
 	<link rel="manifest" href="favicons/site.webmanifest">
 	<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#64ca2f">
-	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+	<link rel="shortcut icon" type="image/x-icon" href="favicons/favicon.ico">
 	<meta name="msapplication-TileColor" content="#00a300">
 	<meta name="msapplication-config" content="favicons/browserconfig.xml">
 	<meta name="theme-color" content="#64ca2f">
@@ -40,6 +40,7 @@
 				<div onclick="toggleView('art', 'cmm')">Art</div>
 				<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
 				<div onclick="toggleView('set', 'cmm')">Set</div>
+				<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
 				<div onclick="toggleView('download', 'cmm')">Download</div>
 			</div>
 			<div class="cardManipulationMenu">
@@ -48,6 +49,7 @@
 					<span class="dropdown">
 						<select id="borderSelection" onchange="changeTemplate()">
 							<option value="m15/">M15</option>
+							<option value="planeswalker/">Planeswalker (M15)</option>
 							<option value="map/">Map (Ixalan)</option>
 							<option value="plane/">Plane</option>
 							<option value="8th/">8th</option>
@@ -168,7 +170,7 @@
 						<label for="checkboxCreature" />
 						<div>Power/Toughness</div>
 					</div>
-					<input id="inputPowerToughness" class="input" value="" type="text"></input>
+					<input id="inputPowerToughness" class="input" type="text"></input>
 				</div>
 				<div class="cmm" id="cmm-text">
 					Rules Text
@@ -234,10 +236,10 @@
 						<div>Set Symbol</div>
 					</div>
 					Set Code
-					<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
+					<input type="text" onchange="loadSetSymbol()" value="m19" id="setSymbolCode" class="input"></input>
 					<br>
 					Set Symbol Rarity
-					<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity" class="input"></input>
+					<input type="text" onchange="loadSetSymbol()" value="m" id="setSymbolRarity" class="input"></input>
 					<br>
 					Custom Set Symbol
 					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
@@ -297,6 +299,19 @@
 					Watermark Opacity
 					<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
 				</div>
+				<div class="cmm" id="cmm-planeswalker">
+					Planeswalker Ability Line Height
+					<input type="number" id="abilityLine1" value="102" onchange="planeswalkerAbilityLines()">
+					<input type="number" id="abilityLine2" value="102" onchange="planeswalkerAbilityLines()">
+					<input type="number" id="abilityLine3" value="102" onchange="planeswalkerAbilityLines()">
+					<input type="number" id="abilityLine4" value="0" onchange="planeswalkerAbilityLines()">
+					These values set the height of each ability box of the planeswalker. For evenly spaced boxes use (145, 145) or (90, 90, 90)<br>
+					Planeswalker Ability Values
+					<input type="text" id="abilityValue0" value="+1">
+					<input type="text" id="abilityValue1" value="0">
+					<input type="text" id="abilityValue2" value="-1">
+					<input type="text" id="abilityValue3" value="">
+				</div>
 			</div>
 		</div>
 	</div>
@@ -310,13 +325,13 @@
 			</div>
 			<div class="extrasMenu">
 				<div class="extras shown" id="extras-symbolList">
-					Each of the following codes must include '<' before each code and '>' after. These codes aren't caps sensative.
+					Each of the following codes must include '<' before each code and '>' after. These codes aren't caps sensitive.
 					<div class="symbolGrid grid" id="symbolList">
 						
 					</div>
 				</div>
 				<div class="extras" id="extras-codes">
-					Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are also caps sensative.<br/>
+					Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are caps sensitive.<br/>
 					&#8226 line &#8594 Skips to the next line<br/>
 					&#8226 bar &#8594 Just like line, except adds the bar that usually seperates flavor text<br/>
 					&#8226 lineNoSpace &#8594 Just like line, except stays closer to the previous line<br/>
@@ -328,7 +343,7 @@
 					&#8226 plane &#8594 Creates a large <img src="data/manaSymbols/56.png" style="height: 1em;"></img> and shifts the following text to the right. This is designed for planar cards.
 				</div>
 				<div class="extras" id="extras-set">
-					Every set in Magic: The Gathering has an associated 2-3 letter code. For example, Homelands is HM and Innistrad is ISD. This program uses the codes from <a href="http://gatherer.wizards.com" target="_blank">The Gatherer</a>, the official Magic card database. A handy list of all sets and their codes can be found on <a href="https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets" target="_blank">Wikipedia</a>
+					Every set in Magic: The Gathering has an associated 2-3 letter code. For example, Homelands is HM and Innistrad is ISD. This program uses the codes from <a href="http://gatherer.wizards.com" target="_blank">The Gatherer</a>, the official Magic card database. A handy list of all sets and their codes can be found on <a href="https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets" target="_blank">Wikipedia</a>. These codes aren't caps sensitive.
 				</div>
 				<div class="extras" id="extras-border">
 					Under the 'Card Border' tab use the following guidelines:<br/>