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

textBaseline

Browse Source
This commit is contained in:
Kyle
2018-12-22 12:17:12 -08:00
parent 3d2c0a85a2
commit 600c371975
6 changed files with 54 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
data/borders/8th/border.js
View File

@@ -52,8 +52,8 @@ function bottomInfo8th() {
card.fillStyle = document.getElementById("inputInfoColor").value
canvas.style.letterSpacing = "1px"
card.font = "25px matrixb"
card.fillText(document.getElementById("inputArtist").value, 116, infoY + textBaselineShift)
card.fillText(document.getElementById("inputArtist").value, 116, infoY + textBaselineShift[0] * card.font.split("px")[0])
canvas.style.letterSpacing = "0.5px"
card.font = "16px mplantin"
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value + " " + document.getElementById("inputNumber").value, 62, infoY + 31 + textBaselineShift)
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value + " " + document.getElementById("inputNumber").value, 62, infoY + 31 + textBaselineShift[0] * card.font.split("px")[0])
}

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

@@ -76,7 +76,7 @@ function bottomInfoPlanechase() {
var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
imgArtistBrush.imgValues(cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134)
card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle)
card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9479 + textBaselineShift) //18, 710
card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9479 + textBaselineShift[0] * card.font.split("px")[0]) //18, 710
//Left and Right side
canvas.style.letterSpacing = "0px"
card.font = cardHeight * 0.0187 + "px relaymedium" //14
@@ -87,9 +87,9 @@ function bottomInfoPlanechase() {
canvas.style.letterSpacing = "0px"
card.font = cardHeight * 0.0187 + "px relaymedium" //14
card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9666 + textBaselineShift) //8, 724
card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9666 + textBaselineShift[0] * card.font.split("px")[0]) //8, 724
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.9666 + textBaselineShift) //8, 724
card.fillText(bottomLineSecond, cardWidth / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - cardWidth * 0.0077, cardHeight * 0.9666 + textBaselineShift[0] * card.font.split("px")[0]) //8, 724
}

8
data/borders/planeswalker/border.js
View File

@@ -76,17 +76,17 @@ function planeswalkerCustomFunction() {
card.font = "31px belerenbsc"
if (loyaltyValue.charAt(0) == "-") {
card.drawImage(manaSymbolImages[58], 34, abilityLineY + abilityLines[i] / 2 - 28, 84, 64)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 17 + textBaselineShift)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 17 + textBaselineShift[0] * card.font.split("px")[0])
} else if (loyaltyValue.charAt(0) == "+") {
card.drawImage(manaSymbolImages[59], 34, abilityLineY + abilityLines[i] / 2 - 38, 82, 62)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 19 + textBaselineShift)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 19 + textBaselineShift[0] * card.font.split("px")[0])
} else {
card.drawImage(manaSymbolImages[60], 34, abilityLineY + abilityLines[i] / 2 - 28, 82, 56)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 16 + textBaselineShift)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 16 + textBaselineShift[0] * card.font.split("px")[0])
}
card.font = "37px mplantin"
card.fillStyle = "black"
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 23 + textBaselineShift)
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 23 + textBaselineShift[0] * card.font.split("px")[0])
}
abilityLineY += abilityLines[i]
}

8
data/borders/planeswalkerTall/border.js
View File

@@ -76,17 +76,17 @@ function planeswalkerTallCustomFunction() {
card.font = "31px belerenbsc"
if (loyaltyValue.charAt(0) == "-") {
card.drawImage(manaSymbolImages[58], 34, abilityLineY + abilityLines[i] / 2 - 28, 84, 64)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 17 + textBaselineShift)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 17 + textBaselineShift[0] * card.font.split("px")[0])
} else if (loyaltyValue.charAt(0) == "+") {
card.drawImage(manaSymbolImages[59], 34, abilityLineY + abilityLines[i] / 2 - 38, 82, 62)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 19 + textBaselineShift)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 19 + textBaselineShift[0] * card.font.split("px")[0])
} else {
card.drawImage(manaSymbolImages[60], 34, abilityLineY + abilityLines[i] / 2 - 28, 82, 56)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 16 + textBaselineShift)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 16 + textBaselineShift[0] * card.font.split("px")[0])
}
card.font = "37px mplantin"
card.fillStyle = "black"
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 23 + textBaselineShift)
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 23 + textBaselineShift[0] * card.font.split("px")[0])
}
abilityLineY += abilityLines[i]
}

8
data/borders/vanguard/border.js
View File

