contraptions

data/borders/contraption/border.js

@@ -0,0 +1,58 @@
+//Contraption Border
+//Anything to do with...
+//Loading Images
+imgFrameMask.src = borderPath + "frameMask.png"
+//Card Title
+var titleFont = "40px belerenb" //40
+var titleFontSpacing = "0.15px" //0.15
+var titleX = 62 //62
+var titleY = 56 //56 + 6
+//Mana Cost
+var manaCostRadius = 17.5 //17.5
+var manaCostX = 658 //657
+var manaCostY = 54 //59
+//Card Type
+var typeFont = "33.5px belerenb" //33.5
+var typeFontSpacing = "-0.4px" //0.05
+var typeX = 62 //62
+var typeY = 647 //595 + 6
+//Rules/Flavor Text
+var textFont = "px mplantin"
+var textFontSpacing = 0.7 //0.7
+var textX = 66 //66
+var textY = 705 //656 + 6
+var textWidth = 682 //682
+//Power Toughness
+var ptFont = "39px belerenb" //39
+var ptFontSpacing = "0.3px" //0.3
+var ptTextX = 645 //645
+var ptTextY = 942 //936 + 6
+imgBorderCreature.imgValues(571, 929, 137, 75)
+//Bottom Info
+var infoY = 996 //993 + 6
+//Set Symbol
+var setSymbolY = 662 //616
+var setSymbolRight = 688 //693
+var setSymbolWidth = 84 //77
+var setSymbolHeight = 42 //44
+//Watermark
+var watermarkWidth = 78 //520
+var watermarkHeight = 78 //250
+var watermarkY = 914 //805
+var watermarkX = 668
+//Rare Stamp
+var rareStampY = 958 //958
+//Color Options
+loadColors("white-White")
+document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
+document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
+//Things The Card Can Do
+var creatureBorder = false
+var thirdBorder = false
+var secondBorder = false
+var artX = 0
+var artY = 0
+//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 = "bottomInfoM15"

data/borders/defaultBorder.js

@@ -30,6 +30,7 @@ document.getElementById("inputTypeColor").value = "#000000"
 document.getElementById("inputRulesColor").value = "#000000"
 document.getElementById("inputCreatureColor").value = "#000000"
 //Image alignment
+var watermarkX = cardWidth / 2
 var centerSetSymbol = 1 //1=not centered, 2=centered
 var artX = 58
 var artY = 118

data/main.js

@@ -522,7 +522,7 @@ function drawWatermark() {
 			width = watermarkWidth
 			height = imgWatermark.height * (width / imgWatermark.width)
 		}
-		var x = cardWidth / 2 - width / 2
+		var x = watermarkX - width / 2
 		var y = watermarkY - height / 2
         imgWatermark.imgValues(x, y, width, height)
 		//globalAlpha insures that the watermark is drawn partially transparent. This value may not be perfect but the watermark colors are calibrated to it
@@ -571,13 +571,23 @@ function writeText() {
 	card.fillStyle = document.getElementById("inputTitleColor").value
 	card.textAlign = titleAlign
 	canvas.style.letterSpacing = titleFontSpacing
-	card.font = titleFont	
+	card.font = titleFont
+	if (document.getElementById("checkboxTitleOutline").checked == true) {
+		card.strokeStyle = document.getElementById("inputTitleOutlineColor").value
+		card.lineWidth = 2
+		card.strokeText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift[0] * card.font.split("px")[0])
+	}
 	card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift[0] * card.font.split("px")[0])
 	//Type
 	card.fillStyle = document.getElementById("inputTypeColor").value
 	card.textAlign = typeAlign
 	canvas.style.letterSpacing = typeFontSpacing
 	card.font = typeFont
+	if (document.getElementById("checkboxTypeOutline").checked == true) {
+		card.strokeStyle = document.getElementById("inputTypeOutlineColor").value
+		card.lineWidth = 2
+		card.strokeText(document.getElementById("inputType").value, typeX + typeRightShift, typeY + textBaselineShift[0] * card.font.split("px")[0])
+	}
 	card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY + textBaselineShift[0] * card.font.split("px")[0])
 	//Power/Toughness
 	if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
