upgrayedd

2025-07-26 21:04:58 -05:00 · 2020-03-27 10:56:46 -07:00
parent 9fbee694ed
commit 73b1de2b74
63 changed files with 1622 additions and 231 deletions
--- a/OLDdata/versions/planeswalker.js
+++ b/OLDdata/versions/planeswalker.js
@@ -90,6 +90,7 @@ if (!version.addedPlaneswalker) {
    var lightColor = "white";
    var planeswalkerLightToDark = new Image()
    var planeswalkerDarkToLight = new Image()
+    planeswalkerDarkToLight.onload = planeswalkerAbilities()
 }

 m15PlaneswalkerBottomInfo()
@@ -196,5 +197,5 @@ function invertPlaneswalkerColors() {
        planeswalkerLightToDark.src = lightToDarkPlaneswalker.src
        planeswalkerDarkToLight.src = darkToLightPlaneswalker.src
    }
-    planeswalkerAbilities();
+    // planeswalkerAbilities();
 }
--- a/OLDdisclaimer.html
+++ b/OLDdisclaimer.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html5>
+<html>
+<head>
+	<title>CC — Disclaimer</title>
+	<!-- Other things -->
+	<link rel="stylesheet" href="data/site/styles.css">
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+	<div class="mainDiv">
+		<div class="layer">
+			<div class="title">
+				Disclaimer:
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph indent">
+				Card Conjurer is in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Fonts, Mana symbols, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
+			</div>
+		</div>
+        <div class="layer">
+            <div class="paragraph">
+                Most of the card frames were created by the following:<br>
+                Kentu, Narb777, CXA26843, FPM, Xander, Chrome Kaldra, CBG, Trancebam, Larme, RoblinTheGoblin, White Dragon, and Timmy XD69.
+            </div>
+        </div>
+		<div class="layer">
+			<div class="paragraph">
+				Some fonts and/or images used in this program have been gathered from the following sources under the <a target="blank" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons BY-NC-SA 2.5 License</a>:<br>
+				<a target="blank" href="https://mtg.gamepedia.com/Main_Page" class="leftMargin">MTG Gamepedia</a><br>
+				<a target="blank" href="http://magicseteditor.boards.net/" class="leftMargin">Magic Set Editor</a><br>
+				Changes have been made to some of the images. Card Conjurer is not endorsed by these sources.
+			</div>
+		</div>
+		<div class="layer">
+			<div class="paragraph">
+				Any other uploaded artwork is property of the original artist, and it is at the discretion of the users that these images are properly credited.
+			</div>
+		</div>
+	</div>
+</body>
+<footer>
+    <div class="footerGrid">
+        <div>
+            <div class="visitorCountTrigger">Card Conjurer By Kyle Burton</div>
+            <div class="visitorCount"></div>
+        </div>
+        <div>
+            Navigation:<br>
+            <a href="index.html">Card Creator</a><br>
+            <a href="life.html">Life Counter</a><br>
+            <a href="askscryfall.html">Ask Scryfall</a>
+        </div>
+        <div>
+            Legal:<br>
+            <a href="disclaimer.html">Disclaimer</a><br>
+            <a href="termsofuse.html">Terms of Use</a>
+        </div>
+    </div>
+</footer>
+<script src="data/scripts/colors.js"></script>
+<html>
--- a/data/images/planeswalker/abilityLineEven.png
+++ b/data/images/planeswalker/abilityLineEven.png
--- a/data/images/planeswalker/abilityLineEvenDarkened.png
+++ b/data/images/planeswalker/abilityLineEvenDarkened.png
--- a/data/images/planeswalker/abilityLineOdd.png
+++ b/data/images/planeswalker/abilityLineOdd.png
--- a/data/images/planeswalker/abilityLineOddDarkened.png
+++ b/data/images/planeswalker/abilityLineOddDarkened.png
--- a/data/images/planeswalker/planeswalkerCSV.csv
+++ b/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
--- a/data/images/planeswalker/planeswalkerDarkTwins.png
+++ b/data/images/planeswalker/planeswalkerDarkTwins.png
--- a/data/images/planeswalker/planeswalkerFrameA.png
+++ b/data/images/planeswalker/planeswalkerFrameA.png
--- a/data/images/planeswalker/planeswalkerFrameB.png
+++ b/data/images/planeswalker/planeswalkerFrameB.png
--- a/data/images/planeswalker/planeswalkerFrameC.png
+++ b/data/images/planeswalker/planeswalkerFrameC.png
--- a/data/images/planeswalker/planeswalkerFrameG.png
+++ b/data/images/planeswalker/planeswalkerFrameG.png
--- a/data/images/planeswalker/planeswalkerFrameM.png
+++ b/data/images/planeswalker/planeswalkerFrameM.png
--- a/data/images/planeswalker/planeswalkerFrameR.png
+++ b/data/images/planeswalker/planeswalkerFrameR.png
--- a/data/images/planeswalker/planeswalkerFrameU.png
+++ b/data/images/planeswalker/planeswalkerFrameU.png
--- a/data/images/planeswalker/planeswalkerFrameW.png
+++ b/data/images/planeswalker/planeswalkerFrameW.png
--- a/data/images/planeswalker/planeswalkerMaskBorder.png
+++ b/data/images/planeswalker/planeswalkerMaskBorder.png
--- a/data/images/planeswalker/planeswalkerMaskFrame.png
+++ b/data/images/planeswalker/planeswalkerMaskFrame.png
--- a/data/images/planeswalker/planeswalkerMaskLoyalty.png
+++ b/data/images/planeswalker/planeswalkerMaskLoyalty.png
--- a/data/images/planeswalker/planeswalkerMaskPinline.png
+++ b/data/images/planeswalker/planeswalkerMaskPinline.png
--- a/data/images/planeswalker/planeswalkerMaskText.png
+++ b/data/images/planeswalker/planeswalkerMaskText.png
--- a/data/images/planeswalker/planeswalkerMaskTitle.png
+++ b/data/images/planeswalker/planeswalkerMaskTitle.png
--- a/data/images/planeswalker/planeswalkerMaskType.png
+++ b/data/images/planeswalker/planeswalkerMaskType.png
--- a/data/images/planeswalker/planeswalkerMinus.png
+++ b/data/images/planeswalker/planeswalkerMinus.png
--- a/data/images/planeswalker/planeswalkerNeutral.png
+++ b/data/images/planeswalker/planeswalkerNeutral.png
--- a/data/images/planeswalker/planeswalkerPT.png
+++ b/data/images/planeswalker/planeswalkerPT.png
--- a/data/images/planeswalker/planeswalkerPlus.png
+++ b/data/images/planeswalker/planeswalkerPlus.png
--- a/data/images/storybook/AAAstorybookFrameW.png
+++ b/data/images/storybook/AAAstorybookFrameW.png
--- a/data/images/storybook/mizzium_mortars_by_noahbradley-d5dvmd8.jpg
+++ b/data/images/storybook/mizzium_mortars_by_noahbradley-d5dvmd8.jpg
--- a/data/images/storybook/storybookFrameB.png
+++ b/data/images/storybook/storybookFrameB.png
--- a/data/images/storybook/storybookFrameC.png
+++ b/data/images/storybook/storybookFrameC.png
--- a/data/images/storybook/storybookFrameG.png
+++ b/data/images/storybook/storybookFrameG.png
--- a/data/images/storybook/storybookFrameR.png
+++ b/data/images/storybook/storybookFrameR.png
--- a/data/images/storybook/storybookFrameU.png
+++ b/data/images/storybook/storybookFrameU.png
--- a/data/images/storybook/storybookFrameW.png
+++ b/data/images/storybook/storybookFrameW.png
--- a/data/images/storybook/storybookMaskLeftPage.png
+++ b/data/images/storybook/storybookMaskLeftPage.png
--- a/data/images/storybook/storybookMaskRightHalf.png
+++ b/data/images/storybook/storybookMaskRightHalf.png
--- a/data/scripts/animations.js
+++ b/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')
+    }
+  }
+}
--- a/data/scripts/cookies.js
+++ b/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')
+	}
+}
--- a/data/scripts/darkMode.js
+++ b/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')
--- a/data/scripts/greenMode.js
+++ b/data/scripts/greenMode.js
--- a/data/scripts/lightMode.js
+++ b/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')
--- a/data/scripts/main.js
+++ b/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) {
-			mainContext.drawImage(manaCostCanvas, 0, 0, cardWidth, cardHeight)
+			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)
+            }
+        }
+    }
+}
+*/



