Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

debug

Browse Source
This commit is contained in:
Kyle
2018-12-15 12:43:54 -08:00
parent 58167a25dc
commit 932fa3be52
2 changed files with 36 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
data/scripts/main.js
View File

@@ -11,6 +11,7 @@ var secondColor
var thirdColor var thirdColor
var titleRightShift = 0 var titleRightShift = 0
var typeRightShift = 0 var typeRightShift = 0
var textBaselineShift = 0
var imagesToLoad var imagesToLoad
//Set up canvas //Set up canvas
@@ -135,16 +136,19 @@ function cardClock() {
card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight) 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 if (document.getElementById("checkboxDebuggerLine").checked == true) {
// card.beginPath() card.strokeStyle = "#ff0000"
// card.moveTo(688, 0) //Vertical Line
// card.lineTo(688, 1044) card.beginPath()
// card.stroke() card.moveTo(titleY, 0)
//Horizontal Line card.lineTo(titleY, cardHeight)
// card.beginPath() card.stroke()
// card.moveTo(0, setSymbolY) //Horizontal Line
// card.lineTo(749, setSymbolY) card.beginPath()
// card.stroke() card.moveTo(0, titleX)
card.lineTo(cardWidth, titleX)
card.stroke()
}
} }
//The two following functions load border images //The two following functions load border images
@@ -340,7 +344,7 @@ function createBorder() {
border.fillStyle="#666" border.fillStyle="#666"
canvas.style.letterSpacing = "0px" canvas.style.letterSpacing = "0px"
border.font = "28px belerenb" border.font = "28px belerenb"
border.fillText(document.getElementById("inputFlipTip").value, 688 - border.measureText(document.getElementById("inputFlipTip").value).width, 880) border.fillText(document.getElementById("inputFlipTip").value, 688 - border.measureText(document.getElementById("inputFlipTip").value).width, 880 + textBaselineShift)
} }
if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) { if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) {
titleRightShift = 50 titleRightShift = 50
@@ -369,7 +373,7 @@ function createBorder() {
var angleSize = Math.PI * 2 / identityList.length var angleSize = Math.PI * 2 / identityList.length
var identityRadius = 14 var identityRadius = 14
var identityX = typeX + 8 var identityX = typeX + 8
var identityY = typeY + 21 var identityY = typeY + 15
switch (identityList.length) { switch (identityList.length) {
case 1: case 1:
var originAngle = 0 var originAngle = 0
@@ -534,13 +538,13 @@ function writeText() {
card.textAlign = titleAlign card.textAlign = titleAlign
canvas.style.letterSpacing = titleFontSpacing canvas.style.letterSpacing = titleFontSpacing
card.font = titleFont card.font = titleFont
card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY) card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY + textBaselineShift)
//Type //Type
card.fillStyle = document.getElementById("inputTypeColor").value card.fillStyle = document.getElementById("inputTypeColor").value
card.textAlign = typeAlign card.textAlign = typeAlign
canvas.style.letterSpacing = typeFontSpacing canvas.style.letterSpacing = typeFontSpacing
card.font = typeFont card.font = typeFont
card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY) card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY + textBaselineShift)
//Power/Toughness //Power/Toughness
if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) { if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
// if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") { // if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png" || borderPath == "data/borders/planeswalker/") {
@@ -552,7 +556,7 @@ function writeText() {
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, ptTextY) card.fillText(powerToughness, ptTextX, ptTextY + textBaselineShift)
} }
card.textAlign = "left" card.textAlign = "left"
// card.fillStyle = "Black"//attention // card.fillStyle = "Black"//attention
@@ -571,7 +575,7 @@ function bottomInfoM15() {
canvas.style.letterSpacing = "0.8px" canvas.style.letterSpacing = "0.8px"
card.font = "19.5px relaymedium" card.font = "19.5px relaymedium"
var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
card.fillText(bottomLine, 48, infoY) card.fillText(bottomLine, 48, infoY + textBaselineShift)
var artistBrushShift = card.measureText(bottomLine).width + 58 var artistBrushShift = card.measureText(bottomLine).width + 58
imgArtistBrush.imgValues(artistBrushShift, infoY + 5, 21, 13) imgArtistBrush.imgValues(artistBrushShift, infoY + 5, 21, 13)
card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle) card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle)
@@ -580,14 +584,14 @@ function bottomInfoM15() {
if (card.measureText(document.getElementById("inputNumber").value).width > artistBrushShift - 58) { if (card.measureText(document.getElementById("inputNumber").value).width > artistBrushShift - 58) {
artistBrushShift = card.measureText(document.getElementById("inputNumber").value).width + 58 artistBrushShift = card.measureText(document.getElementById("inputNumber").value).width + 58
} }
card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20) card.fillText(document.getElementById("inputNumber").value, 49, infoY - 20 + textBaselineShift)
card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20) card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, infoY - 20 + textBaselineShift)
if (442 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("checkboxCreature").checked == false) { if (442 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("checkboxCreature").checked == false) {
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width + 5 shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width + 5
} }
canvas.style.letterSpacing = "-0.1px" canvas.style.letterSpacing = "-0.1px"
card.font = "24px matrixbsc" card.font = "24px matrixbsc"
card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY + 2) card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, infoY + 2 + textBaselineShift)
if (442 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("checkboxCreature").checked == true) { if (442 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("checkboxCreature").checked == true) {
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputArtist").value).width + 26 shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputArtist").value).width + 26
} }
@@ -602,9 +606,9 @@ function bottomInfoM15() {
bottomInfo = "\u2122 & \u00a9 " + year + " Wizards of the Coast" bottomInfo = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
} }
if (document.getElementById("checkboxCreature").checked == true) { if (document.getElementById("checkboxCreature").checked == true) {
card.fillText(bottomInfo, shiftInfo, infoY + 3) card.fillText(bottomInfo, shiftInfo, infoY + 3 + textBaselineShift)
} else { } else {
card.fillText(bottomInfo, shiftInfo, infoY - 17) card.fillText(bottomInfo, shiftInfo, infoY - 17 + textBaselineShift)
} }
} }
} }
@@ -630,7 +634,7 @@ function drawText(text, xCoord, yCoord) {
var lineWidth = card.measureText(testLine).width var lineWidth = card.measureText(testLine).width
if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) { if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
//Word is too big //Word is too big
card.fillText(line, x + textXShift, y) card.fillText(line, x + textXShift, y + textBaselineShift)
line = words[wordIndex] + " " line = words[wordIndex] + " "
y += textSize + 1 y += textSize + 1
textXShift = 0 textXShift = 0
@@ -639,14 +643,14 @@ function drawText(text, xCoord, yCoord) {
line = testLine + " " line = testLine + " "
} }
if (wordIndex + 1 == words.length) { if (wordIndex + 1 == words.length) {
card.fillText(line, x + textXShift, y) card.fillText(line, x + textXShift, y + textBaselineShift)
} }
} else { } else {
//Symbols and more! //Symbols and more!
var splitWord = words[wordIndex].split("<") var splitWord = words[wordIndex].split("<")
for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) { for (var splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) {
//Write what's there first! //Write what's there first!
card.fillText(line, x + textXShift, y) card.fillText(line, x + textXShift, y + textBaselineShift)
textXShift += card.measureText(line).width textXShift += card.measureText(line).width
line = "" line = ""
if (splitWord[splitIndex].includes(">")) { if (splitWord[splitIndex].includes(">")) {
@@ -708,7 +712,7 @@ function drawText(text, xCoord, yCoord) {
var lineWidth = card.measureText(testLine).width var lineWidth = card.measureText(testLine).width
if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) { if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
//Word is too big //Word is too big
card.fillText(line, x + textXShift, y) card.fillText(line, x + textXShift, y + textBaselineShift)
line = plainWord line = plainWord
y += textSize + 1 y += textSize + 1
textXShift = 0 textXShift = 0
@@ -717,7 +721,7 @@ function drawText(text, xCoord, yCoord) {
line = testLine line = testLine
} }
if (wordIndex + 1 == words.length) { if (wordIndex + 1 == words.length) {
card.fillText(line, x + textXShift, y) card.fillText(line, x + textXShift, y + textBaselineShift)
} }
} }
} }

7
index.html
View File

@@ -318,9 +318,14 @@
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"> <input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
</div> </div>
<div class="cmm" id="cmm-download"> <div class="cmm" id="cmm-download">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a><br>
Frame Rate Frame Rate
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"> <input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)">
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a> <div class="checkbox">
<input type="checkbox" id="checkboxDebuggerLine" />
<label for="checkboxDebuggerLine" />
<div>Debugger Lines</div>
</div>
</div> </div>
<div class="cmm" id="cmm-watermark"> <div class="cmm" id="cmm-watermark">
<div class="checkbox"> <div class="checkbox">