@@ -66,7 +66,7 @@ function bottomInfoVanguard() {
// card.fillStyle = document.getElementById("inputInfoColor").value
canvas.style.letterSpacing = "1px"
card.font = "20px matrix"
card.fillText("Illus. " + document.getElementById("inputArtist").value, cardWidth / 2, infoY + textBaselineShift)
card.fillText("Illus. " + document.getElementById("inputArtist").value, cardWidth / 2, infoY + textBaselineShift[0] * card.font.split("px")[0])
canvas.style.letterSpacing = "0.5px"
card.font = "12px mplantin"
var vanguardInfo = "CC \u2014 " + document.getElementById("inputInfo").value
@@ -75,10 +75,10 @@ function bottomInfoVanguard() {
var year = date.getFullYear()
vanguardInfo = "\u2122 & \u00a9 1993-" + year + " Wizards of the Coast, Inc."
}
card.fillText(vanguardInfo, cardWidth / 2, infoY + 22 + textBaselineShift)
card.fillText(vanguardInfo, cardWidth / 2, infoY + 22 + textBaselineShift[0] * card.font.split("px")[0])
//Now for the hand/life modifiers, not quite at the bottom but might as well go in this same function
canvas.style.letterSpacing = "0px"
card.font = "25px mplantin"
card.fillText(document.getElementById("inputVanguardHandMod").value, 111, 886 + textBaselineShift)
card.fillText(document.getElementById("inputVanguardLifeMod").value, 631, 886 + textBaselineShift)
card.fillText(document.getElementById("inputVanguardHandMod").value, 111, 886 + textBaselineShift[0] * card.font.split("px")[0])
card.fillText(document.getElementById("inputVanguardLifeMod").value, 631, 886 + textBaselineShift[0] * card.font.split("px")[0])
}

61
data/scripts/main.js
View File