--- a/data/scripts/versionM15.js
+++ b/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(
@@ -96,5 +89,3 @@ function bottomInfoM15() {
 			{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()
--- a/data/scripts/versionM15Nyx.js
+++ b/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()
+}
--- a/data/scripts/versionPlaneswalker.js
+++ b/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();
+}
--- a/data/scripts/versionStorybook.js
+++ b/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)
+}
--- a/data/site/other/askScryfall/askScryfall.js
+++ b/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()
--- a/data/site/other/askScryfall/askScryfallAbilityListGenerator.html
+++ b/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>
+
+
--- a/data/site/other/askScryfall/minus.png
+++ b/data/site/other/askScryfall/minus.png
--- a/data/site/other/askScryfall/planeswalkerAbilities.txt
+++ b/data/site/other/askScryfall/planeswalkerAbilities.txt
--- a/data/site/other/askScryfall/plus.png
+++ b/data/site/other/askScryfall/plus.png
--- a/data/site/other/askScryfall/ultimate.png
+++ b/data/site/other/askScryfall/ultimate.png
--- a/data/site/other/askScryfall/urzaBlank.png
+++ b/data/site/other/askScryfall/urzaBlank.png
--- a/data/site/other/life/NoSleep.js
+++ b/data/site/other/life/NoSleep.js
--- a/data/site/other/life/life.js
+++ b/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)
+                                  })
--- a/data/site/other/life/menuButton.png
+++ b/data/site/other/life/menuButton.png
--- a/data/site/other/life/menuExitButton.png
+++ b/data/site/other/life/menuExitButton.png
--- a/data/site/other/setSymbol/setSymbol.js
+++ b/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');
+        }
+    }
+}
+
+
--- a/data/site/styles.css
+++ b/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;
@@ -313,3 +352,18 @@ input, textarea, button, select {
 	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;
+}
--- a/disclaimer.html
+++ b/disclaimer.html
@@ -1,63 +1,58 @@
 <!DOCTYPE html5>
 <html>
