GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

dynamic plane card size

Browse Source
This commit is contained in:
Kyle
2018-11-02 11:34:24 -07:00
parent c2f858253c
commit 2994a3556b
4 changed files with 135 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
data/borders/defaultBorder.js
View File

@@ -23,10 +23,8 @@ var centerSetSymbol = 1 //1=not centered, 2=centered
var artX = 58 var artX = 58
var artY = 118 var artY = 118
//card size //card size
canvas.width = 749 cardWidth = 749
canvas.height = 1044 cardHeight = 1044
borderCanvas.width = 749
borderCanvas.height = 1044
//Loads the correct border data //Loads the correct border data
borderPath = "data/borders/" + document.getElementById("borderSelection").value borderPath = "data/borders/" + document.getElementById("borderSelection").value
loadScript(borderPath + "border.js") loadScript(borderPath + "border.js")

66
data/borders/m15/border.js
View File

@@ -1,50 +1,48 @@
//M15 Border //M15 Border
//Anything to do with... //Anything to do with...
//Card Title //Card Title
var titleFont = "40px belerenb" var titleFont = "40px belerenb" //40
var titleFontSpacing = "0.15px" var titleFontSpacing = "0.15px" //0.15
var titleX = 62 var titleX = 62 //62
var titleY = 56 var titleY = 56 //56
//Mana Cost //Mana Cost
var manaCostRadius = 17.5 var manaCostRadius = 17.5 //17.5
var manaCostX = 657 var manaCostX = 657 //657
var manaCostY = 59 var manaCostY = 59 //59
//Card Type //Card Type
var typeFont = "33.5px belerenb" var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" var typeFontSpacing = "0.05px" //0.05
var typeX = 62 var typeX = 62 //62
var typeY = 595 var typeY = 595 //595
//Rules/Flavor Text //Rules/Flavor Text
var textFont = "px mplantin" var textFont = "px mplantin"
var textFontSpacing = 1.3 var textFontSpacing = 1.3 //1.3
var textX = 66 var textX = 66 //66
var textY = 656 var textY = 656 //656
var textWidth = 682 var textWidth = 682 //682
//Power Toughness //Power Toughness
var ptFont = "39px belerenb" var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" var ptFontSpacing = "0.3px" //0.3
var ptTextX = 645 var ptTextX = 645 //645
var ptTextY = 936 var ptTextY = 936 //936
var ptX = 571 var ptX = 571 //571
var ptY = 929 var ptY = 929 //929
var ptWidth = 137 var ptWidth = 137 //137
var ptHeight = 75 var ptHeight = 75 //75
//Bottom Info //Bottom Info
var eighthInfo = false
var eighthInfoY = 992
var m15Info = true var m15Info = true
var m15InfoY = 993 var m15InfoY = 993 //993
//Set Symbol //Set Symbol
var setSymbolY = 616 var setSymbolY = 616 //616
var setSymbolRight = 693 var setSymbolRight = 693 //693
var setSymbolWidth = 77 var setSymbolWidth = 77 //77
var setSymbolHeight = 44 var setSymbolHeight = 44 //44
//Watermark //Watermark
var watermarkWidth = 520 var watermarkWidth = 520 //520
var watermarkHeight = 250 var watermarkHeight = 250 //250
var watermarkY = 805 var watermarkY = 805 //805
//Rare Stamp //Rare Stamp
var rareStampY = 958 var rareStampY = 958 //958
//Color Options //Color Options
loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact,vehicle-Vehicle") loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact,vehicle-Vehicle")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML

82
data/borders/plane/border.js
View File

