";
+ var tempElement = document.createElement("div");
+ tempElement.id = "frameIndex" + frameList.indexOf(this);
+ tempElement.classList.add("frameOption");
+ tempElement.onclick = frameOptionClicked;
+ tempElement.innerHTML = ""
+ return tempElement;
}
}
@@ -153,6 +162,7 @@ function frameOptionClicked(event) {
}
document.getElementsByClassName("maskOption")[0].classList.add("maskOptionSelected");
selectedMask = document.getElementsByClassName("maskOption")[0].id.replace("maskName", "");
+ document.getElementById("selectedFramePreview").innerHTML = "Selected: " + frameList[selectedFrame].displayName + " frame with a " + selectedMask + " mask";
}
}
function maskOptionClicked(event) {
@@ -167,11 +177,13 @@ function maskOptionClicked(event) {
}
clickedElement.classList.add("maskOptionSelected");
selectedMask = clickedElement.id.replace("maskName", "");
+ document.getElementById("selectedFramePreview").innerHTML = "Selected: " + frameList[selectedFrame].displayName + " frame with a " + selectedMask + " mask";
}
function addFrameToCardMaster(right = "") {
//Takes the stored selectedFrame and selectedMask to add the frame w/ mask to the card master!
if (selectedFrame > -1 && selectedMask != "") {
- cardMaster.innerHTML = frameList[selectedFrame].cardMasterElement(selectedMask + right) + cardMaster.innerHTML;
+ //In order to both keep input values and insert new frames before old ones, they must be added like so:
+ cardMaster.insertBefore(frameList[selectedFrame].cardMasterElement(selectedMask + right), cardMaster.children[0]);
cardMasterUpdated();
}
}
@@ -183,10 +195,11 @@ function deleteCardMasterElement(event) {
/* Card Master Cool Stuff! */
function cardMasterUpdated() {
- console.log("The card master is updating!");
+ // console.log("The card master is updating!");
frameFinalContext.clearRect(0, 0, cardWidth, cardHeight);
for (var i = cardMaster.children.length - 1; i >= 0; i--) {
var targetChild = cardMaster.children[i];
+ var opacityToDraw = targetChild.children[0].value / 100;
var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))];
var maskName = targetChild.innerHTML.slice(targetChild.innerHTML.indexOf("(") + 1, targetChild.innerHTML.indexOf(")"));
var rightHalf = false;
@@ -200,13 +213,18 @@ function cardMasterUpdated() {
frameMaskContext.globalCompositeOperation = "source-over";
frameMaskContext.clearRect(0, 0, cardWidth, cardHeight);
frameMaskContext.drawImage(maskList[maskImageIndex], 0, 0, cardWidth, cardHeight);
+ frameMaskContext.globalCompositeOperation = "source-in";
if (rightHalf) {
- frameMaskContext.globalCompositeOperation = "source-in"
frameMaskContext.drawImage(maskList[0], 0, 0, cardWidth, cardHeight)
}
- frameMaskContext.globalCompositeOperation = "source-in";
frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]);
+ if (targetChild.children[1].checked == true) {
+ frameFinalContext.globalCompositeOperation = "destination-out";
+ }
+ frameFinalContext.globalAlpha = opacityToDraw;
frameFinalContext.drawImage(frameMaskCanvas, 0, 0, cardWidth, cardHeight);
+ frameFinalContext.globalAlpha = 1;
+ frameFinalContext.globalCompositeOperation = "source-over";
}
updateBottomInfoCanvas();
}
@@ -214,15 +232,9 @@ function cardMasterUpdated() {
/* Overall card stuff */
function cardImageUpdated() {
- // //clear it
-// cardContext.fillStyle = "black"
-// cardContext.fillRect(0, 0, cardWidth, cardHeight)
-// //draw the art, frame, text, mana symbols, set symbol, watermark...
-
-
-// //clear the corners
- //Clear the canvas
- cardFinalContext.clearRect(0, 0, cardWidth, cardHeight);
+ //Clear the canvases
+ cardFinalContext.fillStyle = "black";
+ cardFinalContext.fillRect(0, 0, cardWidth, cardHeight);
displayContext.clearRect(0, 0, cardWidth, cardHeight);
//Draw the art, frame, text, bottom info, mana cost, watermark, and set symbol
cardFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
@@ -284,7 +296,11 @@ function changeWhichText() {
}
function updateText() {
version.textList[whichTextIndex][1] = document.getElementById("inputText").value
- textContext.clearRect(0, 0, cardWidth, cardHeight)
+ clearTimeout(updateTextDelay)
+ updateTextDelay = setTimeout(rewriteText, 250);
+}
+function rewriteText() {
+ textContext.clearRect(0, 0, cardWidth, cardHeight)
for (var i = 0; i < version.textList.length; i ++) {
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])
}
@@ -338,208 +354,15 @@ function loadScript(scriptPath){
+/*
+ Directly taken (with small edits) from previous version.
+ sort these!!!
+*/
-
-// //Define some variables
-// var cardWidth = 750, cardHeight = 1050
-// var version = {}
-
-// var initiated = false
-// var suggestedColor = "White"
-
-// //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()
-
-
-// //============================================//
-// // Functions //
-// //============================================//
-// var nameArray = []
-// //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 != 0) {
-// nameArray[i - 1] = versionArray[i - 1] + colorArray[i - 1] + typeArray[i - 1]
-// }
-// if (i == rawText.length - 1) {
-// init()
-// }
-// }
-// }
-// }
-// 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)
-// initiated = true
-// textCodeTutorial()
-// //Checks cookies!
-// setTimeout(checkCookies, 100)
-// }
-// //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 {
-// addToCardMaster(index, target)
-// }
-// }
-// //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)
-// }
-// }
-// //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 (document.getElementById("checkboxSecondary").checked) {
-// target += "Secondary"
-// }
-// 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("noneMaskSecondary")]].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.globalAlpha = cardMasterOpacityValue[version.typeOrder.indexOf(cardMasterTypes[cardMasterIndex].replace("Secondary", ""))] / 100
-// this.drawImage(maskCanvas, 0, 0, cardWidth, cardHeight)
-// this.globalAlpha = 1
-// if (cardMasterTypes[cardMasterIndex].includes("RareStamp")) {
-// this.drawImage(window[nameArray[nameArray.indexOf("noneMaskStamp")]].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
-// // 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()
-// }
-// var currentlyWritingText = false
-// //Rewrites all the text!
-// function updateText() {
-// if (!currentlyWritingText) {
-// currentlyWritingText = true
-// setTimeout(updateTextInnerShell, 100)
-// }
-// }
-// function updateTextInnerShell() {
-// 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 updateSetSymbol() {
setSymbolContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -603,131 +426,6 @@ function updateWatermark() {
}
cardImageUpdated()
}
-// //Does the bottom info function! This can be different depending on the version.
-
-// function updateCardCanvas() {
-// if (!initiated) {
-// return
-// }
-// //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("noneMaskCorners")]].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)
-// currentlyWritingText = false
-// }
-// //Loads an image in from user input
-// function userLoadImage() {
-// loadImage(getSelectedTab("tabSelectColor"), "preview")
-// }
-// //Enters an image from user input
-// function userEnterImage() {
-// loadImage(getSelectedTab("tabSelectColor"), getSelectedTab("frameType"))
-// }
-// //Removes an image from user input
-// function userRemoveImage() {
-// var targetToRemove = getSelectedTab("frameType")
-// if (document.getElementById("checkboxSecondary").checked) {
-// targetToRemove += "Secondary"
-// }
-// if (cardMasterTypes.includes(targetToRemove) && targetToRemove != "Full") {
-// cardMasterImages.splice(cardMasterTypes.indexOf(targetToRemove), 1)
-// cardMasterTypes.splice(cardMasterTypes.indexOf(targetToRemove), 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)
-
-// //Changes the version
-// function changeVersionTo(versionToChangeTo) {
-// loadScript("data/versions/" + versionToChangeTo + "Version.js")
-// }
-// function finishChangingVersion() {
-// hideShowFrameTypes()
-// for (var i = 0; i < version.textList.length; i ++) {
-// document.getElementById("inputWhichTextTabs").innerHTML += "
" + version.textList[i][0] + "
"
-// if (i == 0) {
-// document.getElementsByClassName("tabButton text")[0].classList.add("activeTab")
-// }
-// }
-// updateText()
-// updateBottomInfoCanvas()
-// updateSetSymbolCanvas()
-// }
-// function hideShowFrameTypes() {
-// document.getElementById("frameType").innerHTML = ""
-// document.getElementById("inputImageTypeOpacity").innerHTML = ""
-// for (var i = 0; i < version.typeOrder.length; i ++) {
-// if (!version.typeOrder[i].includes("Secondary") && (!version.typesAdvanced.includes(version.typeOrder[i]) || document.getElementById("checkboxAdvanced").checked)) {
-// tabSelectAddOption("frameType", version.typeOrder[i], version.typeOrder[i])
-// document.getElementById("inputImageTypeOpacity").innerHTML += ""
-// // cardMasterOpacity[cardMasterOpacity.length] = version.typeOrder[i]
-// cardMasterOpacityValue[cardMasterOpacityValue.length] = 100
-// }
-// }
-// document.getElementsByClassName("frameType")[0].className += " activeTab"
-// hideShowColors(true)
-// loadOpacityValue()
-// }
-// //Hides and shows the options in inputImageColor to match the selected type
-// function hideShowColors(enter = false) {
-// document.getElementById("tabSelectColor").innerHTML = ""
-// var activeTab = false
-// for (var i = 0; i < versionArray.length; i ++) {
-// if (versionArray[i] == version.currentVersion && (typeArray[i] == getSelectedTab("frameType").replace("Secondary", "") || (typeArray[i] == "Full" && version.typeNotFull.includes(getSelectedTab("frameType")) == false)) && colorArray[i] != "Mask" && (document.getElementById("checkboxAdvanced").checked || advancedArray[i] == "FALSE")) {
-// tabSelectAddOption("tabSelectColor", displayNameArray[i], i)
-// if (displayNameArray[i] == suggestedColor) {
-// document.getElementsByClassName("tabSelectColor")[document.getElementsByClassName("tabSelectColor").length - 1].className += " activeTab"
-// activeTab = true
-// }
-// }
-// }
-// if (!activeTab && document.getElementsByClassName("tabSelectColor").length > 0) {
-// document.getElementsByClassName("tabSelectColor")[0].className += " activeTab"
-// }
-// if (enter) {
-// userEnterImage()
-// }
-// userLoadImage()
-// }
-// //Loads the opacity value
-// function loadOpacityValue() {
-// document.getElementById("inputOpacityValue").value = cardMasterOpacityValue[version.typeOrder.indexOf(document.getElementById("inputImageTypeOpacity").value)] || 100
-// }
-// function opacityValueUpdated() {
-// cardMasterOpacityValue[version.typeOrder.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="") {
@@ -896,17 +594,8 @@ CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbo
}
}
}
-// //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
+
+//Removes all the white pixels in an image
var whiteThreshold = 250
function whiteToTransparent(targetImage, source = targetImage.src) {
//Create image, size canvas, draw image
@@ -1010,7 +699,8 @@ function inputCardArtName(cardArtNameInput) {
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":'))
+ cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_id'));
+ // cardArtArtistList[i] = cardArtArtistList[i].slice(0, cardArtArtistList[i].indexOf('","artist_id'))
}
inputCardArtNameNumber(1)
} else if (this.readyState == 4 && this.status == 404) {
@@ -1022,8 +712,8 @@ function inputCardArtName(cardArtNameInput) {
}
function inputCardArtNameNumber(cardArtNameNumberInput) {
cardArt.src = cardArtUrlList[cardArtNameNumberInput - 1]
- // document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
- // updateBottomInfoCanvas()
+ document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
+ updateBottomInfoCanvas()
}
//Downloads the image!
function downloadCardImage(linkElement) {
@@ -1036,36 +726,16 @@ function downloadCardImage(linkElement) {
event.preventDefault()
alert("You must properly credit an artist before downloading")
}
- var cardImageData = cardCanvas.toDataURL()
+ var cardImageData = cardFinalCanvas.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 + "")
-// }
-
-// //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);
@@ -1110,74 +780,31 @@ function downloadCardImage(linkElement) {
-// function tabSelect(event, selectSection) {
-// var tabSelectButtons = document.getElementsByClassName(selectSection)
-// for (var i = 0; i < tabSelectButtons.length; i++) {
-// tabSelectButtons[i].className = tabSelectButtons[i].className.replace(" activeTab", "")
-// }
-// event.target.className += " activeTab"
-// if (selectSection == "frameType") {
-// hideShowColors()
-// } else if (selectSection == "tabSelectColor") {
-// userLoadImage()
-// suggestedColor = displayNameArray[getSelectedTab("tabSelectColor")]
-// }
-// }
-// function getSelectedTab(selectSection) {
-// var tabSelectButtons = document.getElementsByClassName(selectSection)
-// for (var i = 0; i < tabSelectButtons.length; i++) {
-// if (tabSelectButtons[i].className.includes("activeTab")) {
-// return tabSelectButtons[i].id
-// }
-// }
-// }
-// function tabSelectAddOption(tabSection, displayName, tabValue) {
-// document.getElementById(tabSection).innerHTML += "
" + displayName + "
"
-// }
-
-
-// function textCodeTutorial() {
-// var textCodeTutorialString = `line-skips to the next line
-// _linenospace-skips to the next line, but doesn't add spacing
-// _bar-skips to the next line, and adds the flavor text bar
-// _flavor-skips to the next line, adds the flavor text bar, and italicizes the following text
-// _i-italicizes the following text
-// _/i-removes italics from the following text
-// _fontsize#-changes the font size to # pixels
-// _fontcolor#-changes the color to #. Can use color names, or hex codes
-// _left-justifies text to the left
-// _center-justifies text to the center
-// _right-justifies text to the right
-// _up#-moves the following text # pixels up
-// _down#-moves the following text # pixels down
-// _left#-moves the following text # pixels left
-// _right#-moves the following text # pixels right
-// _SYMBOL-creates a mana symbol, where SYMBOL can be: w, u, b, r, g, 1, 2, 3, etc...`
-// var textCodeTutorialArray = textCodeTutorialString.split("_")
-// for (var i = 0; i < textCodeTutorialArray.length; i ++) {
-// document.getElementById("textCodeTutorial").innerHTML += "
{" + textCodeTutorialArray[i].split("-")[0] + "}
" + textCodeTutorialArray[i].split("-")[1] + "
"
-// }
-// }
-
-// function advancedBordersClicked() {
-// hideShowFrameTypes()
-// setCookie("advancedBorders", document.getElementById("checkboxAdvanced").checked + "")
-// }
-
-
+function textCodeTutorial() {
+ var textCodeTutorialString = `line-skips to the next line
+ _linenospace-skips to the next line, but doesn't add spacing
+ _bar-skips to the next line, and adds the flavor text bar
+ _flavor-skips to the next line, adds the flavor text bar, and italicizes the following text
+ _i-italicizes the following text
+ _/i-removes italics from the following text
+ _fontsize#-changes the font size to # pixels
+ _fontcolor#-changes the color to #. Can use color names, or hex codes
+ _left-justifies text to the left
+ _center-justifies text to the center
+ _right-justifies text to the right
+ _up#-moves the following text # pixels up
+ _down#-moves the following text # pixels down
+ _left#-moves the following text # pixels left
+ _right#-moves the following text # pixels right
+ _SYMBOL-creates a mana symbol, where SYMBOL can be: w, u, b, r, g, 1, 2, 3, etc...`
+ var textCodeTutorialArray = textCodeTutorialString.split("_")
+ for (var i = 0; i < textCodeTutorialArray.length; i ++) {
+ document.getElementById("textCodeTutorial").innerHTML += "