+<script async src="data/scripts/cookies.js"></script>
 <head>
-	<title>CC — Disclaimer</title>
-	<!-- Other things -->
+    <title>CC - Disclaimer</title>
    <link rel="stylesheet" href="data/site/styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-	<div class="mainDiv">
-		<div class="layer">
-			<div class="title">
-				Disclaimer:
-			</div>
-		</div>
-		<div class="layer">
-			<div class="paragraph indent">
+    <div class='title'>Disclaimer</div>
+    <div class='layer darkLayer fadeIn'>
+        <div class='paragraph'>
            Card Conjurer is in no way affiliated with, sponsored by, or endorsed by Wizards of the Coast. Fonts, Mana symbols, and other related images are trademarks and copyrights of Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc.
        </div>
    </div>
-        <div class="layer">
-            <div class="paragraph">
+    <div class='layer fadeIn'>
+        <div class='paragraph'>
            Most of the card frames were created by the following:<br>
            Kentu, Narb777, CXA26843, FPM, Xander, Chrome Kaldra, CBG, Trancebam, Larme, RoblinTheGoblin, White Dragon, and Timmy XD69.
        </div>
    </div>
-		<div class="layer">
-			<div class="paragraph">
+    <div class='layer darkLayer fadeIn'>
+        <div class='paragraph'>
            Some fonts and/or images used in this program have been gathered from the following sources under the <a target="blank" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons BY-NC-SA 2.5 License</a>:<br>
            <a target="blank" href="https://mtg.gamepedia.com/Main_Page" class="leftMargin">MTG Gamepedia</a><br>
            <a target="blank" href="http://magicseteditor.boards.net/" class="leftMargin">Magic Set Editor</a><br>
            Changes have been made to some of the images. Card Conjurer is not endorsed by these sources.
        </div>
    </div>
-		<div class="layer">
-			<div class="paragraph">
-				Any other uploaded artwork is property of the original artist, and it is at the discretion of the users that these images are properly credited.
-			</div>
+    <div class='layer fadeIn'>
+        <div class='paragraph'>
+            Any other uploaded artwork is property of the original artist, and it is up to the users to insure that these images are properly credited.
        </div>
    </div>
 </body>
-<footer>
-    <div class="footerGrid">
+<footer class='footer'>
    <div>
-            <div class="visitorCountTrigger">Card Conjurer By Kyle Burton</div>
-            <div class="visitorCount"></div>
+        Card Conjurer by Kyle Burton<br>
+        <select id='inputColorPalette' onchange='loadScript("data/scripts/" + this.value + ".js")'>
+            <option value='lightMode'>Light Mode</option>
+            <option value='darkMode'>Dark Mode</option>
+        </select>
    </div>
    <div>
