diff --git a/data/borders/plane/border.js b/data/borders/plane/border.js
new file mode 100644
index 00000000..c1094ba3
--- /dev/null
+++ b/data/borders/plane/border.js
@@ -0,0 +1,85 @@
+//============================================//
+// Miniplane Border //
+//============================================//
+//Change canvas size
+changeCanvasSize(1050, 750)
+imgFrame.load("none")
+//General Booleans
+cardData.miracle = false
+cardData.nyx = false
+cardData.legendary = false
+cardData.creature = false
+cardData.rulesBox = false
+cardData.titleTypeBoxes = false
+cardData.rareStamp = false
+//Specific Values
+cardData.manaSymbolDirection = "none"
+cardData.titleAlignment = "center"
+cardData.titleX = cardWidth / 2
+cardData.titleY = cheight(105)
+cardData.titleFontSize = cwidth(25)
+cardData.titleRight = cwidth(700)
+cardData.typeAlignment = "center"
+cardData.typeX = cardWidth / 2
+cardData.typeY = cheight(739)
+cardData.typeFontSize = cwidth(18)
+cardData.textX = cwidth(90)
+cardData.textY = cheight(790)
+document.getElementById("inputTextSize").value = 27
+cardData.textRight = cwidth(669)
+cardData.setSymbolY = cheight(727)
+cardData.setSymbolWidth = cwidth(55)
+cardData.setSymbolHeight = cheight(33)
+cardData.setSymbolX = cwidth(582)
+cardData.watermarkWidth = cwidth(660)
+cardData.watermarkHeight = cheight(210)
+cardData.watermarkY = cheight(870)
+cardData.cardArtX = cwidth(23)
+cardData.cardArtY = cheight(46)
+cardData.bottomInfoFunction = "bottomInfoPlanechase"
+cardData.horizontal = true
+//Images
+imgArtMask.load("data/borders/plane/imgArtMask.png")
+imgFrameMask.load("data/borders/plane/imgFrameMask.png")
+imgBorderMask.load("data/borders/plane/imgBorderMask.png")
+imgRulesMask.load("data/borders/plane/imgRulesMask.png")
+imgTypeMask.load("data/borders/plane/imgTypeMask.png")
+imgTitleMask.load("data/borders/plane/imgTitleMask.png")
+//Loads the Colors
+loadColors("white-Regular,high-High,mid-Middle,low-Low,none-Single")
+//Runs the things!
+sectionTextFunction()
+sectionFrameFunction()
+sectionOtherFunction()
+
+function bottomInfoPlanechase() {
+ var infoNumber = document.getElementById("inputInfoNumber").value
+ var infoRarity = document.getElementById("inputInfoRarity").value
+ var infoSet = document.getElementById("inputInfoSet").value
+ var infoLanguage = document.getElementById("inputInfoLanguage").value
+ var infoArtist = document.getElementById("inputInfoArtist").value
+ var infoCopyright = "CC \u2014 " + document.getElementById("inputInfoCopyright").value
+ if (infoCopyright == "CC \u2014 secretcode") {
+ var date = new Date()
+ var year = date.getFullYear()
+ infoCopyright = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
+ } else if (infoCopyright == "CC \u2014 ") {
+ infoCopyright = ""
+ }
+ var infoNumberSetLanguage = infoNumber + " " + infoSet + " \u00b7 " + infoLanguage + " "
+ textContext.fillStyle = "white"
+ textContext.font = cheight(18) + "px gothammedium"
+ var infoNumberSetLanguageWidth = textContext.measureText(infoNumberSetLanguage).width
+ textContext.font = cheight(19) + "px mplantin"
+ var infoCopyrightWidth = textContext.measureText(infoCopyright).width
+ var bottomLineStart = cardWidth / 2 - (infoNumberSetLanguageWidth + infoCopyrightWidth) / 2
+ textContext.fillText(infoCopyright, bottomLineStart + infoNumberSetLanguageWidth, cheight(1028))
+ textContext.font = cheight(18) + "px gothammedium"
+ textContext.fillText(infoNumberSetLanguage, bottomLineStart, cheight(1028))
+ textContext.font = cheight(19) + "px belerenbsc"
+ var infoArtistStart = cardWidth / 2 - (textContext.measureText(infoArtist).width + cheight(21)) / 2
+ imgArtistBrush.load("none", infoArtistStart, cheight(992), cheight(21), cheight(13))
+ textContext.mask(imgArtistBrush, "none", textContext.fillStyle)
+ textContext.fillText(infoArtist, infoArtistStart + cheight(21), cheight(1004))
+ drawCard()
+}
\ No newline at end of file
diff --git a/data/borders/plane/high/frame.png b/data/borders/plane/high/frame.png
new file mode 100644
index 00000000..40d29079
Binary files /dev/null and b/data/borders/plane/high/frame.png differ
diff --git a/data/borders/plane/imgArtMask.png b/data/borders/plane/imgArtMask.png
new file mode 100644
index 00000000..c7a06ec5
Binary files /dev/null and b/data/borders/plane/imgArtMask.png differ
diff --git a/data/borders/plane/imgBorderMask.png b/data/borders/plane/imgBorderMask.png
new file mode 100644
index 00000000..d117bc80
Binary files /dev/null and b/data/borders/plane/imgBorderMask.png differ
diff --git a/data/borders/plane/imgFrameMask.png b/data/borders/plane/imgFrameMask.png
new file mode 100644
index 00000000..47ce245f
Binary files /dev/null and b/data/borders/plane/imgFrameMask.png differ
diff --git a/data/borders/plane/imgRulesMask.png b/data/borders/plane/imgRulesMask.png
new file mode 100644
index 00000000..860e5295
Binary files /dev/null and b/data/borders/plane/imgRulesMask.png differ
diff --git a/data/borders/plane/imgTitleMask.png b/data/borders/plane/imgTitleMask.png
new file mode 100644
index 00000000..8fddcc02
Binary files /dev/null and b/data/borders/plane/imgTitleMask.png differ
diff --git a/data/borders/plane/imgTypeMask.png b/data/borders/plane/imgTypeMask.png
new file mode 100644
index 00000000..a4875bfb
Binary files /dev/null and b/data/borders/plane/imgTypeMask.png differ
diff --git a/data/borders/plane/low/frame.png b/data/borders/plane/low/frame.png
new file mode 100644
index 00000000..feb7dbd2
Binary files /dev/null and b/data/borders/plane/low/frame.png differ
diff --git a/data/borders/plane/mid/frame.png b/data/borders/plane/mid/frame.png
new file mode 100644
index 00000000..fb337eef
Binary files /dev/null and b/data/borders/plane/mid/frame.png differ
diff --git a/data/borders/plane/none/frame.png b/data/borders/plane/none/frame.png
new file mode 100644
index 00000000..539ca471
Binary files /dev/null and b/data/borders/plane/none/frame.png differ
diff --git a/data/borders/plane/white/frame.png b/data/borders/plane/white/frame.png
new file mode 100644
index 00000000..d8259f71
Binary files /dev/null and b/data/borders/plane/white/frame.png differ
diff --git a/data/main.js b/data/main.js
index b7b01639..6a6095e5 100644
--- a/data/main.js
+++ b/data/main.js
@@ -2,21 +2,31 @@
// Card Conjurer, by Kyle Burton //
//============================================//
//Hi there :D
-window.onscroll = function() {scrollFunction()};
+//changeme new location
+window.onscroll = function() {scrollFunction()}
window.onresize = function() {scrollFunction()}
function scrollFunction() {
- if (window.innerWidth > 900) {
- if (document.body.scrollTop < 70) {
- document.getElementById("header").style.maxHeight = 100 - document.body.scrollTop + "px";
+ var titleHeight = parseInt(window.innerWidth * 141 / 1236 - 10);
+ if (window.innerWidth >= 750) {
+ if (window.innerWidth >= 970) {
+ titleHeight = 100
+ }
+ if (document.body.scrollTop < titleHeight - 30) {
+ document.getElementById("header").style.maxHeight = titleHeight - document.body.scrollTop
} else {
- document.getElementById("header").style.maxHeight = "30px";
+ document.getElementById("header").style.maxHeight = "30px"
}
+ document.getElementsByClassName("mainGrid")[0].style.marginTop = titleHeight + 10
} else {
- document.getElementById("header").style.maxHeight = "80px";
+ document.getElementsByClassName("mainGrid")[0].style.marginTop = 0
+ document.getElementById("header").style.maxHeight = titleHeight
}
}
-scrollFunction()
+
+
+
+
//============================================//
// Anything I Like to Change Often :) //
@@ -45,12 +55,16 @@ var defaultCardData = {
miracle:true, nyx:true, legendary:true, creature:true, rulesBox:true, pinline:true, rareStamp:true, titleTypeBoxes:true,
transparency:false,
specialImageA:false, specialImageB:false,
- bottomInfoFunction:"bottomInfoM15"
+ bottomInfoFunction:"bottomInfoM15",
+ horizontal:false
}
var cardData = {}
Object.assign(cardData, defaultCardData)
//Function that restores image values for various things :)
function backToDefault(version) {
+ if (cardWidth != 750 || cardHeight != 1050) {
+ changeCanvasSize(750, 1050)
+ }
//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))
@@ -83,24 +97,26 @@ function backToDefault(version) {
}
//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")
- window[(name + "Context")] = window[(name + "Canvas")].getContext("2d")
- window[(name + "Canvas")].width = cardWidth
- window[(name + "Canvas")].height = cardHeight
+var canvas = document.getElementById("canvas")
+var context = canvas.getContext("2d")
+var canvasList = ["card", "mask", "frame", "text", "other", "transparent", "crop", "specialA", "specialB"]
+for (var i = 0; i < canvasList.length; i ++) {
+ window[(canvasList[i] + "Canvas")] = document.createElement("canvas")
+ window[(canvasList[i] + "Context")] = window[(canvasList[i] + "Canvas")].getContext("2d")
+ window[(canvasList[i] + "Canvas")].width = cardWidth
+ window[(canvasList[i] + "Canvas")].height = cardHeight
+}
+function changeCanvasSize(width, height) {
+ cardWidth = width
+ cardHeight = height
+ for (var i = 0; i < canvasList.length; i ++) {
+ window[(canvasList[i] + "Canvas")].width = cardWidth
+ window[(canvasList[i] + "Canvas")].height = cardHeight
+ }
+ imgCornerMask.load("none")
+ imgWhite.load("none")
+ imgBlank.load("none")
}
-newCanvas("mask")
-newCanvas("frame")
-newCanvas("text")
-newCanvas("other")
-newCanvas("transparent")
-newCanvas("crop")
-newCanvas("specialA")
-newCanvas("specialB")
//============================================//
// Custom Canvas Functions //
@@ -131,6 +147,7 @@ CanvasRenderingContext2D.prototype.mask = function(image, masks, color, maskOpac
if (image != "none") {
maskContext.drawImage(image, image.xVal, image.yVal, image.wVal, image.hVal)
+ // console.log(image.yVal)
}
//If a color is provided, fill that in too.
if (color != undefined && color != "none") {
@@ -234,10 +251,18 @@ CanvasRenderingContext2D.prototype.writeText = function(text, inputX, inputY, in
} else if (possibleCodeLower.slice(0, 6) == "{right" && possibleCodeLower.charAt(possibleCodeLower.length - 1) == "}") {
currentX += parseInt(possibleCodeLower.slice(6, possibleCodeLower.length - 1))
x += parseInt(possibleCodeLower.slice(6, possibleCodeLower.length - 1))
+ } else if (possibleCodeLower == "{plane}") {
+ this.drawImage(manaSymbolImageList[56], currentX + cheight(5), currentY - cheight(25), cheight(67), cheight(60))
+ currentX += cheight(85)
+ x += cheight(85)
} else if (manaSymbolCodeList.includes((possibleCodeLower.replace("{", "").replace("}", "")))) {
//It's a mana symbol! Draw it.
- this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.replace("{", "").replace("}", ""))], currentX + textFontSize * 0.054, currentY - textFontSize * 0.7, textFontSize * 0.77, textFontSize * 0.77)
- currentX += textFontSize * 0.84
+ var extraWidth = 1
+ if (possibleCodeLower.replace("{", "").replace("}", "") == "chaos") {
+ extraWidth = 1.15
+ }
+ this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.replace("{", "").replace("}", ""))], currentX + textFontSize * 0.054, currentY - textFontSize * 0.7, textFontSize * 0.77 * extraWidth, textFontSize * 0.77)
+ currentX += textFontSize * 0.77 * extraWidth + textFontSize * 0.07
} else {
//It's not a code. treat it like a regular word.
wordToWrite = possibleCode
@@ -416,6 +441,7 @@ function createImage(name, section) {
window[name].yVal = 0
window[name].wVal = cardWidth
window[name].hVal = cardHeight
+ window[name].name = name
if (section != undefined) {
window[name].cardSection = section
} else {
@@ -427,8 +453,14 @@ function createImage(name, section) {
this.loadingStatus = false
if (this.cardSection != "none") {
window[this.cardSection] -= 1
+ if (this.cardSection == "sectionFrame") {
+ //console.log("Finished loading. Current total: " + window[this.cardSection] + " " + this.name)
+ }
if (window[this.cardSection] <= 0) {
//Once all the images under a certain section have loaded, that section's function will be run
+ if (this.cardSection == "sectionFrame") {
+ //console.log("We're all done loading!\n\n\n\n\n")
+ }
window[this.cardSection + "Function"]()
}
}
@@ -440,14 +472,17 @@ Image.prototype.load = function(source, x, y, w, h) {
if (source != "none") {
if (this.loadingStatus != true && this.cardSection != "none") {
window[this.cardSection] += 1
+ if (this.cardSection == "sectionFrame") {
+ //console.log("Starting to load. Current total: " + window[this.cardSection] + " " + this.name)
+ }
}
this.loadingStatus = true
this.src = source
}
- if (x != undefined) {this.xVal = x} else if (this.xVal == undefined) {this.xVal = 0}
- if (y != undefined) {this.yVal = y} else if (this.yVal == undefined) {this.yVal = 0}
- if (w != undefined) {this.wVal = w} else if (this.wVal == undefined) {this.wVal = cardWidth}
- if (h != undefined) {this.hVal = h} else if (this.hVal == undefined) {this.hVal = cardHeight}
+ if (x != undefined) {this.xVal = x} else /*if (this.xVal == undefined)*/ {this.xVal = 0}
+ if (y != undefined) {this.yVal = y} else /*if (this.yVal == undefined)*/ {this.yVal = 0}
+ if (w != undefined) {this.wVal = w} else /*if (this.wVal == undefined)*/ {this.wVal = cardWidth}
+ if (h != undefined) {this.hVal = h} else /*if (this.hVal == undefined)*/ {this.hVal = cardHeight}
}
//Loads images via URL
@@ -720,28 +755,36 @@ function sectionOtherFunction() {
function drawCard() {
//Clears the card
- // card.clearRect(0, 0, cardWidth, cardHeight)
- card.mask(imgWhite, "none", document.getElementById("inputBorderColor").value)
+ cardContext.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)
+ cardContext.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)
//Might do something special? Usually the ability lines for planeswalkers
if (cardData.specialImageA == true) {
- card.drawImage(specialACanvas, 0, 0, cardWidth, cardHeight)
+ cardContext.drawImage(specialACanvas, 0, 0, cardWidth, cardHeight)
}
//Draws the card frame
- card.drawImage(frameCanvas, 0, 0, cardWidth, cardHeight)
+ cardContext.drawImage(frameCanvas, 0, 0, cardWidth, cardHeight)
//Might do something special? Usually the ability icons for planeswalkers
if (cardData.specialImageB == true) {
- card.drawImage(specialBCanvas, 0, 0, cardWidth, cardHeight)
+ cardContext.drawImage(specialBCanvas, 0, 0, cardWidth, cardHeight)
}
//Draws the card text
- card.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
+ cardContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight)
//Draws the other stuff
- card.drawImage(otherCanvas, 0, 0, cardWidth, cardHeight)
+ cardContext.drawImage(otherCanvas, 0, 0, cardWidth, cardHeight)
//Erase anything if needed
- card.globalCompositeOperation = "destination-out"
- card.mask(imgCornerMask)
- card.globalCompositeOperation = "source-over"
+ cardContext.globalCompositeOperation = "destination-out"
+ cardContext.mask(imgCornerMask)
+ cardContext.globalCompositeOperation = "source-over"
+ //Draws the card onto the visible canvas
+ context.clearRect(0, 0, canvas.width, canvas.height)
+ if (cardData.horizontal) {
+ context.rotate(-90 * Math.PI / 180)
+ context.drawImage(cardCanvas, -canvas.height, 0, canvas.height, canvas.width)
+ context.rotate(90 * Math.PI / 180)
+ } else {
+ context.drawImage(cardCanvas, 0, 0, canvas.width, canvas.height)
+ }
}
//============================================//
@@ -910,10 +953,12 @@ function loadNyxImages() {
}
}
function changePowerToughnessColor() {
- if (document.getElementById("inputCheckboxFrameRight").checked) {
- imgPowerToughness.load(document.getElementById("inputFrameRightColor").value + 'pt.png')
- } else {
- imgPowerToughness.load(document.getElementById("inputFrameColor").value + 'pt.png')
+ if (cardData.creature) {
+ if (document.getElementById("inputCheckboxFrameRight").checked) {
+ imgPowerToughness.load(document.getElementById("inputFrameRightColor").value + 'pt.png')
+ } else {
+ imgPowerToughness.load(document.getElementById("inputFrameColor").value + 'pt.png')
+ }
}
}
for (var i = 0; i < document.getElementsByClassName("changesFrame").length; i++) {
@@ -980,12 +1025,12 @@ function checkCookies() {
alert("Thanks for using Card Conjurer! Unfortunately different browsers treat custom fonts differently and it appears that you are using a browser other than Chrome. Everything may work perfectly, but if you notice that the text looks odd try switching to Chrome.")
}
setCookie("visited", "true")
- setCookie("cookieUpdated3", "true")
+ setCookie("cookieUpdated4", "true")
} else {
console.log("Welcome back to Card Conjurer!")
- if (getCookie("cookieUpdated3") != "true") {
- alert("Card Conjurer has been updated since your last visit. After reworking the system I haven't had time to add all the old border styles back, but feel free to contact me at CardConjurerMTG@gmail.com if you would like to request a border style or have any questions. \r\n\r\nNewest border style: Tokens")
- setCookie("cookieUpdated3", "true")
+ if (getCookie("cookieUpdated4") != "true") {
+ alert("Card Conjurer has been updated since your last visit. After reworking the system I haven't had time to add all the old border styles back, but feel free to contact me at CardConjurerMTG@gmail.com if you would like to request a border style or have any questions. \r\n\r\nNewest border style: Plane")
+ setCookie("cookieUpdated4", "true")
} else {
console.log("There are no new updates since your last visit.")
if (getCookie("donationRequest") != "true") {
@@ -1013,13 +1058,14 @@ function cheight(originalValue = 1050, originalCardHeight = 1050) {
setTimeout(function(){checkCookies()}, 1005)
backToDefault("m15")
loadScript("data/other/setCodeList.js")
+scrollFunction()
//changeme
setTimeout(function(){sectionTextFunction()}, 250)
setTimeout(function(){sectionTextFunction()}, 500)
setTimeout(function(){sectionTextFunction()}, 1000)
// Only for working on frames n' stuff :)
// setTimeout(function(){
-// document.getElementById("inputCardVersion").value = "tokenTextless"
+// document.getElementById("inputCardVersion").value = "plane"
// document.getElementById("inputCardVersion").onchange()
// }, 500)
diff --git a/index.html b/index.html
index d62b6750..99e91e7b 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
-
+
@@ -23,14 +23,14 @@
- -->