forked from GithubMirrors/cardconjurer
upgrade
This commit is contained in:
Kyle
@@ -1,137 +0,0 @@
|
||||
version,color,type,displayName,maskVersion,x,y,width,height,secondary,advanced
|
||||
m15,W,Full,White,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,U,Full,Blue,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,B,Full,Black,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,R,Full,Red,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,G,Full,Green,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,M,Full,Multicolored,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,A,Full,Artifact,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,C,Full,Colorless,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,Mask,Frame,,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,Mask,Pinline,,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,Mask,Title,,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,Mask,Type,,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,Mask,Rules,,m15,0,0,1,1,TRUE,FALSE
|
||||
none,Mask,Secondary,,none,0,0,1,1,TRUE,FALSE
|
||||
m15,W,PT,White,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,U,PT,Blue,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,B,PT,Black,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,R,PT,Red,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,G,PT,Green,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,M,PT,Multicolored,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,A,PT,Artifact,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,C,PT,Colorless,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
none,Mask,Corners,,none,0.0267,0.0191,0.952,0.1771,FALSE,FALSE
|
||||
m15,W,Legendary,White,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,U,Legendary,Blue,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,B,Legendary,Black,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,R,Legendary,Red,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,G,Legendary,Green,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,M,Legendary,Multicolored,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,A,Legendary,Artifact,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
m15,C,Legendary,Colorless,m15,0.0267,0.0191,0.952,0.1771,TRUE,FALSE
|
||||
none,Mask,Stamp,,none,0.4387,0.9039,0.12,0.0477,FALSE,FALSE
|
||||
m15,W,RareStamp,White,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,U,RareStamp,Blue,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,B,RareStamp,Black,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,R,RareStamp,Red,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,G,RareStamp,Green,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,M,RareStamp,Multicolored,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,A,RareStamp,Artifact,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,C,RareStamp,Colorless,m15,0.4387,0.9039,0.12,0.0477,TRUE,FALSE
|
||||
m15,V,PT,Vehicle,m15,0.7613,0.8898,0.183,0.0734,FALSE,FALSE
|
||||
m15,V,Full,Vehicle,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,WL,Full,White Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,UL,Full,Blue Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,BL,Full,Black Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,RL,Full,Red Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,GL,Full,Green Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,ML,Full,Multicolored Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,CL,Full,Colorless Land,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,W,Miracle,White,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,U,Miracle,Blue,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,B,Miracle,Black,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,R,Miracle,Red,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,G,Miracle,Green,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,M,Miracle,Multicolored,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,C,Miracle,Colorless,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,A,Miracle,Artifact,m15,0.04,0.0286,0.9187,0.4867,TRUE,TRUE
|
||||
m15,W,Nyx,White,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,U,Nyx,Blue,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,B,Nyx,Black,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,R,Nyx,Red,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,G,Nyx,Green,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,M,Nyx,Multicolored,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,A,Nyx,Artifact,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,C,Nyx,Colorless,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,WL,Nyx,White Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,UL,Nyx,Blue Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,BL,Nyx,Black Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,RL,Nyx,Red Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,GL,Nyx,Green Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,ML,Nyx,Multicolored Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,CL,Nyx,Colorless Land,m15,0.04,0.0286,0.92,0.5581,TRUE,TRUE
|
||||
m15,WD,Full,White (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,UD,Full,Blue (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,BD,Full,Black (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,RD,Full,Red (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,GD,Full,Green (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,MD,Full,Multicolored (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,AD,Full,Artifact (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,CD,Full,Colorless (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,WLD,Full,White Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,ULD,Full,Blue Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,BLD,Full,Black Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,RLD,Full,Red Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,GLD,Full,Green Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,MLD,Full,Multicolored Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,CLD,Full,Colorless Land (Dark),m15,0,0,1,1,TRUE,TRUE
|
||||
m15,WD,PT,White (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,UD,PT,Blue (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,BD,PT,Black (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,RD,PT,Red (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,GD,PT,Green (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,MD,PT,Multicolored (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,AD,PT,Artifact (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,CD,PT,Colorless (Dark),m15,0.7613,0.8898,0.183,0.0734,FALSE,TRUE
|
||||
m15,W,FlipPT,White,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,U,FlipPT,Blue,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,B,FlipPT,Black,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,R,FlipPT,Red,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,G,FlipPT,Green,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,M,FlipPT,Multicolored,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,A,FlipPT,Artifact,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,C,FlipPT,Colorless,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,WL,FlipPT,White Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,UL,FlipPT,Blue Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,BL,FlipPT,Black Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,RL,FlipPT,Red Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,GL,FlipPT,Green Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,ML,FlipPT,Multicolorled Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,CL,FlipPT,Colorless Land,m15,0.914,0.8352,0.048,0.0457,FALSE,TRUE
|
||||
m15,W,FlipCircle,White,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,U,FlipCircle,Blue,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,B,FlipCircle,Black,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,R,FlipCircle,Red,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,G,FlipCircle,Green,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,M,FlipCircle,Multicolored,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,A,FlipCircle,Artifact,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,C,FlipCircle,Colorless,m15,0.0347,0.044,0.104,0.0676,FALSE,TRUE
|
||||
m15,Artifact,FlipIcon,Artifact,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Blank,FlipIcon,Blank,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Compass,FlipIcon,Compass,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Creature,FlipIcon,Creature,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Day,FlipIcon,Day,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Eldrazi,FlipIcon,Eldrazi,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Enchantment,FlipIcon,Enchantment,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Instant,FlipIcon,Instant,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Land,FlipIcon,Land,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Moon,FlipIcon,Moon,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Multitype,FlipIcon,Multitype,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Night,FlipIcon,Night,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Planeshift,FlipIcon,Planeshift,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Planeswalker,FlipIcon,Planeswalker,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Sorcery,FlipIcon,Sorcery,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Structure,FlipIcon,Structure,m15,0.052,0.0486,0.08,0.0571,FALSE,TRUE
|
||||
m15,Mask,Border,m15MaskBorder,m15,0,0,1,1,TRUE,FALSE
|
||||
m15,Default,Border,m15DefaultBorder,m15,0,0,1,1,TRUE,FALSE
|
||||
|
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,865 +0,0 @@
|
||||
//============================================//
|
||||
// Card Conjurer, by Kyle Burton //
|
||||
//============================================//
|
||||
//Define some variables
|
||||
var cardWidth = 750, cardHeight = 1050
|
||||
var version = {}
|
||||
var date = new Date()
|
||||
var initiated = false
|
||||
var suggestedColor = "White"
|
||||
document.getElementById("inputInfoNumber").value = date.getFullYear()
|
||||
//Make all the canvases and their contexts
|
||||
var mainCanvas = document.getElementById("mainCanvas")
|
||||
mainCanvas.width = cardWidth
|
||||
mainCanvas.height = cardHeight
|
||||
var mainContext = mainCanvas.getContext("2d")
|
||||
var canvasList = ["card", "mask", "image", "text", "paragraph", "line", "transparent", "crop", "bottomInfo", "setSymbol", "watermark", "temp"]
|
||||
for (var i = 0; i < canvasList.length; i++) {
|
||||
window[canvasList[i] + "Canvas"] = document.createElement("canvas")
|
||||
window[canvasList[i] + "Canvas"].width = cardWidth
|
||||
window[canvasList[i] + "Canvas"].height = cardHeight
|
||||
window[canvasList[i] + "Context"] = window[canvasList[i] + "Canvas"].getContext("2d")
|
||||
}
|
||||
//Create the arrays that keeps track of what parts of the card are what
|
||||
var cardMasterTypes = []
|
||||
var cardMasterImages = []
|
||||
//var cardMasterOpacity = []
|
||||
var cardMasterOpacityValue = []
|
||||
//Mana symbol Array setup
|
||||
var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar"]
|
||||
var manaSymbolImageList = []
|
||||
//Manually create a few important images
|
||||
var cardArt = new Image(), setSymbol = new Image(), watermark = new Image()
|
||||
cardArt.crossOrigin = "anonymous"
|
||||
setSymbol.crossOrigin = "anonymous"
|
||||
watermark.crossOrigin = "anonymous"
|
||||
cardArt.onload = function() {
|
||||
updateCardCanvas()
|
||||
}
|
||||
setSymbol.onload = function() {
|
||||
updateSetSymbolCanvas()
|
||||
}
|
||||
watermark.onload = function() {
|
||||
updateWatermarkCanvas()
|
||||
}
|
||||
//Load the mana symbol images
|
||||
loadManaSymbolImages()
|
||||
//Load the CSV full of image data
|
||||
loadImageSpreadsheet()
|
||||
|
||||
|
||||
//============================================//
|
||||
// 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 updateSetSymbolCanvas() {
|
||||
setSymbolContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
var setSymbolWidth, setSymbolHeight, setSymbolX, setSymbolY
|
||||
if (version.setSymbolWidth / version.setSymbolHeight < setSymbol.width / setSymbol.height) {
|
||||
//wider
|
||||
setSymbolWidth = version.setSymbolWidth
|
||||
setSymbolHeight = version.setSymbolWidth / setSymbol.width * setSymbol.height
|
||||
setSymbolX = version.setSymbolRight - setSymbolWidth
|
||||
setSymbolY = version.setSymbolVertical - setSymbolHeight / 2
|
||||
} else {
|
||||
//taller
|
||||
setSymbolHeight = version.setSymbolHeight
|
||||
setSymbolWidth = version.setSymbolHeight / setSymbol.height * setSymbol.width
|
||||
setSymbolX = version.setSymbolRight - setSymbolWidth
|
||||
setSymbolY = version.setSymbolVertical - setSymbolHeight / 2
|
||||
}
|
||||
setSymbolContext.drawImage(setSymbol, setSymbolX, setSymbolY, setSymbolWidth, setSymbolHeight)
|
||||
updateCardCanvas()
|
||||
}
|
||||
function updateWatermarkCanvas() {
|
||||
if (document.getElementById("inputWatermarkPrimary").value != "none") {
|
||||
watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
var watermarkX, watermarkY, watermarkWidth, watermarkHeight
|
||||
if (version.watermarkWidth / version.watermarkHeight < watermark.width / watermark.height) {
|
||||
//wider
|
||||
watermarkWidth = version.watermarkWidth
|
||||
watermarkHeight = version.watermarkWidth / watermark.width * watermark.height
|
||||
watermarkX = cardWidth / 2 - watermarkWidth / 2
|
||||
watermarkY = version.watermarkY - watermarkHeight / 2
|
||||
} else {
|
||||
//taller
|
||||
watermarkHeight = version.watermarkHeight
|
||||
watermarkWidth = version.watermarkHeight / watermark.height * watermark.width
|
||||
watermarkX = cardWidth / 2 - watermarkWidth / 2
|
||||
watermarkY = version.watermarkY - watermarkHeight / 2
|
||||
}
|
||||
watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
|
||||
watermarkContext.globalCompositeOperation = "source-in"
|
||||
if (document.getElementById("inputWatermarkPrimary").value != "default") {
|
||||
watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value
|
||||
watermarkContext.fillRect(0, 0, cardWidth, cardHeight)
|
||||
}
|
||||
if (document.getElementById("inputWatermarkSecondary").value != "none") {
|
||||
watermarkContext.globalCompositeOperation = "source-atop"
|
||||
tempContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
tempContext.drawImage(window[nameArray[nameArray.indexOf("noneMaskSecondary")]].image, 0, 0, cardWidth, cardHeight)
|
||||
tempContext.globalCompositeOperation = "source-in"
|
||||
if (document.getElementById("inputWatermarkSecondary").value == "default") {
|
||||
tempContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
|
||||
} else {
|
||||
tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value
|
||||
tempContext.fillRect(0, 0, cardWidth, cardHeight)
|
||||
}
|
||||
tempContext.globalCompositeOperation = "source-over"
|
||||
watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight)
|
||||
}
|
||||
watermarkContext.globalCompositeOperation = "source-over"
|
||||
} else {
|
||||
watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
}
|
||||
updateCardCanvas()
|
||||
}
|
||||
//Does the bottom info function! This can be different depending on the version.
|
||||
function updateBottomInfoCanvas() {
|
||||
window[version.bottomInfoFunction]()
|
||||
}
|
||||
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)
|
||||
function getValue(elementId) {
|
||||
return parseFloat(document.getElementById(elementId).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="") {
|
||||
paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
var textSize = inputTextSize
|
||||
lineContext.font = textSize + "px " + textFont
|
||||
lineContext.fillStyle = textColor
|
||||
var otherParameters = other.split(",")
|
||||
var outline, shadow = 0, oneLine = false, outlineWidth = 2, textAlign = "left", verticalAlign = true, lineSpace = 1
|
||||
for (var i = 0; i < otherParameters.length; i ++) {
|
||||
eval(otherParameters[i])
|
||||
}
|
||||
lineContext.strokeStyle = outline
|
||||
lineContext.lineWidth = outlineWidth
|
||||
var currentLineX = 0
|
||||
var currentLineY = textY + textSize * 0.45
|
||||
var uniqueSplitter = "9dn57gwbt4sh"
|
||||
var splitString = text.replace(/ /g, uniqueSplitter + " " + uniqueSplitter).replace(/{/g, uniqueSplitter + "{").replace(/}/g, "}" + uniqueSplitter).split(uniqueSplitter)
|
||||
splitString[splitString.length] = " "
|
||||
var lastWordAdded = ""
|
||||
for (var i = 0; i < splitString.length; i++) {
|
||||
if (splitString[i] != "") {
|
||||
var wordToWrite = splitString[i]
|
||||
var finishLine = false
|
||||
if (splitString[i].includes("{") && splitString[i].includes("}")) {
|
||||
//It may be a code
|
||||
wordToWrite = ""
|
||||
possibleCodeLower = splitString[i].toLowerCase().replace("{", "").replace("}", "")
|
||||
if (possibleCodeLower == "line" && !oneLine) {
|
||||
finishLine = true
|
||||
currentLineY += textSize * 0.35
|
||||
} else if (possibleCodeLower == "linenospace" && ! oneLine) {
|
||||
finishLine = true
|
||||
} else if (possibleCodeLower == "bar" || possibleCodeLower == "flavor") {
|
||||
finishLine = true
|
||||
var barWidth = manaSymbolImageList[63].width
|
||||
var barHeight = manaSymbolImageList[63].height
|
||||
paragraphContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight)
|
||||
currentLineY += textSize * 0.8
|
||||
if (possibleCodeLower == "flavor") {
|
||||
lineContext.font = "italic " + (textSize - 3) + "px " + textFont
|
||||
}
|
||||
} else if (possibleCodeLower.includes("fontsize")) {
|
||||
textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length))
|
||||
lineContext.font = textSize + "px " + textFont
|
||||
} else if (possibleCodeLower == "i") {
|
||||
lineContext.font = "italic " + textSize + "px " + textFont
|
||||
} else if (possibleCodeLower == "/i") {
|
||||
lineContext.font = textSize + "px " + textFont
|
||||
} else if (possibleCodeLower == "center") {
|
||||
textAlign = "center"
|
||||
} else if (possibleCodeLower == "right") {
|
||||
textAlign = "right"
|
||||
} else if (possibleCodeLower == "left") {
|
||||
textAlign = "left"
|
||||
} else if (possibleCodeLower.includes("up")) {
|
||||
currentLineY -= (parseInt(possibleCodeLower.slice(2, possibleCodeLower.length)))
|
||||
} else if (possibleCodeLower.includes("down")) {
|
||||
currentLineY += (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length)))
|
||||
} else if (possibleCodeLower.includes("left")) {
|
||||
currentLineX -= (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length)))
|
||||
} else if (possibleCodeLower.includes("right")) {
|
||||
currentLineX += (parseInt(possibleCodeLower.slice(5, possibleCodeLower.length)))
|
||||
} else if (possibleCodeLower == "artistbrush") {
|
||||
var artistBrushWidth = textSize * 1.2
|
||||
lineContext.drawImage(manaSymbolImageList[62], currentLineX, currentLineY - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21)
|
||||
currentLineX += artistBrushWidth * 1.1
|
||||
} else if (possibleCodeLower.includes("fontcolor")) {
|
||||
lineContext.fillStyle = possibleCodeLower.slice(9, possibleCodeLower.length)
|
||||
}else if (possibleCodeLower.includes("font")) {
|
||||
textFont = possibleCodeLower.slice(5, possibleCodeLower.length)
|
||||
lineContext.font = textSize + "px " + textFont
|
||||
} else if (manaSymbolCodeList.includes(possibleCodeLower)) {
|
||||
//THIS HAS TO BE THE LAST ONE
|
||||
var manaSymbolDiameter = textSize * 0.77
|
||||
lineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower)], currentLineX, currentLineY - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
|
||||
currentLineX += manaSymbolDiameter * 1.02
|
||||
} else {
|
||||
wordToWrite = splitString[i]
|
||||
}
|
||||
}
|
||||
if (wordToWrite != "" || finishLine == true) {
|
||||
//We're left with a word. Write it.
|
||||
var currentWordWidth = lineContext.measureText(wordToWrite).width
|
||||
if (i == splitString.length - 1) {
|
||||
//forces the last artificially added space to be too wide, making sure the last line is drawn in.
|
||||
currentWordWidth = textWidth + 1
|
||||
}
|
||||
if (currentLineX + currentWordWidth > textWidth || finishLine) {
|
||||
//Finish the line
|
||||
if (oneLine && i != splitString.length - 1 && inputTextSize > 1) {
|
||||
lineContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
this.writeText(text, textX, textY, textWidth, textHeight, textFont, inputTextSize - 1, textColor, other)
|
||||
return
|
||||
}
|
||||
var alignAdjust = 0
|
||||
if (textAlign == "center" || textAlign == "right") {
|
||||
if (lastWordAdded == " ") {
|
||||
currentLineX -= textContext.measureText(" ").width
|
||||
}
|
||||
if (textAlign == "center") {
|
||||
alignAdjust = textWidth / 2 - currentLineX / 2 + textX
|
||||
} else if (textAlign == "right") {
|
||||
alignAdjust = textWidth + textX - currentLineX
|
||||
}
|
||||
} else {
|
||||
alignAdjust += textX
|
||||
}
|
||||
paragraphContext.drawImage(lineCanvas, 0 + alignAdjust, 0, cardWidth, cardHeight)
|
||||
lineContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
currentLineY += textSize * lineSpace
|
||||
currentLineX = 0
|
||||
if (wordToWrite == " ") {
|
||||
currentWordWidth = 0
|
||||
}
|
||||
}
|
||||
//Whether or not the current line is finished, write to it.
|
||||
if (shadow > 0) {
|
||||
lineContext.fillText(wordToWrite, currentLineX + shadow, currentLineY + shadow)
|
||||
}
|
||||
if (outline != undefined) {
|
||||
lineContext.strokeText(wordToWrite, currentLineX, currentLineY)
|
||||
}
|
||||
lineContext.fillText(wordToWrite, currentLineX, currentLineY)
|
||||
currentLineX += currentWordWidth
|
||||
lastWordAdded = wordToWrite
|
||||
}
|
||||
}
|
||||
}
|
||||
verticalAdjust = 0
|
||||
if (verticalAlign) {
|
||||
verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2
|
||||
}
|
||||
this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight)
|
||||
return "done"
|
||||
}
|
||||
//Loads up all the mana symbol images
|
||||
function loadManaSymbolImages() {
|
||||
for (var i = 0; i < manaSymbolCodeList.length; i++) {
|
||||
manaSymbolImageList[i] = new Image()
|
||||
manaSymbolImageList[i].src = "data/images/manaSymbols/" + i + ".png"
|
||||
}
|
||||
}
|
||||
//Draws a mana cost
|
||||
CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbolsY, diameter = 50, distance = -50, direction = "horizontal") {
|
||||
var splitManaCost = text.replace(/{/g, " ").replace(/}/g, " ").split(" ")
|
||||
var currentSymbolIndex = 0
|
||||
var currentX = symbolsX
|
||||
var currentY = symbolsY
|
||||
for (var i = splitManaCost.length - 1; i >= 0; i --) {
|
||||
if (manaSymbolCodeList.includes(splitManaCost[i])) {
|
||||
if (Array.isArray(direction) && i < direction.length) {
|
||||
currentX = direction[i][0]
|
||||
currentY = direction[i][1]
|
||||
}
|
||||
this.fillStyle = "black"
|
||||
this.beginPath()
|
||||
this.arc(currentX + diameter / 2.1, currentY + diameter / 1.8, diameter / 2, 0, 2 * Math.PI, false)
|
||||
this.fill()
|
||||
this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(splitManaCost[i])], currentX, currentY, diameter, diameter)
|
||||
if (direction == "horizontal") {
|
||||
currentX += distance
|
||||
} else if (direction == "vertical") {
|
||||
currentY += distance
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Changes the textarea content to whichever text is currently selected for editing
|
||||
var whichTextIndex = 0
|
||||
function changeWhichText() {
|
||||
for (var i = 0; i < version.textList.length; i ++) {
|
||||
if (version.textList[i][0] == document.getElementById("inputWhichText").value) {
|
||||
whichTextIndex = i
|
||||
}
|
||||
}
|
||||
document.getElementById("inputText").value = version.textList[whichTextIndex][1]
|
||||
}
|
||||
//Removes all the white pixels in an image
|
||||
var whiteThreshold = 250
|
||||
function whiteToTransparent(targetImage, source = targetImage.src) {
|
||||
//Create image, size canvas, draw image
|
||||
var imgTempTarget = new Image()
|
||||
imgTempTarget.crossOrigin = "anonymous"
|
||||
imgTempTarget.src = source
|
||||
imgTempTarget.onload = function() {
|
||||
if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
|
||||
transparentCanvas.width = imgTempTarget.width
|
||||
transparentCanvas.height = imgTempTarget.height
|
||||
transparentContext.drawImage(imgTempTarget, 0, 0)
|
||||
//declare variables
|
||||
var width = transparentCanvas.width
|
||||
var height = transparentCanvas.height
|
||||
var imageData = transparentContext.getImageData(0, 0, transparentCanvas.width, transparentCanvas.height)
|
||||
var x, y, index
|
||||
//Go through every pixel and
|
||||
for (y = 0; y < height; y++) {
|
||||
for (x = 0; x < width; x++) {
|
||||
index = (y * width + x) * 4
|
||||
if (imageData.data[index] >= whiteThreshold && imageData.data[index + 1] >= whiteThreshold && imageData.data[index + 2] >= whiteThreshold) {
|
||||
imageData.data[index + 3] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
transparentContext.clearRect(0, 0, width, height)
|
||||
transparentContext.putImageData(imageData, 0, 0)
|
||||
targetImage.src = transparentCanvas.toDataURL()
|
||||
autocrop(targetImage)
|
||||
}
|
||||
}
|
||||
}
|
||||
//Removes all the whitespace in an image
|
||||
function autocrop(targetImage, source = targetImage.src) {
|
||||
//Create image, size canvas, draw image
|
||||
var imgTempTarget = new Image()
|
||||
imgTempTarget.crossOrigin = "anonymous"
|
||||
imgTempTarget.src = source
|
||||
imgTempTarget.onload = function() {
|
||||
if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
|
||||
cropCanvas.width = imgTempTarget.width
|
||||
cropCanvas.height = imgTempTarget.height
|
||||
cropContext.drawImage(imgTempTarget, 0, 0)
|
||||
//declare variables
|
||||
var width = cropCanvas.width
|
||||
var height = cropCanvas.height
|
||||
var pix = {x:[], y:[]}
|
||||
var imageData = cropContext.getImageData(0, 0, cropCanvas.width, cropCanvas.height)
|
||||
var x, y, index
|
||||
if (imageData.data.length > 4) {
|
||||
//Go through every pixel and
|
||||
for (y = 0; y < height; y++) {
|
||||
for (x = 0; x < width; x++) {
|
||||
//(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given
|
||||
index = (y * width + x) * 4 + 3
|
||||
if (imageData.data[index] > 0) {
|
||||
//pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels
|
||||
pix.x.push(x)
|
||||
pix.y.push(y)
|
||||
}
|
||||
}
|
||||
}
|
||||
//sorts the arrays numerically
|
||||
pix.x.sort(function(a,b){return a-b})
|
||||
pix.y.sort(function(a,b){return a-b})
|
||||
var n = pix.x.length - 1
|
||||
//Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas
|
||||
width = pix.x[n] - pix.x[0]
|
||||
height = pix.y[n] - pix.y[0]
|
||||
var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
|
||||
//Resizes the canvas and draws cropped image
|
||||
cropCanvas.width = width + 1
|
||||
cropCanvas.height = height + 1
|
||||
cropContext.putImageData(cropped, 0, 0)
|
||||
//Saves the newly cropped image to the given image
|
||||
targetImage.src = cropCanvas.toDataURL()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//The next several functions are all about loading images!
|
||||
function uploadImage(event, destination) {
|
||||
var input = event.target
|
||||
var reader = new FileReader()
|
||||
reader.onload = function() {
|
||||
var dataURL = reader.result
|
||||
destination.src = dataURL
|
||||
}
|
||||
reader.readAsDataURL(input.files[0])
|
||||
}
|
||||
var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
|
||||
function inputCardArtName(cardArtNameInput) {
|
||||
var xhttp = new XMLHttpRequest()
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
savedArtList = this.responseText.split('"art_crop":"')
|
||||
savedArtList.splice(0, 1)
|
||||
document.getElementById("inputCardArtNameNumber").max = savedArtList.length
|
||||
document.getElementById("inputCardArtNameNumber").value = 1
|
||||
for (i = 0; i < savedArtList.length; i ++) {
|
||||
cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
|
||||
}
|
||||
for (i = 0; i < savedArtList.length; i ++) {
|
||||
cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_ids":'))
|
||||
}
|
||||
inputCardArtNameNumber(1)
|
||||
} else if (this.readyState == 4 && this.status == 404) {
|
||||
alert("Sorry, but we can't seem to find any art for '" + cardArtNameInput + "'")
|
||||
}
|
||||
}
|
||||
xhttp.open("GET", "https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D" + cardArtNameInput.replace(/ /g, "_"), true)
|
||||
xhttp.send()
|
||||
}
|
||||
function inputCardArtNameNumber(cardArtNameNumberInput) {
|
||||
cardArt.src = cardArtUrlList[cardArtNameNumberInput - 1]
|
||||
document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
|
||||
updateBottomInfoCanvas()
|
||||
}
|
||||
//Downloads the image!
|
||||
function downloadCardImage(linkElement) {
|
||||
if (document.getElementById("inputInfoArtist").value.replace(/ /g, "") != "") {
|
||||
linkElement.download = version.textList[0][1].toLowerCase().replace(/ /g, "_") + ".png"
|
||||
if (linkElement.download == ".png") {
|
||||
linkElement.download = "card.png"
|
||||
}
|
||||
} else {
|
||||
event.preventDefault()
|
||||
alert("You must properly credit an artist before downloading")
|
||||
}
|
||||
var cardImageData = cardCanvas.toDataURL()
|
||||
if (cardImageData == undefined) {
|
||||
alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
|
||||
}
|
||||
linkElement.href = cardImageData
|
||||
}
|
||||
//Toggles the visibility of tooltips
|
||||
function toggleTooltips(revealed = true) {
|
||||
var tooltipList = document.getElementsByClassName("tooltiptext")
|
||||
for (var i = 0; i < tooltipList.length; i ++) {
|
||||
if (revealed) {
|
||||
tooltipList[i].classList.remove("hidden")
|
||||
} else {
|
||||
tooltipList[i].classList.add("hidden")
|
||||
}
|
||||
}
|
||||
setCookie("tooltipsToggled", revealed + "")
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//DELETE: (for testing purposes only)
|
||||
function testFunction() {
|
||||
loadScript("data/scripts/setCodeList.js")
|
||||
}
|
||||
|
||||
|
||||
|
||||
function setCookie(cookieName, cookieValue, cookieTime = (5 * 365 * 24 * 60 * 60 * 1000)) { //years*days*hours*minutes*seconds*milliseconds
|
||||
var tempDate = new Date();
|
||||
tempDate.setTime(tempDate.getTime() + cookieTime);
|
||||
var expires = "expires=" + tempDate.toUTCString();
|
||||
document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
|
||||
}
|
||||
function getCookie(cookieName) {
|
||||
var name = cookieName + "=";
|
||||
var cookieArray = document.cookie.split(";");
|
||||
for(var i = 0; i < cookieArray.length; i++) {
|
||||
var tempCookie = cookieArray[i];
|
||||
while (tempCookie.charAt(0) == " ") {
|
||||
tempCookie = tempCookie.substring(1);
|
||||
}
|
||||
if (tempCookie.indexOf(name) == 0) {
|
||||
return tempCookie.substring(name.length, tempCookie.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
function checkCookies() {
|
||||
if (getCookie("tooltipsToggled") == "false") {
|
||||
toggleTooltips(false)
|
||||
document.getElementById("tooltipToggler").checked = false
|
||||
}
|
||||
if (getCookie("advancedBorders") == "true") {
|
||||
document.getElementById("checkboxAdvanced").checked = true
|
||||
hideShowFrameTypes()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function tabFunction(event, section, target, specialFunction = "none") {
|
||||
var tabButtons = document.getElementsByClassName("tabButton " + section)
|
||||
for (var i = 0; i < tabButtons.length; i++) {
|
||||
tabButtons[i].className = tabButtons[i].className.replace(" activeTab", "")
|
||||
}
|
||||
event.currentTarget.className += " activeTab"
|
||||
if (specialFunction != "none") {
|
||||
window[specialFunction](event, section, target)
|
||||
} else {
|
||||
var tabContents = document.getElementsByClassName("tabContent " + section)
|
||||
for (var i = 0; i < tabContents.length; i++) {
|
||||
tabContents[i].className = tabContents[i].className.replace(" displayed", "")
|
||||
}
|
||||
document.getElementById(target).className += " displayed"
|
||||
}
|
||||
}
|
||||
function textTabFunction(event, section, target) {
|
||||
for (var i = 0; i < version.textList.length; i ++) {
|
||||
if (version.textList[i][0] == target.replace("option", "")) {
|
||||
whichTextIndex = i
|
||||
}
|
||||
}
|
||||
document.getElementById("inputText").value = version.textList[whichTextIndex][1]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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 + "")
|
||||
}
|
||||
|
||||
|
||||
|
||||
//textCodeTutorial()
|
||||
|
||||
|
||||
/*To do list:
|
||||
watermarks
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
possibly border color?
|
||||
*/
|
||||
@@ -1,381 +0,0 @@
|
||||
/*fonts*/
|
||||
@font-face {
|
||||
font-family: gothammedium;
|
||||
src: url("../fonts/gotham-medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenb;
|
||||
src: url("../fonts/beleren-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenbsc;
|
||||
src: url("../fonts/beleren-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrix;
|
||||
src: url("../fonts/matrix.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixb;
|
||||
src: url("../fonts/matrix-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixbsc;
|
||||
src: url("../fonts/matrix-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantin;
|
||||
src: url("../fonts/mplantin.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantini;
|
||||
src: url("../fonts/mplantin-i.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: goudymedieval;
|
||||
src: url("../fonts/goudy-medieval.ttf");
|
||||
}
|
||||
:root {
|
||||
--shifting-color-1: #00c300;
|
||||
--shifting-color-1-light: #c8ff64;
|
||||
--light-color: #eee;
|
||||
--dark-color: #333;
|
||||
--clear-light: #fff2;
|
||||
--clear-mid: #fff4;
|
||||
--clear-dark: #fff6;
|
||||
}
|
||||
|
||||
|
||||
/*Background & Footer*/
|
||||
html {
|
||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||
background-attachment: fixed;
|
||||
overflow-x: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 8pt;
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
background-image: url(images/lowpoly.png);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
padding: 2.5em;
|
||||
font: 1.3em gothammedium;
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
|
||||
/*Canvas*/
|
||||
canvas {
|
||||
width: calc(100%);
|
||||
height: auto;
|
||||
max-width: 750px;
|
||||
max-height: 1050px;
|
||||
}
|
||||
.canvasContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*Grids*/
|
||||
.mainGrid {
|
||||
padding: 0.3em;
|
||||
display: grid;
|
||||
grid-gap: 1.5em;
|
||||
grid-template-columns: auto;
|
||||
font: 1.6em mplantin;
|
||||
}
|
||||
.splitGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
.frameGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 2em;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
|
||||
/*Misc elements*/
|
||||
.download {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.pageTitle {
|
||||
font: 5em belerenbsc;
|
||||
text-align: center;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
.bar {
|
||||
background-image: url(../images/manaSymbols/63.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2px;
|
||||
width: 100%;
|
||||
height: 1em;
|
||||
}
|
||||
.imgPreview {
|
||||
width: 100%;
|
||||
}
|
||||
.layer {
|
||||
padding: 2em 2em;
|
||||
color: black;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin-bottom: 3em;
|
||||
background-color: var(--light-color);
|
||||
background-image: url(images/layerBackground.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/*Various text modifications*/
|
||||
.title {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-indent: 0em;
|
||||
}
|
||||
.paragraph {
|
||||
font: 1em mplantin;
|
||||
text-align: left;
|
||||
}
|
||||
.indent {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
|
||||
/*General modifications*/
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.selectable {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
|
||||
/*Hyperlinks*/
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
footer a {
|
||||
color: white;
|
||||
}
|
||||
footer a:hover {
|
||||
color: var(--shifting-color-1-light);
|
||||
}
|
||||
|
||||
|
||||
/*Controls the area taken by the canvas*/
|
||||
@media screen and (min-width: 905pt) {
|
||||
/*Makes room for the canvas and controls to be side by side*/
|
||||
.mainGrid {
|
||||
padding: 1.5em;
|
||||
grid-template-columns: calc(750px + 2px) auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: calc(750px + 2em)) {
|
||||
/*The canvas can be full size and doesn't have to scale anymore*/
|
||||
canvas {
|
||||
width: 750px;
|
||||
height: 1050px;
|
||||
}
|
||||
}
|
||||
/*The screen is big enough (larger than phone, likely) to use a larger font*/
|
||||
@media screen and (min-width: 263pt) {
|
||||
html {
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
||||
/*@media screen and (min-width: 1024px) {
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1023px) {
|
||||
.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}*/
|
||||
/*Allows the footer to be displayed horizontally on Desktop*/
|
||||
@media screen and (min-width: 375pt) {
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
|
||||
grid-gap: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*WIP (or I'm too lazy to sort these)*/
|
||||
.tabMenu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.tabOption, .textTabButton {
|
||||
font: 1.5em belerenbsc;
|
||||
text-align: center;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.tabOption:hover, .textTabButton:hover {
|
||||
background-color: var(--clear-mid);
|
||||
transition: 0s;
|
||||
}
|
||||
.tabOption.tabOptionSelected, .textTabButton.activeTextTab {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.tabContent:not(.tabVisible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cardMasterElement {
|
||||
font: 1em belerenbsc;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.5em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.cardMasterElement img {
|
||||
max-height: 2em;
|
||||
max-width: 2em;
|
||||
position: absolute;
|
||||
transform: translate(1em, -0.35em);
|
||||
}
|
||||
.cardmasterElement img.cardMasterElementMaskImage {
|
||||
transform: translate(3.5em, -0.35em);
|
||||
}
|
||||
.cardMasterElementMoving {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.closeCardMasterElement {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
/*top: 50%;*/
|
||||
left: 96%;
|
||||
/*padding: 12px 16px;*/
|
||||
/*transform: translate(0%, -50%);*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
#framePicker, #maskPicker {
|
||||
max-height: 260pt;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border: 1px solid var(--light-color);
|
||||
}
|
||||
.frameOption {
|
||||
height: 4em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.frameOption img {
|
||||
max-width: 4em;
|
||||
max-height: 4em;
|
||||
}
|
||||
.maskOption img {
|
||||
max-width: 2em;
|
||||
max-height: 2em;
|
||||
}
|
||||
.frameOption.frameOptionSelected, .maskOption.maskOptionSelected {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.maskOption, .frameOption {
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
.maskOption {
|
||||
margin-left: 0.5em;
|
||||
padding: 0.125em;
|
||||
width: calc(100% - 1.4em);
|
||||
}
|
||||
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 8em;
|
||||
max-height: 24em;
|
||||
resize: vertical;
|
||||
}
|
||||
.textTabButton {
|
||||
font-size: 1em;
|
||||
}
|
||||
.textTab {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
.input, .textarea, .button, .select {
|
||||
font: 1em mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0.2em;
|
||||
padding: 0px 0.2em;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
.inputOpacity {
|
||||
font: 1em mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0.2em;
|
||||
padding: 0px 0.2em;
|
||||
outline: none;
|
||||
width: 2.9em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#textCodeTutorial {
|
||||
display: grid;
|
||||
grid-template-columns: 6.5em auto;
|
||||
/*padding: 0.5em;*/
|
||||
}
|
||||
#textCodeTutorial > div {
|
||||
padding: 0.25em 0;
|
||||
background-color: var(--clear-mid);
|
||||
}
|
||||
#textCodeTutorial > div:nth-child(4n), #textCodeTutorial > div:nth-child(4n - 1) {
|
||||
background-color: var(--clear-light);
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"], .frameOption, .maskOption, .button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -44,18 +44,9 @@
|
||||
--clear-mid: #fff4;
|
||||
--clear-dark: #fff6;
|
||||
}
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
padding: 2.5em;
|
||||
font: 1.3em gothammedium;
|
||||
color: var(--light-color);
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
background-image: url(images/lowpoly.png);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
/*Background & Footer*/
|
||||
html {
|
||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||
background-attachment: fixed;
|
||||
@@ -66,9 +57,21 @@ html {
|
||||
user-select: none;
|
||||
font-size: 8pt;
|
||||
}
|
||||
.selectable {
|
||||
user-select: all;
|
||||
body {
|
||||
margin: 0px;
|
||||
background-image: url(images/lowpoly.png);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
padding: 2.5em;
|
||||
font: 1.3em gothammedium;
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
|
||||
/*Canvas*/
|
||||
canvas {
|
||||
width: calc(100%);
|
||||
height: auto;
|
||||
@@ -78,6 +81,9 @@ canvas {
|
||||
.canvasContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*Grids*/
|
||||
.mainGrid {
|
||||
padding: 0.3em;
|
||||
display: grid;
|
||||
@@ -85,13 +91,36 @@ canvas {
|
||||
grid-template-columns: auto;
|
||||
font: 1.6em mplantin;
|
||||
}
|
||||
.imageGrid {
|
||||
.splitGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 9em;
|
||||
min-height: 12.5em;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
.imgPreview {
|
||||
width: 100%;
|
||||
.frameGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 2em;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
|
||||
/*Misc elements*/
|
||||
.download {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.pageTitle {
|
||||
font: 5em belerenbsc;
|
||||
text-align: center;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
.bar {
|
||||
background-image: url(../images/manaSymbols/63.png);
|
||||
@@ -101,78 +130,55 @@ canvas {
|
||||
width: 100%;
|
||||
height: 1em;
|
||||
}
|
||||
.cardMenu > div > div:nth-child(1) {
|
||||
/* border: 1px solid blue;*/
|
||||
/* text-align: center;*/
|
||||
/* font: 1.5em belerenbsc;*/
|
||||
}
|
||||
.twoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% auto;
|
||||
}
|
||||
.input, .textarea, .button, .select {
|
||||
font: 1em mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaae;
|
||||
border-radius: 0.2em;
|
||||
padding: 0px 0.2em;
|
||||
outline: none;
|
||||
}
|
||||
.textarea {
|
||||
min-height: 6em;
|
||||
max-height: 18em;
|
||||
resize: vertical;
|
||||
}
|
||||
.select {
|
||||
background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%;
|
||||
background-size: 1em 1em;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.input.file {
|
||||
padding: 0px;
|
||||
height: 1.26em;
|
||||
}
|
||||
.tooltip {
|
||||
position: relative;
|
||||
}
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--dark-color);
|
||||
color: var(--light-color);
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
top: calc(100% + 5px);
|
||||
left: 0px;
|
||||
max-width: calc(100% - 10px);
|
||||
width: auto;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.tooltip .tooltiptext::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var(--dark-color) transparent;
|
||||
}
|
||||
.tooltip .tooltiptext:hover {
|
||||
/*visibility: hidden;*/
|
||||
opacity: 0;
|
||||
}
|
||||
div.tooltip > * {
|
||||
.imgPreview {
|
||||
width: 100%;
|
||||
}
|
||||
.layer {
|
||||
padding: 2em 2em;
|
||||
color: black;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin-bottom: 3em;
|
||||
background-color: var(--light-color);
|
||||
background-image: url(images/layerBackground.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/*Various text modifications*/
|
||||
.title {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-indent: 0em;
|
||||
}
|
||||
.paragraph {
|
||||
font: 1em mplantin;
|
||||
text-align: left;
|
||||
}
|
||||
.indent {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
|
||||
/*General modifications*/
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.selectable {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
|
||||
/*Hyperlinks*/
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
@@ -185,63 +191,10 @@ footer a {
|
||||
footer a:hover {
|
||||
color: var(--shifting-color-1-light);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 2em;
|
||||
}
|
||||
.layer {
|
||||
padding: 2em 2em;
|
||||
color: black;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
.layer { /*:nth-child(even)*/
|
||||
background-color: var(--light-color);
|
||||
background-image: url(images/layerBackground.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.pageTitle {
|
||||
font: 5em belerenbsc;
|
||||
text-align: center;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
.paragraph {
|
||||
font: 1em mplantin;
|
||||
text-align: left;
|
||||
}
|
||||
.indent {
|
||||
text-indent: 2em;
|
||||
}
|
||||
.leftMargin {
|
||||
margin-left: 2em;
|
||||
}
|
||||
.donate > div:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.donate > div {
|
||||
background-color: var(--clear-light);
|
||||
border-radius: 2em;
|
||||
font: 2em belerenbsc;
|
||||
}
|
||||
.donate > div > img {
|
||||
height: 1em;
|
||||
position: relative;
|
||||
top: 0.15em;
|
||||
left: 0.15em;
|
||||
}
|
||||
|
||||
|
||||
/*Controls the area taken by the canvas*/
|
||||
@media screen and (min-width: 888pt) {
|
||||
@media screen and (min-width: 905pt) {
|
||||
/*Makes room for the canvas and controls to be side by side*/
|
||||
.mainGrid {
|
||||
padding: 1.5em;
|
||||
@@ -262,7 +215,7 @@ footer a:hover {
|
||||
}
|
||||
}
|
||||
/*These control tooltips for mobile devices vs. desktops/laptops*/
|
||||
@media screen and (min-width: 1024px) {
|
||||
/*@media screen and (min-width: 1024px) {
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
@@ -273,8 +226,8 @@ footer a:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/*The footer can now fit horizontally!*/
|
||||
}*/
|
||||
/*Allows the footer to be displayed horizontally on Desktop*/
|
||||
@media screen and (min-width: 375pt) {
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
@@ -284,106 +237,131 @@ footer a:hover {
|
||||
}
|
||||
|
||||
|
||||
/*WIP*/
|
||||
.tab {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
/*WIP (or I'm too lazy to sort these)*/
|
||||
.tabMenu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.tab.tabSelect {
|
||||
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||
.tabOption, .textTabButton {
|
||||
font: 1.5em belerenbsc;
|
||||
text-align: center;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.tabButton.tabSelectButton {
|
||||
font: 1em belerenb;
|
||||
.tabOption:hover, .textTabButton:hover {
|
||||
background-color: var(--clear-mid);
|
||||
transition: 0s;
|
||||
}
|
||||
.tabButton {
|
||||
text-align: center;
|
||||
background: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
font: 1.2em belerenbsc;
|
||||
padding: 0.1em 0em;
|
||||
transition: 0.33s;
|
||||
.tabOption.tabOptionSelected, .textTabButton.activeTextTab {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.tabButton:hover {
|
||||
background-color: var(--clear-mid);
|
||||
transition: 0s;
|
||||
}
|
||||
.tabButton.activeTab {
|
||||
background: var(--clear-dark);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--shifting-color-1-light)
|
||||
}
|
||||
.tabContent {
|
||||
display: none;
|
||||
}
|
||||
.tabContent.displayed {
|
||||
display: block;
|
||||
.tabContent:not(.tabVisible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.download {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
.cardMasterElement {
|
||||
font: 1em belerenbsc;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.5em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-indent: 0em;
|
||||
.cardMasterElement img {
|
||||
max-height: 2em;
|
||||
max-width: 2em;
|
||||
position: absolute;
|
||||
transform: translate(1em, -0.35em);
|
||||
}
|
||||
.tab, button, select, option {
|
||||
cursor: pointer;
|
||||
.cardmasterElement img.cardMasterElementMaskImage {
|
||||
transform: translate(3.5em, -0.35em);
|
||||
}
|
||||
/*Custom Checkboxes*/
|
||||
.realCheckboxContainer {
|
||||
margin-top: 0.45em
|
||||
.cardMasterElementMoving {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.checkboxContainer {
|
||||
position: relative;
|
||||
padding-left: 1.5em;
|
||||
padding-top: 0.25em;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
.closeCardMasterElement {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
/*top: 50%;*/
|
||||
left: 96%;
|
||||
/*padding: 12px 16px;*/
|
||||
/*transform: translate(0%, -50%);*/
|
||||
}
|
||||
.checkboxContainer input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
|
||||
|
||||
#framePicker, #maskPicker {
|
||||
max-height: 260pt;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border: 1px solid var(--light-color);
|
||||
}
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
transition: 0.33s;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color)
|
||||
.frameOption {
|
||||
height: 4em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.checkboxContainer:hover input ~ .checkmark {
|
||||
background-color: var(--clear-dark);
|
||||
.frameOption img {
|
||||
max-width: 4em;
|
||||
max-height: 4em;
|
||||
}
|
||||
.checkboxContainer input:checked ~ .checkmark {
|
||||
background-color: var(--dark-color);
|
||||
.maskOption img {
|
||||
max-width: 2em;
|
||||
max-height: 2em;
|
||||
}
|
||||
.checkmark:after {
|
||||
content: "X";
|
||||
font: 1.2em gothammedium;
|
||||
color: white;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: 0.33s;
|
||||
.frameOption.frameOptionSelected, .maskOption.maskOptionSelected {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.checkboxContainer input:checked ~ .checkmark:after {
|
||||
opacity: 1;
|
||||
.maskOption, .frameOption {
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
.checkboxContainer .checkmark:after {
|
||||
left: 0.15em;
|
||||
top: -0.1em;
|
||||
.maskOption {
|
||||
margin-left: 0.5em;
|
||||
padding: 0.125em;
|
||||
width: calc(100% - 1.4em);
|
||||
}
|
||||
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 8em;
|
||||
max-height: 24em;
|
||||
resize: vertical;
|
||||
}
|
||||
.textTabButton {
|
||||
font-size: 1em;
|
||||
}
|
||||
.textTab {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
.input, .textarea, .button, .select {
|
||||
font: 1em mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0.2em;
|
||||
padding: 0px 0.2em;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
.inputOpacity {
|
||||
font: 1em mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 0.2em;
|
||||
padding: 0px 0.2em;
|
||||
outline: none;
|
||||
width: 2.9em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#textCodeTutorial {
|
||||
display: grid;
|
||||
grid-template-columns: 6.5em auto;
|
||||
@@ -398,3 +376,6 @@ footer a:hover {
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"], .frameOption, .maskOption, .button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
//============================================//
|
||||
// Card Conjurer, by Kyle Burton //
|
||||
//============================================//
|
||||
version.currentVersion = "m15"
|
||||
version.typeOrder = ["Full", "FullSecondary", "Frame", "FrameSecondary", "Nyx", "NyxSecondary", "Pinline", "PinlineSecondary", "Legendary", "LegendarySecondary", "Title", "TitleSecondary", "Miracle", "MiracleSecondary", "Type", "TypeSecondary", "Rules", "RulesSecondary", "Border", "BorderSecondary", "PT", "RareStamp", "RareStampSecondary", "FlipPT", "FlipCircle", "FlipIcon"]
|
||||
version.typesAdvanced = ["Nyx", "Miracle", "FlipPT", "FlipCircle", "FlipIcon"]
|
||||
version.typeNotFull = ["Legendary", "LegendarySecondary", "PT", "RareStamp", "RareStampSecondary", "Nyx", "NyxSecondary", "Miracle", "MiracleSecondary", "FlipPT", "FlipCircle", "FlipIcon", "Border", "BorderSecondary"]
|
||||
version.artX = cwidth(58)
|
||||
version.artY = cheight(118)
|
||||
version.setSymbolRight = cwidth(693)
|
||||
version.setSymbolVertical = cheight(620)
|
||||
version.setSymbolWidth = cwidth(77)
|
||||
version.setSymbolHeight = cheight(42)
|
||||
version.bottomInfoFunction = "m15BottomInfo"
|
||||
version.manaCostX = cwidth(656)
|
||||
version.manaCostY = cheight(62)
|
||||
version.manaCostDiameter = cwidth(36)
|
||||
version.manaCostDistance = cwidth(-38)
|
||||
version.manaCostDirection = "horizontal"
|
||||
version.rareStampX = cwidth(340)
|
||||
version.rareStampY = cheight(965)
|
||||
version.rareStampWidth = cwidth(70)
|
||||
version.rareStampHeight = cheight(38)
|
||||
version.watermarkWidth = cwidth(520)
|
||||
version.watermarkHeight = cheight(250)
|
||||
version.watermarkY = cheight(815)
|
||||
//Name, text, x, y, width, height, font, size, color, other
|
||||
version.textList = [
|
||||
["Title", "", cwidth(62), cheight(87), cwidth(630), 0, "belerenb", 40, "black", "oneLine=true"],
|
||||
["Type", "", cwidth(60), cheight(624), cwidth(630), 0, "belerenb", 34, "black", "oneLine=true"],
|
||||
["Rules Text", "", cwidth(63), cheight(670), cwidth(624), cheight(292), "mplantin", 38, "black", "lineSpace=0.97"],
|
||||
["Power Toughness", "", cwidth(590), cheight(970), cwidth(110), 0, "belerenb", 39, "black", "oneLine=true,textAlign='center'"],
|
||||
["Flip PT", "", cwidth(588), cheight(902), cwidth(100), 0, "belerenb", 28, "#666", "oneLine=true,textAlign='right'"]
|
||||
]
|
||||
finishChangingVersion()
|
||||
|
||||
function m15BottomInfo() {
|
||||
//remember to ctrl+f for 'artistBrushWidth' and adjust that when fixing these values!
|
||||
bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
bottomInfoContext.writeText(document.getElementById("inputInfoNumber").value + " " + document.getElementById("inputInfoRarity").value + " *Not For Sale*", cwidth(46), cheight(993), cwidth(329), 0, "gothammedium", 18, "white", "oneLine=true")
|
||||
bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u00b7 " + document.getElementById("inputInfoLanguage").value + " {fontsize1}{font:belerenbsc}{artistBrush}" + document.getElementById("inputInfoArtist").value, cwidth(46), cheight(1012), cwidth(375), 0, "gothammedium", 17, "white", "oneLine=true")
|
||||
var copyrightShift = 19 * cardMasterTypes.includes("PT")
|
||||
bottomInfoContext.writeText("\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast", cardWidth / 2, cheight(993 + copyrightShift), cwidth(322), 0, "mplantin", 17, "white", "oneLine=true,textAlign='right'")
|
||||
updateCardCanvas()
|
||||
}
|
||||
setTimeout(m15BottomInfo, 250)
|
||||
Reference in New Issue
Block a user