-            Navigation:<br>
-            <a href="index.html">Card Creator</a><br>
-            <a href="life.html">Life Counter</a><br>
-            <a href="askscryfall.html">Ask Scryfall</a>
+        Navigation<br>
+        <a href='index.html'>Card Creator</a><br>
+        <a href='life.html'>Life Counter</a><br>
+        <a href='askscryfall.html'>Ask Scryfall</a>
    </div>
    <div>
-            Legal:<br>
-            <a href="disclaimer.html">Disclaimer</a><br>
-            <a href="termsofuse.html">Terms of Use</a>
-        </div>
+        Legal<br>
+        <a href='termsofuse.html'>Terms of Use</a><br>
+        <a href='disclaimer.html'>Disclaimer</a>
    </div>
 </footer>
-<script src="data/scripts/colors.js"></script>
+<script defer src="data/scripts/animations.js"></script>
 <html>
--- a/index.html
+++ b/index.html
@@ -1,17 +1,31 @@
 <!DOCTYPE html5>
 <html>
+<script async src="data/scripts/cookies.js"></script>
 <head>
 	<title>Card Conjurer</title>
 	<link rel="stylesheet" href="data/site/styles.css">
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<div class='title'>Card Conjurer</div>
 </head>
 <body>
-	<div class='mainGrid fadeIn'>
+	<div class='title'>Card Conjurer</div>
+	<script>
+		var cardWidth = 1500, cardHeight = 2100
+		if (window.location.search != "") {
+	        var parameters = window.location.search.replace('?', '').split('&');
+	        for (var i = 0; i < parameters.length; i ++) {
+	            var targetParameter = parameters[i].split('=');
+	            if (targetParameter[0] == 'scale') {
+	                cardWidth *= parseFloat(targetParameter[1]);
+	                cardHeight = cardWidth / 5 * 7;
+	            }
+	        }
+	    }
+	</script>
+	<div class='mainGrid'>
 		<canvas id="previewCanvas"></canvas>
 		<div>
-			<div class='tabPicker'>
+			<div class='tabPicker' id='tabPicker'>
 				<div onclick='toggleTabs(this, "frameTab")' class='tabOptionSelected'>Frame</div>
 				<div onclick='toggleTabs(this, "textTab")'>Text</div>
 				<div onclick='toggleTabs(this, "artTab")'>Art</div>
@@ -19,6 +33,7 @@
 				<div onclick='toggleTabs(this, "watermarkTab")'>Watermark</div>
 				<div onclick='toggleTabs(this, "collectorTab")'>Collector</div>
 				<div onclick='toggleTabs(this, "importTab")'>Import</div>
+				<div onclick='toggleTabs(this, "advancedTab")'>Advanced</div>
 			</div>
 			<div id='tabOptions'>
 				<div id='frameTab'>
@@ -86,8 +101,8 @@
 					<div class="autoGrid">
 				        <input type="file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
 				        <input type="text" placeholder="Via URL" onchange="setSymbol.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
-				        <input type="text" id="inputSetCode" placeholder="Via Set Code" onchange="setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value">
-				        <input type="text" id="inputSetRarity" placeholder="Rarity" onchange="setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value">
+				        <input type="text" id="inputSetCode" placeholder="Via Set Code" onchange="autoCrop(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)">
+				        <input type="text" id="inputSetRarity" placeholder="Rarity" onchange="autoCrop(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)">
 				        <!-- <button class="button" onclick="randomSet()">Random</button> -->
 				    </div>
 				</div>
@@ -129,10 +144,20 @@
 			        Select which card to import:
 			        <input type="number" class="input number" id="inputCardNameNumberTextImport" onchange="inputCardNameNumberTextImport(this.value)" value="1" min="1" max="1">
 				</div>
+				<div id='advancedTab' class='hidden'>
+					Click one of the following buttons to load the described card frame:<br>
+					<button onclick='loadScript("data/scripts/versionM15.js")'>M15</button>
+					<button onclick='loadScript("data/scripts/versionM15Nyx.js")'>Nyx (M15)</button><br><br>
+					<button onclick='loadScript("data/scripts/versionPlaneswalker.js")'>Planeswalker (M15)</button><br><br>
+					<button onclick='loadScript("data/scripts/versionStorybook.js")'>*Storybook (Non-Adventure)</button>
+					<br><br>*Starred frames are works in progress, however they can still be used.
 				</div>
