3.0

data/site/main.js

@@ -1,74 +1,710 @@
 //============================================//
 //       Card Conjurer, by Kyle Burton        //
 //============================================//
-window.onscroll = function() {scrollFunction()}
-window.onresize = function() {scrollFunction()}
+//Define some variables
+var cardWidth = 750, cardHeight = 1050
+var version = {}
+var date = new Date()
+document.getElementById("inputInfoNumber").value = date.getFullYear()
+//Make all the canvases and their contexts
+var mainCanvas = document.getElementById("mainCanvas")
+mainCanvas.width = cardWidth
+mainCanvas.height = cardHeight
+var mainContext = mainCanvas.getContext("2d")
+var canvasList = ["card", "mask", "image", "text", "paragraph", "line", "transparent", "crop", "bottomInfo", "setSymbol", "watermark", "temp"]
+for (var i = 0; i < canvasList.length; i++) {
+	window[canvasList[i] + "Canvas"] = document.createElement("canvas")
+	window[canvasList[i] + "Canvas"].width = cardWidth
+	window[canvasList[i] + "Canvas"].height = cardHeight
+	window[canvasList[i] + "Context"] = window[canvasList[i] + "Canvas"].getContext("2d")
+}
+//Create the arrays that keeps track of what parts of the card are what
+var cardMasterTypes = []
+var cardMasterImages = []
+var cardMasterOpacity = []
+var cardMasterOpacityValue = []
+//Mana symbol Array setup
+var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar"]
+var manaSymbolImageList = []
+//Manually create a few important images
+var cardArt = new Image(), setSymbol = new Image(), watermark = new Image()
+cardArt.crossOrigin = "anonymous"
+setSymbol.crossOrigin = "anonymous"
+watermark.crossOrigin = "anonymous"
+cardArt.onload = function() {
+	updateCardCanvas()
+}
+setSymbol.onload = function() {
+	updateSetSymbolCanvas()
+}
+watermark.onload = function() {
+	updateWatermarkCanvas()
+}
+//Load the mana symbol images
+loadManaSymbolImages()
+//Load the CSV full of image data
+loadImageSpreadsheet()
 
