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/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;
@@ -312,4 +351,19 @@ input, textarea, button, select {
 	font: inherit;
 	width: 10rem;
 	textAlign: left;
+}
+
+.downloadCardImage {
+	margin-top: 0.5rem;
+	text-align: center;
+	font: 2rem belerenbsc;
+}
+
+::placeholder {
+	color: inherit;
+	opacity: 0.5;
+}
+
+.paragraph {
+	text-indent: 2em;
 }