@@ -1,55 +1,52 @@
//Plane Border //Plane Border
//Anything to do with... //Anything to do with...
//Card Size
cardWidth = 1074
cardHeight = 749
//Card Title //Card Title
var titleFont = "34px belerenb" var titleFont = cardHeight * 0.0454 + "px belerenb" //34
var titleFontSpacing = "0.15px" var titleFontSpacing = cardWidth * 0.00014 + "px" //0.15
var titleX = 522 var titleX = cardWidth * 0.5000 //522
var titleY = 40 var titleY = cardHeight * 0.0534 //40
var titleAlign = "center" var titleAlign = "center"
//Mana Cost //Mana Cost
var manaCostRadius = 0 var manaCostRadius = 0
var manaCostX = 1000 var manaCostX = 0
var manaCostY = 1000 var manaCostY = 0
//Card Type //Card Type
var typeFont = "26px belerenb" var typeFont = cardHeight * 0.0347 + "px belerenb" //26
var typeFontSpacing = "0px" var typeFontSpacing = "0px" //0
var typeX = 522 var typeX = cardWidth * 0.5000 //522
var typeY = 502 var typeY = cardHeight * 0.6702 //502
var typeAlign = "center" var typeAlign = "center"
//Rules/Flavor Text //Rules/Flavor Text
var textFont = "px mplantin" var textFont = "px mplantin"
var textFontSpacing = 0.2 var textFontSpacing = cardWidth * 0.0002 //0.2
var textX = 124 var textX = cardWidth * 0.1188 //124
var textY = 535 var textY = cardHeight * 0.7143 //535
var textWidth = 925 var textWidth = cardWidth * 0.8860 //925
document.getElementById("textSize").value = 26 document.getElementById("textSize").value = Math.floor(cardHeight * 0.0348) //26
//Bottom Info //Bottom Info
var planechaseInfo = true var planechaseInfo = true
//Set Symbol //Set Symbol
var setSymbolY = 519 var setSymbolY = cardHeight * 0.6929 //519
var setSymbolRight = 814 var setSymbolRight = cardWidth * 0.7797 //814
var setSymbolWidth = 42 var setSymbolWidth = cardWidth * 0.0402 //42
var setSymbolHeight = 24 var setSymbolHeight = cardHeight * 0.0320 //24
//Watermark //Watermark
var watermarkWidth = 0 //520 var watermarkWidth = 0 //520
var watermarkHeight = 0 //250 var watermarkHeight = 0 //250
var watermarkY = 600 var watermarkY = 600 //600
// //Rare Stamp
// var rareStampY = 958
//Color Options //Color Options
loadColors("white-Regular,high-Bottom,mid-Middle,low-Top,none-Single") loadColors("white-Regular,high-Bottom,mid-Middle,low-Top,none-Single")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
//Other //Other
canvas.width = 1044
canvas.height = 749
borderCanvas.width = 1044
borderCanvas.height = 749
var creatureBorder = false var creatureBorder = false
var thirdBorder = false var thirdBorder = false
var secondBorder = false var secondBorder = false
var artX = 33 var artX = cardWidth * 0.0316 //33
var artY = 33 var artY = cardHeight * 0.0441 //33
transparentBorder = true transparentBorder = true
//With all the new values in place, the program will update it's border images //With all the new values in place, the program will update it's border images
finishTemplate() finishTemplate()
@@ -63,7 +60,6 @@ function bottomInfoPlanechase() {
} }
var bottomLineFirst = document.getElementById("inputNumber").value + " " + document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value var bottomLineFirst = document.getElementById("inputNumber").value + " " + document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
var bottomLineSecond var bottomLineSecond
var artistBrushShift = 0
if (document.getElementById("inputInfo").value != "") { if (document.getElementById("inputInfo").value != "") {
bottomLineSecond = "CC \u2014 " + document.getElementById("inputInfo").value bottomLineSecond = "CC \u2014 " + document.getElementById("inputInfo").value
if (bottomLineSecond == "CC \u2014 secretcode") { if (bottomLineSecond == "CC \u2014 secretcode") {
@@ -74,24 +70,24 @@ function bottomInfoPlanechase() {
} }
var artist = document.getElementById("inputArtist").value var artist = document.getElementById("inputArtist").value
//Artist //Artist
canvas.style.letterSpacing = "-0.2px" canvas.style.letterSpacing = cardWidth * -0.0002 + "px" //-0.2
card.font = "16px matrixbsc" card.font = "16px matrixbsc" //16
var artistLineWidth = (card.measureText(artist).width + 18) / 2 var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
drawMask(card.fillStyle, canvas.width / 2 - artistLineWidth, 706, 15, 10, card, imgArtistBrush, false, false) drawMask(card.fillStyle, cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134, card, imgArtistBrush, false, false) //706, 15, 10
card.fillText(artist, canvas.width / 2 - artistLineWidth + 18, 704) card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9400) //18, 704
//Left and Right side //Left and Right side
canvas.style.letterSpacing = "0px" canvas.style.letterSpacing = "0px"
card.font = "16px relaymedium" card.font = cardHeight * 0.0187 + "px relaymedium" //14
var firstWidth = card.measureText(bottomLineFirst).width + 15 var firstWidth = card.measureText(bottomLineFirst).width + cardWidth * 0.0144 //15
canvas.style.letterSpacing = "-0.7px" canvas.style.letterSpacing = cardWidth * -0.0007 + "px" //-0.7
card.font = "13px mplantin" card.font = cardHeight * 0.0187 + "px mplantin" //14
var secondWidth = card.measureText(bottomLineSecond).width var secondWidth = card.measureText(bottomLineSecond).width
canvas.style.letterSpacing = "0px" canvas.style.letterSpacing = "0px"
card.font = "16px relaymedium" card.font = cardHeight * 0.0187 + "px relaymedium" //14
card.fillText(bottomLineFirst, canvas.width / 2 - ((secondWidth + firstWidth) / 2) - 8, 717) card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
canvas.style.letterSpacing = "-0.7px" canvas.style.letterSpacing = cardWidth * -0.0007 + "px" //-0.7
card.font = "14px mplantin" card.font = cardHeight * 0.0187 + "px mplantin" //14
card.fillText(bottomLineSecond, canvas.width / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - 8, 718) card.fillText(bottomLineSecond, cardWidth / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
} }

117
index.html
View File

@@ -210,9 +210,9 @@
</div> </div>
<div class="row" style="background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(128, 255, 128, 0.1); padding-top: 5px"> <div class="row" style="background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(128, 255, 128, 0.1); padding-top: 5px">
Check out some samples! <br/> Check out some samples! <br/>
<img id="sampleCardA" src="sampleCards/sample-card-1.png" style="width: calc(33.33%);" class="column"></img> <img id="sampleCardA" style="width: 33.33%;" class="column"></img>
<img id="sampleCardB" src="sampleCards/sample-card-2.png" style="width: calc(33.33%);" class="column"></img> <img id="sampleCardB" style="width: 33.33%;" class="column"></img>
<img id="sampleCardC" src="sampleCards/sample-card-3.png" style="width: calc(33.33%);" class="column"></img> <img id="sampleCardC" style="width: 33.33%;" class="column"></img>
</div> </div>
<div class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the Github page</a>.</div> <div class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the Github page</a>.</div>
</body> </body>
@@ -221,6 +221,7 @@
<!--CSS--> <!--CSS-->
<style> <style>
/*fonts*/
@font-face { @font-face {
font-family: relaymedium; font-family: relaymedium;
src: url("data/fonts/relay-medium.ttf"); src: url("data/fonts/relay-medium.ttf");
@@ -253,19 +254,13 @@
font-family: mplantini; font-family: mplantini;
src: url("data/fonts/mplantin-i.ttf"); src: url("data/fonts/mplantin-i.ttf");
} }
/*Applies to most elements (with rows and columns)*/
* { * {
text-align: center; text-align: center;
font-family: belerenb; font-family: belerenb;
font-size: 20px; font-size: 22px;
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
} }
.title {
text-align: center;
color: rgb(128,255,128);
font-family: belerenbsc;
font-size: 60px;
}
.row { .row {
margin-bottom: 5; margin-bottom: 5;
} }
@@ -277,20 +272,16 @@
.row * { .row * {
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 5px;
} }
.column { .column {
float: left; float: left;
} }
/*Style for sections, togglers, and togglees*/
.section { .section {
border: 1px solid rgba(128, 255, 128, 0.1); border: 1px solid rgba(128, 255, 128, 0.1);
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
padding: 0px; padding: 0px;
} }
.section * {
color: rgb(255, 255, 255);
}
.toggler { .toggler {
width: 100%; width: 100%;
} }
@@ -308,16 +299,21 @@
.shown { .shown {
display: block; display: block;
} }
input[type="text"], input[type="number"] { /*Specific input element styles*/
input[type="text"], input[type="number"], textarea {
text-align: left; text-align: left;
color: black; color: black;
width: 99%; width: 99%;
} }
select, select * { input[type="color"] {
padding-top: 0px;
padding-bottom: 0px;
}
select, option {
color: black; color: black;
width: 100%; width: 100%;
} }
/*List of all mana symbols and their associated codes*/
#symbolList { #symbolList {
border: 1px solid rgba(128, 255, 128, 0.1); border: 1px solid rgba(128, 255, 128, 0.1);
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
@@ -329,7 +325,13 @@ select, select * {
top: 8px; top: 8px;
width: 30px; width: 30px;
/*padding: 0px 0px 0px 0px !important;*/ /*padding: 0px 0px 0px 0px !important;*/
background-color: rgba(128,255,128, 0.1); }
/*Other*/
.title {
text-align: center;
color: rgb(128,255,128);
font-family: belerenbsc;
font-size: 60px;
} }
.info, .info * { .info, .info * {
color: rgb(96,96,96); color: rgb(96,96,96);
@@ -343,7 +345,7 @@ html {
-o-background-size: cover; -o-background-size: cover;
background-size: cover; background-size: cover;
} }
/*Hyperlinks*/
a:link { a:link {
color: rgb(128,128,128); color: rgb(128,128,128);
} }
@@ -363,7 +365,6 @@ a:active {
<script crossorigin="anonymous"> <script crossorigin="anonymous">
//Create the canvas for creating the border image //Create the canvas for creating the border image
var borderCanvas = document.createElement("canvas") var borderCanvas = document.createElement("canvas")
borderCanvas.width = 749; borderCanvas.height = 1044
var border = borderCanvas.getContext("2d") var border = borderCanvas.getContext("2d")
//document.body.appendChild(borderCanvas) //document.body.appendChild(borderCanvas)
//Load the initial border (m15) //Load the initial border (m15)
@@ -429,15 +430,15 @@ document.getElementById("secondWatermarkColorSelection").innerHTML = document.ge
function cardClock() { function cardClock() {
//Insures that the corners of the final image are transparent //Insures that the corners of the final image are transparent
card.globalCompositeOperation = "source-over" card.globalCompositeOperation = "source-over"
drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, card, imgCardMask, false, false) drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
card.globalCompositeOperation = "source-atop" card.globalCompositeOperation = "source-atop"
//Draws the card image, then... //Draws the card image, then...
drawPicture() drawPicture()
//draws the card frame on top //draws the card frame on top
if (transparentBorder == false) { if (transparentBorder == false) {
drawMask(imgBorder, 0, 0, canvas.width, canvas.height, card, imgArtMask, false, false) drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
} else { } else {
card.drawImage(imgBorder, 0, 0, canvas.width, canvas.height) card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
} }
//draws the set symbol, mana cost, and watermark //draws the set symbol, mana cost, and watermark
drawSetSymbol() drawSetSymbol()
@@ -455,7 +456,7 @@ function cardClock() {
} }
//A shiny foil overlay! //A shiny foil overlay!
if(document.getElementById("checkboxFoil").checked == true) { if(document.getElementById("checkboxFoil").checked == true) {
card.drawImage(imgFoil, 0, 0, canvas.width, canvas.height) card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
} }
//These are for pinpointing coordinates while adjusting values for new border types //These are for pinpointing coordinates while adjusting values for new border types
//Vertical Line //Vertical Line
@@ -481,6 +482,11 @@ function changeTemplate() {
} }
function finishTemplate() { function finishTemplate() {
//This is a seperate function to insure that the border.js file finishes running before running a few last commands //This is a seperate function to insure that the border.js file finishes running before running a few last commands
canvas.width = cardWidth
canvas.height = cardHeight
borderCanvas.width = cardWidth
borderCanvas.height = cardHeight
resizeThings()
document.getElementById("colorSelection").value = "white" document.getElementById("colorSelection").value = "white"
imgMultiMask.src = borderPath + "multiMask.png" imgMultiMask.src = borderPath + "multiMask.png"
imgFrameMask.src = borderPath + "frameMask.png" imgFrameMask.src = borderPath + "frameMask.png"
@@ -577,73 +583,73 @@ function updateBorder() {
function createBorder() { function createBorder() {
//These if else statements check to see whether or not to draw different parts of the card, like the legendary border or rare stamp, and draws them in the appropriate order so that when multiple border colors are used the gradients overlap correctly //These if else statements check to see whether or not to draw different parts of the card, like the legendary border or rare stamp, and draws them in the appropriate order so that when multiple border colors are used the gradients overlap correctly
//BACKGROUND COLOR //BACKGROUND COLOR
border.clearRect(0, 0, canvas.width, canvas.height) border.clearRect(0, 0, cardWidth, cardHeight)
drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgArtMask, false, false) drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, border, imgArtMask, false, false)
//MAIN CARD FRAME //MAIN CARD FRAME
drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) drawMask(imgBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
if (secondColor == true && secondBorder == true) { if (secondColor == true && secondBorder == true) {
drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond") drawMask(imgSecondBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
} }
if (thirdColor == true && thirdBorder == true) { if (thirdColor == true && thirdBorder == true) {
drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiMask, false) drawMask(imgThirdBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiMask, false)
} }
//Draws the silver border usually on un-cards //Draws the silver border usually on un-cards
if (document.getElementById("checkboxSilverBorder").checked == true) { if (document.getElementById("checkboxSilverBorder").checked == true) {
drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, border, imgBorderMask, imgFrameMask, "reverseSecond") drawMask("#a3aeb7", 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgFrameMask, "reverseSecond")
} }
//NYX //NYX
if (document.getElementById("checkboxNyx").checked == true && nyxBorder == true) { if (document.getElementById("checkboxNyx").checked == true && nyxBorder == true) {
if (thirdColor == true) { if (thirdColor == true) {
drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiMask, false) drawMask(imgBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiMask, false)
} else { } else {
drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) drawMask(imgBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
if (secondColor == true) { if (secondColor == true) {
drawMask(imgSecondBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond") drawMask(imgSecondBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
} }
} }
} }
//MIRACLE //MIRACLE
if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true) { if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true) {
if (thirdColor == true) { if (thirdColor == true) {
drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
} else { } else {
drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
if (secondColor == true) { if (secondColor == true) {
drawMask(imgSecondBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond") drawMask(imgSecondBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
} }
} }
} }
//LEGENDARY //LEGENDARY
if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true) { if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true) {
drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, border, imgLegendFrameMask, false, false) drawMask(imgBorderLegendary, 0, 0, cardWidth, cardHeight, border, imgLegendFrameMask, false, false)
if (secondColor == true) { if (secondColor == true) {
drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, border, imgLegendFrameMask, imgMultiGradient, "reverseSecond") drawMask(imgSecondBorderLegendary, 0, 0, cardWidth, cardHeight, border, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
} }
//redraws the custom-color border to match the legendary frame //redraws the custom-color border to match the legendary frame
drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgBorderMask, imgLegendFrameMask, "reverseSecond") drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
//redraws the silver border usually on un-cards to match the legendary frame //redraws the silver border usually on un-cards to match the legendary frame
if (document.getElementById("checkboxSilverBorder").checked == true) { if (document.getElementById("checkboxSilverBorder").checked == true) {
drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, border, imgBorderMask, imgLegendFrameMask, "reverseSecond") drawMask("#a3aeb7", 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
} }
} }
//FLIP CARDS //FLIP CARDS
if (flipBorder == true) { if (flipBorder == true) {
if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) { if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
if (thirdColor == true) { if (thirdColor == true) {
drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) drawMask(imgBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
} else { } else {
drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false) drawMask(imgBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
if (secondColor == true) { if (secondColor == true) {
drawMask(imgSecondBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond") drawMask(imgSecondBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
} }
} }
} }
if (document.getElementById("checkboxFlipIcon").checked == true) { if (document.getElementById("checkboxFlipIcon").checked == true) {
border.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height) border.drawImage(imgBorderFlipCircle, 0, 0, cardWidth, cardHeight)
border.drawImage(imgBorderFlipIcon, 39, 51, 60, 60) border.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
} }
if (document.getElementById("checkboxFlipTip").checked == true) { if (document.getElementById("checkboxFlipTip").checked == true) {
border.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height) border.drawImage(imgBorderFlipTip, 0, 0, cardWidth, cardHeight)
border.fillStyle="#666" border.fillStyle="#666"
canvas.style.letterSpacing = "0px" canvas.style.letterSpacing = "0px"
border.font = "28px belerenb" border.font = "28px belerenb"
@@ -768,7 +774,7 @@ function drawWatermark() {
width = watermarkWidth width = watermarkWidth
height = imgWatermark.height * (width / imgWatermark.width) height = imgWatermark.height * (width / imgWatermark.width)
} }
var x = canvas.width / 2 - width / 2 var x = cardWidth / 2 - width / 2
var y = watermarkY - height / 2 var y = watermarkY - height / 2
//globalAlpha insures that the watermark is drawn partially transparent. This value may not be perfect but the watermark colors are calibrated to it //globalAlpha insures that the watermark is drawn partially transparent. This value may not be perfect but the watermark colors are calibrated to it
card.globalAlpha = 0.4 card.globalAlpha = 0.4
@@ -819,14 +825,15 @@ function writeText() {
card.font = typeFont card.font = typeFont
card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY) card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY)
//Power/Toughness //Power/Toughness
card.textAlign = "left"
if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) { if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
card.textAlign = "center"
card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight) card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight)
canvas.style.letterSpacing = ptFontSpacing canvas.style.letterSpacing = ptFontSpacing
card.font = ptFont card.font = ptFont
powerToughness = document.getElementById("inputPowerToughness").value powerToughness = document.getElementById("inputPowerToughness").value
card.fillText(powerToughness, ptTextX - (card.measureText(powerToughness).width / 2), ptTextY) card.fillText(powerToughness, ptTextX, ptTextY)
} }
card.textAlign = "left"
card.fillStyle = "Black" card.fillStyle = "Black"
//Rules Text //Rules Text
canvas.style.letterSpacing = textFontSpacing + "px" canvas.style.letterSpacing = textFontSpacing + "px"
@@ -940,12 +947,12 @@ function drawText(text, xCoord, yCoord) {
card.font = "normal " + textSize + textFont card.font = "normal " + textSize + textFont
} else if (megaSplit[0] == "center") { } else if (megaSplit[0] == "center") {
card.textAlign="center" card.textAlign="center"
x = canvas.width / 2 x = cardWidth / 2
tempTextWidth = textWidth * 1.5 tempTextWidth = textWidth * 1.5
} else if (megaSplit[0] == "right") { } else if (megaSplit[0] == "right") {
card.textAlign="right" card.textAlign="right"
tempTextWidth = textWidth * 1.9 tempTextWidth = textWidth * 1.9
x = canvas.width - xCoord x = cardWidth - xCoord
} else if (megaSplit[0] == "left") { } else if (megaSplit[0] == "left") {
card.textAlign="left" card.textAlign="left"
tempTextWidth = textWidth tempTextWidth = textWidth
@@ -957,7 +964,7 @@ function drawText(text, xCoord, yCoord) {
textXShift = 0 textXShift = 0
y += textSize + 1 y += textSize + 1
} else if (megaSplit[0] == "bar") { } else if (megaSplit[0] == "bar") {
card.drawImage(imgBar, canvas.width / 2 - imgBar.width / 2, y + textSize + lineSpace + 5) card.drawImage(imgBar, cardWidth / 2 - imgBar.width / 2, y + textSize + lineSpace + 5)
textXShift = 0 textXShift = 0
y += 2 * lineSpace + textSize + 3 y += 2 * lineSpace + textSize + 3
} else if (megaSplit[0] == "chaos") { } else if (megaSplit[0] == "chaos") {
@@ -1019,8 +1026,8 @@ function toggleSection(target) {
//Resizes anything that may need to be resized //Resizes anything that may need to be resized
function resizeThings() { function resizeThings() {
if (window.innerWidth > 1100 && canvas.width <= 770) { if (window.innerWidth > 809 + 300 && cardWidth <= 749) {
document.getElementById("optionsColumn").style = "width: calc(100% - 777px)" document.getElementById("optionsColumn").style = "width: calc(100% - 769px)"
} else { } else {
document.getElementById("optionsColumn").style = "width: 100%" document.getElementById("optionsColumn").style = "width: 100%"
} }