-function scrollFunction() {
-	var scrollHeight = document.body.scrollTop
-	if (scrollHeight < 0) {
-		scrollHeight = 0
-	}
-	var titleHeight = parseInt(window.innerWidth * 141 / 1236 - 10);
-	if (window.innerWidth >= 750) {
-		if (window.innerWidth >= 970) {
-			titleHeight = 100
+
+//============================================//
+//                 Functions                  //
+//============================================//
+//Load the CSV full of image data
+function loadImageSpreadsheet() {
+	var xhttp = new XMLHttpRequest()
+	xhttp.onreadystatechange = function() {
+		if (this.readyState == 4) {
+			var rawText = xhttp.responseText.split("\n")
+			for (var i = 0; i < rawText.length; i ++) {
+				for (var n = 0; n < rawText[0].split(",").length; n++) {
+					if (i == 0) {
+						window[rawText[0].split(",")[n].trim() + "Array"] = []
+					} else {
+						window[rawText[0].split(",")[n].trim() + "Array"][i - 1] = rawText[i].split(",")[n].trim()
+					}
+				}
+				if (i == rawText.length - 1) {
+					init()
+				}
+			}
 		}
-		if (scrollHeight < titleHeight - 30) {
-    		document.getElementById("header").style.maxHeight =  titleHeight - scrollHeight
-  		} else {
-    		document.getElementById("header").style.maxHeight = "30px"
-  		}
-  		document.getElementsByClassName("mainGrid")[0].style.marginTop = titleHeight + 10
+	}
+	xhttp.open("GET", "data/images/imageSpreadsheet.csv", true)
+	xhttp.send()
+}
+//After the csv has been loaded, the init function runs.
+function init() {
+	//Loads the base version (m15)
+	changeVersionTo("m15")
+	//Loads all the masks
+	for (var i = 0; i < colorArray.length; i ++) {
+		if (colorArray[i] == "Mask") {
+			loadImage(i)
+		}
+	}
+	//Runs any tests. This should not do anything when published.
+	setTimeout(testFunction, 100)
+	checkCookies()
+}
+//Loads an image. Only actually loads images the first time each image is loaded, otherwise assigns it.
+function loadImage(index, target = "none") {
+	if (window[nameArray[index]] == undefined) {
+		window[nameArray[index]] = new customImage(index, target)
 	} else {
-		document.getElementsByClassName("mainGrid")[0].style.marginTop = 0
-		document.getElementById("header").style.maxHeight = titleHeight
+		addToCardMaster(index, target)
 	}
 }
-
-//Toggles the visibility of predetermined sections of the input boxes
-function toggleView(targetId, targetClass) {
-	for (var i = 0; i < document.getElementsByClassName(targetClass).length; i++) {
-		document.getElementsByClassName(targetClass)[i].classList.remove("shown")
+//Special image object
+function customImage(index, target) {
+	this.loaded = false
+	this.index = index
+	this.image = new Image()
+	this.image.src = "data/images/" + nameArray[index] + ".png"
+	this.image.onload = function() {
+		window[nameArray[index]].loaded = true
+		addToCardMaster(index, target)
 	}
-	document.getElementById(targetClass + "-" + targetId).classList.add("shown")
 }
-
-//Loads images from a file upload
-function loadImage(event, destination) {
+//Adds an image to the card master. Replaces the previous one if it already existed
+function addToCardMaster(index, target) {
+	if (target == "preview") {
+		document.getElementById("imgPreview").src = window[nameArray[index]].image.src
+		return
+	}
+	if ((target == typeArray[index]) || (secondaryArray[index] && target.replace("Secondary", "")) == typeArray[index] || (typeArray[index] == "Full")) {
+		if (cardMasterTypes.includes(target)) {
+			cardMasterImages[cardMasterTypes.indexOf(target)] = window[nameArray[index]]
+		} else {
+			cardMasterImages[cardMasterTypes.length] = window[nameArray[index]]
+			cardMasterTypes[cardMasterTypes.length] = target
+		}
+		cardMasterUpdated()
+	}
+}
+//Runs through all the assigned card images and draws them in
+function cardMasterUpdated() {
+	imageContext.clearRect(0, 0, cardWidth, cardHeight)
+	for (var i = 0; i < version.typeOrder.length; i ++) {
+		if (cardMasterTypes.includes(version.typeOrder[i])) {
+			imageContext.mask(cardMasterTypes.indexOf(version.typeOrder[i]))
+		}
+	}
+}
+//Custom function that draws onto a canvas using masks
+CanvasRenderingContext2D.prototype.mask = function(cardMasterIndex) {
+	maskContext.clearRect(0, 0, cardWidth, cardHeight)
+	maskContext.globalCompositeOperation = "source-over"
+	if (cardMasterTypes[cardMasterIndex].includes("Secondary")) {
+		maskContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight)
+		maskContext.globalCompositeOperation = "source-in"
+	}
+	var maskToUse = window[versionArray[cardMasterImages[cardMasterIndex].index] + "Mask" + cardMasterTypes[cardMasterIndex].replace("Secondary", "")]
+	if (maskToUse != undefined) {
+		maskContext.drawImage(maskToUse.image, xArray[maskToUse.index] * cardWidth, yArray[maskToUse.index] * cardHeight, widthArray[maskToUse.index] * cardWidth, heightArray[maskToUse.index] * cardHeight)
+		maskContext.globalCompositeOperation = "source-in"
+	}
+	var mainImageIndex = cardMasterImages[cardMasterIndex].index
+	maskContext.drawImage(cardMasterImages[cardMasterIndex].image, xArray[mainImageIndex] * cardWidth, yArray[mainImageIndex] * cardHeight, widthArray[mainImageIndex] * cardWidth, heightArray[mainImageIndex] * cardHeight)
+	this.drawImage(maskCanvas, 0, 0, cardWidth, cardHeight)
+	if (cardMasterTypes[cardMasterIndex].includes("RareStamp")) {
+		this.drawImage(window[nameArray[nameArray.indexOf("stamp")]].image, version.rareStampX, version.rareStampY, version.rareStampWidth, version.rareStampHeight)
+	}
+	updateImageCanvas()
+}
+//All the canvas functions
+function updateImageCanvas() {
+	imageContext.globalCompositeOperation = "destination-out"
+	for (var i = 0; i < cardMasterOpacity.length; i ++) {
+		imageContext.globalAlpha = 1 - cardMasterOpacityValue[i] / 100
+		//opacityc
+		opacityImage = window[version.currentVersion + "Mask" + cardMasterOpacity[i]].image
+		imageContext.drawImage(opacityImage, 0, 0, cardWidth, cardHeight)
+	}
+	imageContext.globalAlpha = 1
+	imageContext.globalCompositeOperation = "source-over"
+	updateBottomInfoCanvas()
+}
+function updateTextCanvas() {
+	//post processing?
+	updateCardCanvas()
+}
+//Rewrites all the text!
+function updateText() {
+	version.textList[whichTextIndex][1] = document.getElementById("inputText").value
+	textContext.clearRect(0, 0, cardWidth, cardHeight)
+	for (var i = 0; i < version.textList.length; i ++) {
+		var waitUntilIAmDone = textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9])
+		updateTextCanvas()
+	}
+}
+//figures out the placing of the set symbol
+function updateSetSymbolCanvas() {
+	setSymbolContext.clearRect(0, 0, cardWidth, cardHeight)
+	var setSymbolWidth, setSymbolHeight, setSymbolX, setSymbolY
+	if (version.setSymbolWidth / version.setSymbolHeight < setSymbol.width / setSymbol.height) {
+		//wider
+		setSymbolWidth = version.setSymbolWidth
+		setSymbolHeight = version.setSymbolWidth / setSymbol.width * setSymbol.height
+		setSymbolX = version.setSymbolRight - setSymbolWidth
+		setSymbolY = version.setSymbolVertical - setSymbolHeight / 2
+	} else {
+		//taller
+		setSymbolHeight = version.setSymbolHeight
+		setSymbolWidth = version.setSymbolHeight / setSymbol.height * setSymbol.width
+		setSymbolX = version.setSymbolRight - setSymbolWidth
+		setSymbolY = version.setSymbolVertical - setSymbolHeight / 2
+	}
+	setSymbolContext.drawImage(setSymbol, setSymbolX, setSymbolY, setSymbolWidth, setSymbolHeight)
+	updateCardCanvas()
+}
+function updateWatermarkCanvas() {
+	if (document.getElementById("inputWatermarkPrimary").value != "none") {
+		watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
+		var watermarkX, watermarkY, watermarkWidth, watermarkHeight
+		if (version.watermarkWidth / version.watermarkHeight < watermark.width / watermark.height) {
+			//wider
+			watermarkWidth = version.watermarkWidth
+			watermarkHeight = version.watermarkWidth / watermark.width * watermark.height
+			watermarkX = cardWidth / 2 - watermarkWidth / 2
+			watermarkY = version.watermarkY - watermarkHeight / 2
+		} else {
+			//taller
+			watermarkHeight = version.watermarkHeight
+			watermarkWidth = version.watermarkHeight / watermark.height * watermark.width
+			watermarkX = cardWidth / 2 - watermarkWidth / 2
+			watermarkY = version.watermarkY - watermarkHeight / 2
+		}
+		watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
+		watermarkContext.globalCompositeOperation = "source-atop"
+		watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value
+		watermarkContext.fillRect(0, 0, cardWidth, cardHeight)
+		if (document.getElementById("inputWatermarkSecondary").value != "none") {
+			tempContext.clearRect(0, 0, cardWidth, cardHeight)
+			tempContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight)
+			tempContext.globalCompositeOperation = "source-atop"
+			tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value
+			tempContext.fillRect(0, 0, cardWidth, cardHeight)
+			tempContext.globalCompositeOperation = "source-over"
+			watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight)
+		}
+		watermarkContext.globalCompositeOperation = "source-over"
+		updateCardCanvas()
+	}
+}
+//Does the bottom info function! This can be different depending on the version.
+function updateBottomInfoCanvas() {
+	window[version.bottomInfoFunction]()
+}
+function updateCardCanvas() {
+	//clear it
+	cardContext.fillStyle = "black"
+	cardContext.fillRect(0, 0, cardWidth, cardHeight)
+	//draw the art, frame, text, mana symbols, set symbol, watermark...
+	cardContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
+	cardContext.drawImage(imageCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight)
+	cardContext.drawManaCost(document.getElementById("inputManaCost").value, version.manaCostX, version.manaCostY, version.manaCostDiameter, version.manaCostDistance, version.manaCostDirection)
+	cardContext.drawImage(setSymbolCanvas, 0, 0, cardWidth, cardHeight)
+	//clear the corners
+	cardContext.globalCompositeOperation = "destination-out"
+	cardContext.drawImage(window[nameArray[nameArray.indexOf("corners")]].image, 0, 0, cardWidth, cardHeight)
+	cardContext.globalCompositeOperation = "source-over"
+	//paste it to the visible canvas
+	mainContext.clearRect(0, 0, cardWidth, cardHeight)
+	mainContext.drawImage(cardCanvas, 0, 0, cardWidth, cardHeight)
+}
+//Loads an image in from user input
+function userLoadImage() {
+	loadImage(document.getElementById("inputImageIndex").value, "preview")
+}
+//Enters an image from user input
+function userEnterImage() {
+	loadImage(document.getElementById("inputImageIndex").value, document.getElementById("inputImageType").value)
+}
+//Removes an image from user input
+function userRemoveImage() {
+	if (cardMasterTypes.includes(document.getElementById("inputImageType").value) && document.getElementById("inputImageType").value != "Full") {
+		cardMasterImages.splice(cardMasterTypes.indexOf(document.getElementById("inputImageType").value), 1)
+		cardMasterTypes.splice(cardMasterTypes.indexOf(document.getElementById("inputImageType").value), 1)
+		cardMasterUpdated()
+	}
+}
+//Loads a script
+function loadScript(scriptPath){
+	var script = document.createElement("script")
+	script.setAttribute("type","text/javascript")
+	script.setAttribute("src", scriptPath)
+	if (typeof script != "undefined") {
+		document.getElementsByTagName("head")[0].appendChild(script)
+	}
+}
+//Adjusts values to the card size
+function cwidth(inputWidth) {
+	return inputWidth / 750 * cardWidth
+}
+function cheight(inputHeight) {
+	return inputHeight / 1050 * cardHeight
+}
+//shortcut for parseInt(document.getElementById("").value)
+function getValue(elementId) {
+	return parseFloat(document.getElementById(elementId).value)
+}
+//Changes the version
+function changeVersionTo(versionToChangeTo) {
+	loadScript("data/versions/" + versionToChangeTo + "Version.js")
+}
+function finishChangingVersion() {
+	document.getElementById("inputImageType").innerHTML = ""
+	document.getElementById("inputImageTypeOpacity").innerHTML = ""
+	for (var i = 0; i < version.typeOrder.length; i ++) {
+		document.getElementById("inputImageType").innerHTML += "<option>" + version.typeOrder[i] + "</option>"
+		if (window[version.currentVersion + "Mask" + version.typeOrder[i]]) {
+			document.getElementById("inputImageTypeOpacity").innerHTML += "<option>" + version.typeOrder[i] + "</option>"
+			cardMasterOpacity[cardMasterOpacity.length] = version.typeOrder[i]
+			cardMasterOpacityValue[cardMasterOpacityValue.length] = 100
+		}
+	}
+	for (var i = 0; i < version.textList.length; i ++) {
+		document.getElementById("inputWhichText").innerHTML += "<option>" + version.textList[i][0] + "</option>"
+	}
+	hideShowColors(true)
+	loadOpacityValue()
+	updateText()
+	updateBottomInfoCanvas()
+	updateSetSymbolCanvas()
+}
+//Hides and shows the options in inputImageColor to match the selected type
+function hideShowColors(enter = false) {
+	document.getElementById("inputImageIndex").innerHTML = ""
+	for (var i = 0; i < versionArray.length; i ++) {
+		if (versionArray[i] == version.currentVersion && (typeArray[i] == document.getElementById("inputImageType").value.replace("Secondary", "") || (typeArray[i] == "Full" && version.typeNotFull.includes(document.getElementById("inputImageType").value) == false)) && colorArray[i] != "Mask") {
+			document.getElementById("inputImageIndex").innerHTML += "<option value='" + i + "''>" + displayNameArray[i] + "</option>"
+		}
+	}
+	if (enter) {
+		userEnterImage()
+	}
+	userLoadImage()
+}
+//Loads the opacity value
+function loadOpacityValue() {
+	document.getElementById("inputOpacityValue").value = cardMasterOpacityValue[cardMasterOpacity.indexOf(document.getElementById("inputImageTypeOpacity").value)]
+}
+function opacityValueUpdated() {
+	cardMasterOpacityValue[cardMasterOpacity.indexOf(document.getElementById("inputImageTypeOpacity").value)] = document.getElementById("inputOpacityValue").value
+	cardMasterUpdated()
+}
+//Custom text function! This acts on any codes and makes things look nice :)
+CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="") {
+	paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
+	var textSize = inputTextSize
+	lineContext.font = textSize + "px " + textFont
+	lineContext.fillStyle = textColor
+	var otherParameters = other.split(",")
+	var outline, shadow = 0, oneLine = false, outlineWidth = 2, textAlign = "left", verticalAlign = true, lineSpace = 1
+	for (var i = 0; i < otherParameters.length; i ++) {
+		eval(otherParameters[i])
+	}
+	lineContext.strokeStyle = outline
+	lineContext.lineWidth = outlineWidth
+	var currentLineX = 0
+	var currentLineY = textY + textSize * 0.45
+	var uniqueSplitter = "9dn57gwbt4sh"
+	var splitString = text.replace(/ /g, uniqueSplitter +  " " + uniqueSplitter).replace(/{/g, uniqueSplitter + "{").replace(/}/g, "}" + uniqueSplitter).split(uniqueSplitter)
+	splitString[splitString.length] = " "
+	var lastWordAdded = ""
+	for (var i = 0; i < splitString.length; i++) {
+		if (splitString[i] != "") {
+			var wordToWrite = splitString[i]
+			var finishLine = false
+			if (splitString[i].includes("{") && splitString[i].includes("}")) {
+				//It may be a code
+				wordToWrite = ""
+				possibleCodeLower = splitString[i].toLowerCase().replace("{", "").replace("}", "")
+				if (possibleCodeLower == "line" && !oneline) {
+					finishLine = true
+				} else if (possibleCodeLower == "linenospace" && ! oneline) {
+					finishLine = true
+				} else if (possibleCodeLower == "bar" || possibleCodeLower == "flavor") {
+					finishLine = true
+					var barWidth = manaSymbolImageList[63].width
+					var barHeight = manaSymbolImageList[63].height
+					paragraphContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight)
+					currentLineY += textSize * 0.8
+					if (possibleCodeLower == "flavor") {
+						lineContext.font = "italic " + (textSize - 3) + "px " + textFont
+					}
+				} else if (possibleCodeLower.includes("fontsize")) {
+					textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length))
+					lineContext.font = textSize + "px " + textFont
+				} else if (possibleCodeLower == "i") {
+					lineContext.font = "italic " + textSize + "px " + textFont
+				} else if (possibleCodeLower == "/i") {
+					lineContext.font = textSize + "px " + textFont
+				} else if (possibleCodeLower == "center") {
+					textAlign = "center"
+				} else if (possibleCodeLower == "right") {
+					textAlign = "right"
+				} else if (possibleCodeLower == "left") {
+					textAlign = "left"
+				} else if (possibleCodeLower.includes("up")) {
+					currentLineY -= (parseInt(possibleCodeLower.slice(2, possibleCodeLower.length)))
+				} else if (possibleCodeLower.includes("down")) {
+					currentLineY += (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length)))
+				} else if (possibleCodeLower.includes("left")) {
+					currentLineX -= (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length)))
+				} else if (possibleCodeLower.includes("right")) {
+					currentLineX += (parseInt(possibleCodeLower.slice(5, possibleCodeLower.length)))
+				} else if (possibleCodeLower == "artistbrush") {
+					var artistBrushWidth = textSize * 1.2
+					lineContext.drawImage(manaSymbolImageList[62], currentLineX, currentLineY - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21)
+					currentLineX += artistBrushWidth * 1.1
+				} else if (possibleCodeLower.includes("font")) {
+					textFont = possibleCodeLower.slice(5, possibleCodeLower.length)
+					lineContext.font = textSize + "px " + textFont
+				} else if (manaSymbolCodeList.includes(possibleCodeLower)) {
+					//THIS HAS TO BE THE LAST ONE
+					var manaSymbolDiameter = textSize * 0.77
+					lineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower)], currentLineX, currentLineY - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
+					currentLineX += manaSymbolDiameter * 1.02
+				} else {
+					wordToWrite = splitString[i]
+				}
+			}
+			if (wordToWrite != "" || finishLine == true) {
+				//We're left with a word. Write it.
+				var currentWordWidth = lineContext.measureText(wordToWrite).width
+				if (i == splitString.length - 1) {
+					//forces the last artificially added space to be too wide, making sure the last line is drawn in.
+					currentWordWidth = textWidth + 1
+				}
+				if (currentLineX + currentWordWidth > textWidth || finishLine) {
+					//Finish the line
+					if (oneLine && i != splitString.length - 1) {
+						lineContext.clearRect(0, 0, cardWidth, cardHeight)
+						this.writeText(text, textX, textY, textWidth, textHeight, textFont, inputTextSize - 1, textColor, other)
+						return
+					}
+					var alignAdjust = 0
+					if (textAlign == "center" || textAlign == "right") {
+						if (lastWordAdded == " ") {
+							currentLineX -= textContext.measureText("   ").width
+						}
+						if (textAlign == "center") {
+							alignAdjust = textWidth / 2 - currentLineX  / 2 + textX
+						} else if (textAlign == "right") {
+							alignAdjust = textWidth + textX - currentLineX
+						}
+					} else {
+						alignAdjust += textX
+					}
+					paragraphContext.drawImage(lineCanvas, 0 + alignAdjust, 0, cardWidth, cardHeight)
+					lineContext.clearRect(0, 0, cardWidth, cardHeight)
+					currentLineY += textSize * lineSpace
+					currentLineX = 0
+					if (wordToWrite == " ") {
+						currentWordWidth = 0
+					}
+				}
+				//Whether or not the current line is finished, write to it.
+				if (shadow > 0) {
+					lineContext.fillText(wordToWrite, currentLineX + shadow, currentLineY + shadow)
+				}
+				if (outline != undefined) {
+					lineContext.strokeText(wordToWrite, currentLineX, currentLineY)
+				}
+				lineContext.fillText(wordToWrite, currentLineX, currentLineY)
+				currentLineX += currentWordWidth
+				lastWordAdded = wordToWrite
+			}
+		}
+	}
+	verticalAdjust = 0
+	if (verticalAlign) {
+		verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2
+	}
+	this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight)
+	return "done"
+}
+//Loads up all the mana symbol images
+function loadManaSymbolImages() {
+	for (var i = 0; i < manaSymbolCodeList.length; i++) {
+		manaSymbolImageList[i] = new Image()
+		manaSymbolImageList[i].src = "data/images/manaSymbols/" + i + ".png"
+	}
+}
+//Draws a mana cost
+CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbolsY, diameter = 50, distance = -50, direction = "horizontal") {
+	var splitManaCost = text.replace(/{/g, " ").replace(/}/g, " ").split(" ")
+	var currentSymbolIndex = 0
+	var currentX = symbolsX
+	var currentY = symbolsY
+	for (var i = splitManaCost.length - 1; i >= 0; i --) {
+		if (manaSymbolCodeList.includes(splitManaCost[i])) {
+			if (Array.isArray(direction) && i < direction.length) {
+				currentX = direction[i][0]
+				currentY = direction[i][1]
+			}
+			this.fillStyle = "black"
+			this.beginPath()
+			this.arc(currentX + diameter / 2.1, currentY + diameter / 1.8, diameter / 2, 0, 2 * Math.PI, false)
+			this.fill()
+			this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(splitManaCost[i])], currentX, currentY, diameter, diameter)
+			if (direction == "horizontal") {
+				currentX += distance
+			} else if (direction == "vertical") {
+				currentY += distance
+			}
+		}
+	}
+}
+//Changes the textarea content to whichever text is currently selected for editing
+var whichTextIndex = 0
+function changeWhichText() {
+	for (var i = 0; i < version.textList.length; i ++) {
+		if (version.textList[i][0] == document.getElementById("inputWhichText").value) {
+			whichTextIndex = i
+		}
+	}
+	document.getElementById("inputText").value = version.textList[whichTextIndex][1]
+}
+//Removes all the white pixels in an image
+var whiteThreshold = 240
+function whiteToTransparent(targetImage, source = targetImage.src) {
+    //Create image, size canvas, draw image
+    var imgTempTarget = new Image()
+    imgTempTarget.crossOrigin = "anonymous"
+    imgTempTarget.src = source
+    imgTempTarget.onload = function() {
+    	if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
+    		transparentCanvas.width = imgTempTarget.width
+    		transparentCanvas.height = imgTempTarget.height
+    		transparentContext.drawImage(imgTempTarget, 0, 0)
+            //declare variables
+            var width = transparentCanvas.width
+            var height = transparentCanvas.height
+            var imageData = transparentContext.getImageData(0, 0, transparentCanvas.width, transparentCanvas.height)
+            var x, y, index
+            //Go through every pixel and
+            for (y = 0; y < height; y++) {
+            	for (x = 0; x < width; x++) {
+                    index = (y * width + x) * 4
+                    if (imageData.data[index] >= whiteThreshold && imageData.data[index + 1] >= whiteThreshold && imageData.data[index + 2] >= whiteThreshold) {
+                        imageData.data[index + 3] = 0
+                    }
+                }
+            }
+            transparentContext.clearRect(0, 0, width, height)
+            transparentContext.putImageData(imageData, 0, 0)
+            targetImage.src = transparentCanvas.toDataURL()
+            autocrop(targetImage)
+        }
+    }
+}
+//Removes all the whitespace in an image
+function autocrop(targetImage, source = targetImage.src) {
+    //Create image, size canvas, draw image
+    var imgTempTarget = new Image()
+    imgTempTarget.crossOrigin = "anonymous"
+    imgTempTarget.src = source
+    imgTempTarget.onload = function() {
+        if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
+            cropCanvas.width = imgTempTarget.width
+            cropCanvas.height = imgTempTarget.height
+            cropContext.drawImage(imgTempTarget, 0, 0)
+            //declare variables
+            var width = cropCanvas.width
+            var height = cropCanvas.height
+            var pix = {x:[], y:[]}
+            var imageData = cropContext.getImageData(0, 0, cropCanvas.width, cropCanvas.height)
+            var x, y, index
+            if (imageData.data.length > 4) {
+            	//Go through every pixel and
+	            for (y = 0; y < height; y++) {
+	                for (x = 0; x < width; x++) {
+	                    //(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given
+	                    index = (y * width + x) * 4 + 3
+	                    if (imageData.data[index] > 0) {
+	                        //pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels
+	                        pix.x.push(x)
+	                        pix.y.push(y)
+	                    }
+	                }
+	            }
+	            //sorts the arrays numerically
+	            pix.x.sort(function(a,b){return a-b})
+	            pix.y.sort(function(a,b){return a-b})
+	            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
+	            targetImage.src = cropCanvas.toDataURL()
+            }
+        }
+    }
+}
+//The next several functions are all about loading images!
+function uploadImage(event, destination) {
 	var input = event.target
 	var reader = new FileReader()
 	reader.onload = function() {
 		var dataURL = reader.result
 		destination.src = dataURL
-		destination.cropped = false
-		if (destination == imgWatermark) {
-			imgWatermark.whiteToTransparent = false
-		}
 	}
 	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('","artist_ids":'))
