mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
whoa
This commit is contained in:
Kyle
@@ -1,14 +1,36 @@
|
||||
//============================================//
|
||||
// M15 Border //
|
||||
// Full Art Land Unstable Border //
|
||||
//============================================//
|
||||
//Restores default values
|
||||
cardData = defaultCardData
|
||||
//Restores default masks
|
||||
for (var i = 0; i < frameMaskList.length; i++) {
|
||||
if (window[frameMaskList[i]].src.includes("data/borders/m15/" + frameMaskList[i] + ".png") == false) {
|
||||
window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
|
||||
}
|
||||
}
|
||||
//Loads the colors
|
||||
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")
|
||||
//Changes anything needed to be changed
|
||||
//General Booleans
|
||||
cardData.miracle = false
|
||||
cardData.nyx = false
|
||||
cardData.legendary = false
|
||||
cardData.creature = false
|
||||
cardData.rulesBox = false
|
||||
cardData.titleTypeBoxes = false
|
||||
cardData.transparency = true
|
||||
//Specific Values
|
||||
cardData.cardArtX = 0
|
||||
cardData.cardArtY = 0
|
||||
cardData.titleAlignment = "center"
|
||||
cardData.titleX = cardWidth / 2
|
||||
cardData.titleY = cheight(48)
|
||||
cardData.titleRight = cwidth(999)
|
||||
cardData.manaSymbolDirection = "none"
|
||||
document.getElementById("inputTitleColor").value = "#ffffff"
|
||||
imgRareStamp.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
|
||||
imgRareStampRight.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
|
||||
cardData.setSymbolX = cardWidth / 2
|
||||
cardData.setSymbolY = cheight(80)
|
||||
cardData.setSymbolAlignment = "center"
|
||||
//Images
|
||||
imgArtMask.load("data/borders/fullArtLandUnstable/imgArtMask.png")
|
||||
imgBorderMask.load("data/borders/fullArtLandUnstable/imgBorderMask.png")
|
||||
imgFrameMask.load("data/borders/fullArtLandUnstable/imgFrameMask.png")
|
||||
imgPinlineMask.load("data/borders/fullArtLandUnstable/imgPinlineMask.png")
|
||||
//Loads the Colors
|
||||
loadColors("white-White,blue-Blue,black-Black,red-Red,green-Green,gold-Gold,colorless-Colorless")
|
||||
//Runs the things!
|
||||
sectionTextFunction()
|
||||
sectionFrameFunction()
|
||||
sectionOtherFunction()
|
||||
BIN
data/borders/fullArtLandUnstable/white/ref.png
Normal file
BIN
data/borders/fullArtLandUnstable/white/ref.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
@@ -1,14 +1,9 @@
|
||||
//============================================//
|
||||
// M15 Border //
|
||||
//============================================//
|
||||
//Restores default values
|
||||
cardData = defaultCardData
|
||||
//Restores default masks
|
||||
for (var i = 0; i < frameMaskList.length; i++) {
|
||||
if (window[frameMaskList[i]].src.includes("data/borders/m15/" + frameMaskList[i] + ".png") == false) {
|
||||
window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
|
||||
}
|
||||
}
|
||||
//Loads the colors
|
||||
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")
|
||||
//Changes anything needed to be changed
|
||||
//Runs the things!
|
||||
sectionTextFunction()
|
||||
sectionFrameFunction()
|
||||
sectionOtherFunction()
|
||||
|
||||
288
data/main.js
288
data/main.js
@@ -18,32 +18,57 @@ 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
|
||||
manaSymbolX:cwidth(659), manaSymbolY:cheight(60), manaSymbolRadius:cwidth(17.5), manaSymbolDirection:"left",
|
||||
titleX:cwidth(63), titleY:cheight(94), titleRight:cwidth(687), titleFont:"belerenb", titleFontSize:cwidth(40), titleAlignment:"left",
|
||||
typeX:cwidth(63), typeY:cheight(630), typeRight:cwidth(687), typeFont:"belerenb", typeFontSize:cwidth(34), typeAlignment:"left",
|
||||
textX:cwidth(63), textY:cheight(690), textRight:cwidth(690), textFont:"mplantin",
|
||||
ptFont:"39px belerenb", ptX:cwidth(645), ptY:cheight(975),
|
||||
ptBoxX:cwidth(571), ptBoxY:cheight(929), ptBoxWidth:cwidth(135), ptBoxHeight:cheight(76),
|
||||
setSymbolWidth:cwidth(77), setSymbolHeight:cheight(42), setSymbolX:cwidth(693), setSymbolY:cheight(620), setSymbolAlignment:"right",
|
||||
watermarkWidth:cwidth(520), watermarkHeight:cheight(250), watermarkY:cheight(815),
|
||||
cardArtX:cwidth(58), cardArtY:cheight(118),
|
||||
miracle:true, nyx:true, legendary:true, creature:true, rulesBox:true, pinline:true, rareStamp:true, titleTypeBoxes:true,
|
||||
transparency:false
|
||||
}
|
||||
var cardData = defaultCardData
|
||||
var cardData = {}
|
||||
Object.assign(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)
|
||||
function backToDefault(version) {
|
||||
//Default image values
|
||||
imgLegendary.load("none", cwidth(20), cheight(20), cwidth(714), cheight(186))
|
||||
imgLegendaryRight.load("none", cwidth(20), cheight(20), cwidth(714), cheight(186))
|
||||
imgRareStamp.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
|
||||
imgRareStampRight.load("none", cwidth(329), cheight(949), cwidth(90), cheight(50))
|
||||
imgStamp.load("none", cwidth(340), cheight(965), cwidth(70), cheight(37))
|
||||
imgNyx.load("none", cwidth(30), cheight(30), cwidth(690), cheight(586))
|
||||
imgNyxRight.load("none", cwidth(30), cheight(30), cwidth(690), cheight(586))
|
||||
imgMiracle.load("none", cwidth(30), cheight(30), cwidth(689), cheight(511))
|
||||
imgMiracleRight.load("none", cwidth(30), cheight(30), cwidth(689), cheight(511))
|
||||
//Default card data, correct card version
|
||||
Object.assign(cardData, defaultCardData)
|
||||
cardData.version = version
|
||||
//Default masks
|
||||
for (var i = 0; i < frameMaskList.length; i++) {
|
||||
if (window[frameMaskList[i]].src.includes("data/borders/m15/" + frameMaskList[i] + ".png") == false) {
|
||||
window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
|
||||
}
|
||||
}
|
||||
//Loads correct frame images
|
||||
for (var i = 0; i < frameImageList.length; i++) {
|
||||
window[frameImageList[i]].load("data/borders/" + cardData.version + "/white/frame.png")
|
||||
}
|
||||
//Fixes default font Colors
|
||||
for (var i = 0; i < document.getElementsByClassName("fontColor").length; i++) {
|
||||
document.getElementsByClassName("fontColor")[i].value = "#000000"
|
||||
}
|
||||
//Runs the finishing script
|
||||
loadScript('data/borders/' + version + '/border.js')
|
||||
}
|
||||
|
||||
//Set up canvases
|
||||
var cardCanvas = document.getElementById("cardCanvas")
|
||||
cardCanvas.width = cardWidth
|
||||
cardCanvas.height = cardHeight
|
||||
var card = cardCanvas.getContext("2d")
|
||||
function newCanvas(name) {
|
||||
window[(name + "Canvas")] = document.createElement("canvas")
|
||||
@@ -98,12 +123,12 @@ CanvasRenderingContext2D.prototype.mask = function(image, masks, color, opacity
|
||||
}
|
||||
|
||||
//Text processor... kind of...
|
||||
CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, inputRightLimit, textFont, textFontSize, textColor, skipLines, outline, outlineColor) {
|
||||
CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, inputRightLimit, textFont, textFontSize, textColor, skipLines, outline, outlineColor, textAlignment = "left") {
|
||||
this.font = textFontSize + "px " + textFont
|
||||
this.fillStyle = textColor
|
||||
this.strokeStyle = outlineColor
|
||||
this.lineWidth = 2
|
||||
this.textAlign = "left"
|
||||
this.textAlign = textAlignment
|
||||
var x = inputX
|
||||
var y = inputY
|
||||
var rightLimit = inputRightLimit
|
||||
@@ -132,6 +157,7 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
|
||||
this.fillText(currentString, currentX, currentY)
|
||||
currentX += this.measureText(currentString).width
|
||||
currentString = ""
|
||||
//Then grind through the string for codes
|
||||
while(splitText[i] != "") {
|
||||
//There may be codes within! split up the string further incase there are multiple codes/words
|
||||
var wordToWrite = ""
|
||||
@@ -191,14 +217,14 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
|
||||
splitText[i] = splitText[i].substr(possibleCode.length)
|
||||
} else {
|
||||
//It begins with a word. Write it.
|
||||
if (splitText[i].includes("{")) {
|
||||
if (splitText[i].includes("{") && splitText[i].charAt(0) != "{") {
|
||||
//There still could be codes, leave those be.
|
||||
wordToWrite = splitText[i].slice(0, splitText[i].indexOf("{"))
|
||||
} else {
|
||||
} else if (splitText[i] != "" && splitText != " ") {
|
||||
//There aren't any codes left. Finish up.
|
||||
wordToWrite = splitText[i] + " "
|
||||
}
|
||||
splitText[i] = splitText[i].substr(splitText[i].length)
|
||||
splitText[i] = splitText[i].substring(wordToWrite.length)
|
||||
}
|
||||
//After extracting a word to write, write it (if it exists)
|
||||
if (wordToWrite != "") {
|
||||
@@ -218,7 +244,7 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
|
||||
currentX += this.measureText(wordToWrite).width
|
||||
}
|
||||
}
|
||||
}
|
||||
} //WHILE LOOP ENDS HERE
|
||||
} 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) {
|
||||
@@ -249,20 +275,24 @@ CanvasRenderingContext2D.prototype.manaCost = function(input, x, y, size, path)
|
||||
var currentX = x
|
||||
var currentY = y
|
||||
var manaCostList = input.toLowerCase().replace(/{/g, " ").replace(/}/g, " ").split(" ")
|
||||
var manaSymbolWidth = 0
|
||||
for (var i = manaCostList.length - 1; i >= 0; i--) {
|
||||
if (manaSymbolCodeList.indexOf(manaCostList[i]) != -1) {
|
||||
this.beginPath()
|
||||
this.arc(currentX + size - 1, currentY + size + 3.5, size, 0, 6.29, false)
|
||||
this.fill()
|
||||
this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(manaCostList[i])], currentX, currentY, size * 2, size * 2)
|
||||
if (path == "left") {
|
||||
currentX -= 39
|
||||
manaSymbolWidth += 39
|
||||
if (cardData.manaSymbolDirection == "left") {
|
||||
var manaSymbolWidth = 0
|
||||
for (var i = manaCostList.length - 1; i >= 0; i--) {
|
||||
if (manaSymbolCodeList.indexOf(manaCostList[i]) != -1) {
|
||||
this.beginPath()
|
||||
this.arc(currentX + size - 1, currentY + size + 3.5, size, 0, 6.29, false)
|
||||
this.fill()
|
||||
this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(manaCostList[i])], currentX, currentY, size * 2, size * 2)
|
||||
if (path == "left") {
|
||||
currentX -= 39
|
||||
manaSymbolWidth += 39
|
||||
}
|
||||
}
|
||||
}
|
||||
return manaSymbolWidth
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
return manaSymbolWidth
|
||||
}
|
||||
|
||||
//Function that autocrops the image
|
||||
@@ -410,7 +440,7 @@ for (var i = 0; i < frameImageList.length; i++) {
|
||||
createImage("imgPowerToughness", "sectionText")
|
||||
imgPowerToughness.load("data/borders/m15/white/pt.png")
|
||||
//masks for the card frame
|
||||
var frameMaskList = ["imgTypeMask", "imgTitleMask", "imgPinlineMask", "imgRulesMask", "imgFrameMask", "imgArtMask"]
|
||||
var frameMaskList = ["imgTypeMask", "imgTitleMask", "imgPinlineMask", "imgRulesMask", "imgFrameMask", "imgArtMask", "imgBorderMask"]
|
||||
for (var i = 0; i < frameMaskList.length; i++) {
|
||||
createImage(frameMaskList[i], "sectionFrame")
|
||||
window[frameMaskList[i]].load("data/borders/m15/" + frameMaskList[i] + ".png")
|
||||
@@ -457,8 +487,6 @@ for (var i = 0; i < manaSymbolCodeList.length; i++) {
|
||||
document.getElementById(this.name).src = this.src
|
||||
}
|
||||
}
|
||||
//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! //
|
||||
@@ -467,35 +495,39 @@ function sectionFrameFunction() {
|
||||
//Whenever images for the card from finish loading this function will run
|
||||
//Draw the primary frame stuff!
|
||||
frameContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
frameContext.mask(imgFrame)
|
||||
if (cardData.transparency && document.getElementById("inputCheckboxFrameRight").checked) {
|
||||
frameContext.mask(imgFrame, "imgMultiGradient,source-over;imgWhite,source-out")
|
||||
} else {
|
||||
frameContext.mask(imgFrame)
|
||||
}
|
||||
if (document.getElementById("inputCheckboxFrameRight").checked) {
|
||||
frameContext.mask(imgFrameRight, "imgMultiGradient,source-over")
|
||||
}
|
||||
if (document.getElementById("inputCheckboxRulesBox").checked) {
|
||||
if (document.getElementById("inputCheckboxRulesBox").checked && cardData.rulesBox) {
|
||||
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) {
|
||||
if (document.getElementById("inputCheckboxTitleTypeBoxes").checked && cardData.titleTypeBoxes) {
|
||||
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("inputCheckboxNyx").checked) {
|
||||
if (document.getElementById("inputCheckboxNyx").checked && cardData.nyx) {
|
||||
frameContext.mask(imgNyx)
|
||||
if (document.getElementById("inputCheckboxFrameRight").checked) {
|
||||
frameContext.mask(imgNyxRight, "imgMultiGradient,source-over")
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxPinline").checked) {
|
||||
if (document.getElementById("inputCheckboxPinline").checked && cardData.pinline) {
|
||||
frameContext.mask(imgPinline, "imgPinlineMask,source-over")
|
||||
if (document.getElementById("inputCheckboxPinlineRight").checked) {
|
||||
frameContext.mask(imgPinlineRight, "imgPinlineMask,source-over;imgMultiGradient,source-in")
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxMiracle").checked) {
|
||||
if (document.getElementById("inputCheckboxMiracle").checked && cardData.miracle) {
|
||||
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")
|
||||
@@ -503,7 +535,8 @@ function sectionFrameFunction() {
|
||||
frameContext.mask(imgMiracle)
|
||||
}
|
||||
}
|
||||
if (document.getElementById("inputCheckboxLegendary").checked) {
|
||||
frameContext.mask(imgBorderMask, "none", document.getElementById("inputBorderColor").value)
|
||||
if (document.getElementById("inputCheckboxLegendary").checked && cardData.legendary) {
|
||||
frameContext.fillStyle = "black"
|
||||
frameContext.fillRect(0, 0, cardWidth, 50)
|
||||
frameContext.mask(imgLegendary, "imgTitleMask,source-over;imgWhite,source-out")
|
||||
@@ -511,8 +544,7 @@ function sectionFrameFunction() {
|
||||
frameContext.mask(imgLegendaryRight, "imgTitleMask,source-over;imgMultiGradient,source-out")
|
||||
}
|
||||
}
|
||||
|
||||
if (document.getElementById("inputCheckboxRareStamp").checked) {
|
||||
if (document.getElementById("inputCheckboxRareStamp").checked && cardData.rareStamp) {
|
||||
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")
|
||||
@@ -521,7 +553,7 @@ function sectionFrameFunction() {
|
||||
}
|
||||
//Erase anything if needed (includes opacity fun)
|
||||
frameContext.globalCompositeOperation = "destination-out"
|
||||
frameContext.mask(imgArtMask)
|
||||
// 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))
|
||||
@@ -537,11 +569,11 @@ function sectionTextFunction() {
|
||||
textContext.clearRect(0, 0, cardWidth, cardHeight)
|
||||
//mana cost, name, type, text
|
||||
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("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, cardData.titleAlignment)
|
||||
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, cardData.typeAlignment)
|
||||
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) {
|
||||
if (document.getElementById("inputCheckboxPowerToughness").checked && cardData.creature) {
|
||||
imgPowerToughness.xVal = cardData.ptBoxX
|
||||
imgPowerToughness.yVal = cardData.ptBoxY
|
||||
imgPowerToughness.wVal = cardData.ptBoxWidth
|
||||
@@ -587,22 +619,29 @@ function sectionTextFunction() {
|
||||
infoCopyright = ""
|
||||
}
|
||||
var copyrightY = 997
|
||||
if (document.getElementById("inputCheckboxPowerToughness").checked) {
|
||||
if (document.getElementById("inputCheckboxPowerToughness").checked && cardData.creature) {
|
||||
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
|
||||
switch(cardData.setSymbolAlignment) {
|
||||
case "left":
|
||||
setSymbolAlignment = -1
|
||||
break
|
||||
case "center":
|
||||
setSymbolAlignment = 1/2
|
||||
break
|
||||
default:
|
||||
setSymbolAlignment = 1
|
||||
}
|
||||
var setSymbolWidth = cardData.setSymbolWidth
|
||||
var setSymbolHeight = imgSetSymbol.height / imgSetSymbol.width * setSymbolWidth
|
||||
if (setSymbolHeight > cardData.setSymbolHeight) {
|
||||
@@ -611,7 +650,7 @@ function sectionOtherFunction() {
|
||||
}
|
||||
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)
|
||||
otherContext.drawImage(imgSetSymbol, cardData.setSymbolX - setSymbolWidth * setSymbolAlignment, cardData.setSymbolY - setSymbolHeight / 2, setSymbolWidth, setSymbolHeight)
|
||||
}
|
||||
if (document.getElementById("inputCheckboxWatermark").checked) {
|
||||
//Watermark
|
||||
@@ -639,7 +678,8 @@ function sectionOtherFunction() {
|
||||
|
||||
function drawCard() {
|
||||
//Clears the card
|
||||
card.clearRect(0, 0, cardWidth, cardHeight)
|
||||
// card.clearRect(0, 0, cardWidth, cardHeight)
|
||||
card.mask(imgWhite, "none", document.getElementById("inputBorderColor").value)
|
||||
//Draws the card art
|
||||
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
|
||||
@@ -781,35 +821,43 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
|
||||
// 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"))
|
||||
if (cardData.legendary) {
|
||||
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"))
|
||||
if (cardData.rareStamp) {
|
||||
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"))
|
||||
if (cardData.miracle) {
|
||||
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"))
|
||||
if (cardData.nyx) {
|
||||
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)
|
||||
@@ -821,8 +869,88 @@ for (var i = 0; i < document.getElementsByClassName("changesPinline").length; i+
|
||||
document.getElementsByClassName("changesPinline")[i].addEventListener("change", function() {loadLegendaryImages(); loadRareStampImages()}, false)
|
||||
}
|
||||
|
||||
//============================================//
|
||||
// Brower Stuff! //
|
||||
//============================================//
|
||||
//Determine browser
|
||||
if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ) {
|
||||
var isMobile = true
|
||||
} else {
|
||||
var isMobile = false
|
||||
}
|
||||
var isChrome = navigator.userAgent.indexOf("Chrome") > -1
|
||||
var isExplorer = navigator.userAgent.indexOf("MSIE") > -1
|
||||
var isFirefox = navigator.userAgent.indexOf("Firefox") > -1
|
||||
var isSafari = navigator.userAgent.indexOf("Safari") > -1
|
||||
if (isChrome == true && isSafari == true) {
|
||||
isSafari = false
|
||||
}
|
||||
//Now act on different browser craziness...
|
||||
if (isSafari == true) {
|
||||
if (isMobile == true) {
|
||||
//Safari for iOS
|
||||
textBaselineShift = [-0.17, -0.08]
|
||||
} else {
|
||||
//Safari for macOS
|
||||
textBaselineShift = [-0.17, 0]
|
||||
}
|
||||
}
|
||||
function setCookie(cookieName, cookieValue) {
|
||||
var tempDate = new Date();
|
||||
tempDate.setTime(tempDate.getTime() + (31 * 24 * 60 * 60 * 1000)); //days*hours*minutes*seconds*milliseconds
|
||||
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("visited") != "true") {
|
||||
if (isMobile == true) {
|
||||
alert("Thanks for using Card Conjurer! Unfortunately some users have been experiencing difficulty on mobile devices when uploading pictures they took on that mobile device. An easy solution is to quickly edit that picture by cropping it slightly. Otherwise, images from URLs and other sources should work normally.")
|
||||
} else if (isSafari == false && isChrome == false) {
|
||||
alert("Thanks for using Card Conjurer! Unfortunately different browsers treat custom fonts differently and it appears that you are using a browser other than Safari or Chrome. Everything may work perfectly, but if you notice that the cards look odd try using Safari or Chrome.")
|
||||
}
|
||||
setCookie("visited", "true")
|
||||
} else {
|
||||
console.log("Welcome back to Card Conjurer!")
|
||||
}
|
||||
}
|
||||
|
||||
//============================================//
|
||||
// OTHER //
|
||||
//============================================//
|
||||
//changeme (FIND A BETTER PLACE FOR THIS)
|
||||
function cwidth(originalValue = 750, originalCardWidth = 750) {
|
||||
return (originalValue / originalCardWidth * cardWidth)
|
||||
}
|
||||
function cheight(originalValue = 1050, originalCardHeight = 1050) {
|
||||
return (originalValue / originalCardHeight * cardHeight)
|
||||
}
|
||||
|
||||
//Runs stuff at the very end (once everything is set up)
|
||||
defaultImageValues()
|
||||
checkCookies()
|
||||
backToDefault("m15")
|
||||
loadScript("data/other/setCodeList.js")
|
||||
//changeme
|
||||
setTimeout(function(){sectionTextFunction()}, 100)
|
||||
setTimeout(function(){sectionTextFunction()}, 250)
|
||||
//Only for working on frames n' stuff :)
|
||||
// setTimeout(function(){
|
||||
// document.getElementById("inputCardVersion").value = "fullArtLandUnstable"
|
||||
// document.getElementById("inputCardVersion").onchange()
|
||||
// }, 50)
|
||||
|
||||
//============================================//
|
||||
// RIP OLD CARD CONJURER //
|
||||
|
||||
90
data/other/setCodeList.js
Normal file
90
data/other/setCodeList.js
Normal file
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
This is a list of set codes.
|
||||
It has all been typed manually, so there are possibly errors, but let's hope not!
|
||||
Duplicates found and removed: ORI, W17, CED
|
||||
Sets not found: Astral, Deckmasters, Duels of the Planeswalkers
|
||||
The codes have been resourced from the following:
|
||||
https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets
|
||||
Last updated: 3-29-19
|
||||
Last set added:
|
||||
*/
|
||||
//Common through Rare
|
||||
var setCodeListPreMythic = ['1E', '2E', '2U', '3E', '4E', '5E', '6E', '7E', '8ED', '9ED', '10E', 'AN',
|
||||
'AQ', 'LE', 'DK', 'FE', 'HM', 'IA', 'AL', 'MI', 'VI', 'WL', 'TE', 'ST', 'EX', 'UZ', 'GU', 'AP', 'OD',
|
||||
'TOR', 'JUD', 'ONS', 'LGN', 'SCG', 'MRD', 'DST', '5DN', 'CHK', 'BOK', 'SOK', 'RAV', 'GPT', 'DIS', 'CSP',
|
||||
'TSP', 'PLC', 'FUT', 'LRW', 'MOR', 'SHM', 'EVE', 'PO', 'P2', 'PK', 'P3', 'P4', 'CH', 'BR', 'BD', 'EVG',
|
||||
'UG', 'UNH', 'MED', 'ME2', 'ME3', 'ME4']
|
||||
//Common through Mythic
|
||||
var setCodeListPostMythic = ['M10', 'M11', 'M12', 'M13', 'M14', 'M15', 'ORI', 'M19', 'ALA', 'CON',
|
||||
'ARB', 'ZEN', 'WWK', 'ROE', 'SOM', 'MBS', 'NPH', 'ISD', 'DKA', 'AVR', 'RTR', 'GTC', 'DGM', 'THS', 'BNG',
|
||||
'JOU', 'KTK', 'FRF', 'DTK', 'BFZ', 'OGW', 'SOI', 'EMN', 'KLD', 'AER', 'AKH', 'HOU', 'XLN', 'RIX', 'DOM',
|
||||
'GRN', 'RNA', /*'MH1',*/ 'GS1', 'MD1', 'DD2', 'DDC', 'DDD', 'DDE', 'DDF', 'DDG', 'DDH', 'DDI', 'DDJ', 'DDK',
|
||||
'DDL', 'DDM', 'DDN', 'DDP', 'DDQ', 'DDR', 'DDS', 'DDT', 'DDU', 'SS1', 'H09', 'PD2', 'PD3', 'MMA', 'MM2',
|
||||
'EMA', 'MM3', 'IMA', 'A25', 'UMA', 'HOP', 'PC2', 'PCA', 'ARC', 'E01', 'CMD', 'CM1', 'C13', 'C14', 'C15',
|
||||
'C16', 'CMA', 'C17', 'CM2', 'C18', 'CNS', 'CN2', 'E02', 'BBD', 'UST', 'VMA', 'TPR', 'W16', 'W17',
|
||||
'GK1_IZZET', 'GK1_SELESN', 'GK1_BOROS', 'GK1_GOLGAR', 'GK2_RAKDOS', 'GK2_AZORIU', 'GK2_SIMIC',
|
||||
'GK2_GRUUL', 'GK2_ORZHOV']
|
||||
//Only Rare
|
||||
var setCodeListRareOnly = ['DRB']
|
||||
//Only Mythic
|
||||
var setCodeListMythicOnly = ['V09', 'V10', 'V11', 'V12', 'V13', 'V14', 'V15', 'V16', 'V17', 'EXP', 'MPS_GRN']
|
||||
//Only Special
|
||||
var setCodeListSpecialOnly = ['MPS_KLD', 'MPS_AKH']
|
||||
|
||||
randomSet()
|
||||
function randomSet() {
|
||||
var totalSetCount = setCodeListPreMythic.length + setCodeListPostMythic.length + setCodeListMythicOnly.length + setCodeListSpecialOnly.length
|
||||
var randomSet = Math.floor(Math.random() * totalSetCount)
|
||||
var possibleRarities, rarity, set
|
||||
if (randomSet < setCodeListPreMythic.length) {
|
||||
set = setCodeListPreMythic[randomSet]
|
||||
possibleRarities = 3
|
||||
} else {
|
||||
randomSet -= setCodeListPreMythic.length
|
||||
if (randomSet < setCodeListPostMythic.length) {
|
||||
set = setCodeListPostMythic[randomSet]
|
||||
possibleRarities = 4
|
||||
} else {
|
||||
randomSet -= setCodeListPostMythic.length
|
||||
if (randomSet < setCodeListRareOnly.length) {
|
||||
set = setCodeListRareOnly[randomSet]
|
||||
possibleRarities = 7
|
||||
} else {
|
||||
randomSet -= setCodeListRareOnly.length
|
||||
if (randomSet < setCodeListMythicOnly.length) {
|
||||
set = setCodeListMythicOnly[randomSet]
|
||||
possibleRarities = 8
|
||||
} else {
|
||||
randomSet -= setCodeListMythicOnly.length
|
||||
set = setCodeListSpecialOnly[randomSet]
|
||||
possibleRarities = 9
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
if (possibleRarities == 7) {
|
||||
rarity = "R"
|
||||
} else if (possibleRarities == 8) {
|
||||
rarity = "M"
|
||||
} else if (possibleRarities == 9) {
|
||||
rarity = "S"
|
||||
} else {
|
||||
switch(Math.floor(Math.random() * possibleRarities)) {
|
||||
case 3:
|
||||
rarity = "M"
|
||||
break
|
||||
case 2:
|
||||
rarity = "R"
|
||||
break
|
||||
case 1:
|
||||
rarity = "U"
|
||||
break
|
||||
default:
|
||||
rarity = "C"
|
||||
}
|
||||
}
|
||||
document.getElementById("inputSetSymbolCode").value = set
|
||||
document.getElementById("inputSetSymbolRarity").value = rarity
|
||||
imageURL("http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + set + "&size=large&rarity=" + rarity, imgSetSymbol, "needsBoth")
|
||||
}
|
||||
16
index.html
16
index.html
@@ -61,7 +61,7 @@
|
||||
<div class="title"><img src="images/title.png"></div>
|
||||
<div class="grid mainGrid">
|
||||
<div class="canvasContainer">
|
||||
<canvas id="cardCanvas" width="750" height="1050"></canvas>
|
||||
<canvas id="cardCanvas"></canvas>
|
||||
</div>
|
||||
<div class="cmmArea">
|
||||
<div class="grid selectionGrid">
|
||||
@@ -89,7 +89,7 @@
|
||||
<div class="cmm shown" id="cmm-frame">
|
||||
Border
|
||||
<span class="dropdown">
|
||||
<select onchange="loadScript('data/borders/' + this.value + '/border.js')">
|
||||
<select onchange="backToDefault(this.value)" id="inputCardVersion">
|
||||
<option value="m15">M15</option>
|
||||
<option value="fullArtLandUnstable">Full Art Land (Unstable)</option>
|
||||
</select>
|
||||
@@ -97,7 +97,7 @@
|
||||
<br><br>
|
||||
Frame
|
||||
<span class="dropdown">
|
||||
<select class="selectColor changesFrame" onchange="imgFrame.load(this.value + 'frame.png')"></select>
|
||||
<select class="selectColor changesFrame" onchange="imgFrame.load(this.value + 'frame.png')" id="inputFrameColor"></select>
|
||||
</span>
|
||||
<br>
|
||||
<div class="checkbox">
|
||||
@@ -197,25 +197,27 @@
|
||||
Pinline Opacity
|
||||
<input id="inputPinlineOpacity" type="number" class="input" min="0" max="100" value="100" step="1" oninput="sectionFrameFunction()">
|
||||
<br><br>
|
||||
Title Color <input type="color" id="inputTitleColor" value="#000000" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#ffffff" onchange="sectionTextFunction()">
|
||||
Title Color <input type="color" id="inputTitleColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTitleOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="inputCheckboxTitleOutline" onchange="sectionTextFunction()">
|
||||
<label for="inputCheckboxTitleOutline" />
|
||||
<div>Title Outline</div>
|
||||
</div>
|
||||
Type Color <input type="color" id="inputTypeColor" value="#000000" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#ffffff" onchange="sectionTextFunction()">
|
||||
Type Color <input type="color" id="inputTypeColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputTypeOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="inputCheckboxTypeOutline" onchange="sectionTextFunction()">
|
||||
<label for="inputCheckboxTypeOutline" />
|
||||
<div>Type Outline</div>
|
||||
</div>
|
||||
Rules Color <input type="color" id="inputRulesColor" value="#000000" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#ffffff" onchange="sectionTextFunction()">
|
||||
Rules Color <input type="color" id="inputRulesColor" value="#000000" class="fontColor" onchange="sectionTextFunction()"> Outline <input type="color" id="inputRulesOutlineColor" value="#000000" class="fontColor" onchange="sectionTextFunction()">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="inputCheckboxRulesOutline" onchange="sectionTextFunction()">
|
||||
<label for="inputCheckboxRulesOutline" />
|
||||
<div>Rules Outline</div>
|
||||
</div>
|
||||
<input type="color" id="inputCreatureColor" value="#000000" onchange="sectionTextFunction()"> Power/Toughness Color<br>
|
||||
<input type="color" id="inputCreatureColor" value="#000000" onchange="sectionTextFunction()"> Power/Toughness Color
|
||||
<br><br>
|
||||
<input type="color" id="inputBorderColor" value="#000000" onchange="sectionFrameFunction()"> Border Color
|
||||
</div>
|
||||
<div class="cmm" id="cmm-text">
|
||||
Name
|
||||
|
||||
Reference in New Issue
Block a user