upgrayedd

data/images/planeswalker/planeswalkerCSV.csv

@@ -0,0 +1,11 @@
+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
+Dark Twins,planeswalker/darkTwins.png,Full-0-0-744-1039;Title Planeswalker-0-0-744-1039;Type Planeswalker-0-0-744-1039,Planeswalker
+Border,masks/BorderPlaneswalker.png,Full-0-0-744-1039;Border Planeswalker-0-0-744-1039,Planeswalker

data/scripts/animations.js

@@ -0,0 +1,18 @@
+//CSS & HTML stuff
+window.layerElements = document.querySelectorAll('.layer')
+window.addEventListener('resize', windowResized)
+window.addEventListener('scroll', windowScrolled)
+windowResized()
+
+function windowResized() {
+  window.windowHeight = window.innerHeight
+  windowScrolled()
+}
+function windowScrolled() {
+  for (var i = 0; i < layerElements.length; i++) {
+    var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
+    if (positionFromTop - windowHeight <= 0) {
+      layerElements[i].classList.add('revealedLayer')
+    }
+  }
+}

data/scripts/cookies.js

@@ -0,0 +1,24 @@
+function setCookie(cookieName, cookieValue, cookieTime = (5 * 365 * 24 * 60 * 60 * 1000)) {	//years*days*hours*minutes*seconds*milliseconds
+  	var tempDate = new Date()
+  	tempDate.setTime(tempDate.getTime() + cookieTime)
+  	document.cookie = cookieName + '=' + cookieValue + ';expires=' + tempDate.toUTCString() + ';path=/'
+}
+function getCookie(cookieName) {
+  	var name = cookieName + '='
+  	var cookieArray = document.cookie.split(';')
+  	for(var i = 0; i < cookieArray.length; i++) {
+    	var tempCookie = cookieArray[i]
+    	while (tempCookie.charAt(0) == ' ') {
+      		tempCookie = tempCookie.substring(1)
+    	}
+    	if (tempCookie.indexOf(name) == 0) {
+     		return tempCookie.substring(name.length, tempCookie.length)
+    	}
+  	}
+  	return ''
+}
+function checkCookies() {
+	if (getCookie('colorPalette') != undefined) {
+		loadScript('data/scripts/' + getCookie('colorPalette') + '.js')
+	}
+}

data/scripts/darkMode.js

@@ -1,7 +1,9 @@
-rootStyles.setProperty('--background-color', '#1c1c1c');
-rootStyles.setProperty('--background-color-contrast', '#111');
-rootStyles.setProperty('--interactable-color', '#333');
-rootStyles.setProperty('--interactable-selected-color', '#444');
-rootStyles.setProperty('--input-color', '#555');
-rootStyles.setProperty('--font-color', '#fff');
-rootStyles.setProperty('--font-color-contrast', '#eee');
+rootStyles.setProperty('--background-color', '#1c1c1c')
+rootStyles.setProperty('--background-color-contrast', '#111')
+rootStyles.setProperty('--interactable-color', '#333')
+rootStyles.setProperty('--interactable-selected-color', '#555')
+rootStyles.setProperty('--input-color', '#3a3a3a')
+rootStyles.setProperty('--font-color', '#fff')
+rootStyles.setProperty('--font-color-contrast', '#eee')
+rootStyles.setProperty('--body-background', 'none')
+setCookie('colorPalette', 'darkMode')

data/scripts/lightMode.js

@@ -1,7 +1,9 @@
-rootStyles.setProperty('--background-color', '#fafafa');
-rootStyles.setProperty('--background-color-contrast', '#222');
-rootStyles.setProperty('--interactable-color', '#aaa');
-rootStyles.setProperty('--interactable-selected-color', '#888');
-rootStyles.setProperty('--input-color', '#ddd');
-rootStyles.setProperty('--font-color', '#000');
-rootStyles.setProperty('--font-color-contrast', '#eee');
+rootStyles.setProperty('--background-color', '#fafafa')
+rootStyles.setProperty('--background-color-contrast', '#333')
+rootStyles.setProperty('--interactable-color', '#aaa')
+rootStyles.setProperty('--interactable-selected-color', '#777')
+rootStyles.setProperty('--input-color', '#ddd')
+rootStyles.setProperty('--font-color', '#000')
+rootStyles.setProperty('--font-color-contrast', '#eee')
+rootStyles.setProperty('--body-background', 'none')
+setCookie('colorPalette', 'lightMode')

data/scripts/main.js

@@ -5,8 +5,8 @@ var maskImageList = new Array()
 var maskNameList = new Array()
 var canvasList = new Array()
 var contextList = new Array()
-var cardWidth = 1500, cardHeight = 2100
 var loadedVersions = new Array()
+var currentVersion
 var cardMaster = document.getElementById('cardMaster')
 var selectedFrameImage
 var selectedMaskImage = 0
@@ -29,6 +29,9 @@ function newCanvas(name) {
 	window[name + 'Context'] = window[name + 'Canvas'].getContext('2d')
 	contextList.push(window[name + 'Context'])
 }
+function resizeCanvases(newCardWidth, newCardHeight) {
+	canvasList.forEach(element => {element.width = newCardWidth; element.height = newCardHeight})
+}
 
 var previewCanvas = document.getElementById('previewCanvas')
 previewCanvas.width = 750
@@ -43,6 +46,7 @@ newCanvas('bottomInfo')
 newCanvas('manaCost')
 newCanvas('watermark')
 newCanvas('temp')
+newCanvas('autoCrop')
 
 var artWidth = cardWidth, artHeight = cardHeight
 var setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight
@@ -76,6 +80,8 @@ setSymbol.onload = function() {
 	setSymbolDrawX = setSymbolX[0]
 	if (setSymbolX[1] == 'right') {
 		setSymbolDrawX -= setSymbolDrawWidth
+	} else if (setSymbolX[1] == 'center') {
+		setSymbolDrawX -= setSymbolDrawWidth / 2
 	}
 	setSymbolDrawY = setSymbolY[0]
 	if (setSymbolY[1] == 'center') {
@@ -100,11 +106,18 @@ class cardPlaceholder {
 		uniqueNumberTracker += 1
 	}
 	draw() {
-		mainContext.globalAlpha = 1
-		mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
 		if (this.whatToDraw == textCanvas) {
+			if (currentVersion == 'planeswalker') {
+				mainContext.drawImage(planeswalkerCanvas, 0, 0, cardWidth, cardHeight)
+			}
+			mainContext.globalAlpha = parseInt(document.getElementById('inputWatermarkOpacity').value) / 100
+			mainContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight)
+			mainContext.globalAlpha = 1
 			mainContext.drawImage(manaCostCanvas, 0, 0, cardWidth, cardHeight)
+		} else {
+			mainContext.globalAlpha = 1
 		}
+		mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom)
 	}
 	cardMasterElement() {
 		var temporaryElement = document.createElement('div')
@@ -204,9 +217,6 @@ function drawCardObjects() {
 			}
 		}
 	}
-	mainContext.globalAlpha = parseInt(document.getElementById('inputWatermarkOpacity').value) / 100
-	mainContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight)
-	mainContext.globalAlpha = 1
 	mainContext.drawImage(setSymbol, setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight)
 	mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
 	mainContext.globalCompositeOperation = 'destination-over'