+			</div>
+			<div class='downloadCardImage'>
 				<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
 			</div>
 		</div>
+	</div>
 	<div class='layer darkLayer fadeIn'>
 		<div>
 			<div class='layerTitle'>Welcome to Card Conjurer</div>
@@ -171,16 +196,17 @@
    </div>
 	<div>
 		Navigation<br>
-		Card Creator<br>
-		Life Counter<br>
-		Ask Scryfall
+		<a href='index.html'>Card Creator</a><br>
+		<a href='life.html'>Life Counter</a><br>
+		<a href='askscryfall.html'>Ask Scryfall</a>
 	</div>
 	<div>
 		Legal<br>
-		Terms of Use<br>
-		Disclaimer
+		<a href='termsofuse.html'>Terms of Use</a><br>
+		<a href='disclaimer.html'>Disclaimer</a>
 	</div>
 </footer>
+<script defer src="data/scripts/animations.js"></script>
 <script defer src="data/scripts/sortable.js"></script>
 <script defer src="data/scripts/main.js"></script>
 <script defer src="data/scripts/versionM15.js"></script>
--- a/termsofuse.html
+++ b/termsofuse.html
@@ -1,54 +1,49 @@
 <!DOCTYPE html5>
 <html>
+<script async src="data/scripts/cookies.js"></script>
 <head>
-	<title>CC — Disclaimer</title>
-	<!-- Other things -->
+    <title>CC - Terms of Use</title>
    <link rel="stylesheet" href="data/site/styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-	<div class="mainDiv">
-		<div class="layer">
-			<div class="title">
-				Terms of Use:
-			</div>
-		</div>
-		<div class="layer">
-			<div class="paragraph indent">
+    <div class='title darkLayer'>Terms of Use</div>
+    <div class='layer fadeIn'>
+        <div class='paragraph'>
            This program is for creative purposes only. It is intended only to be used for personal reasons, and not for commercial production or sale.
        </div>
    </div>
-        <div class="layer">
-            <div class="paragraph indent">
-                Users must properly credit any artwork that they upload to the program.
+    <div class='layer darkLayer fadeIn'>
+        <div class='paragraph'>
+            Users must properly credit any artwork that they upload.
        </div>
    </div>
-        <div class="layer">
-            <div class="paragraph indent">
-                By using Card Conjurer, you are agreeing to the storage of cookies on your device. The cookies serve to improve your experience, and store nothing but the settings you have previously input so they can be automatically loaded whenever you revisit the site.
-            </div>
+    <div class='layer fadeIn'>
+        <div class='paragraph'>
+            By using Card Conjurer, you are agreeing to the storage of cookies on your device. The cookies serve to improve your experience and store nothing but the settings you have previously input so they can be automatically loaded whenever you revisit the site.
        </div>
    </div>
 </body>
-<footer>
-    <div class="footerGrid">
+<footer class='footer'>
    <div>
-            <div class="visitorCountTrigger">Card Conjurer By Kyle Burton</div>
-            <div class="visitorCount"></div>
+        Card Conjurer by Kyle Burton<br>
+        <select id='inputColorPalette' onchange='loadScript("data/scripts/" + this.value + ".js")'>
+            <option value='lightMode'>Light Mode</option>
+            <option value='darkMode'>Dark Mode</option>
+        </select>
    </div>
    <div>
-            Navigation:<br>
-            <a href="index.html">Card Creator</a><br>
-            <a href="life.html">Life Counter</a><br>
-            <a href="askscryfall.html">Ask Scryfall</a>
+        Navigation<br>
+        <a href='index.html'>Card Creator</a><br>
+        <a href='life.html'>Life Counter</a><br>
+        <a href='askscryfall.html'>Ask Scryfall</a>
    </div>
    <div>
-            Legal:<br>
-            <a href="disclaimer.html">Disclaimer</a><br>
-            <a href="termsofuse.html">Terms of Use</a>
-        </div>
+        Legal<br>
+        <a href='termsofuse.html'>Terms of Use</a><br>
+        <a href='disclaimer.html'>Disclaimer</a>
    </div>
 </footer>
-<script src="data/scripts/colors.js"></script>
+<script defer src="data/scripts/animations.js"></script>
 <html>