+			}
+			inputCardArtNameNumber(1)
+		} else if (this.readyState == 4 && this.status == 404) {
+			alert("Sorry, but we can't seem to find any art for '" + cardArtNameInput + "'")
+		}
+	}
+	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) {
+	cardArt.src = cardArtUrlList[cardArtNameNumberInput - 1]
+	document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
+	updateBottomInfoCanvas()
+}
+//Downloads the image!
+function downloadCardImage(linkElement) {
+	if (document.getElementById("inputInfoArtist").value.replace(/ /g, "") != "") {
+		linkElement.download = version.textList[0][1].toLowerCase().replace(/ /g, "_") + ".png"
+		if (linkElement.download == ".png") {
+			linkElement.download = "card.png"
+		}
+	} else {
+		event.preventDefault()
+		alert("You must properly credit an artist before downloading")
+	}
+	var cardImageData = cardCanvas.toDataURL()
+	if (cardImageData == undefined) {
+		alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
+	}
+	linkElement.href = cardImageData
+}
+//Toggles the visibility of tooltips
+function toggleTooltips(revealed = true) {
+	var tooltipList = document.getElementsByClassName("tooltiptext")
+	for (var i = 0; i < tooltipList.length; i ++) {
+		if (revealed) {
+			tooltipList[i].classList.remove("hidden")
+		} else {
+			tooltipList[i].classList.add("hidden")
+		}
+	}
+	setCookie("tooltipsToggled", revealed + "")
+}
 