@@ -227,7 +237,7 @@ function drawCardObjects() {
 }
 
 class frameImage {
-	constructor(displayName = 'custom', imageSource = '', x = 0, y = 0, width = 1, height = 1, masks = [], frameImageListIndex) {
+	constructor(displayName = 'custom', imageSource = '', x = 0, y = 0, width = 1, height = 1, masks = [], frameImageListIndex, frameClass) {
 		this.name = displayName
 		this.image = new Image()
 		if (this.name == 'custom') {
@@ -241,6 +251,7 @@ class frameImage {
 		this.masks = masks
 		this.framePickerElement = document.createElement('div')
         this.framePickerElement.id = 'frameIndex' + frameImageListIndex
+        this.framePickerElement.classList.add(frameClass)
         this.framePickerElement.onclick = this.frameOptionClicked
         this.framePickerElement.innerHTML = '<img src=' + this.image.src + '>'
         document.getElementById('framePicker').appendChild(this.framePickerElement)
@@ -276,12 +287,12 @@ function loadMaskImages(listOfMasks) {
 		maskNameList.push(listOfMasks[i][0])
 	}
 }
-function loadFrameImages(listOfFrames) {
+function loadFrameImages(listOfFrames, frameClass) {
 	for (var i = 0; i < listOfFrames.length; i++) {
-		frameImageList.push(new frameImage(...listOfFrames[i], frameImageList.length))
+		frameImageList.push(new frameImage(...listOfFrames[i], frameImageList.length, frameClass))
 		if (i == 0) {
 			frameObjectToAdd = frameImageList[frameImageList.length - 1]
-			var frameToInsert = cardMasterList.push(new cardImage(frameObjectToAdd.name, frameObjectToAdd.image.src, frameObjectToAdd.x, frameObjectToAdd.y, frameObjectToAdd.width, frameObjectToAdd.height, 1, [], false))
+			var frameToInsert = cardMasterList.push(new cardImage(frameObjectToAdd.name, frameObjectToAdd.image.src, frameObjectToAdd.x, frameObjectToAdd.y, frameObjectToAdd.width, frameObjectToAdd.height, 1, ['Full'], false))
 			cardMaster.insertBefore(cardMasterList[frameToInsert - 1].cardMasterElement(), cardMaster.children[1])
 			frameObjectToAdd.image.onload = function() {
 				drawCardObjects()
@@ -323,6 +334,7 @@ function getFloat(input) {
 }
 
 function loadTextOptions(textArray) {
+	document.getElementById('textPicker').innerHTML = ''
 	cardTextList = textArray
 	cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')">' + item.name + '</div>')
 	document.getElementById('textPicker').children[0].click()
@@ -558,29 +570,12 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
 function initialize() {
 	//Card stuff
 	cardMasterList.push(new cardPlaceholder('Card Art Placeholder', cardArt))
-	cardMasterList.push(new cardPlaceholder('Text Placeholder', window['textCanvas']))
+	cardMasterList.push(new cardPlaceholder('Text Placeholder', textCanvas))
 	cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0])
 	cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0])
 	document.getElementById('inputInfoNumber').value = date.getFullYear()
 	window.updateTextDelay = setTimeout(drawCardTextReal, 250)
 	setTimeout(bottomInfoUpdated, 500)
-	//CSS & HTML stuff
-	window.layerElements = document.querySelectorAll('.layer')
-	window.addEventListener('resize', windowResized)
-	window.addEventListener('scroll', windowScrolled)
-	windowResized()
-}
-
-function windowResized() {
-	window.windowHeight = window.innerHeight
-}
-function windowScrolled() {
-	for (var i = 0; i < layerElements.length; i++) {
-		var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
-		if (positionFromTop - windowHeight <= 0) {
-			layerElements[i].classList.add('revealedLayer')
-		}
-	}
 }
 
 function bottomInfoUpdated() {
@@ -597,7 +592,7 @@ function uploadLocalFrameImage(event) {
 }
 
 function addUploadedFrameImage(imageSource) {
-	frameImageList.push(new frameImage('custom', imageSource, 0, 0, 1, 1, maskNameList, frameImageList.length))
+	frameImageList.push(new frameImage('custom', imageSource, 0, 0, 1, 1, maskNameList, frameImageList.length, 'frameClassCustom'))
 }
 
 function manaCostUpdated() {
@@ -686,7 +681,6 @@ function inputCardNameNumberTextImport(index) {
     importText(beforeAfter(importCardTextResponse, '"type_line":"', '",'), 'Card Type')
     importText(beforeAfter(importCardTextResponse, '"oracle_text":"', '",').replace(/\\n/g, '\n').replace(/ \\"/g, ' \u201C').replace(/\\"/g, '\u201D').replace(/\(/g, '{i}(').replace(/\)/g, '){/i}'), 'Rules Text')
     if (importCardTextResponse.includes('"power":"')) {
-    	console.log('hmmm')
         importText(beforeAfter(importCardTextResponse, '"power":"', '",') + '/' + beforeAfter(importCardTextResponse, '"toughness":"', '",'), 'Power/Toughness')
     } else {
         importText('', 'Power Toughness')
@@ -727,7 +721,7 @@ function inputCardNameNumberTextImport(index) {
     document.getElementById('inputCardArtName').value = beforeAfter(importCardTextResponse, '"name":"', '",')
     document.getElementById('inputSetCode').value = beforeAfter(importCardTextResponse, '"set":"', '",')
     document.getElementById('inputSetRarity').value = beforeAfter(importCardTextResponse, '"rarity":"', '",')[0]
-    setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value
+    autoCrop(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)
     inputCardArtName(beforeAfter(importCardTextResponse, '"name":"', '",'))
     manaCostUpdated()
     drawCardText()
@@ -782,9 +776,69 @@ function loadScript(scriptPath){
 	}
 }
 
+function hideFrameImages(frameClass) {
+	Array.from(document.getElementById('framePicker').children).forEach(element => {
+		if (!element.classList.contains(frameClass)) {
+			element.classList.add('hidden')
+		} else {
+			element.classList.remove('hidden')
+		}
+	})
+}
 
-
-
+function autoCrop(targetImage, source = targetImage.src) {
+	var autoCropImage = new Image()
+	autoCropImage.crossOrigin = 'anonymous'
+	autoCropImage.src = source
+	autoCropImage.onload = function() {
+		var width = this.width
+		var height = this.height
+		autoCropCanvas.width = width
+		autoCropCanvas.height = height
+		autoCropContext.drawImage(this, 0, 0,)
+		var pixels = {x:[], y:[]}
+		var imageData = autoCropContext.getImageData(0, 0, width, height)
+		var x, y, index
+		if (imageData.data.length > 4) {
+			for (y = 0; y < height; y++) { //scans from left to right, top to bottom
+				for (x = 0; x < width; x++) {
+					index = (y * width + x) * 4 + 3 //calculuates the alpha value index
+					if (imageData.data[index] > 0) {
+						pixels.x.push(x)
+						pixels.y.push(y) //stores visible pixel coordinates
+					}
+				}
+			}
+			pixels.x.sort(function(a, b){return a - b})
+			pixels.y.sort(function(a, b){return a - b})
+			var n = pixels.x.length - 1
+			width = pixels.x[n] - pixels.x[0]
+			height = pixels.y[n] - pixels.y[0]
+			var cropped = autoCropContext.getImageData(pixels.x[0], pixels.y[0], width + 1, height + 1)
+			autoCropCanvas.width = width + 1
+			autoCropCanvas.height = height + 1
+			autoCropContext.putImageData(cropped, 0, 0)
+			setTimeout(function(){targetImage.src = autoCropCanvas.toDataURL()}, 100)
+		}
+	}
+}
+/*
+                var n = pix.x.length - 1;
+	            //Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas
+                width = pix.x[n] - pix.x[0];
+                height = pix.y[n] - pix.y[0];
+                var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1);
+	            //Resizes the canvas and draws cropped image
+                cropCanvas.width = width + 1;
+                cropCanvas.height = height + 1;
+                cropContext.putImageData(cropped, 0, 0);
+	            //Saves the newly cropped image to the given image
+                setTimeout(function() {targetImage.src = cropCanvas.toDataURL();}, 100)
+            }
+        }
+    }
+}
+*/
 
 
 

data/scripts/versionM15.js

@@ -23,59 +23,54 @@ var versionM15ImageList = [
 ['Multicolored Legend Crown', 'data/images/m15/m15CrownM.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
 ['Artifact Legend Crown', 'data/images/m15/m15CrownA.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
 ['Land Legend Crown', 'data/images/m15/m15CrownL.png', 38/1500, 29/2100, 1422/1500, 341/2100, ['Full']],
-['Midnight Frame', 'data/images/m15/m15Midnight.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['White Nyx Nyx Frame', 'data/images/m15/m15FrameWNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Blue Nyx Frame', 'data/images/m15/m15FrameUNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Black Nyx Frame', 'data/images/m15/m15FrameBNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Red Nyx Frame', 'data/images/m15/m15FrameRNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Green Nyx Frame', 'data/images/m15/m15FrameGNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Multicolored Nyx Frame', 'data/images/m15/m15FrameMNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
-['White Nyx Legend Crown', 'data/images/m15/m15CrownWNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
-['Blue Nyx Legend Crown', 'data/images/m15/m15CrownUNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
-['Black Nyx Legend Crown', 'data/images/m15/m15CrownBNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
-['Red Nyx Legend Crown', 'data/images/m15/m15CrownRNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
-['Green Nyx Legend Crown', 'data/images/m15/m15CrownGNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
-['Multicolored Nyx Legend Crown', 'data/images/m15/m15CrownMNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']]
+['Midnight Frame', 'data/images/m15/m15Midnight.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']]
 ]
 
-var versionM15MaskList = [['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Full', 'data/images/maskFull.png'], ['Border (m15)', 'data/images/m15/m15MaskBorder.png'], ['Title (m15)', 'data/images/m15/m15MaskTitle.png'], ['Type (m15)', 'data/images/m15/m15MaskType.png'], ['Rules (m15)', 'data/images/m15/m15MaskRules.png'], ['Frame (m15)', 'data/images/m15/m15MaskFrame.png'], ['Nyx Crown (m15)', 'data/images/m15/m15MaskNyxCrown.png'], ['Nyx Crown Outer (m15)', 'data/images/m15/m15MaskNyxCrownOuter.png'], ['Nyx Crown Inner (m15)', 'data/images/m15/m15MaskNyxCrownInner.png'], ['Nyx Crown Shadowless (m15)', 'data/images/m15/m15MaskNyxCrownShadowless.png']]
+var versionM15MaskList = [['Full', 'data/images/maskFull.png'], ['Border (m15)', 'data/images/m15/m15MaskBorder.png'], ['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Title (m15)', 'data/images/m15/m15MaskTitle.png'], ['Type (m15)', 'data/images/m15/m15MaskType.png'], ['Rules (m15)', 'data/images/m15/m15MaskRules.png'], ['Frame (m15)', 'data/images/m15/m15MaskFrame.png']]
 
 if (!loadedVersions.includes('m15')) {
-	loadedVersions.push("m15")
+	loadedVersions.push('m15')
 	loadMaskImages(versionM15MaskList)
-	loadFrameImages(versionM15ImageList)
+	loadFrameImages(versionM15ImageList, 'frameClassM15')
 }
 
-loadTextOptions([
-new cardText('Card Title', '', 126/1500, 187/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
-new cardText('Card Type', '', 126/1500, 1263/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
-new cardText('Rules Text', '', 135/1500, 1372/2100, 1230/1500, 624/2100, 'mplantin', 74/2100, 'black'),
-new cardText('Power/Toughness', '', 1190/1500, 1950/2100, 210/1500, 78/2100, 'belerenbsc', 78/2100, 'black', ['oneLine=true,textAlign="center"'])
-])
+if (currentVersion != 'm15') {
+	currentVersion = 'm15'
 
-artX = scaleX(111 / 1500)
-artY = scaleY(233 / 2100)
-artWidth = scaleX(1278 / 1500)
-artHeight = scaleY(936 / 2100)
+	hideFrameImages('frameClassM15')
 
-bottomInfoFunction = 'bottomInfoM15'
+	loadTextOptions([
+	new cardText('Card Title', '', 126/1500, 187/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
+	new cardText('Card Type', '', 126/1500, 1263/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
+	new cardText('Rules Text', '', 135/1500, 1372/2100, 1230/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+	new cardText('Power/Toughness', '', 1190/1500, 1950/2100, 210/1500, 78/2100, 'belerenbsc', 78/2100, 'black', ['oneLine=true,textAlign="center"'])
+	])
 
-manaCostXPath = '1316 - 78 * manaSymbolIndex'
-manaCostYPath = '121'
-manaCostDiameter = '70'
-manaCostShadowOffset = '[-2, 6]'
-manaCostDirection = 'reverse'
+	artX = scaleX(111 / 1500)
+	artY = scaleY(233 / 2100)
+	artWidth = scaleX(1278 / 1500)
+	artHeight = scaleY(936 / 2100)
 
-setSymbolX = [scaleX(1382/1500), 'right']
-setSymbolY = [scaleY(1200/2100), 'left']
-setSymbolWidth = scaleX(180/1500)
-setSymbolHeight = scaleY(80/2100)
+	manaCostXPath = '1316 - 78 * manaSymbolIndex'
+	manaCostYPath = '121'
+	manaCostDiameter = '70'
+	manaCostShadowOffset = '[-2, 6]'
+	manaCostDirection = 'reverse'
 
-watermarkX = scaleX(0.5)
-watermarkY = scaleY(1630/2100)
-watermarkWidth = scaleX(1140/1500)
-watermarkHeight = scaleY(484/2100)
+	setSymbolX = [scaleX(1382/1500), 'right']
+	setSymbolY = [scaleY(1240/2100), 'center']
+	setSymbolWidth = scaleX(180/1500)
+	setSymbolHeight = scaleY(80/2100)
+
+	watermarkX = scaleX(0.5)
+	watermarkY = scaleY(1630/2100)
+	watermarkWidth = scaleX(1140/1500)
+	watermarkHeight = scaleY(484/2100)
+
+	bottomInfoFunction = 'bottomInfoM15'
+
+	bottomInfoUpdated()
+}
 
 function bottomInfoM15() {
 	bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -83,8 +78,6 @@ function bottomInfoM15() {
 	for (var i = 0; i < cardTextList.length; i++) {
 		if (cardTextList[i].name == 'Power/Toughness' && cardTextList[i].text != '') {
 			ptBoxShift = 36/2100
-		} else {
-			// console.log(cardTextList[i].name, cardTextList[i].text)
 		}
 	}
 	writeText(
@@ -95,6 +88,4 @@ function bottomInfoM15() {
 			{text: '*Not for Sale*', x: 97/1500, y: 2056/2100, width: 1306/1500, height: 30/2100, font: 'gothammedium', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
 			{text: '{right}CardConjurer.com', x: 97/1500, y: 2020/2100 + ptBoxShift, width: 1306/1500, height: 30/2100, font: 'mplantin', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']}
 		], bottomInfoContext)
-}
-
-bottomInfoUpdated()
+}

data/scripts/versionM15Nyx.js

@@ -0,0 +1,61 @@
+var versionM15NyxImageList = [
+['White Nyx Nyx Frame', 'data/images/m15/m15FrameWNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['Blue Nyx Frame', 'data/images/m15/m15FrameUNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['Black Nyx Frame', 'data/images/m15/m15FrameBNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['Red Nyx Frame', 'data/images/m15/m15FrameRNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['Green Nyx Frame', 'data/images/m15/m15FrameGNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['Multicolored Nyx Frame', 'data/images/m15/m15FrameMNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)', 'Title (m15)', 'Type (m15)', 'Rules (m15)', 'Frame (m15)', 'Border (m15)']],
+['White Nyx Legend Crown', 'data/images/m15/m15CrownWNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Blue Nyx Legend Crown', 'data/images/m15/m15CrownUNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Black Nyx Legend Crown', 'data/images/m15/m15CrownBNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Red Nyx Legend Crown', 'data/images/m15/m15CrownRNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Green Nyx Legend Crown', 'data/images/m15/m15CrownGNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']],
+['Multicolored Nyx Legend Crown', 'data/images/m15/m15CrownMNyx.png', 39/1500, 29/2100, 1422/1500, 341/2100, ['Full', 'Nyx Crown (m15)', 'Nyx Crown Outer (m15)', 'Nyx Crown Inner (m15)', 'Nyx Crown Shadowless (m15)']]
+]
+
+var versionM15NyxMaskList = [['Nyx Crown (m15)', 'data/images/m15/m15MaskNyxCrown.png'], ['Nyx Crown Outer (m15)', 'data/images/m15/m15MaskNyxCrownOuter.png'], ['Nyx Crown Inner (m15)', 'data/images/m15/m15MaskNyxCrownInner.png'], ['Nyx Crown Shadowless (m15)', 'data/images/m15/m15MaskNyxCrownShadowless.png']]
+
+if (!loadedVersions.includes('m15Nyx')) {
+	loadedVersions.push("m15Nyx")
+	loadMaskImages(versionM15NyxMaskList)
+	loadFrameImages(versionM15NyxImageList, 'frameClassM15')
+}
+
+if (currentVersion != 'm15') {
+	currentVersion = 'm15'
+
+	hideFrameImages('frameClassM15')
+
+	loadTextOptions([
+	new cardText('Card Title', '', 126/1500, 187/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
+	new cardText('Card Type', '', 126/1500, 1263/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
+	new cardText('Rules Text', '', 135/1500, 1372/2100, 1230/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+	new cardText('Power/Toughness', '', 1190/1500, 1950/2100, 210/1500, 78/2100, 'belerenbsc', 78/2100, 'black', ['oneLine=true,textAlign="center"'])
+	])
+
+	artX = scaleX(111 / 1500)
+	artY = scaleY(233 / 2100)
+	artWidth = scaleX(1278 / 1500)
+	artHeight = scaleY(936 / 2100)
+
+	manaCostXPath = '1316 - 78 * manaSymbolIndex'
+	manaCostYPath = '121'
+	manaCostDiameter = '70'
+	manaCostShadowOffset = '[-2, 6]'
+	manaCostDirection = 'reverse'
+
+	setSymbolX = [scaleX(1382/1500), 'right']
+	setSymbolY = [scaleY(1200/2100), 'center']
+	setSymbolWidth = scaleX(180/1500)
+	setSymbolHeight = scaleY(80/2100)
+
+	watermarkX = scaleX(0.5)
+	watermarkY = scaleY(1630/2100)
+	watermarkWidth = scaleX(1140/1500)
+	watermarkHeight = scaleY(484/2100)
+
+	bottomInfoFunction = 'bottomInfoM15'
+
+	bottomInfoUpdated()
+}

data/scripts/versionPlaneswalker.js

@@ -0,0 +1,232 @@
+var versionPlaneswalkerImageList = [
+['White Frame', 'data/images/planeswalker/planeswalkerFrameW.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Blue Frame', 'data/images/planeswalker/planeswalkerFrameU.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Black Frame', 'data/images/planeswalker/planeswalkerFrameB.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Red Frame', 'data/images/planeswalker/planeswalkerFrameR.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Green Frame', 'data/images/planeswalker/planeswalkerFrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Multicolored Frame', 'data/images/planeswalker/planeswalkerFrameM.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Artifact Frame', 'data/images/planeswalker/planeswalkerFrameA.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Colorless Frame', 'data/images/planeswalker/planeswalkerFrameC.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']],
+['Dark Twins', 'data/images/planeswalker/planeswalkerDarkTwins.png', 0, 0, 1, 1, ['Full', 'Pinline (planeswalker)', 'Title (planeswalker)', 'Type (planeswalker)', 'Frame (planeswalker)', 'Border (planeswalker)']]
+]
+
+var versionPlaneswalkerMaskList = [['Pinline (planeswalker)', 'data/images/planeswalker/planeswalkerMaskPinline.png'], ['Border (planeswalker)', 'data/images/planeswalker/planeswalkerMaskBorder.png'], ['Title (planeswalker)', 'data/images/planeswalker/planeswalkerMaskTitle.png'], ['Type (planeswalker)', 'data/images/planeswalker/planeswalkerMaskType.png'], ['Frame (planeswalker)', 'data/images/planeswalker/planeswalkerMaskFrame.png'], ['Rules Text (planeswalker)', 'data/images/planeswalker/planeswalkerMaskText.png']]
+
+if (!loadedVersions.includes('planeswalker')) {
+	loadedVersions.push('planeswalker')
+	newCanvas('planeswalker')
+	loadMaskImages(versionPlaneswalkerMaskList)
+	loadFrameImages(versionPlaneswalkerImageList, 'frameClassPlaneswalker')
+
+	document.getElementById('tabPicker').innerHTML += `<div onclick='toggleTabs(this, "planeswalkerTab")'>Planeswalker</div>`
+    var planeswalkerTab = document.createElement("div")
+    planeswalkerTab.classList.add('hidden')
+    planeswalkerTab.id = 'planeswalkerTab'
+    planeswalkerTab.innerHTML = `
+            One: <input type="number" class="input number" id="inputPlaneswalker1" oninput="planeswalkerAbilities()" value="200" min="0"><input type="text" class="input text" id="inputPlaneswalker1Icon" oninput="planeswalkerAbilities()" value="+1">
+            Two: <input type="number" class="input number" id="inputPlaneswalker2" oninput="planeswalkerAbilities()" value="200" min="0"><input type="text" class="input text" id="inputPlaneswalker2Icon" oninput="planeswalkerAbilities()" value="0">
+            Three: <input type="number" class="input number" id="inputPlaneswalker3" oninput="planeswalkerAbilities()" value="200" min="0"><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<br>
+    <input type="checkbox" onchange="invertPlaneswalkerColors()" id="inputColorInvert"> Dark ability boxes`
+    document.getElementById('tabOptions').appendChild(planeswalkerTab)
+    var planeswalkerPlus = new Image()
+    planeswalkerPlus.crossOrigin = 'anonymous'
+    planeswalkerPlus.src = 'data/images/planeswalker/planeswalkerPlus.png'
+    var planeswalkerNeutral = new Image()
+    planeswalkerNeutral.crossOrigin = "anonymous"
+    planeswalkerNeutral.src = 'data/images/planeswalker/planeswalkerNeutral.png'
+    var planeswalkerMinus = new Image()
+    planeswalkerMinus.crossOrigin = "anonymous"
+    planeswalkerMinus.src = 'data/images/planeswalker/planeswalkerMinus.png'
+    var lightToDarkPlaneswalker = new Image()
+    lightToDarkPlaneswalker.crossOrigin = 'anonymous'
+    lightToDarkPlaneswalker.src = 'data/images/planeswalker/abilityLineOdd.png'
+    var darkToLightPlaneswalker = new Image()
+    darkToLightPlaneswalker.crossOrigin = 'anonymous'
+    darkToLightPlaneswalker.src = 'data/images/planeswalker/abilityLineEven.png'
+    var lightToDarkPlaneswalkerDarkened= new Image()
+    lightToDarkPlaneswalkerDarkened.crossOrigin = 'anonymous'
+    lightToDarkPlaneswalkerDarkened.src = 'data/images/planeswalker/abilityLineOddDarkened.png'
+    var darkToLightPlaneswalkerDarkened = new Image()
+    darkToLightPlaneswalkerDarkened.crossOrigin = 'anonymous'
+    darkToLightPlaneswalkerDarkened.onload = function() {invertPlaneswalkerColors()}
+    darkToLightPlaneswalkerDarkened.src = 'data/images/planeswalker/abilityLineEvenDarkened.png'
+    setTimeout(planeswalkerAbilities, 1000)
+    //placeholders:
+    var darkColor = '#a4a4a4'
+    var lightColor = 'white'
+    var planeswalkerLightToDark = new Image()
+    var planeswalkerDarkToLight = new Image()
+}
+
+if (currentVersion != 'planeswalker') {
+	currentVersion = 'planeswalker'
+
+	hideFrameImages('frameClassPlaneswalker')
+
+	loadTextOptions([
+	new cardText('Card Title', '', 130/1500, 149/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
+	new cardText('Card Type', '', 130/1500, 1258/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
+	new cardText('Ability 1', '', 270/1500, 1153/2100, 1120/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+	new cardText('Ability 2', '', 270/1500, 1153/2100, 1120/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+	new cardText('Ability 3', '', 270/1500, 1153/2100, 1120/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+	new cardText('Ability 4', '', 270/1500, 1153/2100, 1120/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+	new cardText('Loyalty', '', 1215/1500, 1954/2100, 210/1500, 78/2100, 'belerenbsc', 78/2100, 'white', ['oneLine=true,textAlign="center"'])
+	])
+
+	artX = scaleX(100 / 1500)
+	artY = scaleY(190 / 2100)
+	artWidth = scaleX(1508 / 1500)
+	artHeight = scaleY(1730 / 2100)
+
+	manaCostXPath = '1316 - 78 * manaSymbolIndex'
+	manaCostYPath = '86'
+	manaCostDiameter = '70'
+	manaCostShadowOffset = '[-2, 6]'
+	manaCostDirection = 'reverse'
+
+	setSymbolX = [scaleX(1383/1500), 'right']
+	setSymbolY = [scaleY(1237/2100), 'center']
+	setSymbolWidth = scaleX(180/1500)
+	setSymbolHeight = scaleY(80/2100)
+
+	watermarkX = scaleX(0.5)
+	watermarkY = scaleY(1630/2100)
+	watermarkWidth = scaleX(1140/1500)
+	watermarkHeight = scaleY(484/2100)
+
+	bottomInfoFunction = 'bottomInfoPlaneswalker'
+
+	bottomInfoUpdated()
+}
+
+function bottomInfoPlaneswalker() {
+	bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
+	var ptBoxShift = 36/2100
+	writeText(
+		[
+			{text: document.getElementById('inputInfoNumber').value, x: 97/1500, y: 1990/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: document.getElementById('inputInfoSet').value + '{right' + scaleX(0.005) + '}\u2605{right' + scaleX(0.005) + '}' + document.getElementById('inputInfoLanguage').value + ' {artistbrush}{up' + scaleY(36/2100) + '}' + document.getElementById('inputInfoRarity').value + '  {down' + scaleY(72/2100) + '}{up' + scaleY(36/2100) + '}{fontbelerenbsc}' + document.getElementById('inputInfoArtist').value, x: 97/1500, y: 2026/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '{right}\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x: 97/1500, y: 1990/2100 + ptBoxShift, width: 1306/1500, height: 35/2100, font: 'mplantin', fontSize: 35/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '*Not for Sale*', x: 97/1500, y: 2056/2100, width: 1306/1500, height: 30/2100, font: 'gothammedium', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '{right}CardConjurer.com', x: 97/1500, y: 2020/2100 + ptBoxShift, width: 1306/1500, height: 30/2100, font: 'mplantin', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']}
+		], bottomInfoContext)
+}
+
+var planeswalkerAbilityLayout = [[0], [0, scaleY(784/1050)], [0, scaleY(730/1050), scaleY(863/1050)], [0, scaleY(697/1050), scaleY(784/1050), scaleY(878/1050)], [0, scaleY(683/1050), scaleY(756/1050), scaleY(830/1050), scaleY(904/1050)]]
+var planeswalkerAbilityCount = 3
+var ability1Y = 0, ability2Y = 0, ability3Y = 0, ability4Y = 0, ability5Y = cardHeight
+
+function planeswalkerAbilities() {
+    planeswalkerContext.clearRect(0, 0, cardWidth, cardHeight)
+    planeswalkerAbilityCount = 0
+    for (var i = 1; i < 5; i++) {
+    	cardTextList[i + 1].y = 2
+        if (getFloat('inputPlaneswalker' + i) != 0) {
+            planeswalkerAbilityCount += 1;
+        } else {
+            break
+        }
+    }
+    if (planeswalkerAbilityCount > 0) {
+        ability1Y = scaleY(648/1050)
+        if (planeswalkerAbilityCount > 1) {
+            window.ability2Y = getFloat("inputPlaneswalker1") + ability1Y
+            if (planeswalkerAbilityCount > 2) {
+                ability3Y = getFloat('inputPlaneswalker2') + ability2Y
+                if (planeswalkerAbilityCount > 3) {
+                    ability4Y = getFloat('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");
+                	cardTextList[5].y = (ability4Y) / cardHeight + cardTextList[5].fontSize - 10/2100
+        			cardTextList[5].height = getFloat('inputPlaneswalker4') / cardHeight
+                }
+                // planeswalkerContext.writeText(version.textList[4][1], scale(133), ability3Y + getValue("inputPlaneswalker3") / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97");
+            	cardTextList[4].y = (ability3Y) / cardHeight + cardTextList[4].fontSize - 10/2100
+        		cardTextList[4].height = getFloat('inputPlaneswalker3') / cardHeight
+            }
+            // planeswalkerContext.writeText(version.textList[3][1], scale(133), ability2Y + getValue("inputPlaneswalker2") / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97");
+        	cardTextList[3].y = (ability2Y) / cardHeight + cardTextList[3].fontSize - 10/2100
+        	cardTextList[3].height = getFloat('inputPlaneswalker2') / cardHeight
+        }
+        // planeswalkerContext.writeText(version.textList[2][1], scale(133), ability1Y + getValue("inputPlaneswalker1") / 2, scale(555), 0, "mplantin", scale(38), "black", "lineSpace=0.97", "planeswalkerTextFunction");
+        cardTextList[2].y = (ability1Y) / cardHeight + cardTextList[2].fontSize - 10/2100
+        cardTextList[2].height = getFloat('inputPlaneswalker1') / cardHeight
+        planeswalkerTextFunction()
+    }
+}
+function planeswalkerTextFunction() {
+    planeswalkerContext.globalCompositeOperation = 'destination-over'
+    var lastAdjust = 0
+    var textBoxWidth = scaleX(1210/1500)
+    for (var i = 1; i < planeswalkerAbilityCount + 1; i++) {
+        if (i == planeswalkerAbilityCount) {
+            lastAdjust = 2 * cardHeight
+        }
+        if (i % 2 == 1) {
+            planeswalkerContext.fillStyle = lightColor
+            planeswalkerContext.globalAlpha = 0.608
+            planeswalkerContext.fillRect(scaleX(91/750), window['ability' + i + 'Y'] + scaleY(10/1050), textBoxWidth, window['ability' + (i + 1) + 'Y'] - window['ability' + i + 'Y'] - scaleY(20/1050) + lastAdjust)
+            if (i == 1 && planeswalkerAbilityCount != 1) {
+                planeswalkerContext.fillRect(scaleX(91/750), window['ability' + i + 'Y'], textBoxWidth, scaleY(10/1050))
+            }
+            planeswalkerContext.globalAlpha = 1
+            planeswalkerContext.drawImage(planeswalkerLightToDark, scaleX(91/750), window['ability' + (i + 1) + 'Y'] - scaleY(10/1050) + lastAdjust, textBoxWidth, scaleY(20/1050))
+        } else {
+            planeswalkerContext.fillStyle = darkColor
+            planeswalkerContext.globalAlpha = 0.706
+            planeswalkerContext.fillRect(scaleX(91/750), window['ability' + i + 'Y'] + scaleY(10/1050), textBoxWidth, window['ability' + (i + 1) + 'Y'] - window['ability' + i + 'Y'] - scaleY(20/1050) + lastAdjust)
+            planeswalkerContext.globalAlpha = 1
+            planeswalkerContext.drawImage(planeswalkerDarkToLight, scaleX(91/750), window['ability' + (i + 1)+ 'Y'] - scaleY(10/1050) + lastAdjust, textBoxWidth, scaleY(20/1050))
+        }
+    }
+    planeswalkerContext.globalCompositeOperation = 'destination-in'
+    planeswalkerContext.drawImage(maskImageList[maskNameList.indexOf('Rules Text (planeswalker)')], 0, 0, cardWidth, cardHeight)
+    planeswalkerContext.globalCompositeOperation = 'source-over'
+    planeswalkerContext.fillStyle = 'white'
+    planeswalkerContext.font = scaleY(30/1050) + 'px belerenbsc'
+    planeswalkerContext.textAlign = 'center'
+    for (var i = 1; i < planeswalkerAbilityCount + 1; i++) {
+        var planeswalkerIconValue = document.getElementById('inputPlaneswalker' + i + 'Icon').value
+        var planeswalkerMidpoint = getFloat('inputPlaneswalker' + i + '') / 2 + window['ability' + i + 'Y']
+        if (planeswalkerIconValue.includes('+')) {
+            planeswalkerContext.drawImage(planeswalkerPlus, scaleX(22/750), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] - scaleY(27/1050), scaleX(105/750), scaleY(76/1050))
+            planeswalkerContext.fillText(planeswalkerIconValue, scaleX(77/750), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] + scaleY(18/1050))
+        } else if (planeswalkerIconValue.includes('-')) {
+            planeswalkerContext.drawImage(planeswalkerMinus, scaleX(21/750), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] - scaleY(16/1050), scaleX(106/750), scaleY(74/1050))
+            planeswalkerContext.fillText(planeswalkerIconValue, scaleX(77/750), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] + scaleY(19/1050))
+        } else if (planeswalkerIconValue != '') {
+            planeswalkerContext.drawImage(planeswalkerNeutral, scaleX(21/750), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] - scaleY(16/1050), scaleX(106/750), scaleY(64/1050))
+            planeswalkerContext.fillText(planeswalkerIconValue, scaleX(77/750), planeswalkerAbilityLayout[planeswalkerAbilityCount][i] + scaleY(20/1050))
+        }
+    }
+    cardTextEdited()
+}
+function changePlaneswalkerAbilityLayout() {
+    if (document.getElementById('inputWARSpacing').checked) {
+        if (document.getElementById('inputWARReverse').checked) {
+            planeswalkerAbilityLayout[2] = [0, scaleY(784/1050), scaleY(878/1050)]
+        } else {
+            planeswalkerAbilityLayout[2] = [0, scaleY(697/1050), scaleY(784/1050)]
+        }
+    } else {
+        planeswalkerAbilityLayout[2] = [0, scaleY(730/1050), scaleY(863/1050)]
+    }
+    planeswalkerAbilities()
+}
+function invertPlaneswalkerColors() {
+    if (document.getElementById('inputColorInvert').checked) {
+        darkColor = '#5b5b5b'
+        lightColor = 'black'
+        planeswalkerLightToDark.src = lightToDarkPlaneswalkerDarkened.src
+        planeswalkerDarkToLight.src = darkToLightPlaneswalkerDarkened.src
+    } else {
+        darkColor = '#a4a4a4'
+        lightColor = 'white'
+        planeswalkerLightToDark.src = lightToDarkPlaneswalker.src
+        planeswalkerDarkToLight.src = darkToLightPlaneswalker.src
+    }
+    planeswalkerAbilities();
+}

data/scripts/versionStorybook.js

@@ -0,0 +1,73 @@
+var versionStorybookImageList = [
+['White Frame', 'data/images/storybook/storybookFrameW.png', 0, 0, 1, 1, ['Full']],
+['Blue Frame', 'data/images/storybook/storybookFrameU.png', 0, 0, 1, 1, ['Full']],
+['Black Frame', 'data/images/storybook/storybookFrameB.png', 0, 0, 1, 1, ['Full']],
+['Red Frame', 'data/images/storybook/storybookFrameR.png', 0, 0, 1, 1, ['Full']],
+['Green Frame', 'data/images/storybook/storybookFrameG.png', 0, 0, 1, 1, ['Full']],
+['Colorless Frame', 'data/images/storybook/storybookFrameC.png', 0, 0, 1, 1, ['Full']]
+]
+
+var versionStorybookMaskList = [['Storybook Right Half', 'data/images/storybook/maskStorybookRightHalf.png']]
+
+if (!loadedVersions.includes('storybook')) {
+	loadedVersions.push('storybook')
+	// loadMaskImages(versionStorybookMaskList)
+	loadFrameImages(versionStorybookImageList, 'frameClassStorybook')
+}
+
+if (currentVersion != 'storybook') {
+	currentVersion = 'storybook'
+
+	hideFrameImages('frameClassStorybook')
+
+	loadTextOptions([
+		new cardText('Card Title', '', 222/1500, 187/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
+		new cardText('Card Type', '', 345/1500, 1268/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
+		new cardText('Rules Text', '', 124/1500, 1348/2100, 600/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+		new cardText('Rules Text (Right)', '', 780/1500, 1348/2100, 600/1500, 624/2100, 'mplantin', 74/2100, 'black'),
+		new cardText('Power/Toughness', '', 1190/1500, 1950/2100, 210/1500, 78/2100, 'belerenbsc', 78/2100, 'black', ['oneLine=true,textAlign="center"'])
+	])
+
+	artX = scaleX(50/1500)
+	artY = scaleY(54/2100)
+	artWidth = scaleX(1405/1500)
+	artHeight = scaleY(1175/2100)
+
+	manaCostXPath = '1316 - 78 * manaSymbolIndex'
+	manaCostYPath = '121'
+	manaCostDiameter = '70'
+	manaCostShadowOffset = '[-2, 6]'
+	manaCostDirection = 'reverse'
+
+	setSymbolX = [scaleX(1328/1500), 'center']
+	setSymbolY = [scaleY(1245/2100), 'center']
+	setSymbolWidth = scaleX(74/1500)
+	setSymbolHeight = scaleY(74/2100)
+
+	watermarkX = scaleX(0.5)
+	watermarkY = scaleY(1630/2100)
+	watermarkWidth = scaleX(1140/1500)
+	watermarkHeight = scaleY(484/2100)
+
+	bottomInfoFunction = 'bottomInfoStorybook'
+
+	bottomInfoUpdated()
+}
+
+function bottomInfoStorybook() {
+	bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
+	var ptBoxShift = 0
+	for (var i = 0; i < cardTextList.length; i++) {
+		if (cardTextList[i].name == 'Power/Toughness' && cardTextList[i].text != '') {
+			ptBoxShift = 36/2100
+		}
+	}
+	writeText(
+		[
+			{text: document.getElementById('inputInfoNumber').value, x: 97/1500, y: 2000/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: document.getElementById('inputInfoSet').value + '{right' + scaleX(0.005) + '}\u2605{right' + scaleX(0.005) + '}' + document.getElementById('inputInfoLanguage').value + ' {artistbrush}{up' + scaleY(36/2100) + '}' + document.getElementById('inputInfoRarity').value + '  {down' + scaleY(72/2100) + '}{up' + scaleY(36/2100) + '}{fontbelerenbsc}' + document.getElementById('inputInfoArtist').value, x: 97/1500, y: 2036/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '{right}\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x: 97/1500, y: 2000/2100 + ptBoxShift, width: 1306/1500, height: 35/2100, font: 'mplantin', fontSize: 35/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '*Not for Sale*', x: 97/1500, y: 2066/2100, width: 1306/1500, height: 30/2100, font: 'gothammedium', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
+			{text: '{right}CardConjurer.com', x: 97/1500, y: 2030/2100 + ptBoxShift, width: 1306/1500, height: 30/2100, font: 'mplantin', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']}
+		], bottomInfoContext)
+}

data/site/other/askScryfall/askScryfall.js

@@ -0,0 +1,22 @@
+var fullAbilityList = new Array()
+
+function loadAbilities() {
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (this.readyState == 4) {
+            fullAbilityList = xhttp.responseText.split("$$$")
+            for (var i = 0; i < 3; i ++) {
+                fullAbilityList[i] = fullAbilityList[i].split(";")
+            }
+        }
+    }
+    xhttp.open("GET", "data/site/other/askScryfall/planeswalkerAbilities.txt", true);
+    xhttp.send();
+}
+
+function randomAbility(index) {
+    possibleAbilities = fullAbilityList[index]
+    document.getElementById("askScryfallResult").innerHTML = possibleAbilities[Math.floor(Math.random() * (possibleAbilities.length - 1))].replace(/\\"/g, '"')
+}
+
+loadAbilities()

data/site/other/askScryfall/askScryfallAbilityListGenerator.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC>
+<html>
+<head>
+  <title>Ask Scryfall - Ability List Generator</title>
+</head>
+<body>
+
+</body>
+<script>
+    var plusAbilities = new Array()
+    var minusAbilities = new Array()
+    var ultimateAbilities = new Array()
+    function importPlaneswalkers(request) {
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var planeswalkerList = this.responseText.split('oracle_text":"')
+                var planeswalkerNameList = this.responseText.replace(/","name":"/g, "").split('"name":"')
+                //console.log(planeswalkerNameList)
+                var iAdjust = 0
+                for (var i = 1; i < planeswalkerList.length; i++) {
+                    var planeswalkerAbilityList = planeswalkerList[i].split('",')[0].split(/\\n/g)
+                    var planeswalkerName = planeswalkerNameList[i - iAdjust].split(/",/g)[0]
+                    if (planeswalkerName.includes(" // ")) {
+                        planeswalkerName = planeswalkerName.split(" // ")[1]
+                    }
+                    for (var n = 0; n < planeswalkerAbilityList.length; n++) {
+                        if (planeswalkerAbilityList[n].includes(":")) {
+                            var abilityText = planeswalkerAbilityList[n].substr(planeswalkerAbilityList[n].indexOf(": ") + 2)
+                            if (abilityText != undefined) {
+                                //console.log(abilityText, planeswalkerName, iAdjust)
+                                abilityText = abilityText.replace(planeswalkerName, "Urza, Academy Headmaster")
+                                var abilityType = planeswalkerAbilityList[n].split(":")[0]
+                                if (!abilityType.includes("X")) {
+                                    if (abilityType.includes("+")) {
+                                        //plus
+                                        plusAbilities[plusAbilities.length] = abilityText
+                                    } else if (abilityType.includes("\u2212") && parseInt(abilityType.replace("\u2212", "")) > 4) {
+                                        //ult
+                                        ultimateAbilities[ultimateAbilities.length] = abilityText
+                                    } else if (abilityType.includes("\u2212") || abilityType == "0") {
+                                        //minus
+                                        minusAbilities[minusAbilities.length] = abilityText
+                                    } else {
+                                    //do nothing
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    if (i < planeswalkerList.length - 1 && planeswalkerList[i - 1].includes('"card_faces"')) {
+                        iAdjust += 1
+                    }
+                }
+                if (this.responseText.includes('"has_more":true')) {
+                    importPlaneswalkers(this.responseText.split('"next_page":"')[1].split('","data"')[0].replace(/\\u0026/g, "&"))
+                } else {
+                    var allAbilities = [plusAbilities, minusAbilities, ultimateAbilities]
+                    let csvContent = "data:text/csv;charset=utf-8,";
+                    
+                    allAbilities.forEach(function(rowArray) {
+                                         csvContent += rowArray.join(";") + "$$$";
+                                 })
+                    var encodedUri = encodeURI(csvContent)
+                    window.open(encodedUri)
+                }
+            } else if (this.readyState == 4 && this.status == 404) {
+                alert("An error occurred. Please try again.");
+            }
+        }
+        xhttp.open("GET", request, true);
+        xhttp.send();
+    }
+importPlaneswalkers("https://api.scryfall.com/cards/search?order=released&q=type%3Dplaneswalker")
+</script>
+</html>
+
+

data/site/other/life/life.js

@@ -0,0 +1,362 @@
+//============================================//
+//       Card Conjurer, by Kyle Burton        //
+//============================================//
+console.log("1.1")
+//define variables
+var playerCount, startingLifeTotal, firstPlayerWide = false, lastPlayerWide = false, playerList = [], rowHeight = 0, columnWidth = 0, rowCount = 0, isFullscreen = true, mouseClickId = 0, noSleep = new NoSleep(), canEnableNoSleep = false
+//Setup the enabler for no sleep
+document.addEventListener("click", enableNoSleep, false);
+function enableNoSleep() {
+    if (canEnableNoSleep) {
+        document.removeEventListener("click", enableNoSleep, false);
+        noSleep.enable();
+    }
+}
+//This function sets everything up
+function fullscreen() {
+	//Full screen!
+	grid = document.getElementById("gridShell")
+	if (grid.requestFullscreen) {
+    	grid.requestFullscreen()
+  	} else if (grid.mozRequestFullScreen) {
+    	grid.mozRequestFullScreen()
+  	} else if (grid.webkitRequestFullscreen) {
+    	grid.webkitRequestFullscreen()
+  	} else if (grid.msRequestFullscreen) {
+    	grid.msRequestFullscreen()
+  	} else {
+  		isFullscreen = false
+  		document.getElementById("return").classList.add("permaHidden")
+  		document.getElementById("gridShell").classList.add("fullscreenUnavailable")
+  	}
+}
+function startGame() {
+    canEnableNoSleep = document.getElementById("inputWakeLock").checked
+	fullscreen()
+	document.getElementById("return").classList.remove("hidden")
+	//hide the settings and grab player count and starting life total
+	document.getElementById("settings").classList.add("hidden")
+	playerCount = parseInt(document.getElementById("inputPlayerCount").value)
+	startingLifeTotal = parseInt(document.getElementById("inputStartingLife").value)
+	//determine the layout based on player count
+	if (playerCount % 2 == 0) {
+		if (playerCount >= 6) {
+			firstPlayerWide = true
+			lastPlayerWide = true
+		}
+	} else {
+		lastPlayerWide = true
+	}
+	//Make all the player boxes
+	for (var i = 1; i <= playerCount; i ++) {
+		//determine if the current box is rotated or widened
+		var rotation, wide = false
+		var orientationIndexAdjust = 0
+		if (firstPlayerWide) {
+			orientationIndexAdjust += 1
+		}
+		if (i == 1 && firstPlayerWide) {
+			rotation = 180
+		} else if (i == playerCount && lastPlayerWide) {
+			rotation = 0
+		} else if ((i + orientationIndexAdjust) % 2 == 0) {
+			rotation = 270
+		} else {
+			rotation = 90
+		}
+		if ((i == 1 && firstPlayerWide) || (i == playerCount && lastPlayerWide)) {wide = true}
+		playerList[i - 1] = new playerBox(i, rotation, wide)
+		document.getElementById("inputPlayer").innerHTML += "<option value='" + i + "'>Player " + i + "</option>"
+	}
+	//Determine the grid size
+	if (isFullscreen) {
+		columnWidth = screen.width / 2 - 2
+	} else {
+		columnWidth = window.innerWidth / 2 - 2
+	}
+	rowCount = (playerCount - playerCount % 2) / 2 + 1
+	if (playerCount == 2 || playerCount == 4) {
+		rowCount -= 1
+	}
+//    console.log("Row count: " + rowCount)
+	if (isFullscreen) {
+		rowHeight = screen.height / rowCount - 2
+//        console.log("Full screen, rowHeight: " + rowHeight)
+//        console.log("screen.height: " + screen.height)
+	} else {
+        var heightToUse = window.innerHeight
+        if (document.documentElement.clientHeight > heightToUse) {
+//            console.log("document.documentElement.clientHeight: " + document.documentElement.clientHeight)
+            heightToUse = document.documentElement.clientHeight
+        }
+		rowHeight = heightToUse / rowCount - 2
+//        console.log("Not full screen, rowHeight: " + rowHeight)
+//        console.log("window.innerHeight: " + window.innerHeight)
+	}
+	//Now that all the player boxes are made, they must be configured
+	for (var i = 1; i <= playerCount; i++) {
+		configurePlayerBox(i)
+	}
+	drawAllPlayerBoxes()
+}
+function playerBox(playerBoxID, canvasRotation, wide) {
+	//Actually needed vars
+	this.id = playerBoxID
+	this.rotation = canvasRotation
+	this.life = startingLifeTotal
+	this.canvas = document.createElement("canvas")
+	this.direction = 0
+	this.holdTime = 0
+    this.touchId = 0.5
+	this.color = "#222222"
+	this.textColor = "#ffffff"
+	this.image = new Image()
+	this.image.customVarID = playerBoxID
+	this.image.onload = function() {drawPlayerBox(this.customVarID)}
+	//vars to make navigation easier
+	this.canvas.customVarID = playerBoxID
+	this.canvas.customVarContext = this.canvas.getContext("2d")
+	this.canvas.customVarContext.customVarCanvas = this.canvas
+	//css classes
+	this.canvas.classList.add("playerBox")
+	if (wide) {
+		this.canvas.classList.add("widePlayerBox")
+	}
+	//add it to the html
+	document.getElementById("mainGrid").appendChild(this.canvas)
+}
+function configurePlayerBox(playerBoxID) {
+	//All of this configures the size/shape/orientation of the player boxes
+	var currentPlayer = playerList[playerBoxID - 1]
+	var context = currentPlayer.canvas.customVarContext
+	currentPlayer.canvas.width = columnWidth
+	if (playerList[playerBoxID - 1].canvas.classList.contains("widePlayerBox")) {
+		currentPlayer.canvas.width = columnWidth * 2 + 2
+	}
+	currentPlayer.canvas.height = rowHeight
+	context.translate(currentPlayer.canvas.width / 2, currentPlayer.canvas.height / 2)
+	context.rotate(Math.PI / 180 * currentPlayer.rotation)
+}
+
+function resetLife() {
+	for (var i = 1; i <= playerCount; i++) {
+		playerList[i - 1].life = startingLifeTotal
+	}
+	document.getElementById('menu').classList.add('hidden')
+	drawAllPlayerBoxes()
+}
+function updateColorSelector() {
+	document.getElementById("inputPlayerColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].color
+	document.getElementById("inputTextColor").value = playerList[parseInt(document.getElementById("inputPlayer").value) - 1].textColor
+}
+function updateBackgroundColor(color) {
+	playerList[parseInt(document.getElementById("inputPlayer").value) - 1].color = color
+	drawPlayerBox(parseInt(document.getElementById("inputPlayer").value))
+}
+function updateTextColor(color) {
+	playerList[parseInt(document.getElementById("inputPlayer").value) - 1].textColor = color
+	drawPlayerBox(parseInt(document.getElementById("inputPlayer").value))
+}
+function loadImage(event, destination) {
+	var input = event.target
+	var reader = new FileReader()
+	reader.onload = function() {
+		var dataURL = reader.result
+		destination.src = dataURL
+	}
+	reader.readAsDataURL(input.files[0])
+}
+var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
+function inputCardArtName(cardArtNameInput) {
+	var xhttp = new XMLHttpRequest()
+	xhttp.onreadystatechange = function() {
+		if (this.readyState == 4 && this.status == 200) {
+			savedArtList = this.responseText.split('"art_crop":"')
+			savedArtList.splice(0, 1)
+			document.getElementById("inputCardArtNameNumber").max = savedArtList.length
+			document.getElementById("inputCardArtNameNumber").value = 1
+			for (i = 0; i < savedArtList.length; i ++) {
+				cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
+			}
+			for (i = 0; i < savedArtList.length; i ++) {
+				cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","border_color":'))
+			}
+			inputCardArtNameNumber(1)
+		}
+	}
+	xhttp.open("GET", "https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D" + cardArtNameInput.replace(/ /g, "_"), true)
+	xhttp.send()
+}
+function inputCardArtNameNumber(cardArtNameNumberInput) {
+	playerList[parseInt(document.getElementById('inputPlayer').value) - 1].image.src = cardArtUrlList[cardArtNameNumberInput - 1]
+}
+document.getElementById("mainGrid").addEventListener("touchmove", function(event) {
+	event.preventDefault()
+}, false)
+function rollRNG() {
+	document.getElementById("rngOutput").innerHTML = Math.floor(Math.random() * (parseInt(document.getElementById("inputRNGMax").value) - parseInt(document.getElementById("inputRNGMin").value) + 1) + parseInt(document.getElementById("inputRNGMin").value))
+}
+function drawPlayerBox(playerBoxID) {
+	var currentPlayerBox = playerList[playerBoxID - 1]
+	var context = currentPlayerBox.canvas.customVarContext
+	context.textBaseline = "middle"
+	var tempFontSize = 100
+	context.font = "100pt belerenbsc"
+	context.fillStyle = currentPlayerBox.color
+	var tempCanvasHeight = currentPlayerBox.canvas.height, tempCanvasWidth = currentPlayerBox.canvas.width
+	if (playerList[playerBoxID - 1].rotation == 90 || playerList[playerBoxID - 1].rotation == 270) {
+		tempCanvasHeight = tempCanvasWidth
+		tempCanvasWidth = currentPlayerBox.canvas.height
+	}
+	context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
+	if (currentPlayerBox.image.src != "") {
+		var imageToDraw = currentPlayerBox.image
+		if (imageToDraw.width / imageToDraw.height > tempCanvasWidth / tempCanvasHeight) {
+			//The image is wider and should be fitted to its height
+			context.drawImage(imageToDraw, tempCanvasHeight / imageToDraw.height * imageToDraw.width / -2, tempCanvasHeight / -2, tempCanvasHeight / imageToDraw.height * imageToDraw.width, tempCanvasHeight)
+		} else {
+			//The image is taller and should be fitted to its width
+			context.drawImage(imageToDraw, tempCanvasWidth / -2, tempCanvasWidth / imageToDraw.width * imageToDraw.height / -2, tempCanvasWidth, tempCanvasWidth / imageToDraw.width * imageToDraw.height)
+		}
+	}
+	if (currentPlayerBox.life < 1) {
+		context.fillStyle = "#0008"
+		context.fillRect(tempCanvasWidth / -2, tempCanvasHeight / -2, tempCanvasWidth, tempCanvasHeight)
+		context.fillStyle = "#800"
+	} else {
+		context.fillStyle = playerList[playerBoxID - 1].textColor
+	}
+	while (context.measureText(currentPlayerBox.life).width >= tempCanvasWidth) {
+		tempFontSize -= 1
+		context.font = tempFontSize + "pt belerenbsc"
+	}
+	var horizontalShift = -1 * parseInt(context.measureText(currentPlayerBox.life).width) / 2
+	context.strokeStyle = "black"
+	context.lineWidth = 5
+	context.strokeText(currentPlayerBox.life, horizontalShift, 0)
+	context.fillText(currentPlayerBox.life, horizontalShift, 0)
+}
+function drawAllPlayerBoxes() {
+	for (var i = 1; i <= playerList.length; i ++) {
+		drawPlayerBox(i)
+	}
+}
+//Event Listener magic! (always records mouse/touch positions so the loop can work without events)
+var touchX = [], touchY = []
+document.getElementById("mainGrid").addEventListener("mousedown", startMouseCoordinates, true)
+window.addEventListener("mousemove", updateMouseCoordinates, true)
+window.addEventListener("mouseup", endMouseCoordinates, true)
+function startMouseCoordinates() {
+	mouseClickId += 1
+    playerList[event.target.customVarID - 1].touchId = mouseClickId
+	singleTap(event.target)
+}
+function updateMouseCoordinates() {
+	touchX[0] = event.clientX
+	touchY[0] = event.clientY}
+function endMouseCoordinates() {
+    for (var i = 1; i <= playerList.length; i++) {
+        playerList[i - 1].touchId = 0.5
+    }
+}
+window.addEventListener("touchstart", switchToTouchEvents, true)
+function switchToTouchEvents() {
+	window.removeEventListener("touchstart", switchToTouchEvents, true)
+	document.getElementById("mainGrid").removeEventListener("mousedown", startMouseCoordinates, true)
+	window.removeEventListener("mousemove", updateMouseCoordinates, true)
+	window.removeEventListener("mouseup", endMouseCoordinates, true)
+	document.getElementById("mainGrid").addEventListener("touchstart", startTouch, true)
+	window.addEventListener("touchmove", moveTouch, true)
+	window.addEventListener("touchend", endTouch, true)
+}
+function startTouch() {
+    playerList[event.changedTouches[0].target.customVarID - 1].touchId = event.changedTouches[0].identifier
+	moveTouch()
+    singleTap(event.changedTouches[0].target)
+}
+function moveTouch() {
+	touchX = [], touchY = []
+	for (var i = 0; i < event.touches.length; i ++) {
+		touchX[i] = event.touches[i].clientX
+		touchY[i] = event.touches[i].clientY
+	}
+}
+function endTouch() {
+    for (var i = 1; i <= playerList.length; i++) {
+        if (playerList[i - 1].touchId == event.changedTouches[0].identifier) {
+            playerList[i - 1].touchId = 0.5
+        }
+    }
+	moveTouch()
+}
+//Tap (and click) functions
+function singleTap(targetPlayerBox) {
+//    console.log("Box #" + targetPlayerBox.customVarID + " was pressed")
+	var playerBoxBounds = targetPlayerBox.getBoundingClientRect()
+//    console.log("Bounds:")
+//    console.log(playerBoxBounds)
+	var tappedPlayerBox = playerList[targetPlayerBox.customVarID - 1]
+	var lifeAdjust = 0
+//    console.log("Rotation: " + tappedPlayerBox.rotation)
+//    console.log("touchX: " + touchX[touchX.length - 1] + "\ntouchY: " + touchY[touchY.length - 1])
+	if (tappedPlayerBox.rotation == 0 || tappedPlayerBox.rotation == 180) {
+//        console.log(touchX[touchX.length - 1])
+//        console.log(playerBoxBounds.width / 2 + playerBoxBounds.left)
+		if (touchX[touchX.length - 1] > playerBoxBounds.width / 2 + playerBoxBounds.left) {
+			lifeAdjust = 1
+		} else {
+			lifeAdjust = -1
+		}
+	} else {
+//        console.log(touchY[touchY.length - 1])
+//        console.log(playerBoxBounds.height / 2 + playerBoxBounds.top)
+		if (touchY[touchY.length - 1] > playerBoxBounds.height / 2 + playerBoxBounds.top) {
+			lifeAdjust = 1
+		} else {
+			lifeAdjust = -1
+		}
+	}
+	if (tappedPlayerBox.rotation == 180 || tappedPlayerBox.rotation == 270) {
+		lifeAdjust *= -1
+	}
+//    console.log(lifeAdjust)
+	tappedPlayerBox.direction = lifeAdjust
+	tappedPlayerBox.life += lifeAdjust
+	drawPlayerBox(tappedPlayerBox.id)
+    setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 500)
+}
+function clockCheck(tappedPlayerBox, lastTapID) {
+    if (tappedPlayerBox.touchId == lastTapID) {
+        tappedPlayerBox.life += tappedPlayerBox.direction
+        drawPlayerBox(tappedPlayerBox.id)
+        if (tappedPlayerBox.holdTime >= 150) {
+            setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 10)
+        } else if (tappedPlayerBox.holdTime >= 50) {
+            setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 50)
+        } else {
+            setTimeout(clockCheck.bind(null, tappedPlayerBox, tappedPlayerBox.touchId), 100)
+        }
+        tappedPlayerBox.holdTime += 1
+    } else {
+        tappedPlayerBox.holdTime = 0
+    }
+}
+//Hopefully stops the pesky double-tap zoom:
+var doubleTouchStartTimestamp = 0
+document.getElementById("mainGrid").addEventListener("touchstart", function() {
+    var now = +(new Date())
+    if (doubleTouchStartTimestamp + 500 > now){
+        event.preventDefault()
+    }
+    doubleTouchStartTimestamp = now
+})
+//Updated :D
+
+var inputsToRemoveAutocorrect = document.querySelectorAll("input");
+
+inputsToRemoveAutocorrect.forEach(input => {
+                                  input.setAttribute("autocomplete", "off")
+                                  input.setAttribute("autocorrect", "off")
+                                  input.setAttribute("autocapitalize", "off")
+                                  input.setAttribute("spellcheck", false)
+                                  })

data/site/other/setSymbol/setSymbol.js

@@ -0,0 +1,134 @@
+var svg = document.getElementById('displaySVG');
+var svgWidth = 500, svgHeight = 500, setSymbolWidth = 300, setSymbolHeight = 300;
+var svgStroke = svg.children[1]
+var svgFill = svg.children[2]
+svg.setAttribute('width', svgWidth);
+svg.setAttribute('height', svgHeight);
+var imageType = 'svg';
+var canvas = document.getElementById('displayCanvas');
+canvas.width = svgWidth
+canvas.height = svgHeight
+var context = canvas.getContext('2d');
+var setSymbolImage = new Image();
+setSymbolImage.onload = drawSetSymbol;
+var setSymbolPath = '';
+fetchSVGData('https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/rtr.svg');
+
+
+function fetchSVGData(url) {
+    hideShow();
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && xhttp.status != 404) {
+            imageType = 'svg'
+            setSymbolPath = xhttp.responseText.split('d="')[1].split('"></path>')[0];
+            svgStroke.setAttribute('d', setSymbolPath);
+            svgFill.setAttribute('d', setSymbolPath);
+            var svgPathBoundingBox = svgStroke.getBBox();
+            if (svgPathBoundingBox.width > svgPathBoundingBox.height) {
+                scaleAmount = setSymbolWidth / svgPathBoundingBox.width;
+            } else {
+                scaleAmount = setSymbolHeight / svgPathBoundingBox.height;
+            }
+            svgStroke.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')');
+            svgFill.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')');
+            decorateSVG();
+        }
+    }
+    xhttp.open('GET', url, true);
+    xhttp.send();
+}
+
+function decorateSVG() {
+    if (imageType == 'svg') {
+        var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value;
+        var setSymbolStrokeColor = 'black';
+        if (setSymbolGradient == 'Common') {
+            setSymbolStrokeColor = 'white'
+        }
+        svgStroke.setAttribute('stroke', setSymbolStrokeColor)
+        svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')');
+    } else {
+        drawSetSymbol()
+    }
+}
+
+function downloadSetSymbolImage(linkElement) {
+    linkElement.download = 'setSymbol.' + imageType
+    if (imageType == 'svg') {
+        var serializer = new XMLSerializer();
+        var source = serializer.serializeToString(svg);
+        
+        //add name spaces.
+        if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
+            source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+        }
+        if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
+            source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+        }
+        
+        //add xml declaration
+        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
+        
+        //convert svg source to URI data scheme.
+        var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
+        
+        //set url value to a element's href attribute.
+        linkElement.href = url;
+    } else {
+        var setSymbolDownload = canvas.toDataURL();
+        linkElement.href = setSymbolDownload;
+    }
+}
+
+function uploadImage(event) {
+    var input = event.target;
+    var reader = new FileReader();
+    reader.onload = function() {
+        imageType = 'png';
+        hideShow();
+        setSymbolImage.src = reader.result;
+    }
+    reader.readAsDataURL(input.files[0]);
+}
+
+function drawSetSymbol() {
+    var scaleAmount;
+    if (setSymbolImage.width > setSymbolImage.height) {
+        scaleAmount = setSymbolWidth / setSymbolImage.width;
+    } else {
+        scaleAmount = setSymbolHeight / setSymbolImage.height;
+    }
+    context.globalCompositeOperation = 'source-over';
+    context.clearRect(0, 0, svgWidth, svgHeight);
+    var x1 = (svgWidth - setSymbolImage.width * scaleAmount) / 2, y1 = (svgHeight - setSymbolImage.height * scaleAmount) / 2, x2 = x1 + setSymbolImage.width * scaleAmount, y2 = y1 + setSymbolImage.height * scaleAmount;
+    context.drawImage(setSymbolImage, x1, y1, x2 - x1, y2 - y1);
+    context.globalCompositeOperation = 'source-in';
+    var gradient = context.createLinearGradient(x1, y1, x2, y1);
+    var gradientColors = document.getElementById('grad' + document.getElementById('inputSetSymbolRarity').value).innerHTML.split('stop-color:');
+    gradient.addColorStop(0, gradientColors[1].split(';')[0]);
+    gradient.addColorStop(0.5, gradientColors[2].split(';')[0]);
+    gradient.addColorStop(1, gradientColors[3].split(';')[0]);
+    context.fillStyle = gradient;
+    context.fillRect(x1, y1, x2 - x1, y2 - y1);
+}
+
+function hideShow() {
+    if (imageType == 'svg') {
+        if (svg.classList.contains('hidden')) {
+            svg.classList.remove('hidden');
+        }
+        if (!canvas.classList.contains('hidden')) {
+            canvas.classList.add('hidden');
+        }
+    } else {
+        if (canvas.classList.contains('hidden')) {
+            canvas.classList.remove('hidden');
+        }
+        if (!svg.classList.contains('hidden')) {
+            svg.classList.add('hidden');
+        }
+    }
+}
+
+

data/site/styles.css

@@ -38,34 +38,53 @@
 
 :root {
 	--background-color: #fafafa;
-	--background-color-contrast: #222;
+	--background-color-contrast: #333;
 	--interactable-color: #aaa;
-	--interactable-selected-color: #888;
+	--interactable-selected-color: #777;
 	--input-color: #ddd;
 	--font-color: #000;
 	--font-color-contrast: #eee;
+	--body-background: none;
 }
 
 html {
-	user-select: none;
-	font-size: 20pt;
-	background-color: var(--background-color);
+	font: 20pt roboto;
+	background: var(--background-color);
 	color: var(--font-color);
+	background-attachment: fixed;
+	overflow-x: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 html, body {
 	margin: 0;
+    border: 0;
+    padding: 0;
 	overflow-x: hidden
 }
+body {
+	background: var(--body-background);
+	background-position: left;
+    background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-size: cover;
+}
 a {
 	font: inherit;
 	color: inherit;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
 }
 
 .title {
 	text-align: center;
 	color: var(--font-color);
 	font: 2.5rem 'belerenbsc';
-	margin-top: 1rem;
+	padding: 1rem 0;
 }
 
 .cardMaster {
@@ -77,7 +96,8 @@ a {
     display: grid;
     grid-template-columns: 2rem auto 2rem;
     align-items: center;
-    background-color: var(--input-color);
+    background: var(--interactable-color);
+    cursor: pointer;
 }
 .cardMasterElement > .handle {
     cursor: move;
@@ -85,14 +105,14 @@ a {
     text-align: center;
 }
 .cardMasterElementMoving {
-	background-color: var(--interactable-selected-color);
+	background: var(--interactable-selected-color);
 }
 .cardMasterElement > .delete {
 	cursor: pointer;
     text-align: center;
 }
 .cardMasterElement.cardMasterElementSelected {
-	background-color: var(--interactable-color);
+	background: var(--interactable-selected-color);
 }
 
 .splitGrid {
@@ -138,10 +158,11 @@ img {
 	max-height: 1.5rem;
 }
 #framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
-	background-color: var(--interactable-selected-color);
+	background: var(--interactable-selected-color);
 }
 #maskPicker > div, #framePicker > div {
-	background-color: var(--interactable-color);
+	background: var(--interactable-color);
+    cursor: pointer;
 }
 #maskPicker > div {
 	padding: 0.5rem;
@@ -157,15 +178,16 @@ img {
 }
 #textPicker > div {
 	font: 1rem belerenbsc;
-	background-color: var(--interactable-color);
+	background: var(--interactable-color);
 	padding: 0.5rem;
+    cursor: pointer;
 }
 #textPicker > div.selectedText {
-	background-color: var(--interactable-selected-color);
+	background: var(--interactable-selected-color);
 }
 
 canvas {
-	/*background-color: var(--interactable-color);*/
+	/*background: var(--interactable-color);*/
 }
 textarea {
 	resize: vertical;
@@ -176,6 +198,9 @@ textarea {
 .hidden {
 	display: none;
 }
+.hidden.frameClassCustom {
+	display: inline-block;
+}
 
 
 
@@ -183,36 +208,50 @@ textarea {
 	display: grid;
 	grid-template-columns: 750px auto;
 	grid-gap: 1rem;
-	padding: 1rem;
+	padding: 0 1rem 1rem 1rem;
 }
 
 .tabPicker {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
 	grid-auto-rows: min-content;
 	grid-gap: 0.1rem;
 	margin-bottom: 1rem;
 }
 .tabPicker > div {
-	font: 1rem belerenbsc;
+	font: 1.2rem belerenbsc;
 	text-align: center;
-	padding: 0.5rem;
-	background-color: var(--interactable-color);
+	padding: 0.5rem 0;
+	background: var(--interactable-color);
+    cursor: pointer;
 }
 .tabPicker > div.tabOptionSelected {
-	background-color: var(--interactable-selected-color);
+	background: var(--interactable-selected-color);
 }
 
-input, textarea, button, select {
-	font: 0.8rem mplantin;
+input:not([type='checkbox']), textarea, button, select {
+	font: inherit;
 	color: var(--font-color);
 	width: 100%;
-	background-color: var(--input-color);
+	background: var(--input-color);
 	border: none;
 	outline: none;
 	padding: 0.2rem;
 	margin-top: 0.1rem;
 }
+input:not([type='checkbox']):active, textarea:active, button:active {
+	border: 0.1rem solid var(--interactable-color);
+	padding: 0.1rem;
+}
+input[type='checkbox'] {
+	position: relative;
+	top: 0.25rem;
+	width: 1rem;
+	height: 1rem;
+}
+input[type='checkbox'], select, option, input[type='file'], button {
+    cursor: pointer;
+}
 
 @keyframes fade-in {
 	from {opacity: 0;}
@@ -235,7 +274,7 @@ input, textarea, button, select {
 	font: 2rem 'belerenbsc';
 }
 .darkLayer {
-	background-color: var(--background-color-contrast);
+	background: var(--background-color-contrast);
 	color: var(--font-color-contrast);
 }
 .layer > div {
@@ -259,7 +298,7 @@ input, textarea, button, select {
 
 .footer {
 	padding: 2rem;
-	background-color: var(--background-color-contrast);
+	background: var(--background-color-contrast);
 	color: var(--font-color-contrast);
 	font: 0.6rem 'open sans';
 	display: grid;
@@ -312,4 +351,19 @@ input, textarea, button, select {
 	font: inherit;
 	width: 10rem;
 	textAlign: left;
+}
+
+.downloadCardImage {
+	margin-top: 0.5rem;
+	text-align: center;
+	font: 2rem belerenbsc;
+}
+
+::placeholder {
+	color: inherit;
+	opacity: 0.5;
+}
+
+.paragraph {
+	text-indent: 2em;
 }