other

data/borders/8th/border.js

@@ -26,10 +26,7 @@ var ptFont = "bold 48px matrix"
 var ptFontSpacing = "0.3px"
 var ptTextX = 626
 var ptTextY = 936
-var ptX = 541
+imgBorderCreature.imgValues(541, 920.5, 162, 84)
-var ptY = 920.5
-var ptWidth = 162
-var ptHeight = 84
 
 var infoY = 956
 
@@ -52,11 +49,7 @@ finishTemplate()
 
 var uniqueFunctionName = "bottomInfo8th"
 function bottomInfo8th() {
-	if (document.getElementById("checkboxArtistColor").checked == true) {
+	card.fillStyle = document.getElementById("inputInfoColor").value
-		card.fillStyle = "black"
-	} else {
-		card.fillStyle = "white"
-	}
 	canvas.style.letterSpacing = "1px"
 	card.font = "25px matrixb"
 	card.fillText(document.getElementById("inputArtist").value, 116, infoY)

data/borders/m15/border.js

@@ -6,6 +6,9 @@ imgFrameMask.src = borderPath + "frameMask.png"
 imgLegendFrameMask.src = borderPath + "legendFrameMask.png"
 imgRareStampMask.src = borderPath + "rareStampMask.png"
 imgBorderMask.src = borderPath + "borderMask.png"
+imgRulesMask.src = borderPath + "rulesMask.png"
+imgTypeMask.src = borderPath + "typeMask.png"
+imgTitleMask.src = borderPath + "titleMask.png"
 //Card Title
 var titleFont = "40px belerenb" //40
 var titleFontSpacing = "0.15px" //0.15

data/borders/map/border.js

@@ -30,10 +30,7 @@ var ptFont = "32px belerenb"
 var ptFontSpacing = "0.3px"
 var ptTextX = 635
 var ptTextY = 933
-var ptX = 560
+imgBorderCreature.imgValues(560, 920, 150, 70)
-var ptY = 920
-var ptWidth = 150
-var ptHeight = 70
 //Bottom Info
 var infoY = 993
 //Set Symbol

data/borders/plane/border.js

@@ -58,11 +58,7 @@ finishTemplate()
 var uniqueFunctionName = "bottomInfoPlanechase"
 function bottomInfoPlanechase() {
 	card.textAlign = "left"
-	if (document.getElementById("checkboxArtistColor").checked == true) {
+	card.fillStyle = document.getElementById("inputInfoColor").value
-		card.fillStyle = "black"
-	} else {
-		card.fillStyle = "white"
-	}
 	var bottomLineFirst = document.getElementById("inputNumber").value + " " + document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
 	var bottomLineSecond
 	if (document.getElementById("inputInfo").value != "") {
@@ -78,7 +74,8 @@ function bottomInfoPlanechase() {
 	canvas.style.letterSpacing = cardWidth * -0.0002 + "px" //-0.2
 	card.font = "16px matrixbsc" //16
 	var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
-	card.mask("imgArtistBrush,source-over;" + card.fillStyle + ",source-in", cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134)
+	imgArtistBrush.imgValues(cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134)
+	card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle)
 	card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9400) //18, 704
 	//Left and Right side
 	canvas.style.letterSpacing = "0px"

data/borders/planeswalker/border.js

@@ -9,6 +9,7 @@ imgBorderMask.src = borderPath + "borderMask.png"
 imgAbilityLineOdd.src = borderPath + "abilityLineOdd.png"
 imgAbilityLineEven.src = borderPath + "abilityLineEven.png"
 document.getElementById("textSize").value = 33
+document.getElementById("inputCreatureColor").value = "#ffffff"
 //Card Title
 var titleFont = "40px belerenb" //40
 var titleFontSpacing = "-0.1px" //-0.1
@@ -34,10 +35,7 @@ var ptFont = "39px belerenb" //39
 var ptFontSpacing = "0.3px" //0.3
 var ptTextX = 655 //655
 var ptTextY = 935 //935
-var ptX = 598 //598
+imgBorderCreature.imgValues(598, 920, 118, 75)
-var ptY = 920 //920
-var ptWidth = 118 //1318
-var ptHeight = 75 //75
 //Bottom Info
 var infoY = 993 //993
 //Set Symbol

data/scripts/main.js

@@ -23,7 +23,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", "abilityLineOdd", "abilityLineEven"]
+var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask", "abilityLineOdd", "abilityLineEven", "rulesMask", "typeMask", "titleMask"]
 for (var i = 0; i < imgListTemplate.length; i ++) {
 	var imgName = "img" + imgListTemplate[i].charAt(0).toUpperCase() + imgListTemplate[i].slice(1)
 	window[imgName] = new Image()
@@ -67,7 +67,7 @@ for (var i = 0; i < imgListUser.length; i ++) {
 }
 
 //Load static images
-var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
+var imgListStatic = ["artistBrush", "foil", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
 for (var i = 0; i < imgListStatic.length; i ++) {
 	var imgName = "img" + imgListStatic[i].charAt(0).toUpperCase() + imgListStatic[i].slice(1)
 	window[imgName] = new Image()
@@ -93,7 +93,7 @@ loadScript("data/borders/defaultBorder.js")
 loadSetSymbol()
 
 //Randomize the sample cards at the bottom
-randomizeSampleCards(8)
+randomizeSampleCards(9)
 
 //Set up the initial clock!
 var cardClockInterval
@@ -293,7 +293,9 @@ function createBorder() {
 			border.mask("imgMultiGradient,source-over;imgLegendFrameMask,source-in", imgSecondBorderLegendary)
 		}
 		//redraws the custom-color border to match the legendary frame
-		border.mask("imgLegendFrameMask,source-over;imgBorderMask,source-out", "none", document.getElementById("inputColor").value)
+		if (document.getElementById("checkboxBorderless").checked != true) {
+			border.mask("imgLegendFrameMask,source-over;imgBorderMask,source-out", "none", document.getElementById("inputColor").value)
+		}
 		//redraws the silver border usually on un-cards to match the legendary frame
 		if (document.getElementById("checkboxSilverBorder").checked == true) {
 			border.mask("imgLegendFrameMask,source-over;imgBorderMask,source-out", "none", "#a3aeb7")
@@ -339,6 +341,21 @@ function createBorder() {
 			titleRightShift = 0
 		}
 	}
+	//CLEAR ANYTHING UNWANTED
+	border.globalCompositeOperation = "destination-out"
+	if (document.getElementById("checkboxRulesVisibility").checked == false && imgRulesMask.width > 0) {
+		border.drawImage(imgRulesMask, 0, 0, cardWidth, cardHeight)
+	}
+	if (document.getElementById("checkboxTypeVisibility").checked == false && imgTypeMask.width > 0) {
+		border.drawImage(imgTypeMask, 0, 0, cardWidth, cardHeight)
+	}
+	if (document.getElementById("checkboxTitleVisibility").checked == false && imgTitleMask.width > 0) {
+		border.drawImage(imgTitleMask, 0, 0, cardWidth, cardHeight)
+	}
+	// if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true && document.getElementById("checkboxBorderless").checked == true && document.getElementById("checkboxSilverBorder").checked == false) {
+	// 	border.drawImage(imgBorderMask, 0, 0, cardWidth, cardHeight)
+	// }
+	border.globalCompositeOperation = "source-over"
 	//COLOR IDENTITY
 	if (document.getElementById("checkboxIdentity").checked == true) {
 		var identityList = document.getElementById("inputIdentity").value.toLowerCase().split(" ")
@@ -405,12 +422,12 @@ function createBorder() {
         imgBorderRareStamp.imgValues(329, rareStampY - 15, 90, 50, "imgSecondBorderRareStamp,imgRareStampMask")
 		border.mask("imgCardMask,source-over", imgBorderRareStamp)
 		if (document.getElementById("checkboxSecondColor").checked == true) {
-			// border.mask("imgStampGradient,source-over;imgSecondBorderRareStamp,source-in", 329, rareStampY - 15, 90, 50)attention
 			border.mask("imgMultiGradient,source-over", imgSecondBorderRareStamp)
 		}
-		//Draws over the rare stamp (part that's usually black) to match custom border color
+		if (document.getElementById("checkboxBorderless").checked != true) {
-		// border.mask("imgRareStampMask,source-over;" + document.getElementById("inputColor").value + ",source-in", 329, rareStampY - 15, 90, 50)attention
+			//Draws over the rare stamp (part that's usually black) to match custom border color
-        border.mask("imgCardMask,source-over", imgRareStampMask, document.getElementById("inputColor").value)
+	        border.mask("imgCardMask,source-over", imgRareStampMask, document.getElementById("inputColor").value)
+	    }
 		//This is when the holo stamp is drawn
 		border.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
 	}
@@ -498,26 +515,29 @@ function writeText() {
 	//Draws the entered text onto the card, also draws the power/toughness box if necessary
 	//All use these:
 	card.textBaseline = "top"
-	if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
+	// if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
-		card.fillStyle = "White"
+	// 	card.fillStyle = "White"//attention
-	} else {
+	// } else {
-		card.fillStyle = "Black"
+	// 	card.fillStyle = "Black"
-	}
+	// }
 	//Title
+	card.fillStyle = document.getElementById("inputTitleColor").value
 	card.textAlign = titleAlign
 	canvas.style.letterSpacing = titleFontSpacing
 	card.font = titleFont	
 	card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY)
 	//Type
+	card.fillStyle = document.getElementById("inputTypeColor").value
 	card.textAlign = typeAlign
 	canvas.style.letterSpacing = typeFontSpacing
 	card.font = typeFont
 	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" || borderPath == "data/borders/planeswalker/") {
+		// if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") {
-			card.fillStyle = "White"
+		// 	card.fillStyle = "White"//attention
-		}
+		// }
+		card.fillStyle = document.getElementById("inputCreatureColor").value
 		card.textAlign = "center"
 		card.drawImage(imgBorderCreature, imgBorderCreature.imgX, imgBorderCreature.imgY, imgBorderCreature.imgW, imgBorderCreature.imgH)
 		canvas.style.letterSpacing = ptFontSpacing
@@ -526,8 +546,9 @@ function writeText() {
 		card.fillText(powerToughness, ptTextX, ptTextY)
 	}
 	card.textAlign = "left"
-	card.fillStyle = "Black"
+	// card.fillStyle = "Black"//attention
 	//Rules Text
+	card.fillStyle = document.getElementById("inputRulesColor").value
 	canvas.style.letterSpacing = textFontSpacing + "px"
 	card.font = document.getElementById("textSize").value + textFont
 	var text = document.getElementById("inputText").value
@@ -536,11 +557,7 @@ function writeText() {
 
 //Bottom info on M15 cards
 function bottomInfoM15() {
-	if (document.getElementById("checkboxArtistColor").checked == true) {
+	card.fillStyle = document.getElementById("inputInfoColor").value
-		card.fillStyle = "black"
-	} else {
-		card.fillStyle = "white"
-	}
 	var shiftInfo = 442
 	canvas.style.letterSpacing = "0.8px"
 	card.font = "19.5px relaymedium"

index.html

@@ -33,13 +33,13 @@
 		<div>
 			<div class="grid selectionGrid">
 				<div onclick="toggleView('color', 'cmm')">Color</div>
-				<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
 				<div onclick="toggleView('general', 'cmm')">General</div>
 				<div onclick="toggleView('text', 'cmm')">Text</div>
-				<div onclick="toggleView('info', 'cmm')">Info</div>
 				<div onclick="toggleView('art', 'cmm')">Art</div>
-				<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
+				<div onclick="toggleView('info', 'cmm')">Info</div>
 				<div onclick="toggleView('set', 'cmm')">Set</div>
+				<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
+				<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
 				<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
 				<div onclick="toggleView('download', 'cmm')">Download</div>
 			</div>
@@ -132,7 +132,7 @@
 						<label for="checkboxFlipTip" />
 						<div>Flip Tip</div>
 					</div>
-					<input id="inputFlipTip" value="" type="text" class="input"></input>
+					<input id="inputFlipTip" value="" type="text" class="input">
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
 						<label for="checkboxFlippedDark" />
@@ -143,7 +143,7 @@
 						<label for="checkboxSilverBorder" />
 						<div>Silver Border</div>
 					</div>
-                    <input type="color" id="inputColor" onchange="createBorder()" value="#000000"> Border Color</input>
+                    <input type="color" id="inputColor" onchange="createBorder()" value="#000000"> Border Color
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxFoil" />
 						<label for="checkboxFoil" />
@@ -154,28 +154,47 @@
 						<label for="checkboxIdentity" />
 						<div>Color Identity</div>
 					</div>
-					<input id="inputIdentity" type="text" class="input" onchange="createBorder()"></input>
+					<input id="inputIdentity" type="text" class="input" onchange="createBorder()">
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxBorderless" onchange="createBorder()" />
 						<label for="checkboxBorderless" />
 						<div>Borderless</div>
 					</div>
+					<div class="checkbox">
+						<input type="checkbox" id="checkboxTitleVisibility" checked="true" onchange="createBorder()">
+						<label for="checkboxTitleVisibility" />
+						<div>Title Visibility</div>
+					</div>
+					<div class="checkbox">
+						<input type="checkbox" id="checkboxTypeVisibility" checked="true" onchange="createBorder()">
+						<label for="checkboxTypeVisibility" />
+						<div>Type Visibility</div>
+					</div>
+					<div class="checkbox">
+						<input type="checkbox" id="checkboxRulesVisibility" checked="true" onchange="createBorder()">
+						<label for="checkboxRulesVisibility" />
+						<div>Rules Visibility</div>
+					</div>
+					<input type="color" id="inputTitleColor" value="#000000"> Title Color<br/>
+					<input type="color" id="inputTypeColor" value="#000000"> Type Color<br/>
+					<input type="color" id="inputRulesColor" value="#000000"> Rules Color<br/>
+					<input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br/>
 				</div>
 				<div class="cmm" id="cmm-general">
 					Name
-					<input id="inputName" type="text" class="input"></input>
+					<input id="inputName" type="text" class="input">
 					<br/>
 					Mana Cost
-					<input id="inputCost" type="text" class="input"></input>
+					<input id="inputCost" type="text" class="input">
 					<br/>
 					Type
-					<input id="inputType" type="text" class="input"></input>
+					<input id="inputType" type="text" class="input">
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxCreature" />
 						<label for="checkboxCreature" />
 						<div>Power/Toughness</div>
 					</div>
-					<input id="inputPowerToughness" class="input" type="text"></input>
+					<input id="inputPowerToughness" class="input" type="text">
 				</div>
 				<div class="cmm" id="cmm-text">
 					Rules Text
@@ -183,80 +202,76 @@
 					<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
 					<br/>
 					Rules Text Font Size
-					<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"></input>
+					<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
 					<br/>
 					Pixels Between Paragraphs
-					<input id="textShift" type="number" class="input" min="0" max="300" value="13"></input>
+					<input id="textShift" type="number" class="input" min="0" max="300" value="13">
 					<br/>
 					Shift All Text Down
-					<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
+					<input id="textDown" type="number" class="input" min="0" max="300" value="0">
 					<br/>
 					Shift Mana Symbols Down
-					<input id="inputSymbolDown" type="number" class="input" value="0"></input>
+					<input id="inputSymbolDown" type="number" class="input" value="0">
 				</div>
 				<div class="cmm" id="cmm-art">
 					Image
-					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
+					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture">
 					<br/>
-					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input>
+					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)">
 					<br/>
 					Image Zoom
-					<input id="imageSize" type="number" class="input" value="100" step="0.1"></input>
+					<input id="imageSize" type="number" class="input" value="100" step="0.1">
 					<br/>
 					Image Left
-					<input id="imageLeft" type="number" class="input" value="0" step="1"></input>
+					<input id="imageLeft" type="number" class="input" value="0" step="1">
 					<br/>
 					Image Up
-					<input id="imageUp" type="number" class="input" value="0" step="1"></input>
+					<input id="imageUp" type="number" class="input" value="0" step="1">
 				</div>
 				<div class="cmm" id="cmm-info">
 					Other Info
-					<input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
+					<input id="inputInfo" value="Not A Real Card" type="text" class="input">
 					<br/>
 					Card Number
-					<input id="inputNumber" value="001/001" type="text" class="input"></input>
+					<input id="inputNumber" value="001/001" type="text" class="input">
 					<br/>
 					Rarity
-					<input id="inputRarity" value="C" type="text" class="input"></input>
+					<input id="inputRarity" value="C" type="text" class="input">
 					<br/>
 					Set Abbreviation
-					<input id="inputSet" value="MTG" type="text" class="input"></input>
+					<input id="inputSet" value="MTG" type="text" class="input">
 					<br/>
 					Language
-					<input id="inputLanguage" value="EN" type="text" class="input"></input>
+					<input id="inputLanguage" value="EN" type="text" class="input">
 					<br/>
 					Artist Credit
-					<input id="inputArtist" value="" type="text" class="input"></input>
+					<input id="inputArtist" value="" type="text" class="input">
 					<br/>
-					<div class="checkbox">
+					<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br/>
-						<input type="checkbox" id="checkboxArtistColor" />
-						<label for="checkboxArtistColor" />
-						<div>Black Bottom Info</div>
-					</div>
 				</div>
 				<div class="cmm" id="cmm-set">
 					<div class="checkbox">
-						<input type="checkbox" id="checkboxSetSymbol" checked="true" />
+						<input type="checkbox" id="checkboxSetSymbol" checked="true">
 						<label for="checkboxSetSymbol" />
 						<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="hm" id="setSymbolCode" class="input">
 					<br>
 					Set Symbol Rarity
-					<input type="text" onchange="loadSetSymbol()" value="c" id="setSymbolRarity" class="input"></input>
+					<input type="text" onchange="loadSetSymbol()" value="c" id="setSymbolRarity" class="input">
 					<br>
 					Custom Set Symbol
-					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
+					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol">
 					<br/>
-					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input>
+					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)">
 					<br/>
 					Scale Set Symbol
-					<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
+					<input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
 				</div>
 				<div class="cmm" id="cmm-download">
 					Frame Rate
-					<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
+					<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)">
 					<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
 				</div>
 				<div class="cmm" id="cmm-watermark">
@@ -265,11 +280,11 @@
 						<label for="checkboxWatermark" />
 						<div>Watermark</div>
 					</div>
-					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
+					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark">
 					<br/>
-					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
+					<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)">
 					<br/>
-					<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
+					<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode">
 					<br/>
 					Watermark Color
 					<br/>
@@ -302,7 +317,7 @@
 						</select>
 					</span>
 					Watermark Opacity
-					<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
+					<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01">
 				</div>
 				<div class="cmm" id="cmm-planeswalker">
 					Planeswalker Ability Line Height
@@ -561,7 +576,7 @@ input[type="text"], input[type="number"], textarea, input[type="file"] {
 input[type="color"] {
 	padding: 0px;
 	border: none;
-	background: var(--color-d);
+	background: var(--color-e);
 }
 
 /*Hyperlinks*/