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

frames

Browse Source
This commit is contained in:
Kyle
2020-03-22 15:25:57 -07:00
parent b35014a7e6
commit f527c53219
26 changed files with 298 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
data/scripts/main.js
View File

@@ -16,6 +16,7 @@ var cardTextList = new Array()
var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar", "whiteBrush", "blackBrush"];
var manaSymbolImageList = [];
manaSymbolCodeList.forEach((item, index) => {manaSymbolImageList[index] = new Image(); manaSymbolImageList[index].src = 'data/images/manaSymbols/' + index + '.png'})
date = new Date()
function newCanvas(name) {
window[name + 'Canvas'] = document.createElement('canvas')
@@ -263,6 +264,14 @@ function loadMaskImages(listOfMasks) {
function loadFrameImages(listOfFrames) {
for (var i = 0; i < listOfFrames.length; i++) {
frameImageList.push(new frameImage(...listOfFrames[i], frameImageList.length))
if (i == 0) {
frameObjectToAdd = frameImageList[frameImageList.length - 1]
var frameToInsert = cardMasterList.push(new cardImage(frameObjectToAdd.name, frameObjectToAdd.image.src, frameObjectToAdd.x, frameObjectToAdd.y, frameObjectToAdd.width, frameObjectToAdd.height, 1, [], false))
cardMaster.insertBefore(cardMasterList[frameToInsert - 1].cardMasterElement(), cardMaster.children[1])
frameObjectToAdd.image.onload = function() {
drawCardObjects()
}
}
}
}
@@ -320,6 +329,9 @@ function cardTextEdited() {
selectedTextObject.width = document.getElementById('textEditorWidth').value / cardWidth
selectedTextObject.height = document.getElementById('textEditorHeight').value / cardHeight
drawCardText()
if (selectedTextObject.name == 'Power/Toughness') {
bottomInfoUpdated()
}
}
function drawCardText() {
textContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -328,7 +340,7 @@ function drawCardText() {
function writeText(textObjectList, targetContext) {
var textCanvasBuffer = 100
var rewritingLine = false
var textSize
var textSize, textFont
outerloop:
for (var i = 0; i < textObjectList.length; i++) {
if (!rewritingLine) {
@@ -343,11 +355,12 @@ function writeText(textObjectList, targetContext) {
textParagraphCanvas.height = scaleY(textObjectList[i].height) + 2 * textCanvasBuffer
textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height)
textParagraphContext.clearRect(0, 0, textParagraphCanvas.width, textParagraphCanvas.height)
var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0
var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0, permanentLineShift = 0, temporaryLineShift = 0
textObjectList[i].otherParameters.forEach(item => eval(item))
textLineContext.strokeStyle = outline
textLineContext.lineWidth = outlineThickness
textLineContext.font = textSize + 'px ' + textObjectList[i].font
textFont = textObjectList[i].font
textLineContext.font = textSize + 'px ' + textFont
textLineContext.fillStyle = textObjectList[i].fontColor
var textX = textCanvasBuffer
var textY = 0
@@ -362,7 +375,7 @@ function writeText(textObjectList, targetContext) {
var possibleCodeLower = splitText[n].substr(1, splitText[n].length - 2).toLowerCase()
if (possibleCodeLower == 'line' && !oneLine) {
finishLine = true
paragraphSpace = textSize * 0.35
paragraphSpace += textSize * 0.35
} else if (possibleCodeLower == 'linenospace' && !oneLine) {
finishLine = true
} else if ((possibleCodeLower == 'bar' || possibleCodeLower == 'flavor') && !oneLine) {
@@ -370,23 +383,37 @@ function writeText(textObjectList, targetContext) {
var barWidth = scaleX(textObjectList[i].width) * 0.95
var barHeight = scaleY(0.001)
textLineContext.drawImage(manaSymbolImageList[63], textCanvasBuffer + (scaleX(textObjectList[i].width) - barWidth) / 2, textSize * 1.6 + textCanvasBuffer, barWidth, barHeight)
paragraphSpace = textSize * 0.8
paragraphSpace += textSize * 0.8
if (possibleCodeLower == 'flavor') {
textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textObjectList[i].font
textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textFont
}
} else if (possibleCodeLower == 'i') {
textLineContext.font = 'italic ' + textSize + 'px ' + textObjectList[i].font
textLineContext.font = 'italic ' + textSize + 'px ' + textFont
} else if (possibleCodeLower == '/i') {
textLineContext.font = textSize + 'px ' + textObjectList[i].font
textLineContext.font = textSize + 'px ' + textFont
} else if (possibleCodeLower.includes('fontsize')) {
textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length))
textLineContext.font = textSize + 'px ' + textObjectList[i].font
textLineContext.font = textSize + 'px ' + textFont
} else if (possibleCodeLower == 'left') {
textAlign = 'left'
} else if (possibleCodeLower == 'center') {
textAlign = 'center'
} else if (possibleCodeLower == 'right') {
textAlign = 'right'
} else if (possibleCodeLower.includes('right')) {
textX += parseInt(possibleCodeLower.replace('right', ''))
currentLineWidth += parseInt(possibleCodeLower.replace('right', ''))
} else if (possibleCodeLower.includes('left')) {
textX -= parseInt(possibleCodeLower.replace('left', ''))
currentLineWidth -= parseInt(possibleCodeLower.replace('left', ''))
} else if (possibleCodeLower.includes('up')) {
finishLine = true
paragraphSpace -= parseInt(possibleCodeLower.replace('up', '')) + textSize
temporaryLineShift += currentLineWidth
} else if (possibleCodeLower.includes('down')) {
finishLine = true
paragraphSpace += parseInt(possibleCodeLower.replace('down', '')) - textSize
temporaryLineShift += currentLineWidth
} else if (possibleCodeLower.includes('outline:')) {
outline = true;
textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0];
@@ -398,8 +425,11 @@ function writeText(textObjectList, targetContext) {
} else if (possibleCodeLower == 'artistbrush') {
var artistBrushWidth = textSize * 1.2
textLineContext.drawImage(manaSymbolImageList[62], textX, textCanvasBuffer + textSize - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21)
currentLineX += artistBrushWidth * 1.1
} else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) {
textX += artistBrushWidth * 1.1
} else if (possibleCodeLower.includes('font')) {
textFont = possibleCodeLower.replace('font', '')
textLineContext.font = textSize + 'px ' + textFont
} else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) {
//THIS HAS TO BE THE LAST ONE
var manaSymbolDiameter = textSize * 0.77
textLineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.split('/').join(''))], textX, textCanvasBuffer + textSize - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
@@ -428,11 +458,15 @@ function writeText(textObjectList, targetContext) {
textParagraphContext.drawImage(textLineCanvas, 0 + textAlignShift, textY, textLineCanvas.width, textLineCanvas.height)
if (n != splitText.length - 1) {
textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height)
textX = textCanvasBuffer
currentLineWidth = 0
textX = textCanvasBuffer + permanentLineShift + temporaryLineShift
currentLineWidth = 0 + permanentLineShift + temporaryLineShift
textY += textSize + paragraphSpace
paragraphSpace = 0
temporaryLineShift = 0
finishLine = false
if (wordToWrite == " ") {
continue innerloop
}
}
}
if (shadow > 0) {
@@ -503,11 +537,30 @@ function inputCardArtNameNumber(cardArtNameNumberInput) {
}
function initialize() {
//Card stuff
cardMasterList.push(new cardPlaceholder('Card Art Placeholder', cardArt))
cardMasterList.push(new cardPlaceholder('Text Placeholder', window['textCanvas']))
cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0])
cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0])
drawCardObjects()
document.getElementById('inputInfoNumber').value = date.getFullYear()
setTimeout(bottomInfoUpdated, 500)
//CSS & HTML stuff
window.layerElements = document.querySelectorAll('.layer')
window.addEventListener('resize', windowResized)
window.addEventListener('scroll', windowScrolled)
windowResized()
}
function windowResized() {
window.windowHeight = window.innerHeight
}
function windowScrolled() {
for (var i = 0; i < layerElements.length; i++) {
var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
if (positionFromTop - windowHeight <= 0) {
layerElements[i].classList.add('revealedLayer')
}
}
}
function bottomInfoUpdated() {
@@ -529,9 +582,12 @@ function addUploadedFrameImage(imageSource) {
function manaCostUpdated() {
manaCostContext.clearRect(0, 0, cardWidth, cardHeight)
var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/, ' ').replace(/}/, ' ').split('/').join('').split(' ')
var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/g, ' ').replace(/}/g, ' ').split('/').join('').split(' ')
var manaSymbolIndex = -1
manaCostCanvas.fillStyle = 'black'
if (manaCostDirection == 'reverse') {
manaCostList.reverse()
}
for (var i = 0; i < manaCostList.length; i++) {
if (manaSymbolCodeList.includes(manaCostList[i])) {
manaSymbolIndex += 1
@@ -652,6 +708,8 @@ function inputCardNameNumberTextImport(index) {
document.getElementById('inputSetRarity').value = beforeAfter(importCardTextResponse, '"rarity":"', '",')[0]
setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value
inputCardArtName(beforeAfter(importCardTextResponse, '"name":"', '",'))
manaCostUpdated()
drawCardText()
}
function importText(text, target) {
for (var i = 0; i < cardTextList.length; i++) {

68
data/scripts/versionM15.js
View File

@@ -3,36 +3,51 @@ var versionM15ImageList = [
['Blue Frame', 'data/images/m15/m15FrameU.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Black Frame', 'data/images/m15/m15FrameB.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Red Frame', 'data/images/m15/m15FrameR.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Green Frame', 'data/images/m15/m15FrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']]
['Green Frame', 'data/images/m15/m15FrameG.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Multicolored Frame', 'data/images/m15/m15FrameM.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Artifact Frame', 'data/images/m15/m15FrameA.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Vehicle Frame', 'data/images/m15/m15FrameV.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Land Frame', 'data/images/m15/m15FrameL.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['White Nyx Nyx Frame', 'data/images/m15/m15FrameWNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Blue Nyx Frame', 'data/images/m15/m15FrameUNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Black Nyx Frame', 'data/images/m15/m15FrameBNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Red Nyx Frame', 'data/images/m15/m15FrameRNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Green Nyx Frame', 'data/images/m15/m15FrameGNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Multicolored Nyx Frame', 'data/images/m15/m15FrameMNyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']],
['Artifact Nyx Frame', 'data/images/m15/m15FrameANyx.png', 0, 0, 1, 1, ['Full', 'Pinline (m15)']]
]
var versionM15MaskList = [['Right Half', 'data/images/maskRightHalf.png'], ['Pinline (m15)', 'data/images/m15/m15MaskPinline.png'], ['Full', 'data/images/maskFull.png']]
if (!loadedVersions.includes('m15')) {
loadedVersions.push("m15")
loadMaskImages(versionM15MaskList)
loadFrameImages(versionM15ImageList)
}
loadTextOptions([
new cardText('Card Title', 'Awesome Card Tho!!!', 0.1, 0.1, 0.8, 0.8, 'belerenb', 0.0177, 'black'),
new cardText('Card Type', '', 0.1, 0.1, 0.8, 0.8, 'belerenb', 0.0177, 'black'),
new cardText('Rules Text', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black'),
new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black')
new cardText('Card Title', '', 126/1500, 188/2100, 1248/1500, 80/2100, 'belerenb', 80/2100, 'black', ['oneLine=true']),
new cardText('Card Type', '', 126/1500, 1263/2100, 1248/1500, 68/2100, 'belerenb', 68/2100, 'black', ['oneLine=true']),
new cardText('Rules Text', '', 135/1500, 1372/2100, 1230/1500, 624/2100, 'mplantin', 74/2100, 'black'),
new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'black', ['oneLine=true'])
])
artX = 0
artY = 0
artWidth = 1500
artHeight = 500
artX = scaleX(115 / 1500)
artY = scaleY(237 / 2100)
artWidth = scaleX(1154 / 1500)
artHeight = scaleY(928 / 2100)
bottomInfoFunction = 'bottomInfoM15'
manaCostXPath = 'scaleX(0.05) * manaSymbolIndex'
manaCostYPath = 'scaleY(0.1)'
manaCostDiameter = 'scaleX(0.05)'
manaCostShadowOffset = '[scaleX(-0.01), scaleY(0.01)]'
manaCostXPath = '1316 - 78 * manaSymbolIndex'
manaCostYPath = '121'
manaCostDiameter = '70'
manaCostShadowOffset = '[-2, 6]'
manaCostDirection = 'reverse'
setSymbolX = [scaleX(0.8), 'right']
setSymbolY = [scaleY(0.5), 'left']
setSymbolWidth = scaleX(0.1)
setSymbolHeight = scaleY(0.1)
setSymbolX = [scaleX(1382/1500), 'right']
setSymbolY = [scaleY(1200/2100), 'left']
setSymbolWidth = scaleX(180/1500)
setSymbolHeight = scaleY(80/2100)
watermarkX = scaleX(0.5)
watermarkY = scaleY(0.5)
@@ -41,9 +56,22 @@ watermarkHeight = scaleY(1)
function bottomInfoM15() {
bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
var ptBoxShift = 0
for (var i = 0; i < cardTextList.length; i++) {
if (cardTextList[i].name == 'Power/Toughness' && cardTextList[i].text != '') {
ptBoxShift = 36/2100
} else {
// console.log(cardTextList[i].name, cardTextList[i].text)
}
}
writeText(
[
{text: 'EEEEEEEE', x: 0, y: 0.05, width: 0.8, height: 0.05, font: 'mplantin', fontSize: 0.05, fontColor: 'black', otherParameters: ['oneLine=true']},
{text: document.getElementById('inputInfoNumber').value, x: 97/1500, y: 1990/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
{text: document.getElementById('inputInfoSet').value + '\u2605' + document.getElementById('inputInfoLanguage').value + ' {artistbrush}{up' + scaleY(36/2100) + '}' + document.getElementById('inputInfoRarity').value + ' {down' + scaleY(72/2100) + '}{up' + scaleY(36/2100) + '}{fontbelerenbsc}' + document.getElementById('inputInfoArtist').value, x: 97/1500, y: 2026/2100, width: 1306/1500, height: 36/2100, font: 'gothammedium', fontSize: 36/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
{text: '{right}\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x: 97/1500, y: 1990/2100 + ptBoxShift, width: 1306/1500, height: 35/2100, font: 'mplantin', fontSize: 35/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
{text: '*Not for Sale*', x: 97/1500, y: 2056/2100, width: 1306/1500, height: 30/2100, font: 'gothammedium', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']},
{text: '{right}CardConjurer.com', x: 97/1500, y: 2020/2100 + ptBoxShift, width: 1306/1500, height: 30/2100, font: 'mplantin', fontSize: 30/2100, fontColor: 'white', otherParameters: ['oneLine=true']}
], bottomInfoContext)
// document.body.appendChild(bottomInfoCanvas)
}
}
bottomInfoUpdated()