mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
fix
This commit is contained in:
Kyle
@@ -3,10 +3,9 @@
|
||||
//============================================//
|
||||
/* Test things! */
|
||||
function testFunction() {
|
||||
// console.log("test function begin");
|
||||
// cardMaster.innerHTML += frameList[0].cardMasterElement("Full");
|
||||
// console.log("test function end");
|
||||
// cardMasterUpdated();
|
||||
cardMaster.appendChild(frameList[0].cardMasterElement("Full"));
|
||||
cardMasterUpdated();
|
||||
console.log("First frame manually loaded")
|
||||
}
|
||||
|
||||
|
||||
@@ -21,6 +20,7 @@ function initiate() {
|
||||
window.maskList = [];
|
||||
window.selectedFrame = -1;
|
||||
window.selectedMask = "";
|
||||
window.updateTextDelay = setTimeout(rewriteText, 500);
|
||||
for (var i = 0; i < maskNameList.length; i++) {
|
||||
var imageSource = "data/images/masks/" + maskNameList[i].replace(" ", "") + ".png";
|
||||
maskList[i] = new Image();
|
||||
@@ -87,7 +87,7 @@ function loadImageCSV() {
|
||||
frameList[frameList.length] = new frameImage(splitIndividualImageCSV[0], "data/images/" + splitIndividualImageCSV[1], splitIndividualImageCSV[2]);
|
||||
}
|
||||
for (var i = 0; i < frameList.length; i++) {
|
||||
document.getElementById("framePicker").innerHTML += frameList[i].framePickerElement();
|
||||
document.getElementById("framePicker").appendChild(frameList[i].framePickerElement());
|
||||
}
|
||||
//I don't like these here, because even though they run, it doesn't populate the mask options
|
||||
// document.getElementsByClassName("frameOption")[0].classList.add("frameOptionSelected");
|
||||
@@ -123,10 +123,19 @@ class frameImage {
|
||||
}
|
||||
}
|
||||
cardMasterElement(targetMask) {
|
||||
return "<div id='frameIndex" + frameList.indexOf(this) + "' class='cardMasterElement'>" + this.displayName + " (" + targetMask + ")<img src=" + this.image.src + "><img class='cardMasterElementMaskImage' src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>";
|
||||
var tempElement = document.createElement("div");
|
||||
tempElement.id = "frameIndex" + frameList.indexOf(this);
|
||||
tempElement.classList.add("cardMasterElement");
|
||||
tempElement.innerHTML = this.displayName + " (" + targetMask + ") <input type='number' min='0' max='100' value='100' class='inputOpacity' oninput='cardMasterUpdated()'><input type='checkbox' onchange='cardMasterUpdated()'><img src=" + this.image.src + "><img class='cardMasterElementMaskImage' src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>";
|
||||
return tempElement
|
||||
}
|
||||
framePickerElement(targetElement) {
|
||||
return "<div id='frameIndex" + frameList.indexOf(this) + "' class='frameOption' onclick='frameOptionClicked(event)'><img src=" + this.image.src + "></div>";
|
||||
var tempElement = document.createElement("div");
|
||||
tempElement.id = "frameIndex" + frameList.indexOf(this);
|
||||
tempElement.classList.add("frameOption");
|
||||
tempElement.onclick = frameOptionClicked;
|
||||
tempElement.innerHTML = "<img src=" + this.image.src + ">"
|
||||
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 += "<div class='tabButton text' onclick='tabFunction(event, `text`, `option" + version.textList[i][0] + "`, `textTabFunction`)'>" + version.textList[i][0] + "</div>"
|
||||
// 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 += "<option>" + version.typeOrder[i] + "</option>"
|
||||
// // 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 += "<div class='tabButton tabSelectButton " + tabSection + "' id='" + tabValue + "' onclick='tabSelect(event, `" + tabSection + "`)'>" + displayName + "</div>"
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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 += "<div class='selectable'><b>{" + textCodeTutorialArray[i].split("-")[0] + "}</b></div><div>" + textCodeTutorialArray[i].split("-")[1] + "</div>"
|
||||
// }
|
||||
// }
|
||||
|
||||
// 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 += "<div class='selectable'><b>{" + textCodeTutorialArray[i].split("-")[0] + "}</b></div><div>" + textCodeTutorialArray[i].split("-")[1] + "</div>"
|
||||
}
|
||||
}
|
||||
|
||||
// //textCodeTutorial()
|
||||
|
||||
|
||||
// /*To do list:
|
||||
// watermarks
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// possibly border color?
|
||||
// */
|
||||
textCodeTutorial()
|
||||
Reference in New Issue
Block a user