mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 13:21:41 -05:00
rearrange
This commit is contained in:
Kyle
652
data/main.js
652
data/main.js
@@ -1,9 +1,46 @@
|
||||
//============================================//
|
||||
// Card Conjurer, by Kyle Burton //
|
||||
//============================================//
|
||||
//Hi there :D
|
||||
|
||||
//============================================//
|
||||
// Anything I Like to Change Often :) //
|
||||
//============================================//
|
||||
randomizeSampleCards(4)
|
||||
|
||||
//============================================//
|
||||
// Setup Variables/Canvases //
|
||||
//============================================//
|
||||
//Define important variables
|
||||
var sectionFrame = 0;
|
||||
var sectionSamples = 0;
|
||||
var sectionSymbols = 0;
|
||||
var cardWidth = 750
|
||||
var cardHeight = 1050
|
||||
var sectionFrame = 0, sectionText = 0, sectionOther = 0
|
||||
var cardWidth = 750, cardHeight = 1050
|
||||
var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
|
||||
//Create the object that stores data for convencience :) It's what keeps track of values necessary to change between card frames
|
||||
var defaultCardData = {
|
||||
version:"m15",
|
||||
manaSymbolX:659, manaSymbolY:60, manaSymbolRadius:17.5, manaSymbolDirection:"left",
|
||||
titleX:63, titleY:94, titleRight:687, titleFont:"belerenb", titleFontSize:40,
|
||||
typeX:63, typeY:630, typeRight:687, typeFont:"belerenb", typeFontSize:34,
|
||||
textX:63, textY:690, textRight:690, textFont:"mplantin",
|
||||
ptFont:"39px belerenb", ptX:645, ptY:975,
|
||||
ptBoxX:571, ptBoxY:929, ptBoxWidth:135, ptBoxHeight:76,
|
||||
setSymbolWidth:77, setSymbolHeight:42, setSymbolX:693, setSymbolY:620,
|
||||
watermarkWidth:520, watermarkHeight:250, watermarkY:815,
|
||||
cardArtX:58, cardArtY:118
|
||||
}
|
||||
var cardData = defaultCardData
|
||||
//Function that restores image values for various things :)
|
||||
function defaultImageValues() {
|
||||
imgLegendary.load("none", 20, 20, 714, 186)
|
||||
imgLegendaryRight.load("none", 20, 20, 714, 186)
|
||||
imgRareStamp.load("none", 329, 949, 90, 50)
|
||||
imgRareStampRight.load("none", 329, 949, 90, 50)
|
||||
imgStamp.load("none", 340, 965, 70, 37)
|
||||
imgNyx.load("none", 30, 30, 690, 586)
|
||||
imgNyxRight.load("none", 30, 30, 690, 586)
|
||||
imgMiracle.load("none", 30, 30, 689, 511)
|
||||
imgMiracleRight.load("none", 30, 30, 689, 511)
|
||||
}
|
||||
|
||||
//Set up canvases
|
||||
var cardCanvas = document.getElementById("cardCanvas")
|
||||
@@ -17,27 +54,16 @@ function newCanvas(name) {
|
||||
newCanvas("mask")
|
||||
newCanvas("frame")
|
||||
newCanvas("text")
|
||||
newCanvas("other")
|
||||
newCanvas("transparent")
|
||||
newCanvas("crop")
|
||||
|
||||
//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")
|
||||
}
|
||||
document.getElementById(targetClass + "-" + targetId).classList.add("shown")
|
||||
}
|
||||
|
||||
//Downloads the image!
|
||||
function downloadCardImage(linkElement) {
|
||||
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
|
||||
}
|
||||
|
||||
//============================================//
|
||||
// Custom Canvas Functions //
|
||||
//============================================//
|
||||
//Create custom canvas functions
|
||||
//Image masks
|
||||
CanvasRenderingContext2D.prototype.mask = function(image, masks, color) {
|
||||
CanvasRenderingContext2D.prototype.mask = function(image, masks, color, opacity = 1) {
|
||||
//Clear the mask canvas
|
||||
maskContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
maskContext.globalCompositeOperation = "source-over"
|
||||
@@ -57,20 +83,30 @@ CanvasRenderingContext2D.prototype.mask = function(image, masks, color) {
|
||||
//Now all the masks are applied. Draw the image, if provided.
|
||||
maskContext.globalCompositeOperation = "source-in"
|
||||
}
|
||||
maskContext.globalAlpha = opacity
|
||||
if (image != "none") {
|
||||
maskContext.drawImage(image, image.xVal, image.yVal, image.wVal, image.hVal)
|
||||
}
|
||||
//If a color is provided, fill that in too.
|
||||
if (color != undefined && color != "none") {
|
||||
maskContext.globalCompositeOperation = "source-in"
|
||||
maskContext.fillStyle = color
|
||||
maskContext.fillRect(0, 0, cardWidth, cardHeight)
|
||||
}
|
||||
maskContext.globalAlpha = 1
|
||||
this.drawImage(maskCanvas, 0, 0, cardWidth, cardHeight)
|
||||
}
|
||||
//Text processor
|
||||
CanvasRenderingContext2D.prototype.writeText = function(text, x, y, rightLimit, textFont, textFontSize, textColor, skipLines) {
|
||||
|
||||
//Text processor... kind of...
|
||||
CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, inputRightLimit, textFont, textFontSize, textColor, skipLines, outline, outlineColor) {
|
||||
this.font = textFontSize + "px " + textFont
|
||||
this.fillStyle = textColor
|
||||
this.strokeStyle = outlineColor
|
||||
this.lineWidth = 2
|
||||
this.textAlign = "left"
|
||||
var x = inputX
|
||||
var y = inputY
|
||||
var rightLimit = inputRightLimit
|
||||
var splitText = text.split(" ")
|
||||
if (skipLines == false) {
|
||||
//The text is condensed into one line
|
||||
@@ -78,6 +114,9 @@ CanvasRenderingContext2D.prototype.writeText = function(text, x, y, rightLimit,
|
||||
textFontSize -= 0.5
|
||||
this.font = textFontSize + "px " + textFont
|
||||
}
|
||||
if (outline) {
|
||||
this.strokeText(text, x, y)
|
||||
}
|
||||
this.fillText(text, x, y)
|
||||
} else {
|
||||
//Multiple lines and codes? Processing time!
|
||||
@@ -87,15 +126,16 @@ CanvasRenderingContext2D.prototype.writeText = function(text, x, y, rightLimit,
|
||||
for (var i = 0; i < splitText.length; i ++) {
|
||||
if (splitText[i].includes("{") && splitText[i].includes("}")) {
|
||||
//Codes or not, something will happen. First write what we already have.
|
||||
if (outline) {
|
||||
this.strokeText(currentString, currentX, currentY)
|
||||
}
|
||||
this.fillText(currentString, currentX, currentY)
|
||||
currentX += this.measureText(currentString).width
|
||||
currentString = ""
|
||||
var deleteMe = 0
|
||||
while(splitText[i] != "") {
|
||||
deleteMe += 1
|
||||
//There may be codes within! split up the string further incase there are multiple codes/words
|
||||
var wordToWrite = ""
|
||||
if (splitText[i].charAt(0) == "{") {
|
||||
if (splitText[i].charAt(0) == "{" && splitText[i].includes("}")) {
|
||||
//It might be a code
|
||||
var possibleCode = splitText[i].slice(0, splitText[i].indexOf("}") + 1)
|
||||
var possibleCodeLower = possibleCode.toLowerCase()
|
||||
@@ -107,9 +147,42 @@ CanvasRenderingContext2D.prototype.writeText = function(text, x, y, rightLimit,
|
||||
} else if (possibleCodeLower == "{line}") {
|
||||
currentX = x
|
||||
currentY += textFontSize + parseInt(document.getElementById("inputTextShift").value)
|
||||
} else if (possibleCodeLower == "{bar}") {
|
||||
this.drawImage(imgBar, cardWidth / 2 - imgBar.width / 2, currentY + parseInt(document.getElementById("inputTextShift").value) + 6)
|
||||
currentX = x
|
||||
currentY += textFontSize + 2 * parseInt(document.getElementById("inputTextShift").value)
|
||||
} else if (possibleCodeLower == "{linenospace}") {
|
||||
currentX = x
|
||||
currentY += textFontSize
|
||||
} else if (possibleCodeLower == "{left}") {
|
||||
rightLimit = inputRightLimit
|
||||
this.textAlign = "left"
|
||||
x = inputX
|
||||
currentX = x
|
||||
} else if (possibleCodeLower == "{center}") {
|
||||
rightLimit = 1.5 * inputRightLimit
|
||||
this.textAlign = "center"
|
||||
x = cardWidth / 2
|
||||
currentX = x
|
||||
} else if (possibleCodeLower == "{right}") {
|
||||
rightLimit = 2 * inputRightLimit - inputX
|
||||
this.textAlign = "right"
|
||||
x = cardWidth - inputX
|
||||
currentX = x
|
||||
} else if (possibleCodeLower.slice(0, 3) == "{up" && possibleCodeLower.charAt(possibleCodeLower.length - 1) == "}") {
|
||||
currentY -= parseInt(possibleCodeLower.slice(3, possibleCodeLower.length - 1))
|
||||
} else if (possibleCodeLower.slice(0, 5) == "{down" && possibleCodeLower.charAt(possibleCodeLower.length - 1) == "}") {
|
||||
currentY += parseInt(possibleCodeLower.slice(5, possibleCodeLower.length - 1))
|
||||
} else if (possibleCodeLower.slice(0, 5) == "{left" && possibleCodeLower.charAt(possibleCodeLower.length - 1) == "}") {
|
||||
currentX -= parseInt(possibleCodeLower.slice(5, possibleCodeLower.length - 1))
|
||||
x -= parseInt(possibleCodeLower.slice(5, possibleCodeLower.length - 1))
|
||||
} else if (possibleCodeLower.slice(0, 6) == "{right" && possibleCodeLower.charAt(possibleCodeLower.length - 1) == "}") {
|
||||
currentX += parseInt(possibleCodeLower.slice(6, possibleCodeLower.length - 1))
|
||||
x += parseInt(possibleCodeLower.slice(6, possibleCodeLower.length - 1))
|
||||
} else if (manaSymbolCodeList.includes((possibleCodeLower.replace("{", "").replace("}", "")))) {
|
||||
//It's a mana symbol! Draw it.
|
||||
this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.replace("{", "").replace("}", ""))], currentX + textFontSize * 0.054, currentY - textFontSize * 0.7, textFontSize * 0.77, textFontSize * 0.77)
|
||||
currentX += textFontSize * 0.84
|
||||
} else {
|
||||
//It's not a code. treat it like a regular word.
|
||||
wordToWrite = possibleCode
|
||||
@@ -132,20 +205,25 @@ CanvasRenderingContext2D.prototype.writeText = function(text, x, y, rightLimit,
|
||||
if (this.measureText(wordToWrite).width + currentX > rightLimit) {
|
||||
//The word doesn't fit. Write the word on the next line.
|
||||
currentY += textFontSize
|
||||
if (outline) {
|
||||
this.strokeText(wordToWrite, x, currentY)
|
||||
}
|
||||
this.fillText(wordToWrite, x, currentY)
|
||||
currentX = x + this.measureText(wordToWrite).width
|
||||
} else {
|
||||
if (outline) {
|
||||
this.strokeText(wordToWrite, currentX, currentY)
|
||||
}
|
||||
this.fillText(wordToWrite, currentX, currentY)
|
||||
currentX += this.measureText(wordToWrite).width
|
||||
}
|
||||
}
|
||||
// console.log(splitText[i])
|
||||
if (deleteMe >= 3) {
|
||||
splitText[i] = ""
|
||||
}
|
||||
}
|
||||
} else if (this.measureText(currentString + " " + splitText[i]).width + currentX > rightLimit) {
|
||||
//There aren't any codes, but the text doesn't fit. Finish writing the current line and move to the next one.
|
||||
if (outline) {
|
||||
this.strokeText(currentString, currentX, currentY)
|
||||
}
|
||||
this.fillText(currentString, currentX, currentY)
|
||||
currentString = splitText[i] + " "
|
||||
currentY += textFontSize
|
||||
@@ -155,11 +233,16 @@ CanvasRenderingContext2D.prototype.writeText = function(text, x, y, rightLimit,
|
||||
currentString += splitText[i] + " "
|
||||
}
|
||||
if (i == splitText.length - 1) {
|
||||
if (outline) {
|
||||
this.strokeText(currentString, currentX, currentY)
|
||||
}
|
||||
this.fillText(currentString, currentX, currentY)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.textAlign = "left"
|
||||
}
|
||||
|
||||
//Mana cost!
|
||||
CanvasRenderingContext2D.prototype.manaCost = function(input, x, y, size, path) {
|
||||
this.fillStyle = "black"
|
||||
@@ -182,6 +265,90 @@ CanvasRenderingContext2D.prototype.manaCost = function(input, x, y, size, path)
|
||||
return manaSymbolWidth
|
||||
}
|
||||
|
||||
//Function that autocrops the image
|
||||
function autocrop(targetImage) {
|
||||
//Create image, size canvas, draw image
|
||||
var imgTempTarget = new Image()
|
||||
imgTempTarget.crossOrigin = "anonymous"
|
||||
imgTempTarget.src = targetImage.src
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Function that auto... makes the image's white pixels transparent
|
||||
function whiteToTransparent(targetImage) {
|
||||
//Create image, size canvas, draw image
|
||||
var imgTempTarget = new Image()
|
||||
imgTempTarget.crossOrigin = "anonymous"
|
||||
imgTempTarget.src = targetImage.src
|
||||
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] >= 250 && imageData.data[index + 1] >= 250 && imageData.data[index + 2] >= 250) {
|
||||
imageData.data[index + 3] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
transparentContext.clearRect(0, 0, width, height)
|
||||
transparentContext.putImageData(imageData, 0, 0)
|
||||
targetImage.src = transparentCanvas.toDataURL()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//============================================//
|
||||
// Custom Image Stuff //
|
||||
//============================================//
|
||||
//Whenever a new image is created it will be given an onload function.
|
||||
function createImage(name, section) {
|
||||
//Create the image and give it default values
|
||||
@@ -211,34 +378,37 @@ function createImage(name, section) {
|
||||
|
||||
//This is a custom function meant to load new image sources
|
||||
Image.prototype.load = function(source, x, y, w, h) {
|
||||
if (this.loadingStatus != true && this.cardSection != "none") {
|
||||
window[this.cardSection] += 1
|
||||
}
|
||||
if (source != "none") {
|
||||
if (this.loadingStatus != true && this.cardSection != "none") {
|
||||
window[this.cardSection] += 1
|
||||
}
|
||||
this.loadingStatus = true
|
||||
this.src = source
|
||||
}
|
||||
if (x != undefined) {this.xVal = x} else {this.xVal = 0}
|
||||
if (y != undefined) {this.yVal = y} else {this.yVal = 0}
|
||||
if (w != undefined) {this.wVal = w} else {this.wVal = cardWidth}
|
||||
if (h != undefined) {this.hVal = h} else {this.hVal = cardHeight}
|
||||
if (x != undefined) {this.xVal = x} else if (this.xVal == undefined) {this.xVal = 0}
|
||||
if (y != undefined) {this.yVal = y} else if (this.yVal == undefined) {this.yVal = 0}
|
||||
if (w != undefined) {this.wVal = w} else if (this.wVal == undefined) {this.wVal = cardWidth}
|
||||
if (h != undefined) {this.hVal = h} else if (this.hVal == undefined) {this.hVal = cardHeight}
|
||||
}
|
||||
|
||||
//Gives all the select boxes the same color options to choose from
|
||||
function populateSelectBoxes(options) {
|
||||
for (var i = 0; i < document.getElementsByClassName("selectColor").length; i++) {
|
||||
document.getElementsByClassName("selectColor")[i].innerHTML = options
|
||||
}
|
||||
//Loads images via URL
|
||||
function imageURL(input, targetImage, processes) {
|
||||
targetImage.cropStatus = processes
|
||||
targetImage.load("https://cors-anywhere.herokuapp.com/" + input)
|
||||
}
|
||||
//changeme
|
||||
populateSelectBoxes('<option value="data/borders/m15/white/">White</option><option value="data/borders/m15/blue/">Blue</option><option value="data/borders/m15/black/">Black</option><option value="data/borders/m15/red/">Red</option><option value="data/borders/m15/green/">Green</option>')
|
||||
|
||||
//============================================//
|
||||
// Loads all the images //
|
||||
//============================================//
|
||||
//Images that are drawn on the frame
|
||||
var frameImageList = ["imgSectionFrame", "imgFrame", "imgFrameRight", "imgTitleTypeBoxes", "imgTitleTypeBoxesRight", "imgRulesBox", "imgRulesBoxRight", "imgPinline", "imgPinlineRight"]
|
||||
var frameImageList = ["imgSectionFrame", "imgFrame", "imgFrameRight", "imgTitleTypeBoxes", "imgTitleTypeBoxesRight", "imgRulesBox", "imgRulesBoxRight", "imgPinline", "imgPinlineRight", "imgLegendary", "imgLegendaryRight", "imgNyx", "imgNyxRight", "imgMiracle", "imgMiracleRight", "imgRareStamp", "imgRareStampRight"]
|
||||
for (var i = 0; i < frameImageList.length; i++) {
|
||||
createImage(frameImageList[i], "sectionFrame")
|
||||
window[frameImageList[i]].load("data/borders/m15/white/frame.png")
|
||||
}
|
||||
//changeme
|
||||
createImage("imgPowerToughness", "sectionText")
|
||||
imgPowerToughness.load("data/borders/m15/white/pt.png")
|
||||
//masks for the card frame
|
||||
var frameMaskList = ["imgTypeMask", "imgTitleMask", "imgPinlineMask", "imgRulesMask", "imgFrameMask", "imgArtMask"]
|
||||
for (var i = 0; i < frameMaskList.length; i++) {
|
||||
@@ -246,19 +416,34 @@ for (var i = 0; i < frameMaskList.length; i++) {
|
||||
window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
|
||||
}
|
||||
//any images that stay the same
|
||||
var staticImageList = ["imgMultiGradient", "imgArtistBrush", "imgFoil", "imgStamp", "imgCornerMask"]
|
||||
var staticImageList = ["imgMultiGradient", "imgArtistBrush", "imgFoil", "imgStamp", "imgCornerMask", "imgBar", "imgBlank", "imgWhite"]
|
||||
for (var i = 0; i < staticImageList.length; i++) {
|
||||
createImage(staticImageList[i], "none")
|
||||
window[staticImageList[i]].load("data/borders/" + staticImageList[i] + ".png")
|
||||
}
|
||||
//Any images uploaded by the user
|
||||
var userInputImageList = ["imgCardArt"]
|
||||
var userInputImageList = ["imgCardArt", "imgSetSymbol", "imgWatermark"]
|
||||
for (var i = 0; i < userInputImageList.length; i++) {
|
||||
createImage(userInputImageList[i], "none")
|
||||
createImage(userInputImageList[i], "sectionOther")
|
||||
window[userInputImageList[i]].load("data/borders/imgBlank.png")
|
||||
window[userInputImageList[i]].crossOrigin = "anonymous"
|
||||
window[userInputImageList[i]].onload = function() {
|
||||
drawCard()
|
||||
window[userInputImageList[i]].onload = function() {
|
||||
if (this.cropStatus == "needsBoth") {
|
||||
this.cropStatus = "needsCrop"
|
||||
whiteToTransparent(this)
|
||||
} else if (this.cropStatus == "needsWhite") {
|
||||
this.cropStatus = "none"
|
||||
whiteToTransparent(this)
|
||||
} else if (this.cropStatus == "needsCrop") {
|
||||
this.cropStatus = "none"
|
||||
autocrop(this)
|
||||
} else {
|
||||
this.loadingStatus = false
|
||||
sectionOther -= 1
|
||||
if (sectionOther <= 0) {
|
||||
sectionOtherFunction()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Mana symbol Array setup
|
||||
@@ -272,19 +457,12 @@ for (var i = 0; i < manaSymbolCodeList.length; i++) {
|
||||
document.getElementById(this.name).src = this.src
|
||||
}
|
||||
}
|
||||
//It's easier to generate the mana symbol list via js, so do it here
|
||||
var symbolList = ""
|
||||
for (var i = 0; i < manaSymbolCodeList.length; i++) {
|
||||
symbolList += "<div class='manaSymbol' alt='...'>" + manaSymbolCodeList[i] + "<br/>" + "<img id='" + i + "'></img></div>"
|
||||
}
|
||||
document.getElementById("symbolList").innerHTML += symbolList
|
||||
|
||||
//Loads images via URL
|
||||
function imageURL(input, targetImage) {
|
||||
targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
|
||||
}
|
||||
|
||||
//changeme
|
||||
imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputSetSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("inputSetSymbolRarity").value.toUpperCase(), imgSetSymbol, "needsBoth")
|
||||
|
||||
//============================================//
|
||||
// Draw The Sections! //
|
||||
//============================================//
|
||||
function sectionFrameFunction() {
|
||||
//Whenever images for the card from finish loading this function will run
|
||||
//Draw the primary frame stuff!
|
||||
@@ -293,16 +471,22 @@ function sectionFrameFunction() {
|
||||
if (document.getElementById("inputCheckboxFrameRight").checked) {
|
||||
frameContext.mask(imgFrameRight, "imgMultiGradient,source-over")
|
||||
}
|
||||
if (document.getElementById("inputCheckboxRulesBox").checked) {
|
||||
frameContext.mask(imgRulesBox, "imgRulesMask,source-over")
|
||||
if (document.getElementById("inputCheckboxRulesBoxRight").checked) {
|
||||
frameContext.mask(imgRulesBoxRight, "imgRulesMask,source-over;imgMultiGradient,source-in")
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxTitleTypeBoxes").checked) {
|
||||
frameContext.mask(imgTitleTypeBoxes, "imgTitleMask,source-over;imgTypeMask,source-over")
|
||||
if (document.getElementById("inputCheckboxTitleTypeBoxesRight").checked) {
|
||||
frameContext.mask(imgTitleTypeBoxesRight, "imgTitleMask,source-over;imgTypeMask,source-over;imgMultiGradient,source-in")
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxRulesBox").checked) {
|
||||
frameContext.mask(imgRulesBox, "imgRulesMask,source-over")
|
||||
if (document.getElementById("inputCheckboxRulesBoxRight").checked) {
|
||||
frameContext.mask(imgRulesBoxRight, "imgRulesMask,source-over;imgMultiGradient,source-in")
|
||||
if (document.getElementById("inputCheckboxNyx").checked) {
|
||||
frameContext.mask(imgNyx)
|
||||
if (document.getElementById("inputCheckboxFrameRight").checked) {
|
||||
frameContext.mask(imgNyxRight, "imgMultiGradient,source-over")
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxPinline").checked) {
|
||||
@@ -311,51 +495,338 @@ function sectionFrameFunction() {
|
||||
frameContext.mask(imgPinlineRight, "imgPinlineMask,source-over;imgMultiGradient,source-in")
|
||||
}
|
||||
}
|
||||
//Erase anything if needed
|
||||
if (document.getElementById("inputCheckboxMiracle").checked) {
|
||||
if ((document.getElementById("inputCheckboxTitleTypeBoxes").checked && document.getElementById("inputCheckboxTitleTypeBoxesRight").checked) || (document.getElementById("inputCheckboxFrameRight").checked && document.getElementById("inputCheckboxTitleTypeBoxes").checked == false)) {
|
||||
frameContext.mask(imgMiracle) //changeme
|
||||
frameContext.mask(imgMiracleRight, "imgMultiGradient,source-over")
|
||||
} else {
|
||||
frameContext.mask(imgMiracle)
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxLegendary").checked) {
|
||||
frameContext.fillStyle = "black"
|
||||
frameContext.fillRect(0, 0, cardWidth, 50)
|
||||
frameContext.mask(imgLegendary, "imgTitleMask,source-over;imgWhite,source-out")
|
||||
if ((document.getElementById("inputCheckboxPinline").checked && document.getElementById("inputCheckboxPinlineRight").checked) || (document.getElementById("inputCheckboxFrameRight").checked && document.getElementById("inputCheckboxPinline").checked == false)) {
|
||||
frameContext.mask(imgLegendaryRight, "imgTitleMask,source-over;imgMultiGradient,source-out")
|
||||
}
|
||||
}
|
||||
|
||||
if (document.getElementById("inputCheckboxRareStamp").checked) {
|
||||
frameContext.mask(imgRareStamp)
|
||||
if ((document.getElementById("inputCheckboxPinline").checked && document.getElementById("inputCheckboxPinlineRight").checked) || (document.getElementById("inputCheckboxFrameRight").checked && document.getElementById("inputCheckboxPinline").checked == false)) {
|
||||
frameContext.mask(imgRareStampRight, "imgMultiGradient,source-over")
|
||||
}
|
||||
frameContext.mask(imgStamp)
|
||||
}
|
||||
//Erase anything if needed (includes opacity fun)
|
||||
frameContext.globalCompositeOperation = "destination-out"
|
||||
frameContext.mask(imgArtMask)
|
||||
frameContext.mask(imgCornerMask)
|
||||
frameContext.mask(imgWhite, "imgTitleMask,source-over;imgTypeMask,source-over", "none", 1 - (parseInt(document.getElementById("inputTitleTypeOpacity").value) / 100))
|
||||
frameContext.mask(imgWhite, "imgRulesMask,source-over", "none", 1 - (parseInt(document.getElementById("inputRulesBoxOpacity").value) / 100))
|
||||
frameContext.mask(imgWhite, "imgPinlineMask,source-over", "none", 1 - (parseInt(document.getElementById("inputPinlineOpacity").value) / 100))
|
||||
frameContext.mask(imgWhite, "imgFrameMask,source-over", "none", 1 - (parseInt(document.getElementById("inputFrameOpacity").value) / 100))
|
||||
frameContext.globalCompositeOperation = "source-over"
|
||||
//Update the card
|
||||
drawCard()
|
||||
}
|
||||
|
||||
function textFunction() {
|
||||
function sectionTextFunction() {
|
||||
//Clears the text canvas
|
||||
textContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
//mana cost, name, type, text
|
||||
var manaSymbolWidth = textContext.manaCost(document.getElementById("inputCost").value, 658, 59, 18, "left")
|
||||
textContext.writeText(document.getElementById("inputName").value, 63, 94, 687 - manaSymbolWidth, "belerenb", 40, "black", false)
|
||||
textContext.writeText(document.getElementById("inputType").value, 62, 630, 687, "belerenb", 34, "black", false)
|
||||
textContext.writeText(document.getElementById("inputText").value, 63, 690 + parseInt(document.getElementById("inputTextDown").value), 690, "mplantin", parseInt(document.getElementById("inputTextSize").value), "black", true)
|
||||
var manaSymbolWidth = textContext.manaCost(document.getElementById("inputCost").value, cardData.manaSymbolX, cardData.manaSymbolY, cardData.manaSymbolRadius, cardData.manaSymbolDirection)
|
||||
textContext.writeText(document.getElementById("inputName").value, cardData.titleX, cardData.titleY, cardData.titleRight - manaSymbolWidth, cardData.titleFont, cardData.titleFontSize, document.getElementById("inputTitleColor").value, false, document.getElementById("inputCheckboxTitleOutline").checked, document.getElementById("inputTitleOutlineColor").value)
|
||||
textContext.writeText(document.getElementById("inputType").value, cardData.typeX, cardData.typeY, cardData.typeRight, cardData.typeFont, cardData.typeFontSize, document.getElementById("inputTypeColor").value, false, document.getElementById("inputCheckboxTypeOutline").checked, document.getElementById("inputTypeOutlineColor").value)
|
||||
textContext.writeText(document.getElementById("inputText").value, cardData.textX, cardData.textY + parseInt(document.getElementById("inputTextDown").value), cardData.textRight, cardData.textFont, parseInt(document.getElementById("inputTextSize").value), document.getElementById("inputRulesColor").value, true, document.getElementById("inputCheckboxRulesOutline").checked, document.getElementById("inputRulesOutlineColor").value)
|
||||
//Power Toughness
|
||||
if (document.getElementById("inputCheckboxPowerToughness").checked) {
|
||||
imgPowerToughness.xVal = cardData.ptBoxX
|
||||
imgPowerToughness.yVal = cardData.ptBoxY
|
||||
imgPowerToughness.wVal = cardData.ptBoxWidth
|
||||
imgPowerToughness.hVal = cardData.ptBoxHeight
|
||||
textContext.mask(imgPowerToughness)
|
||||
textContext.textAlign = "center"
|
||||
textContext.font = cardData.ptFont
|
||||
textContext.fillStyle = document.getElementById("inputCreatureColor").value
|
||||
textContext.fillText(document.getElementById("inputPowerToughness").value, cardData.ptX, cardData.ptY)
|
||||
textContext.textAlign = "left"
|
||||
}
|
||||
//and all the rest (bottom info stuff)
|
||||
|
||||
var infoNumber = document.getElementById("inputInfoNumber").value
|
||||
var infoRarity = document.getElementById("inputInfoRarity").value
|
||||
var infoSet = document.getElementById("inputInfoSet").value
|
||||
var infoLanguage = document.getElementById("inputInfoLanguage").value
|
||||
var infoArtist = document.getElementById("inputInfoArtist").value
|
||||
var infoCopyright = "CC \u2014 " + document.getElementById("inputInfoCopyright").value
|
||||
var infoSetLanguage = infoSet + " \u00b7 " + infoLanguage
|
||||
textContext.font = "18px gothammedium"
|
||||
textContext.fillStyle = "white"
|
||||
textContext.fillText(infoNumber, 47, 997)
|
||||
textContext.fillText(infoSetLanguage, 47, 1016)
|
||||
//Takes the longer of the two strings and records its width
|
||||
var rarityArtistShift = textContext.measureText(infoSetLanguage).width
|
||||
if (rarityArtistShift < textContext.measureText(infoNumber).width) {
|
||||
rarityArtistShift = textContext.measureText(infoNumber).width
|
||||
}
|
||||
rarityArtistShift += 7 + 47
|
||||
textContext.fillText(infoRarity, rarityArtistShift, 997)
|
||||
imgArtistBrush.load("none", rarityArtistShift, 1003, 21, 13)
|
||||
textContext.mask(imgArtistBrush, "none", textContext.fillStyle)
|
||||
textContext.font = "18px belerenbsc"
|
||||
textContext.fillText(infoArtist, rarityArtistShift + 25, 1016)
|
||||
//"\u2122 & \u00a9 " + year + " Wizards of the Coast"
|
||||
textContext.font = "18px mplantin"
|
||||
textContext.textAlign = "right"
|
||||
if (infoCopyright == "CC \u2014 secretcode") {
|
||||
var date = new Date()
|
||||
var year = date.getFullYear()
|
||||
infoCopyright = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
|
||||
} else if (infoCopyright == "CC \u2014 ") {
|
||||
infoCopyright = ""
|
||||
}
|
||||
var copyrightY = 997
|
||||
if (document.getElementById("inputCheckboxPowerToughness").checked) {
|
||||
copyrightY = 1016
|
||||
}
|
||||
textContext.fillText(infoCopyright, 700, copyrightY)
|
||||
textContext.textAlign = "left"
|
||||
drawCard()
|
||||
}
|
||||
//changeme
|
||||
setTimeout(function(){sectionTextFunction()}, 500)
|
||||
setTimeout(function(){sectionTextFunction()}, 1000)
|
||||
|
||||
function sectionOtherFunction() {
|
||||
//clears the 'other' canvas
|
||||
otherContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
if (document.getElementById("inputCheckboxSetSymbol").checked) {
|
||||
//Set Symbol
|
||||
var setSymbolWidth = cardData.setSymbolWidth
|
||||
var setSymbolHeight = imgSetSymbol.height / imgSetSymbol.width * setSymbolWidth
|
||||
if (setSymbolHeight > cardData.setSymbolHeight) {
|
||||
setSymbolHeight = cardData.setSymbolHeight
|
||||
setSymbolWidth = imgSetSymbol.width / imgSetSymbol.height * setSymbolHeight
|
||||
}
|
||||
setSymbolWidth *= parseInt(document.getElementById("inputSetSymbolScale").value) / 100
|
||||
setSymbolHeight *= parseInt(document.getElementById("inputSetSymbolScale").value) / 100
|
||||
otherContext.drawImage(imgSetSymbol, cardData.setSymbolX - setSymbolWidth, cardData.setSymbolY - setSymbolHeight / 2, setSymbolWidth, setSymbolHeight)
|
||||
}
|
||||
if (document.getElementById("inputCheckboxWatermark").checked) {
|
||||
//Watermark
|
||||
var watermarkWidth = cardData.watermarkWidth
|
||||
var watermarkHeight = imgWatermark.height / imgWatermark.width * watermarkWidth
|
||||
if (watermarkHeight > cardData.watermarkHeight) {
|
||||
watermarkHeight = cardData.watermarkHeight
|
||||
watermarkWidth = imgWatermark.width / imgWatermark.height * watermarkHeight
|
||||
}
|
||||
imgWatermark.xVal = cardWidth / 2 - watermarkWidth / 2
|
||||
imgWatermark.yVal = cardData.watermarkY - watermarkHeight / 2
|
||||
imgWatermark.wVal = watermarkWidth
|
||||
imgWatermark.hVal = watermarkHeight
|
||||
otherContext.globalAlpha = 0.4
|
||||
if (document.getElementById("inputCheckboxSecondWatermark").checked) {
|
||||
otherContext.mask(imgWatermark, "imgMultiGradient,source-over;imgWhite,source-out", document.getElementById("inputWatermarkColor").value)
|
||||
otherContext.mask(imgWatermark, "imgMultiGradient,source-over", document.getElementById("inputSecondWatermarkColor").value)
|
||||
} else {
|
||||
otherContext.mask(imgWatermark, "none", document.getElementById("inputWatermarkColor").value)
|
||||
}
|
||||
otherContext.globalAlpha = 1
|
||||
}
|
||||
drawCard()
|
||||
}
|
||||
setTimeout(function(){textFunction()}, 500)
|
||||
setTimeout(function(){textFunction()}, 1000)
|
||||
|
||||
function drawCard() {
|
||||
//Clears the card
|
||||
card.clearRect(0, 0, cardWidth, cardHeight)
|
||||
//Draws the card art
|
||||
card.drawImage(imgCardArt, document.getElementById("inputCardArtX").value, document.getElementById("inputCardArtY").value, imgCardArt.width * document.getElementById("inputCardArtZoom").value / 100, imgCardArt.height * document.getElementById("inputCardArtZoom").value / 100)
|
||||
card.drawImage(imgCardArt, parseInt(document.getElementById("inputCardArtX").value) + cardData.cardArtX, parseInt(document.getElementById("inputCardArtY").value) + cardData.cardArtY, imgCardArt.width * document.getElementById("inputCardArtZoom").value / 100, imgCardArt.height * document.getElementById("inputCardArtZoom").value / 100)
|
||||
//Draws the card frame
|
||||
card.drawImage(frameCanvas, 0, 0, cardWidth, cardHeight)
|
||||
//Draws the card text
|
||||
card.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
|
||||
//Draws the other stuff
|
||||
card.drawImage(otherCanvas, 0, 0, cardWidth, cardHeight)
|
||||
//Erase anything if needed
|
||||
card.globalCompositeOperation = "destination-out"
|
||||
card.mask(imgCornerMask)
|
||||
card.globalCompositeOperation = "source-over"
|
||||
}
|
||||
|
||||
// setInterval(function(){console.log(sectionFrame)}, 1)
|
||||
//============================================//
|
||||
// HTML Stuff //
|
||||
//============================================//
|
||||
//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")
|
||||
}
|
||||
document.getElementById(targetClass + "-" + targetId).classList.add("shown")
|
||||
}
|
||||
|
||||
//RIP Old Card Conjurer :)
|
||||
// //This is the primary javascript file for Card Conjurer, a program by Kyle Burton that draws custom Magic: The Gathering cards!
|
||||
//Downloads the image!
|
||||
function downloadCardImage(linkElement) {
|
||||
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
|
||||
}
|
||||
|
||||
//Gives all the select boxes the same color options to choose from
|
||||
//loadColors("white-White,blue-Blue,colorlessLand-Colorless Land,gold-Gold"), this is an example of how to use the function
|
||||
function loadColors(colors) {
|
||||
var endResult = ""
|
||||
var colorList = colors.split(",")
|
||||
for (var i = 0; i < colorList.length; i++) {
|
||||
endResult += "<option value='data/borders/" + cardData.version + "/" + colorList[i].split("-")[0] + "/'>" + colorList[i].split("-")[1] + "</option>"
|
||||
}
|
||||
for (var i = 0; i < document.getElementsByClassName("selectColor").length; i++) {
|
||||
document.getElementsByClassName("selectColor")[i].innerHTML = endResult
|
||||
}
|
||||
}
|
||||
//changeme?
|
||||
loadColors("white-White,blue-Blue,black-Black,red-Red,green-Green,gold-Gold,artifact-Artifact,colorless-Colorless,vehicle-Vehicle,clear-Clear,whiteLand-White Land,blueLand-Blue Land,blackLand-Black Land,redLand-Red Land,greenLand-Green Land,goldLand-Gold Land,colorlessLand-Colorless Land")
|
||||
|
||||
//It's easier to generate the mana symbol list via js, so do it here
|
||||
var symbolList = ""
|
||||
for (var i = 0; i < manaSymbolCodeList.length; i++) {
|
||||
symbolList += "<div class='manaSymbol' alt='...'>" + manaSymbolCodeList[i] + "<br/>" + "<img id='" + i + "'></img></div>"
|
||||
}
|
||||
document.getElementById("symbolList").innerHTML += symbolList
|
||||
|
||||
//Randomizes the sample cards at the bottom of the page.
|
||||
function randomizeSampleCards(count) {
|
||||
var cardNumbers = []
|
||||
while (cardNumbers.length < 3) {
|
||||
var randomNumber = Math.floor(Math.random() * count) + 1
|
||||
if (cardNumbers.indexOf(randomNumber) > -1) {
|
||||
continue
|
||||
}
|
||||
cardNumbers[cardNumbers.length] = randomNumber
|
||||
var imgName = "sampleCard" + cardNumbers.length
|
||||
window[imgName] = new Image()
|
||||
window[imgName].src = "images/sampleCards/sample" + randomNumber + ".png"
|
||||
}
|
||||
sampleCard1.onload = function() {
|
||||
document.getElementById("sampleCardA").src = sampleCard1.src
|
||||
}
|
||||
sampleCard2.onload = function() {
|
||||
document.getElementById("sampleCardB").src = sampleCard2.src
|
||||
}
|
||||
sampleCard3.onload = function() {
|
||||
document.getElementById("sampleCardC").src = sampleCard3.src
|
||||
}
|
||||
}
|
||||
|
||||
//Loads images from a file upload
|
||||
function loadImage(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])
|
||||
}
|
||||
|
||||
//============================================//
|
||||
// Misc Stuff //
|
||||
//============================================//
|
||||
//Allows javascript files to be loaded through javascript code
|
||||
function loadScript(scriptName){
|
||||
var script = document.createElement("script")
|
||||
script.setAttribute("type","text/javascript")
|
||||
script.setAttribute("src", scriptName)
|
||||
if (typeof script != "undefined") {
|
||||
document.getElementsByTagName("head")[0].appendChild(script)
|
||||
}
|
||||
}
|
||||
|
||||
//Loads card art from Scryfall's API via card name!
|
||||
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)
|
||||
} 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) {
|
||||
imgCardArt.load("https://cors-anywhere.herokuapp.com/" + cardArtUrlList[cardArtNameNumberInput - 1])
|
||||
document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
|
||||
sectionTextFunction()
|
||||
}
|
||||
|
||||
//============================================//
|
||||
// Special Image Loading //
|
||||
//============================================//
|
||||
function loadLegendaryImages() {
|
||||
if (document.getElementById("inputCheckboxPinline").checked) {
|
||||
imgLegendary.load(imgPinline.src.replace("frame.png", "legendary.png"))
|
||||
imgLegendaryRight.load(imgPinlineRight.src.replace("frame.png", "legendary.png"))
|
||||
} else {
|
||||
imgLegendary.load(imgFrame.src.replace("frame.png", "legendary.png"))
|
||||
imgLegendaryRight.load(imgFrameRight.src.replace("frame.png", "legendary.png"))
|
||||
}
|
||||
}
|
||||
function loadRareStampImages() {
|
||||
if (document.getElementById("inputCheckboxPinline").checked) {
|
||||
imgRareStamp.load(imgPinline.src.replace("frame.png", "stamp.png"))
|
||||
imgRareStampRight.load(imgPinlineRight.src.replace("frame.png", "stamp.png"))
|
||||
} else {
|
||||
imgRareStamp.load(imgFrame.src.replace("frame.png", "stamp.png"))
|
||||
imgRareStampRight.load(imgFrameRight.src.replace("frame.png", "stamp.png"))
|
||||
}
|
||||
}
|
||||
function loadMiracleImages() {
|
||||
if (document.getElementById("inputCheckboxTitleTypeBoxes").checked) {
|
||||
imgMiracle.load(imgTitleTypeBoxes.src.replace("frame.png", "miracle.png"))
|
||||
imgMiracleRight.load(imgTitleTypeBoxesRight.src.replace("frame.png", "miracle.png"))
|
||||
} else {
|
||||
imgMiracle.load(imgFrame.src.replace("frame.png", "miracle.png"))
|
||||
imgMiracleRight.load(imgFrameRight.src.replace("frame.png", "miracle.png"))
|
||||
}
|
||||
}
|
||||
function loadNyxImages() {
|
||||
imgNyx.load(imgFrame.src.replace("frame.png", "nyx.png"))
|
||||
imgNyxRight.load(imgFrameRight.src.replace("frame.png", "nyx.png"))
|
||||
}
|
||||
for (var i = 0; i < document.getElementsByClassName("changesFrame").length; i++) {
|
||||
document.getElementsByClassName("changesFrame")[i].addEventListener("change", function() {loadLegendaryImages(); loadRareStampImages(); loadNyxImages(); loadMiracleImages()}, false)
|
||||
}
|
||||
for (var i = 0; i < document.getElementsByClassName("changesTitleType").length; i++) {
|
||||
document.getElementsByClassName("changesTitleType")[i].addEventListener("change", function() {loadMiracleImages()}, false)
|
||||
}
|
||||
for (var i = 0; i < document.getElementsByClassName("changesPinline").length; i++) {
|
||||
document.getElementsByClassName("changesPinline")[i].addEventListener("change", function() {loadLegendaryImages(); loadRareStampImages()}, false)
|
||||
}
|
||||
|
||||
//Runs stuff at the very end (once everything is set up)
|
||||
defaultImageValues()
|
||||
|
||||
//============================================//
|
||||
// RIP OLD CARD CONJURER //
|
||||
//============================================//
|
||||
// //============================================//
|
||||
// // Initialization //
|
||||
// //============================================//
|
||||
@@ -529,7 +1000,6 @@ function drawCard() {
|
||||
// card.moveTo(0, titleX)
|
||||
// card.lineTo(cardWidth, titleX)
|
||||
// card.stroke()
|
||||
// console.log("debugging")
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1261,16 +1731,16 @@ function drawCard() {
|
||||
// xhttp.send()
|
||||
// }
|
||||
// function inputCardArtNameNumber(cardArtNameNumberInput) {
|
||||
// var tempArtUrlList = []
|
||||
// var cardArtUrlList = []
|
||||
// for (i = 0; i < savedArtList.length; i ++) {
|
||||
// tempArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
|
||||
// cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
|
||||
// }
|
||||
// imgArt.src = "https://cors-anywhere.herokuapp.com/" + tempArtUrlList[cardArtNameNumberInput - 1]
|
||||
// var tempArtArtistList = []
|
||||
// imgArt.src = "https://cors-anywhere.herokuapp.com/" + cardArtUrlList[cardArtNameNumberInput - 1]
|
||||
// var cardArtArtistList = []
|
||||
// for (i = 0; i < savedArtList.length; i ++) {
|
||||
// tempArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","border_color":'))
|
||||
// cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","border_color":'))
|
||||
// }
|
||||
// document.getElementById("inputArtist").value = tempArtArtistList[cardArtNameNumberInput - 1]
|
||||
// document.getElementById("inputArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
|
||||
// }
|
||||
|
||||
|
||||
@@ -1440,12 +1910,6 @@ function drawCard() {
|
||||
// }
|
||||
|
||||
|
||||
// //============================================//
|
||||
// // Log it! //
|
||||
// //============================================//
|
||||
// console.log("The main.js file has finished loading.")
|
||||
|
||||
|
||||
// //============================================//
|
||||
// // Cookies! //
|
||||
// //============================================//
|
||||
|
||||
Reference in New Issue
Block a user