@@ -669,6 +679,12 @@ function drawText(text, xCoord, yCoord) {
 	var words = (text).split(" ")
 	var line = ""
 	var tempTextWidth = textWidth
+	var outlineRulesText
+	if (document.getElementById("checkboxRulesOutline").checked == true) {
+		outlineRulesText = true
+		card.strokeStyle = document.getElementById("inputRulesOutlineColor").value
+		card.lineWidth = 2
+	}
 	for (var wordIndex = 0; wordIndex < words.length; wordIndex ++) {
 		if (words[wordIndex].includes("<") == false || words[wordIndex].includes(">") == false) {
 			//Just a regular old word
@@ -676,6 +692,9 @@ function drawText(text, xCoord, yCoord) {
 			var lineWidth = card.measureText(testLine).width
 			if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
 				//Word is too big
+				if (outlineRulesText == true) {
+					card.strokeText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
+				}
 				card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
 				line = words[wordIndex] + " "
 				y += textSize + 1
@@ -685,6 +704,9 @@ function drawText(text, xCoord, yCoord) {
 				line = testLine + " "
 			}
 			if (wordIndex + 1 == words.length) {
+				if (outlineRulesText == true) {
+					card.strokeText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
+				}
 				card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
 			}
 		} else {
@@ -692,6 +714,9 @@ function drawText(text, xCoord, yCoord) {
 			var splitWord = words[wordIndex].split("<")
 			for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) {
 				//Write what's there first!
+				if (outlineRulesText == true) {
+					card.strokeText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
+				}
 				card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
 				textXShift += card.measureText(line).width
 				line = ""
@@ -754,6 +779,9 @@ function drawText(text, xCoord, yCoord) {
 					var lineWidth = card.measureText(testLine).width
 					if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
 						//Word is too big
+						if (outlineRulesText == true) {
+							card.strokeText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
+						}
 						card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
 						line = plainWord
 						y += textSize + 1
@@ -763,6 +791,9 @@ function drawText(text, xCoord, yCoord) {
 						line = testLine
 					}
 					if (wordIndex + 1 == words.length) {
+						if (outlineRulesText == true) {
+							card.strokeText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
+						}
 						card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
 					}
 				}

index.html

@@ -94,6 +94,7 @@
 							<option value="map/">Treasure Map</option>
 							<option value="plane/">Plane</option>
 							<option value="vanguard/">Vanguard</option>
+							<option value="contraption/">Contraption</option>
 							<option value="8th/">8th</option>
 						</select>
 					</span>
@@ -223,9 +224,24 @@
 						<label for="checkboxRulesVisibility" />
 						<div>Rules Visibility</div>
 					</div>
-					<input type="color" id="inputTitleColor" value="#000000"> Title Color<br>
+					Title Color <input type="color" id="inputTitleColor" value="#000000"> Outline <input type="color" id="inputTitleOutlineColor" value="#ffffff">
-					<input type="color" id="inputTypeColor" value="#000000"> Type Color<br>
+					<div class="checkbox">
-					<input type="color" id="inputRulesColor" value="#000000"> Rules Color<br>
+						<input type="checkbox" id="checkboxTitleOutline">
+						<label for="checkboxTitleOutline" />
+						<div>Title Outline</div>
+					</div>
+					Type Color <input type="color" id="inputTypeColor" value="#000000"> Outline <input type="color" id="inputTypeOutlineColor" value="#ffffff">
+					<div class="checkbox">
+						<input type="checkbox" id="checkboxTypeOutline">
+						<label for="checkboxTypeOutline" />
+						<div>Type Outline</div>
+					</div>
+					Rules Color <input type="color" id="inputRulesColor" value="#000000"> Outline <input type="color" id="inputRulesOutlineColor" value="#ffffff">
+					<div class="checkbox">
+						<input type="checkbox" id="checkboxRulesOutline">
+						<label for="checkboxRulesOutline" />
+						<div>Rules Outline</div>
+					</div>
 					<input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br>
 				</div>
 				<div class="cmm" id="cmm-general">