-//closes alerts
-var close = document.getElementsByClassName("closebtn")
-for (var i = 0; i < close.length; i++) {
-	close[i].onclick = function() {
-		parentDiv = this.parentElement
-		parentDiv.style.opacity = "0"
-		setTimeout(function() {parentDiv.style.display = "none"}, 250)
+
+
+
+
+//DELETE: (for testing purposes only)
+function testFunction() {
+	loadScript("data/scripts/setCodeList.js")
+}
+
+
+
+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);
+  	var expires = "expires=" + tempDate.toUTCString();
+  	document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";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("tooltipsToggled") == "false") {
+		toggleTooltips(false)
+		document.getElementById("tooltipToggler").checked = false
 	}
 }
 
-function createAlert(type, message) {
-	var newAlert = document.createElement("DIV")
-	newAlert.innerHTML = message
-	newAlert.classList.add("alert", type)
-	document.getElementById("alertMenu").appendChild(newAlert)
-	newAlert.onclick = function() {
-		this.style.opacity = "0"
-		setTimeout(function() {newAlert.classList.add("hidden")}, 250)
-	}
-}
 
-//things to run at the end:
-scrollFunction()
+
+/*To do list:
+watermarks
+
+
+
+
+
+possibly border color?
+*/

data/site/other/life/life.js