@@ -11,10 +11,15 @@ var secondColor
var thirdColor
var titleRightShift = 0
var typeRightShift = 0
var textBaselineShift = 0
var textBaselineShift = [0, 0] //[regular,eighthArtistCredit]
var imagesToLoad
//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
@@ -22,16 +27,18 @@ var isSafari = navigator.userAgent.indexOf("Safari") > -1
if (isChrome == true && isSafari == true) {
isSafari = false
}
//Now act on different browser craziness...
if (isSafari == true) {
textBaselineShift = -0.17
}
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) ) {
alert("You're using a Mobile Device.")
var isMobile = true
} else {
var isMobile = false
if (isMobile == true) {
//Safari for iOS
textBaselineShift = [-0.17, -0.08]
} else {
//Safari for macOS
textBaselineShift = [-0.17, 0]
}
}
//Set up canvas
var canvas = document.getElementById("canvas")
var card = canvas.getContext("2d")
@@ -555,13 +562,13 @@ function writeText() {
card.textAlign = titleAlign
canvas.style.letterSpacing = titleFontSpacing
card.font = titleFont
card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift * card.font.split("px")[0])
card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift[0] * card.font.split("px")[0])
//Type
card.fillStyle = document.getElementById("inputTypeColor").value
card.textAlign = typeAlign
canvas.style.letterSpacing = typeFontSpacing
card.font = typeFont
card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY + textBaselineShift * card.font.split("px")[0])
card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY + textBaselineShift[0] * card.font.split("px")[0])
//Power/Toughness
if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
// if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") {
@@ -573,7 +580,7 @@ function writeText() {
canvas.style.letterSpacing = ptFontSpacing
card.font = ptFont
powerToughness = document.getElementById("inputPowerToughness").value
card.fillText(powerToughness, ptTextX, ptTextY + textBaselineShift * card.font.split("px")[0])
card.fillText(powerToughness, ptTextX, ptTextY + textBaselineShift[0] * card.font.split("px")[0])
}
card.textAlign = "left"
// card.fillStyle = "Black"//attention
@@ -589,7 +596,7 @@ function writeText() {
card.fillStyle="#666"
canvas.style.letterSpacing = "0px"
card.font = "28px belerenb"
card.fillText(document.getElementById("inputFlipTip").value, 688, 886 + textBaselineShift * card.font.split("px")[0])
card.fillText(document.getElementById("inputFlipTip").value, 688, 886 + textBaselineShift[0] * card.font.split("px")[0])
card.textAlign = "left"
}
}
@@ -601,7 +608,7 @@ function bottomInfoM15() {
canvas.style.letterSpacing = "1.5px"
card.font = "19px relaymedium"
var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
card.fillText(bottomLine, 48, infoY + textBaselineShift * card.font.split("px")[0])
card.fillText(bottomLine, 48, infoY + textBaselineShift[0] * card.font.split("px")[0])
var artistBrushShift = card.measureText(bottomLine).width + 58
imgArtistBrush.imgValues(artistBrushShift, infoY + 2, 21, 13)
card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle)
@@ -610,14 +617,14 @@ function bottomInfoM15() {
if (card.measureText(document.getElementById("inputNumber").value).width > artistBrushShift - 58) {
artistBrushShift = card.measureText(document.getElementById("inputNumber").value).width + 58
}
card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20 + textBaselineShift * card.font.split("px")[0])
card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20 + textBaselineShift * card.font.split("px")[0])
card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20 + textBaselineShift[0] * card.font.split("px")[0])
card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20 + textBaselineShift[0] * card.font.split("px")[0])
if (446 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("checkboxCreature").checked == false) {
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width + 5
}
canvas.style.letterSpacing = "-0.1px"
card.font = "22px matrixbsc"
card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY + textBaselineShift * card.font.split("px")[0])
card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY + textBaselineShift[1] * card.font.split("px")[0])
if (446 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("checkboxCreature").checked == true) {
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputArtist").value).width + 26
}
@@ -632,9 +639,9 @@ function bottomInfoM15() {
bottomInfo = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
}
if (document.getElementById("checkboxCreature").checked == true) {
card.fillText(bottomInfo, shiftInfo, infoY + 1 + textBaselineShift * card.font.split("px")[0])
card.fillText(bottomInfo, shiftInfo, infoY + 1 + textBaselineShift[0] * card.font.split("px")[0])
} else {
card.fillText(bottomInfo, shiftInfo, infoY - 17 + textBaselineShift * card.font.split("px")[0])
card.fillText(bottomInfo, shiftInfo, infoY - 17 + textBaselineShift[0] * card.font.split("px")[0])
}
}
}
@@ -660,7 +667,7 @@ function drawText(text, xCoord, yCoord) {
var lineWidth = card.measureText(testLine).width
if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
//Word is too big
card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0])
card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
line = words[wordIndex] + " "
y += textSize + 1
textXShift = 0
@@ -669,14 +676,14 @@ function drawText(text, xCoord, yCoord) {
line = testLine + " "
}
if (wordIndex + 1 == words.length) {
card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0])
card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
}
} else {
//Symbols and more!
var splitWord = words[wordIndex].split("<")
for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) {
//Write what's there first!
card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0])
card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
textXShift += card.measureText(line).width
line = ""
if (splitWord[splitIndex].includes(">")) {
@@ -721,7 +728,7 @@ function drawText(text, xCoord, yCoord) {
x += 58
} else {
//It's an image (mana symbol, tap, etc...)
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0].toLowerCase())], x + textXShift + textSize * 0.054, y + textSize * 0.075 + parseInt(document.getElementById("inputSymbolDown").value) + textBaselineShift * card.font.split("px")[0], textSize * 0.77, textSize * 0.77)
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0].toLowerCase())], x + textXShift + textSize * 0.054, y + textSize * 0.075 + parseInt(document.getElementById("inputSymbolDown").value) + textBaselineShift[0] * card.font.split("px")[0], textSize * 0.77, textSize * 0.77)
textXShift += textSize * 0.84
}
if (megaSplit[1] != "") {
@@ -738,7 +745,7 @@ function drawText(text, xCoord, yCoord) {
var lineWidth = card.measureText(testLine).width
if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
//Word is too big
card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0])
card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
line = plainWord
y += textSize + 1
textXShift = 0
@@ -747,7 +754,7 @@ function drawText(text, xCoord, yCoord) {
line = testLine
}
if (wordIndex + 1 == words.length) {
card.fillText(line, x + textXShift, y + textBaselineShift * card.font.split("px")[0])
card.fillText(line, x + textXShift, y + textBaselineShift[0] * card.font.split("px")[0])
}
}
}
@@ -809,6 +816,9 @@ function loadSetSymbolWatermark() {
}
//Loads an image from URL
function imageURL(input, targetImage) {
if (targetImage.crossOrigin == null) {
targetImage.crossOrigin = "anonymous"
}
targetImage.cropped = false
if (targetImage == imgWatermark) {
imgWatermark.whiteToTransparent = false
@@ -817,6 +827,9 @@ function imageURL(input, targetImage) {
}
function loadImage(event, destination, arg) {
if (arg != false) {
if (isMobile == true) {
destination.crossOrigin = null
}
var input = event.target
var reader = new FileReader()
reader.onload = function() {