From 2994a3556b1179c2a4d34fa51118b2789fbb26f0 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Fri, 2 Nov 2018 11:34:24 -0700
Subject: [PATCH] dynamic plane card size
---
data/borders/defaultBorder.js | 6 +-
data/borders/m15/border.js | 66 ++++++++++---------
data/borders/plane/border.js | 82 ++++++++++++------------
index.html | 117 ++++++++++++++++++----------------
4 files changed, 135 insertions(+), 136 deletions(-)
diff --git a/data/borders/defaultBorder.js b/data/borders/defaultBorder.js
index b052b800..59196530 100644
--- a/data/borders/defaultBorder.js
+++ b/data/borders/defaultBorder.js
@@ -23,10 +23,8 @@ var centerSetSymbol = 1 //1=not centered, 2=centered
var artX = 58
var artY = 118
//card size
-canvas.width = 749
-canvas.height = 1044
-borderCanvas.width = 749
-borderCanvas.height = 1044
+cardWidth = 749
+cardHeight = 1044
//Loads the correct border data
borderPath = "data/borders/" + document.getElementById("borderSelection").value
loadScript(borderPath + "border.js")
\ No newline at end of file
diff --git a/data/borders/m15/border.js b/data/borders/m15/border.js
index bb26478a..f03688fc 100644
--- a/data/borders/m15/border.js
+++ b/data/borders/m15/border.js
@@ -1,50 +1,48 @@
//M15 Border
//Anything to do with...
//Card Title
-var titleFont = "40px belerenb"
-var titleFontSpacing = "0.15px"
-var titleX = 62
-var titleY = 56
+var titleFont = "40px belerenb" //40
+var titleFontSpacing = "0.15px" //0.15
+var titleX = 62 //62
+var titleY = 56 //56
//Mana Cost
-var manaCostRadius = 17.5
-var manaCostX = 657
-var manaCostY = 59
+var manaCostRadius = 17.5 //17.5
+var manaCostX = 657 //657
+var manaCostY = 59 //59
//Card Type
-var typeFont = "33.5px belerenb"
-var typeFontSpacing = "0.05px"
-var typeX = 62
-var typeY = 595
+var typeFont = "33.5px belerenb" //33.5
+var typeFontSpacing = "0.05px" //0.05
+var typeX = 62 //62
+var typeY = 595 //595
//Rules/Flavor Text
var textFont = "px mplantin"
-var textFontSpacing = 1.3
-var textX = 66
-var textY = 656
-var textWidth = 682
+var textFontSpacing = 1.3 //1.3
+var textX = 66 //66
+var textY = 656 //656
+var textWidth = 682 //682
//Power Toughness
-var ptFont = "39px belerenb"
-var ptFontSpacing = "0.3px"
-var ptTextX = 645
-var ptTextY = 936
-var ptX = 571
-var ptY = 929
-var ptWidth = 137
-var ptHeight = 75
+var ptFont = "39px belerenb" //39
+var ptFontSpacing = "0.3px" //0.3
+var ptTextX = 645 //645
+var ptTextY = 936 //936
+var ptX = 571 //571
+var ptY = 929 //929
+var ptWidth = 137 //137
+var ptHeight = 75 //75
//Bottom Info
-var eighthInfo = false
-var eighthInfoY = 992
var m15Info = true
-var m15InfoY = 993
+var m15InfoY = 993 //993
//Set Symbol
-var setSymbolY = 616
-var setSymbolRight = 693
-var setSymbolWidth = 77
-var setSymbolHeight = 44
+var setSymbolY = 616 //616
+var setSymbolRight = 693 //693
+var setSymbolWidth = 77 //77
+var setSymbolHeight = 44 //44
//Watermark
-var watermarkWidth = 520
-var watermarkHeight = 250
-var watermarkY = 805
+var watermarkWidth = 520 //520
+var watermarkHeight = 250 //250
+var watermarkY = 805 //805
//Rare Stamp
-var rareStampY = 958
+var rareStampY = 958 //958
//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")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
diff --git a/data/borders/plane/border.js b/data/borders/plane/border.js
index 15ad1aa0..5287bc07 100644
--- a/data/borders/plane/border.js
+++ b/data/borders/plane/border.js
@@ -1,55 +1,52 @@
//Plane Border
//Anything to do with...
+//Card Size
+cardWidth = 1074
+cardHeight = 749
//Card Title
-var titleFont = "34px belerenb"
-var titleFontSpacing = "0.15px"
-var titleX = 522
-var titleY = 40
+var titleFont = cardHeight * 0.0454 + "px belerenb" //34
+var titleFontSpacing = cardWidth * 0.00014 + "px" //0.15
+var titleX = cardWidth * 0.5000 //522
+var titleY = cardHeight * 0.0534 //40
var titleAlign = "center"
//Mana Cost
var manaCostRadius = 0
-var manaCostX = 1000
-var manaCostY = 1000
+var manaCostX = 0
+var manaCostY = 0
//Card Type
-var typeFont = "26px belerenb"
-var typeFontSpacing = "0px"
-var typeX = 522
-var typeY = 502
+var typeFont = cardHeight * 0.0347 + "px belerenb" //26
+var typeFontSpacing = "0px" //0
+var typeX = cardWidth * 0.5000 //522
+var typeY = cardHeight * 0.6702 //502
var typeAlign = "center"
//Rules/Flavor Text
var textFont = "px mplantin"
-var textFontSpacing = 0.2
-var textX = 124
-var textY = 535
-var textWidth = 925
-document.getElementById("textSize").value = 26
+var textFontSpacing = cardWidth * 0.0002 //0.2
+var textX = cardWidth * 0.1188 //124
+var textY = cardHeight * 0.7143 //535
+var textWidth = cardWidth * 0.8860 //925
+document.getElementById("textSize").value = Math.floor(cardHeight * 0.0348) //26
//Bottom Info
var planechaseInfo = true
//Set Symbol
-var setSymbolY = 519
-var setSymbolRight = 814
-var setSymbolWidth = 42
-var setSymbolHeight = 24
+var setSymbolY = cardHeight * 0.6929 //519
+var setSymbolRight = cardWidth * 0.7797 //814
+var setSymbolWidth = cardWidth * 0.0402 //42
+var setSymbolHeight = cardHeight * 0.0320 //24
//Watermark
var watermarkWidth = 0 //520
var watermarkHeight = 0 //250
-var watermarkY = 600
-// //Rare Stamp
-// var rareStampY = 958
+var watermarkY = 600 //600
//Color Options
loadColors("white-Regular,high-Bottom,mid-Middle,low-Top,none-Single")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
//Other
-canvas.width = 1044
-canvas.height = 749
-borderCanvas.width = 1044
-borderCanvas.height = 749
var creatureBorder = false
var thirdBorder = false
var secondBorder = false
-var artX = 33
-var artY = 33
+var artX = cardWidth * 0.0316 //33
+var artY = cardHeight * 0.0441 //33
transparentBorder = true
//With all the new values in place, the program will update it's border images
finishTemplate()
@@ -63,7 +60,6 @@ function bottomInfoPlanechase() {
}
var bottomLineFirst = document.getElementById("inputNumber").value + " " + document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
var bottomLineSecond
- var artistBrushShift = 0
if (document.getElementById("inputInfo").value != "") {
bottomLineSecond = "CC \u2014 " + document.getElementById("inputInfo").value
if (bottomLineSecond == "CC \u2014 secretcode") {
@@ -74,24 +70,24 @@ function bottomInfoPlanechase() {
}
var artist = document.getElementById("inputArtist").value
//Artist
- canvas.style.letterSpacing = "-0.2px"
- card.font = "16px matrixbsc"
- var artistLineWidth = (card.measureText(artist).width + 18) / 2
- drawMask(card.fillStyle, canvas.width / 2 - artistLineWidth, 706, 15, 10, card, imgArtistBrush, false, false)
- card.fillText(artist, canvas.width / 2 - artistLineWidth + 18, 704)
+ canvas.style.letterSpacing = cardWidth * -0.0002 + "px" //-0.2
+ card.font = "16px matrixbsc" //16
+ var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
+ 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, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9400) //18, 704
//Left and Right side
canvas.style.letterSpacing = "0px"
- card.font = "16px relaymedium"
- var firstWidth = card.measureText(bottomLineFirst).width + 15
- canvas.style.letterSpacing = "-0.7px"
- card.font = "13px mplantin"
+ card.font = cardHeight * 0.0187 + "px relaymedium" //14
+ var firstWidth = card.measureText(bottomLineFirst).width + cardWidth * 0.0144 //15
+ canvas.style.letterSpacing = cardWidth * -0.0007 + "px" //-0.7
+ card.font = cardHeight * 0.0187 + "px mplantin" //14
var secondWidth = card.measureText(bottomLineSecond).width
canvas.style.letterSpacing = "0px"
- card.font = "16px relaymedium"
- card.fillText(bottomLineFirst, canvas.width / 2 - ((secondWidth + firstWidth) / 2) - 8, 717)
+ card.font = cardHeight * 0.0187 + "px relaymedium" //14
+ card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
- canvas.style.letterSpacing = "-0.7px"
- card.font = "14px mplantin"
- card.fillText(bottomLineSecond, canvas.width / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - 8, 718)
+ canvas.style.letterSpacing = cardWidth * -0.0007 + "px" //-0.7
+ card.font = cardHeight * 0.0187 + "px mplantin" //14
+ card.fillText(bottomLineSecond, cardWidth / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
}
\ No newline at end of file
diff --git a/index.html b/index.html
index d1fd60e4..bf183a09 100644
--- a/index.html
+++ b/index.html
@@ -210,9 +210,9 @@
Check out some samples!
-
-
-
+
![]()
+
![]()
+
![]()
@@ -221,6 +221,7 @@