@@ -0,0 +1,332 @@
+//============================================//
+//       Card Conjurer, by Kyle Burton        //
+//============================================//
+//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
+	}
+	if (isFullscreen) {
+		rowHeight = screen.height / rowCount - 2
+	} else {
+		rowHeight = window.innerHeight / rowCount - 2
+	}
+	//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) {
+	var playerBoxBounds = targetPlayerBox.getBoundingClientRect()
+	var tappedPlayerBox = playerList[targetPlayerBox.customVarID - 1]
+	var lifeAdjust = 0
+	if (tappedPlayerBox.rotation == 0 || tappedPlayerBox.rotation == 180) {
+		if (touchX[touchX.length - 1] > playerBoxBounds.width / 2 + playerBoxBounds.x) {
+			lifeAdjust = 1
+		} else {
+			lifeAdjust = -1
+		}
+	} else {
+		if (touchY[touchY.length - 1] > playerBoxBounds.height / 2 + playerBoxBounds.y) {
+			lifeAdjust = 1
+		} else {
+			lifeAdjust = -1
+		}
+	}
+	if (tappedPlayerBox.rotation == 180 || tappedPlayerBox.rotation == 270) {
+		lifeAdjust *= -1
+	}
+	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

data/site/styles.css

@@ -35,309 +35,228 @@
 	font-family: goudymedieval;
 	src: url("../fonts/goudy-medieval.ttf");
 }
-
 :root {
-	/*Color Palette*/
-	/*Regular*/
-	--color-background: #00000077;
-	--color-background-darker: #000000aa;
-	--color-primary: #073c00;
-	--color-select: #0b6b00;
-}
-
-/*Page-wide styling*/
-* {
-	font-family: belerenb;
-	font-size: 16pt; /*Master font size*/
-	user-select: none;
-	color: #eee;
-}
-html {
-	background-color: #333;
-}
-body {
-	margin: 0;
-}
-
-/*Grid styling*/
-.grid {
-	display: grid;
-}
-.mainGrid > div {
-	border-style: solid;
-	border-color: var(--color-primary);
-	border-width: 1px 1px 0px 1px;
-	width: calc(100% - 2px);
-}
-.mainGrid > div:nth-child(odd) {
-	background: var(--color-background);
-}
-.mainGrid > div:nth-child(even) {
-	background: var(--color-background-darker);
-}
-.selectionGrid {
-	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
-	text-align: center;
-}
-.mainGrid > div.canvasContainer {
-	padding: 0;
-	text-align: center;
-}
-#canvas {
-	display: block;
-	max-width:750px;
-	width: 100%;
-	height: auto;
-	margin: 0px auto;
-}
-
-/*Card manipulation menu grid*/
-.selectionGrid > div {
-	font-size: 1.1em;
-	font-family: belerenbsc;
-	cursor: pointer;
-	padding: 0.1em;
-	border: 0.05em solid var(--color-primary);
-	background-color: var(--color-background);
-	-webkit-transition: 0.3333s;
-  	transition: 0.3333s;
-}
-.selectionGrid > div:hover {
-	border: 0.15em solid var(--color-select);
-	padding: 0px;
-}
-.padded {
-	padding: 1em;
-}
-.paddedVertical {
-	padding: 1em 0px;
-}
-.cmm, .extras {
-	display: none;
-}
-.shown {
-	display: block;
-}
-.sampleCard {
-	width: 100%;
-}
-
-/*Inputs and more*/
-/*dropdown*/
-.dropdown {
-	position: relative;
-	display: inline-block;
-	width: 100%;
-}
-.dropdown select {
-	padding-left: 0.25em;
-	width: inherit;
-	cursor: pointer;
-	-moz-appearance: none;
-	-webkit-appearance:none;
-	appearance: none;
-}
-.dropdown select option::hover {
-	/*nothing for now :)*/
-}
-.dropdown::after {
-	content: "\25BC";
-	font-size: 0.6em;
-	position: absolute;
-	pointer-events: none;
-	right: 0.6em;
-	top: 0.5em;
-}
-/*checkbox*/
-.checkbox {
-	height: 1em;
-	margin: 0.1em 0px 0.3em 0px;
-	position: relative;
-}
-.checkbox label {
-	display: inline-block;
-	width: calc(1.2em - 6px);
-	height: calc(1.2em - 6px);
-	border: 3px solid var(--color-select);
-	border-radius: 0.25em;
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	cursor: pointer;
-	-webkit-transition: 0.5s;
-  	transition: 0.5s;
-}
-.checkbox input:checked ~ label {
-	background: var(--color-select);
-	border: 3px solid var(--color-primary);
-}
-.checkbox > input {
-	opacity: 0;
-}
-.checkbox div {
-	white-space: pre;
-	position: relative;
-	top: -0.1em;
-	left: 1.3em;
-}
-/*other inputs*/
-input[type="text"], input[type="number"], textarea, input[type="file"] {
-	width: 100%;
-	padding-left: 0.25em;
-}
-/*color selector*/
-input[type="color"] {
-	padding: 0px;
-}
-.input {
-	background: var(--color-primary);
-	border-radius: 0.25em;
-	border: 1px solid var(--color-select);
-}
-
-/*Hyperlinks*/
-a:link, a:visited {
-	color: #fff;
-}
-a:hover, a:active {
-	color: #999;
-}
-a {
-	-webkit-transition: 0.3333s;
-  	transition: 0.3333s;
-}
-
-/*Desktop*/
-@media only screen and (min-width: 750px) {
-	html {
-		background: url("images/background.png") no-repeat center center fixed;
-	  	-webkit-background-size: cover;
-	  	-moz-background-size: cover;
-	 	-o-background-size: cover;
-	 	background-size: cover;
-	}
-	* {
-		font-size: 20pt; /*Master font size*/
-	}
-	header {
-		top: 0;
-	}
-	footer {
-		bottom: 0;
-	}
-	header, footer {
-		position: fixed;
-		width: 100%;
-		z-index: 1000;
-	}
-	footer > #alertMenu {
-		position: static;
-	}
-	#header {
-		max-height: 100px;
-		width: auto;
-	}
-	.mainGrid {
-		margin-top: 110px;
-		margin-bottom: 1.1em;
-	}
-}
-@media only screen and (min-width: 1175px) {
-	.mainGrid {
-		grid-template-columns: 750px auto;
-	}
-	.mainGrid > div:not(.canvasContainer):not(.cmmArea) {
-		grid-column: 1 / span 2;
-	}
-	/*.sampleGrid {
-		grid-column: 1 / span 2;
-	}*/
-}
-@media only screen and (orientation: landscape) {
-	.sampleCard {
-		width: 32.8%;
-	}
-}
-
-
-/*Header and Footer*/
-#header {
-	width: auto;
-}
-header, .footer {
-	text-align: center;
-	background-color: black;
-	padding: 5px 0px;
-}
-footer * {
-	font-size: inherit;
-	padding: 0.25em
+	--shifting-color-1: rgb(128, 237, 18);
+	--shifting-color-1-light: rgb(255, 255, 168);
+	--light-color: #eee;
+	--dark-color: #333;
 }
 footer {
-	font-size: 0.8em;
+	background-color: var(--dark-color);
+	padding: 2.5em;
+	font: 1.3em gothammedium;
+	color: var(--light-color);
 }
-
-/*symbol grid*/
-.manaSymbol > img {
-	position: relative;
+body {
+	margin: 0px;
+	background-image: url(images/lowpoly.png);
+	background-attachment: fixed;
+	background-size: cover;
+}
+html {
+	background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
+	background-attachment: fixed;
+	overflow-x: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	font-size: 8pt;
+}
+canvas {
+	width: calc(100%);
+	height: auto;
+	max-width: 750px;
+	max-height: 1050px;
+}
+.canvasContainer {
+	text-align: center;
+}
+.mainGrid {
+	padding: 0.3em;
+	display: grid;
+	grid-gap: 1.5em;
+	grid-template-columns: auto;
+	font: 1.6em mplantin;
+}
+.imageGrid {
+	display: grid;
+	grid-template-columns: auto 9em;
+	min-height: 12.5em;
+}
+.imgPreview {
+	width: 100%;
+}
+.bar {
+	background-image: url(../images/manaSymbols/63.png);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 100% 2px;
+	width: 100%;
 	height: 1em;
 }
-.symbolGrid {
-	grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
+.cardMenu > div > div:nth-child(1) {
+	/*border: 1px solid blue;*/
 	text-align: center;
+	font: 1.5em belerenbsc;
 }
-.symbolGrid > div {
-	border: 0.1em solid var(--color-background);
-	border-radius: 1em;
-	background-color: var(--color-primary);
+.twoGrid {
+	display: grid;
+	grid-template-columns: 50% auto;
 }
-
-/*Sitewide text (bottom of the page)*/
-.miniTitle {
-	font-family: belerenbsc;
-	text-align: center;
-	font-size: 1.2em;
-	padding-bottom: 0.125em;
+.input, .textarea, .button, .select {
+	font: 1em mplantin;
+	background-color: var(--light-color);
+	border: 1px solid #aaae;
+	border-radius: 0.2em;
+	padding: 0px 0.2em;
+	outline: none;
 }
-.paragraph {
-	padding-bottom: 0.25em;
-	text-indent: 2em;
+.textarea {
+	min-height: 6em;
+	max-height: 18em;
+	resize: vertical;
 }
-/*Donation buttons!*/
-.donateGrid {
-	grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
+.select {
+    background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%;
+    background-size: 1em 1em;
+    -webkit-appearance: none;
 }
-.donateGrid.grid > div {
-	font-size: 1.7em;
+.autoGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+	grid-auto-rows: min-content;
 }
-.donateGrid > div > img {
+.input.file {
+	padding: 0px;
+	height: 1.26em;
+}
+.tooltip {
 	position: relative;
-	top: 0.25em;
-	left: 0.5em;
-	height: 1.7em;
 }
-
-
-
-#alertMenu {
-	position: fixed;
-	bottom: 0;
+.tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: var(--dark-color);
+  color: var(--light-color);
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px;
+  top: calc(100% + 5px);
+  left: 0px;
+  max-width: calc(100% - 10px);
+  width: auto;
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.5s;
 }
-.alert {
-  	opacity: 1;
-  	padding: 0.25em;
-  	cursor: pointer;
-  	transition: 0.25s;
-  	border: 0px solid var(--color-select);
+.tooltip .tooltiptext::after {
+  content: " ";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent var(--dark-color) transparent;
 }
-.alert:hover {
-	border-width: 0.15em;
-	padding: 0.1em;
+.tooltip .tooltiptext:hover {
+	/*visibility: hidden;*/
+	opacity: 0;
+}
+div.tooltip > * {
+	width: 100%;
+}
+a {
+	color: black;
+}
+a:hover {
+	color: var(--dark-color);
+}
+footer a {
+	color: white;
+}
+footer a:hover {
+	color: var(--shifting-color-1-light);
 }
-.alert.info {background-color: var(--color-primary);}
-.alert.conflict {background-color: #b37d07;}
-.alert.warning {background-color: #3b0000;}
-
 .hidden {
 	display: none;
+}
+.footerGrid {
+	display: grid;
+	grid-template-columns: auto;
+	grid-gap: 2em;
+}
+.layer {
+	padding: 2em 2em;
+	color: black;
+	font-size: 2em;
+	text-align: center;
+}
+.layer:nth-child(even) {
+	background-color: var(--light-color);
+	background-image: url(images/layerBackground.png);
+	background-position: center;
+	background-repeat: no-repeat;
+}
+.title {
+	font: 1.5em belerenbsc;
+}
+.pageTitle {
+	font: 5em belerenbsc;
+	text-align: center;
+	padding-top: 0.3em;
+}
+.paragraph {
+	font: 1em mplantin;
+	text-align: left;
+}
+.indent {
+	text-indent: 2em;
+}
+.leftMargin {
+	margin-left: 2em;
+}
+
+/*Controls the area taken by the canvas*/
+@media screen and (min-width: 888pt) {
+	/*Makes room for the canvas and controls to be side by side*/
+	.mainGrid {
+		padding: 1.5em;
+		grid-template-columns: calc(750px + 2px) auto;
+	}
+}
+@media screen and (min-width: calc(750px + 2em)) {
+	/*The canvas can be full size and doesn't have to scale anymore*/
+	canvas {
+		width: 750px;
+		height: 1050px;
+	}
+}
+/*The screen is big enough (larger than phone, likely) to use a larger font*/
+@media screen and (min-width: 263pt) {
+	html {
+		font-size: 10pt;
+	}
+}
+/*These control tooltips for mobile devices vs. desktops/laptops*/
+@media screen and (min-width: 1024px) {
+	.tooltip:hover .tooltiptext {
+	  	visibility: visible;
+	  	opacity: 1;
+	}
+}
+@media screen and (max-width: 1023px) {
+	.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
+	  	visibility: visible;
+	  	opacity: 1;
+	}
+}
+/*The footer can now fit horizontally!*/
+@media screen and (min-width: 375pt) {
+	.footerGrid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
+		grid-gap: 1em;
+	}
 }