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

fix

Browse Source
This commit is contained in:
Kyle
2019-11-29 11:19:29 -08:00
parent cf1e8fe0a3
commit 8b0611b6f8
6 changed files with 652 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/images/masks/Corners.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

895
data/scripts/main.js
View File

@@ -13,10 +13,11 @@ function testFunction() {
/* Initiate! */ /* Initiate! */
window.onload = initiate; window.onload = initiate;
function initiate() { function initiate() {
window.version = {}
window.cardWidth = 750; window.cardWidth = 750;
window.cardHeight = 1050; window.cardHeight = 1050;
window.frameList = new Array(); window.frameList = new Array();
window.maskNameList = ["Right Half", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame", "Border"]; window.maskNameList = ["Right Half", "Corners", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame", "Border"];
window.maskList = []; window.maskList = [];
window.selectedFrame = -1; window.selectedFrame = -1;
window.selectedMask = ""; window.selectedMask = "";
@@ -32,12 +33,46 @@ function initiate() {
window.displayContext = displayCanvas.getContext("2d"); window.displayContext = displayCanvas.getContext("2d");
newCanvas("frameMask"); newCanvas("frameMask");
newCanvas("frameFinal"); newCanvas("frameFinal");
newCanvas("text");
newCanvas("line");
newCanvas("paragraph");
newCanvas("bottomInfo");
newCanvas("setSymbol");
newCanvas("watermark");
newCanvas("transparent");
newCanvas("crop");
newCanvas("temp");
newCanvas("cardFinal"); newCanvas("cardFinal");
//Mana symbol Array setup
window.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"];
window.manaSymbolImageList = [];
//Manually create a few important images
window.cardArt = new Image();
window.setSymbol = new Image();
window.watermark = new Image();
cardArt.crossOrigin = "anonymous";
setSymbol.crossOrigin = "anonymous";
watermark.crossOrigin = "anonymous";
cardArt.onload = function() {
cardImageUpdated();
}
setSymbol.onload = function() {
updateSetSymbol();
}
watermark.onload = function() {
updateWatermark();
}
//Load the mana symbol images
loadManaSymbolImages();
//Loads up anything that uses Sortable.js //Loads up anything that uses Sortable.js
var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: "cardMasterElementMoving"}); var sortable = Sortable.create(cardMaster, {animation: 150, ghostClass: "cardMasterElementMoving"});
//Other little things
window.date = new Date()
document.getElementById("inputInfoNumber").value = date.getFullYear()
// randomSet(false)
//initiation is complete, ready to load image data //initiation is complete, ready to load image data
loadImageCSV(); console.log("init done, time to set the card version");
console.log("init done") changeVersionTo("m15");
} }
@@ -51,14 +86,13 @@ function loadImageCSV() {
var splitIndividualImageCSV = splitImageCSV[i].split(","); var splitIndividualImageCSV = splitImageCSV[i].split(",");
frameList[frameList.length] = new frameImage(splitIndividualImageCSV[0], "data/images/" + splitIndividualImageCSV[1], splitIndividualImageCSV[2]); frameList[frameList.length] = new frameImage(splitIndividualImageCSV[0], "data/images/" + splitIndividualImageCSV[1], splitIndividualImageCSV[2]);
} }
console.log("frame list loaded");
for (var i = 0; i < frameList.length; i++) { for (var i = 0; i < frameList.length; i++) {
// frameList[i].framePickerElement(document.getElementById("framePicker"));
document.getElementById("framePicker").innerHTML += frameList[i].framePickerElement(); document.getElementById("framePicker").innerHTML += frameList[i].framePickerElement();
} }
//I don't like these here, because even though they run, it doesn't populate the mask options //I don't like these here, because even though they run, it doesn't populate the mask options
// document.getElementsByClassName("frameOption")[0].classList.add("frameOptionSelected"); // document.getElementsByClassName("frameOption")[0].classList.add("frameOptionSelected");
// selectedMask = document.getElementsByClassName("frameOption")[0].id.replace("frameIndex", ""); // selectedMask = document.getElementsByClassName("frameOption")[0].id.replace("frameIndex", "");
console.log("image csv loaded, happy card conjuring!");
setTimeout(testFunction, 500); //deleteme setTimeout(testFunction, 500); //deleteme
} }
} }
@@ -89,7 +123,7 @@ class frameImage {
} }
} }
cardMasterElement(targetMask) { cardMasterElement(targetMask) {
return "<div id='frameIndex" + frameList.indexOf(this) + "' class='cardMasterElement'>" + this.displayName + " (" + targetMask + ")<img class='cardMasterElementMaskImage' src=" + this.image.src + "><img src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>"; return "<div id='frameIndex" + frameList.indexOf(this) + "' class='cardMasterElement'>" + this.displayName + " (" + targetMask + ")<img src=" + this.image.src + "><img class='cardMasterElementMaskImage' src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>";
} }
framePickerElement(targetElement) { framePickerElement(targetElement) {
return "<div id='frameIndex" + frameList.indexOf(this) + "' class='frameOption' onclick='frameOptionClicked(event)'><img src=" + this.image.src + "></div>"; return "<div id='frameIndex" + frameList.indexOf(this) + "' class='frameOption' onclick='frameOptionClicked(event)'><img src=" + this.image.src + "></div>";
@@ -174,23 +208,103 @@ function cardMasterUpdated() {
frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]); frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]);
frameFinalContext.drawImage(frameMaskCanvas, 0, 0, cardWidth, cardHeight); frameFinalContext.drawImage(frameMaskCanvas, 0, 0, cardWidth, cardHeight);
} }
cardImageUpdated(); updateBottomInfoCanvas();
} }
/* Overall card stuff */ /* Overall card stuff */
function cardImageUpdated() { function cardImageUpdated() {
// //clear it
// cardContext.fillStyle = "black"
// cardContext.fillRect(0, 0, cardWidth, cardHeight)
// //draw the art, frame, text, mana symbols, set symbol, watermark...
// //clear the corners
//Clear the canvas
cardFinalContext.clearRect(0, 0, cardWidth, cardHeight); cardFinalContext.clearRect(0, 0, cardWidth, cardHeight);
displayContext.clearRect(0, 0, cardWidth, cardHeight); displayContext.clearRect(0, 0, cardWidth, cardHeight);
//Draw the art, frame, text, bottom info, mana cost, watermark, and set symbol
cardFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
cardFinalContext.drawImage(frameFinalCanvas, 0, 0, cardWidth, cardHeight); cardFinalContext.drawImage(frameFinalCanvas, 0, 0, cardWidth, cardHeight);
cardFinalContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight);
cardFinalContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight);
cardFinalContext.drawManaCost(document.getElementById("inputManaCost").value, version.manaCostX, version.manaCostY, version.manaCostDiameter, version.manaCostDistance, version.manaCostDirection)
cardFinalContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight)
cardFinalContext.drawImage(setSymbolCanvas, 0, 0, cardWidth, cardHeight)
//Clear the corners
cardFinalContext.globalCompositeOperation = "destination-out"
cardFinalContext.drawImage(maskList[1], 0, 0, cardWidth, cardHeight)
cardFinalContext.globalCompositeOperation = "source-over"
//Copy it to the visible canvas
displayContext.drawImage(cardFinalCanvas, 0, 0, cardWidth, cardHeight); displayContext.drawImage(cardFinalCanvas, 0, 0, cardWidth, cardHeight);
} }
/* Loading/manipulating card versions */
function changeVersionTo(versionToChangeTo) {
loadScript("data/versions/" + versionToChangeTo + ".js")
}
function finishChangingVersion() {
for (var i = 0; i < version.textList.length; i ++) {
document.getElementById("inputWhichTextTabs").innerHTML += "<div class='textTabButton' onclick='textTabFunction(event, `" + version.textList[i][0] + "`)'>" + version.textList[i][0] + "</div>"
if (i == 0) {
document.getElementsByClassName("textTabButton")[0].classList.add("activeTextTab")
}
}
console.log("version changed, time to load the image csv")
loadImageCSV();
}
/* Text functions! */
function textTabFunction(event, target) {
var textTabButtons = document.getElementsByClassName("textTabButton")
for (var i = 0; i < textTabButtons.length; i++) {
textTabButtons[i].classList.remove("activeTextTab")
}
event.target.classList.add("activeTextTab")
for (var i = 0; i < version.textList.length; i ++) {
if (version.textList[i][0] == target.replace("option", "")) {
whichTextIndex = i
document.getElementById("inputText").value = version.textList[whichTextIndex][1]
}
}
}
//Changes the textarea content to whichever text is currently selected for editing
var whichTextIndex = 0
function changeWhichText() {
for (var i = 0; i < version.textList.length; i ++) {
if (version.textList[i][0] == document.getElementById("inputWhichText").value) {
whichTextIndex = i
}
}
document.getElementById("inputText").value = version.textList[whichTextIndex][1]
}
function updateText() {
version.textList[whichTextIndex][1] = document.getElementById("inputText").value
textContext.clearRect(0, 0, cardWidth, cardHeight)
for (var i = 0; i < version.textList.length; i ++) {
textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9])
}
cardImageUpdated()
}
/* functions for all the little parts of the care */
function updateBottomInfoCanvas() {
window[version.bottomInfoFunction]()
}
/* Misc convenient functions */ /* Misc convenient functions */
function scale(input) { function scale(input) {
return input * cardWidth / 750; return input * cardWidth / 750;
} }
function getValue(elementId) {
return parseFloat(document.getElementById(elementId).value)
}
/* Functions that make stuff */ /* Functions that make stuff */
@@ -233,10 +347,10 @@ function loadScript(scriptPath){
// //Define some variables // //Define some variables
// var cardWidth = 750, cardHeight = 1050 // var cardWidth = 750, cardHeight = 1050
// var version = {} // var version = {}
// var date = new Date()
// var initiated = false // var initiated = false
// var suggestedColor = "White" // var suggestedColor = "White"
// document.getElementById("inputInfoNumber").value = date.getFullYear()
// //Make all the canvases and their contexts // //Make all the canvases and their contexts
// var mainCanvas = document.getElementById("mainCanvas") // var mainCanvas = document.getElementById("mainCanvas")
// mainCanvas.width = cardWidth // mainCanvas.width = cardWidth
@@ -426,73 +540,71 @@ function loadScript(scriptPath){
// updateTextCanvas() // updateTextCanvas()
// } // }
// } // }
// //figures out the placing of the set symbol //figures out the placing of the set symbol
// function updateSetSymbolCanvas() { function updateSetSymbol() {
// setSymbolContext.clearRect(0, 0, cardWidth, cardHeight) setSymbolContext.clearRect(0, 0, cardWidth, cardHeight)
// var setSymbolWidth, setSymbolHeight, setSymbolX, setSymbolY var setSymbolWidth, setSymbolHeight, setSymbolX, setSymbolY
// if (version.setSymbolWidth / version.setSymbolHeight < setSymbol.width / setSymbol.height) { if (version.setSymbolWidth / version.setSymbolHeight < setSymbol.width / setSymbol.height) {
// //wider //wider
// setSymbolWidth = version.setSymbolWidth setSymbolWidth = version.setSymbolWidth
// setSymbolHeight = version.setSymbolWidth / setSymbol.width * setSymbol.height setSymbolHeight = version.setSymbolWidth / setSymbol.width * setSymbol.height
// setSymbolX = version.setSymbolRight - setSymbolWidth setSymbolX = version.setSymbolRight - setSymbolWidth
// setSymbolY = version.setSymbolVertical - setSymbolHeight / 2 setSymbolY = version.setSymbolVertical - setSymbolHeight / 2
// } else { } else {
// //taller //taller
// setSymbolHeight = version.setSymbolHeight setSymbolHeight = version.setSymbolHeight
// setSymbolWidth = version.setSymbolHeight / setSymbol.height * setSymbol.width setSymbolWidth = version.setSymbolHeight / setSymbol.height * setSymbol.width
// setSymbolX = version.setSymbolRight - setSymbolWidth setSymbolX = version.setSymbolRight - setSymbolWidth
// setSymbolY = version.setSymbolVertical - setSymbolHeight / 2 setSymbolY = version.setSymbolVertical - setSymbolHeight / 2
// } }
// setSymbolContext.drawImage(setSymbol, setSymbolX, setSymbolY, setSymbolWidth, setSymbolHeight) setSymbolContext.drawImage(setSymbol, setSymbolX, setSymbolY, setSymbolWidth, setSymbolHeight)
// updateCardCanvas() cardImageUpdated()
// } }
// function updateWatermarkCanvas() { function updateWatermark() {
// if (document.getElementById("inputWatermarkPrimary").value != "none") { if (document.getElementById("inputWatermarkPrimary").value != "none") {
// watermarkContext.clearRect(0, 0, cardWidth, cardHeight) watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
// var watermarkX, watermarkY, watermarkWidth, watermarkHeight var watermarkX, watermarkY, watermarkWidth, watermarkHeight
// if (version.watermarkWidth / version.watermarkHeight < watermark.width / watermark.height) { if (version.watermarkWidth / version.watermarkHeight < watermark.width / watermark.height) {
// //wider //wider
// watermarkWidth = version.watermarkWidth watermarkWidth = version.watermarkWidth
// watermarkHeight = version.watermarkWidth / watermark.width * watermark.height watermarkHeight = version.watermarkWidth / watermark.width * watermark.height
// watermarkX = cardWidth / 2 - watermarkWidth / 2 watermarkX = cardWidth / 2 - watermarkWidth / 2
// watermarkY = version.watermarkY - watermarkHeight / 2 watermarkY = version.watermarkY - watermarkHeight / 2
// } else { } else {
// //taller //taller
// watermarkHeight = version.watermarkHeight watermarkHeight = version.watermarkHeight
// watermarkWidth = version.watermarkHeight / watermark.height * watermark.width watermarkWidth = version.watermarkHeight / watermark.height * watermark.width
// watermarkX = cardWidth / 2 - watermarkWidth / 2 watermarkX = cardWidth / 2 - watermarkWidth / 2
// watermarkY = version.watermarkY - watermarkHeight / 2 watermarkY = version.watermarkY - watermarkHeight / 2
// } }
// watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight) watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
// watermarkContext.globalCompositeOperation = "source-in" watermarkContext.globalCompositeOperation = "source-in"
// if (document.getElementById("inputWatermarkPrimary").value != "default") { if (document.getElementById("inputWatermarkPrimary").value != "default") {
// watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value
// watermarkContext.fillRect(0, 0, cardWidth, cardHeight) watermarkContext.fillRect(0, 0, cardWidth, cardHeight)
// } }
// if (document.getElementById("inputWatermarkSecondary").value != "none") { if (document.getElementById("inputWatermarkSecondary").value != "none") {
// watermarkContext.globalCompositeOperation = "source-atop" watermarkContext.globalCompositeOperation = "source-atop"
// tempContext.clearRect(0, 0, cardWidth, cardHeight) tempContext.clearRect(0, 0, cardWidth, cardHeight)
// tempContext.drawImage(window[nameArray[nameArray.indexOf("noneMaskSecondary")]].image, 0, 0, cardWidth, cardHeight) tempContext.drawImage(maskList[0], 0, 0, cardWidth, cardHeight)
// tempContext.globalCompositeOperation = "source-in" tempContext.globalCompositeOperation = "source-in"
// if (document.getElementById("inputWatermarkSecondary").value == "default") { if (document.getElementById("inputWatermarkSecondary").value == "default") {
// tempContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight) tempContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
// } else { } else {
// tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value
// tempContext.fillRect(0, 0, cardWidth, cardHeight) tempContext.fillRect(0, 0, cardWidth, cardHeight)
// } }
// tempContext.globalCompositeOperation = "source-over" tempContext.globalCompositeOperation = "source-over"
// watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight) watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight)
// } }
// watermarkContext.globalCompositeOperation = "source-over" watermarkContext.globalCompositeOperation = "source-over"
// } else { } else {
// watermarkContext.clearRect(0, 0, cardWidth, cardHeight) watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
// } }
// updateCardCanvas() cardImageUpdated()
// } }
// //Does the bottom info function! This can be different depending on the version. // //Does the bottom info function! This can be different depending on the version.
// function updateBottomInfoCanvas() {
// window[version.bottomInfoFunction]()
// }
// function updateCardCanvas() { // function updateCardCanvas() {
// if (!initiated) { // if (!initiated) {
// return // return
@@ -554,9 +666,7 @@ function loadScript(scriptPath){
// return inputHeight / 1050 * cardHeight // return inputHeight / 1050 * cardHeight
// } // }
// //shortcut for parseInt(document.getElementById("").value) // //shortcut for parseInt(document.getElementById("").value)
// function getValue(elementId) {
// return parseFloat(document.getElementById(elementId).value)
// }
// //Changes the version // //Changes the version
// function changeVersionTo(versionToChangeTo) { // function changeVersionTo(versionToChangeTo) {
// loadScript("data/versions/" + versionToChangeTo + "Version.js") // loadScript("data/versions/" + versionToChangeTo + "Version.js")
@@ -617,173 +727,175 @@ function loadScript(scriptPath){
// cardMasterOpacityValue[version.typeOrder.indexOf(document.getElementById("inputImageTypeOpacity").value)] = document.getElementById("inputOpacityValue").value // cardMasterOpacityValue[version.typeOrder.indexOf(document.getElementById("inputImageTypeOpacity").value)] = document.getElementById("inputOpacityValue").value
// cardMasterUpdated() // cardMasterUpdated()
// } // }
// //Custom text function! This acts on any codes and makes things look nice :)
// CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="") {
// paragraphContext.clearRect(0, 0, cardWidth, cardHeight) //Custom text function! This acts on any codes and makes things look nice :)
// var textSize = inputTextSize CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="") {
// lineContext.font = textSize + "px " + textFont paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
// lineContext.fillStyle = textColor var textSize = inputTextSize
// var otherParameters = other.split(",") lineContext.font = textSize + "px " + textFont
// var outline, shadow = 0, oneLine = false, outlineWidth = 2, textAlign = "left", verticalAlign = true, lineSpace = 1 lineContext.fillStyle = textColor
// for (var i = 0; i < otherParameters.length; i ++) { var otherParameters = other.split(",")
// eval(otherParameters[i]) var outline, shadow = 0, oneLine = false, outlineWidth = 2, textAlign = "left", verticalAlign = true, lineSpace = 1
// } for (var i = 0; i < otherParameters.length; i ++) {
// lineContext.strokeStyle = outline eval(otherParameters[i])
// lineContext.lineWidth = outlineWidth }
// var currentLineX = 0 lineContext.strokeStyle = outline
// var currentLineY = textY + textSize * 0.45 lineContext.lineWidth = outlineWidth
// var uniqueSplitter = "9dn57gwbt4sh" var currentLineX = 0
// var splitString = text.replace(/ /g, uniqueSplitter + " " + uniqueSplitter).replace(/{/g, uniqueSplitter + "{").replace(/}/g, "}" + uniqueSplitter).split(uniqueSplitter) var currentLineY = textY + textSize * 0.45
// splitString[splitString.length] = " " var uniqueSplitter = "9dn57gwbt4sh"
// var lastWordAdded = "" var splitString = text.replace(/ /g, uniqueSplitter + " " + uniqueSplitter).replace(/{/g, uniqueSplitter + "{").replace(/}/g, "}" + uniqueSplitter).split(uniqueSplitter)
// for (var i = 0; i < splitString.length; i++) { splitString[splitString.length] = " "
// if (splitString[i] != "") { var lastWordAdded = ""
// var wordToWrite = splitString[i] for (var i = 0; i < splitString.length; i++) {
// var finishLine = false if (splitString[i] != "") {
// if (splitString[i].includes("{") && splitString[i].includes("}")) { var wordToWrite = splitString[i]
// //It may be a code var finishLine = false
// wordToWrite = "" if (splitString[i].includes("{") && splitString[i].includes("}")) {
// possibleCodeLower = splitString[i].toLowerCase().replace("{", "").replace("}", "") //It may be a code
// if (possibleCodeLower == "line" && !oneLine) { wordToWrite = ""
// finishLine = true possibleCodeLower = splitString[i].toLowerCase().replace("{", "").replace("}", "")
// currentLineY += textSize * 0.35 if (possibleCodeLower == "line" && !oneLine) {
// } else if (possibleCodeLower == "linenospace" && ! oneLine) { finishLine = true
// finishLine = true currentLineY += textSize * 0.35
// } else if (possibleCodeLower == "bar" || possibleCodeLower == "flavor") { } else if (possibleCodeLower == "linenospace" && ! oneLine) {
// finishLine = true finishLine = true
// var barWidth = manaSymbolImageList[63].width } else if (possibleCodeLower == "bar" || possibleCodeLower == "flavor") {
// var barHeight = manaSymbolImageList[63].height finishLine = true
// paragraphContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight) var barWidth = manaSymbolImageList[63].width
// currentLineY += textSize * 0.8 var barHeight = manaSymbolImageList[63].height
// if (possibleCodeLower == "flavor") { paragraphContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight)
// lineContext.font = "italic " + (textSize - 3) + "px " + textFont currentLineY += textSize * 0.8
// } if (possibleCodeLower == "flavor") {
// } else if (possibleCodeLower.includes("fontsize")) { lineContext.font = "italic " + (textSize - 3) + "px " + textFont
// textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length)) }
// lineContext.font = textSize + "px " + textFont } else if (possibleCodeLower.includes("fontsize")) {
// } else if (possibleCodeLower == "i") { textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length))
// lineContext.font = "italic " + textSize + "px " + textFont lineContext.font = textSize + "px " + textFont
// } else if (possibleCodeLower == "/i") { } else if (possibleCodeLower == "i") {
// lineContext.font = textSize + "px " + textFont lineContext.font = "italic " + textSize + "px " + textFont
// } else if (possibleCodeLower == "center") { } else if (possibleCodeLower == "/i") {
// textAlign = "center" lineContext.font = textSize + "px " + textFont
// } else if (possibleCodeLower == "right") { } else if (possibleCodeLower == "center") {
// textAlign = "right" textAlign = "center"
// } else if (possibleCodeLower == "left") { } else if (possibleCodeLower == "right") {
// textAlign = "left" textAlign = "right"
// } else if (possibleCodeLower.includes("up")) { } else if (possibleCodeLower == "left") {
// currentLineY -= (parseInt(possibleCodeLower.slice(2, possibleCodeLower.length))) textAlign = "left"
// } else if (possibleCodeLower.includes("down")) { } else if (possibleCodeLower.includes("up")) {
// currentLineY += (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length))) currentLineY -= (parseInt(possibleCodeLower.slice(2, possibleCodeLower.length)))
// } else if (possibleCodeLower.includes("left")) { } else if (possibleCodeLower.includes("down")) {
// currentLineX -= (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length))) currentLineY += (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length)))
// } else if (possibleCodeLower.includes("right")) { } else if (possibleCodeLower.includes("left")) {
// currentLineX += (parseInt(possibleCodeLower.slice(5, possibleCodeLower.length))) currentLineX -= (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length)))
// } else if (possibleCodeLower == "artistbrush") { } else if (possibleCodeLower.includes("right")) {
// var artistBrushWidth = textSize * 1.2 currentLineX += (parseInt(possibleCodeLower.slice(5, possibleCodeLower.length)))
// lineContext.drawImage(manaSymbolImageList[62], currentLineX, currentLineY - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21) } else if (possibleCodeLower == "artistbrush") {
// currentLineX += artistBrushWidth * 1.1 var artistBrushWidth = textSize * 1.2
// } else if (possibleCodeLower.includes("fontcolor")) { lineContext.drawImage(manaSymbolImageList[62], currentLineX, currentLineY - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21)
// lineContext.fillStyle = possibleCodeLower.slice(9, possibleCodeLower.length) currentLineX += artistBrushWidth * 1.1
// }else if (possibleCodeLower.includes("font")) { } else if (possibleCodeLower.includes("fontcolor")) {
// textFont = possibleCodeLower.slice(5, possibleCodeLower.length) lineContext.fillStyle = possibleCodeLower.slice(9, possibleCodeLower.length)
// lineContext.font = textSize + "px " + textFont }else if (possibleCodeLower.includes("font")) {
// } else if (manaSymbolCodeList.includes(possibleCodeLower)) { textFont = possibleCodeLower.slice(5, possibleCodeLower.length)
// //THIS HAS TO BE THE LAST ONE lineContext.font = textSize + "px " + textFont
// var manaSymbolDiameter = textSize * 0.77 } else if (manaSymbolCodeList.includes(possibleCodeLower)) {
// lineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower)], currentLineX, currentLineY - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter) //THIS HAS TO BE THE LAST ONE
// currentLineX += manaSymbolDiameter * 1.02 var manaSymbolDiameter = textSize * 0.77
// } else { lineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower)], currentLineX, currentLineY - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter)
// wordToWrite = splitString[i] currentLineX += manaSymbolDiameter * 1.02
// } } else {
// } wordToWrite = splitString[i]
// if (wordToWrite != "" || finishLine == true) { }
// //We're left with a word. Write it. }
// var currentWordWidth = lineContext.measureText(wordToWrite).width if (wordToWrite != "" || finishLine == true) {
// if (i == splitString.length - 1) { //We're left with a word. Write it.
// //forces the last artificially added space to be too wide, making sure the last line is drawn in. var currentWordWidth = lineContext.measureText(wordToWrite).width
// currentWordWidth = textWidth + 1 if (i == splitString.length - 1) {
// } //forces the last artificially added space to be too wide, making sure the last line is drawn in.
// if (currentLineX + currentWordWidth > textWidth || finishLine) { currentWordWidth = textWidth + 1
// //Finish the line }
// if (oneLine && i != splitString.length - 1 && inputTextSize > 1) { if (currentLineX + currentWordWidth > textWidth || finishLine) {
// lineContext.clearRect(0, 0, cardWidth, cardHeight) //Finish the line
// this.writeText(text, textX, textY, textWidth, textHeight, textFont, inputTextSize - 1, textColor, other) if (oneLine && i != splitString.length - 1 && inputTextSize > 1) {
// return lineContext.clearRect(0, 0, cardWidth, cardHeight)
// } this.writeText(text, textX, textY, textWidth, textHeight, textFont, inputTextSize - 1, textColor, other)
// var alignAdjust = 0 return
// if (textAlign == "center" || textAlign == "right") { }
// if (lastWordAdded == " ") { var alignAdjust = 0
// currentLineX -= textContext.measureText(" ").width if (textAlign == "center" || textAlign == "right") {
// } if (lastWordAdded == " ") {
// if (textAlign == "center") { currentLineX -= textContext.measureText(" ").width
// alignAdjust = textWidth / 2 - currentLineX / 2 + textX }
// } else if (textAlign == "right") { if (textAlign == "center") {
// alignAdjust = textWidth + textX - currentLineX alignAdjust = textWidth / 2 - currentLineX / 2 + textX
// } } else if (textAlign == "right") {
// } else { alignAdjust = textWidth + textX - currentLineX
// alignAdjust += textX }
// } } else {
// paragraphContext.drawImage(lineCanvas, 0 + alignAdjust, 0, cardWidth, cardHeight) alignAdjust += textX
// lineContext.clearRect(0, 0, cardWidth, cardHeight) }
// currentLineY += textSize * lineSpace paragraphContext.drawImage(lineCanvas, 0 + alignAdjust, 0, cardWidth, cardHeight)
// currentLineX = 0 lineContext.clearRect(0, 0, cardWidth, cardHeight)
// if (wordToWrite == " ") { currentLineY += textSize * lineSpace
// currentWordWidth = 0 currentLineX = 0
// } if (wordToWrite == " ") {
// } currentWordWidth = 0
// //Whether or not the current line is finished, write to it. }
// if (shadow > 0) { }
// lineContext.fillText(wordToWrite, currentLineX + shadow, currentLineY + shadow) //Whether or not the current line is finished, write to it.
// } if (shadow > 0) {
// if (outline != undefined) { lineContext.fillText(wordToWrite, currentLineX + shadow, currentLineY + shadow)
// lineContext.strokeText(wordToWrite, currentLineX, currentLineY) }
// } if (outline != undefined) {
// lineContext.fillText(wordToWrite, currentLineX, currentLineY) lineContext.strokeText(wordToWrite, currentLineX, currentLineY)
// currentLineX += currentWordWidth }
// lastWordAdded = wordToWrite lineContext.fillText(wordToWrite, currentLineX, currentLineY)
// } currentLineX += currentWordWidth
// } lastWordAdded = wordToWrite
// } }
// verticalAdjust = 0 }
// if (verticalAlign) { }
// verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2 verticalAdjust = 0
// } if (verticalAlign) {
// this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight) verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2
// return "done" }
// } this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight)
// //Loads up all the mana symbol images return "done"
// function loadManaSymbolImages() { }
// for (var i = 0; i < manaSymbolCodeList.length; i++) { //Loads up all the mana symbol images
// manaSymbolImageList[i] = new Image() function loadManaSymbolImages() {
// manaSymbolImageList[i].src = "data/images/manaSymbols/" + i + ".png" for (var i = 0; i < manaSymbolCodeList.length; i++) {
// } manaSymbolImageList[i] = new Image()
// } manaSymbolImageList[i].src = "data/images/manaSymbols/" + i + ".png"
// //Draws a mana cost }
// CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbolsY, diameter = 50, distance = -50, direction = "horizontal") { }
// var splitManaCost = text.replace(/{/g, " ").replace(/}/g, " ").split(" ") //Draws a mana cost
// var currentSymbolIndex = 0 CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbolsY, diameter = 50, distance = -50, direction = "horizontal") {
// var currentX = symbolsX var splitManaCost = text.replace(/{/g, " ").replace(/}/g, " ").split(" ")
// var currentY = symbolsY var currentSymbolIndex = 0
// for (var i = splitManaCost.length - 1; i >= 0; i --) { var currentX = symbolsX
// if (manaSymbolCodeList.includes(splitManaCost[i])) { var currentY = symbolsY
// if (Array.isArray(direction) && i < direction.length) { for (var i = splitManaCost.length - 1; i >= 0; i --) {
// currentX = direction[i][0] if (manaSymbolCodeList.includes(splitManaCost[i])) {
// currentY = direction[i][1] if (Array.isArray(direction) && i < direction.length) {
// } currentX = direction[i][0]
// this.fillStyle = "black" currentY = direction[i][1]
// this.beginPath() }
// this.arc(currentX + diameter / 2.1, currentY + diameter / 1.8, diameter / 2, 0, 2 * Math.PI, false) this.fillStyle = "black"
// this.fill() this.beginPath()
// this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(splitManaCost[i])], currentX, currentY, diameter, diameter) this.arc(currentX + diameter / 2.1, currentY + diameter / 1.8, diameter / 2, 0, 2 * Math.PI, false)
// if (direction == "horizontal") { this.fill()
// currentX += distance this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(splitManaCost[i])], currentX, currentY, diameter, diameter)
// } else if (direction == "vertical") { if (direction == "horizontal") {
// currentY += distance currentX += distance
// } } else if (direction == "vertical") {
// } currentY += distance
// } }
// } }
}
}
// //Changes the textarea content to whichever text is currently selected for editing // //Changes the textarea content to whichever text is currently selected for editing
// var whichTextIndex = 0 // var whichTextIndex = 0
// function changeWhichText() { // function changeWhichText() {
@@ -795,141 +907,141 @@ function loadScript(scriptPath){
// document.getElementById("inputText").value = version.textList[whichTextIndex][1] // document.getElementById("inputText").value = version.textList[whichTextIndex][1]
// } // }
// //Removes all the white pixels in an image // //Removes all the white pixels in an image
// var whiteThreshold = 250 var whiteThreshold = 250
// function whiteToTransparent(targetImage, source = targetImage.src) { function whiteToTransparent(targetImage, source = targetImage.src) {
// //Create image, size canvas, draw image //Create image, size canvas, draw image
// var imgTempTarget = new Image() var imgTempTarget = new Image()
// imgTempTarget.crossOrigin = "anonymous" imgTempTarget.crossOrigin = "anonymous"
// imgTempTarget.src = source imgTempTarget.src = source
// imgTempTarget.onload = function() { imgTempTarget.onload = function() {
// if (imgTempTarget.width > 0 && imgTempTarget.height > 0) { if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
// transparentCanvas.width = imgTempTarget.width transparentCanvas.width = imgTempTarget.width
// transparentCanvas.height = imgTempTarget.height transparentCanvas.height = imgTempTarget.height
// transparentContext.drawImage(imgTempTarget, 0, 0) transparentContext.drawImage(imgTempTarget, 0, 0)
// //declare variables //declare variables
// var width = transparentCanvas.width var width = transparentCanvas.width
// var height = transparentCanvas.height var height = transparentCanvas.height
// var imageData = transparentContext.getImageData(0, 0, transparentCanvas.width, transparentCanvas.height) var imageData = transparentContext.getImageData(0, 0, transparentCanvas.width, transparentCanvas.height)
// var x, y, index var x, y, index
// //Go through every pixel and //Go through every pixel and
// for (y = 0; y < height; y++) { for (y = 0; y < height; y++) {
// for (x = 0; x < width; x++) { for (x = 0; x < width; x++) {
// index = (y * width + x) * 4 index = (y * width + x) * 4
// if (imageData.data[index] >= whiteThreshold && imageData.data[index + 1] >= whiteThreshold && imageData.data[index + 2] >= whiteThreshold) { if (imageData.data[index] >= whiteThreshold && imageData.data[index + 1] >= whiteThreshold && imageData.data[index + 2] >= whiteThreshold) {
// imageData.data[index + 3] = 0 imageData.data[index + 3] = 0
// } }
// } }
// } }
// transparentContext.clearRect(0, 0, width, height) transparentContext.clearRect(0, 0, width, height)
// transparentContext.putImageData(imageData, 0, 0) transparentContext.putImageData(imageData, 0, 0)
// targetImage.src = transparentCanvas.toDataURL() targetImage.src = transparentCanvas.toDataURL()
// autocrop(targetImage) autocrop(targetImage)
// } }
// } }
// } }
// //Removes all the whitespace in an image //Removes all the whitespace in an image
// function autocrop(targetImage, source = targetImage.src) { function autocrop(targetImage, source = targetImage.src) {
// //Create image, size canvas, draw image //Create image, size canvas, draw image
// var imgTempTarget = new Image() var imgTempTarget = new Image()
// imgTempTarget.crossOrigin = "anonymous" imgTempTarget.crossOrigin = "anonymous"
// imgTempTarget.src = source imgTempTarget.src = source
// imgTempTarget.onload = function() { imgTempTarget.onload = function() {
// if (imgTempTarget.width > 0 && imgTempTarget.height > 0) { if (imgTempTarget.width > 0 && imgTempTarget.height > 0) {
// cropCanvas.width = imgTempTarget.width cropCanvas.width = imgTempTarget.width
// cropCanvas.height = imgTempTarget.height cropCanvas.height = imgTempTarget.height
// cropContext.drawImage(imgTempTarget, 0, 0) cropContext.drawImage(imgTempTarget, 0, 0)
// //declare variables //declare variables
// var width = cropCanvas.width var width = cropCanvas.width
// var height = cropCanvas.height var height = cropCanvas.height
// var pix = {x:[], y:[]} var pix = {x:[], y:[]}
// var imageData = cropContext.getImageData(0, 0, cropCanvas.width, cropCanvas.height) var imageData = cropContext.getImageData(0, 0, cropCanvas.width, cropCanvas.height)
// var x, y, index var x, y, index
// if (imageData.data.length > 4) { if (imageData.data.length > 4) {
// //Go through every pixel and //Go through every pixel and
// for (y = 0; y < height; y++) { for (y = 0; y < height; y++) {
// for (x = 0; x < width; x++) { for (x = 0; x < width; x++) {
// //(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given //(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given
// index = (y * width + x) * 4 + 3 index = (y * width + x) * 4 + 3
// if (imageData.data[index] > 0) { if (imageData.data[index] > 0) {
// //pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels //pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels
// pix.x.push(x) pix.x.push(x)
// pix.y.push(y) pix.y.push(y)
// } }
// } }
// } }
// //sorts the arrays numerically //sorts the arrays numerically
// pix.x.sort(function(a,b){return a-b}) pix.x.sort(function(a,b){return a-b})
// pix.y.sort(function(a,b){return a-b}) pix.y.sort(function(a,b){return a-b})
// var n = pix.x.length - 1 var n = pix.x.length - 1
// //Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas //Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas
// width = pix.x[n] - pix.x[0] width = pix.x[n] - pix.x[0]
// height = pix.y[n] - pix.y[0] height = pix.y[n] - pix.y[0]
// var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1) var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
// //Resizes the canvas and draws cropped image //Resizes the canvas and draws cropped image
// cropCanvas.width = width + 1 cropCanvas.width = width + 1
// cropCanvas.height = height + 1 cropCanvas.height = height + 1
// cropContext.putImageData(cropped, 0, 0) cropContext.putImageData(cropped, 0, 0)
// //Saves the newly cropped image to the given image //Saves the newly cropped image to the given image
// targetImage.src = cropCanvas.toDataURL() targetImage.src = cropCanvas.toDataURL()
// } }
// } }
// } }
// } }
// //The next several functions are all about loading images! // //The next several functions are all about loading images!
// function uploadImage(event, destination) { function uploadImage(event, destination) {
// var input = event.target var input = event.target
// var reader = new FileReader() var reader = new FileReader()
// reader.onload = function() { reader.onload = function() {
// var dataURL = reader.result var dataURL = reader.result
// destination.src = dataURL destination.src = dataURL
// } }
// reader.readAsDataURL(input.files[0]) reader.readAsDataURL(input.files[0])
// } }
// var savedArtList = [], cardArtUrlList = [], cardArtArtistList = [] var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
// function inputCardArtName(cardArtNameInput) { function inputCardArtName(cardArtNameInput) {
// var xhttp = new XMLHttpRequest() var xhttp = new XMLHttpRequest()
// xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {
// if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
// savedArtList = this.responseText.split('"art_crop":"') savedArtList = this.responseText.split('"art_crop":"')
// savedArtList.splice(0, 1) savedArtList.splice(0, 1)
// document.getElementById("inputCardArtNameNumber").max = savedArtList.length document.getElementById("inputCardArtNameNumber").max = savedArtList.length
// document.getElementById("inputCardArtNameNumber").value = 1 document.getElementById("inputCardArtNameNumber").value = 1
// for (i = 0; i < savedArtList.length; i ++) { for (i = 0; i < savedArtList.length; i ++) {
// cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0] cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0]
// } }
// for (i = 0; i < savedArtList.length; i ++) { for (i = 0; i < savedArtList.length; i ++) {
// cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_ids":')) cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_ids":'))
// } }
// inputCardArtNameNumber(1) inputCardArtNameNumber(1)
// } else if (this.readyState == 4 && this.status == 404) { } else if (this.readyState == 4 && this.status == 404) {
// alert("Sorry, but we can't seem to find any art for '" + cardArtNameInput + "'") alert("Sorry, but we can't seem to find any art for '" + cardArtNameInput + "'")
// } }
// } }
// xhttp.open("GET", "https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D" + cardArtNameInput.replace(/ /g, "_"), true) xhttp.open("GET", "https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D" + cardArtNameInput.replace(/ /g, "_"), true)
// xhttp.send() xhttp.send()
// } }
// function inputCardArtNameNumber(cardArtNameNumberInput) { function inputCardArtNameNumber(cardArtNameNumberInput) {
// cardArt.src = cardArtUrlList[cardArtNameNumberInput - 1] cardArt.src = cardArtUrlList[cardArtNameNumberInput - 1]
// document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1] // document.getElementById("inputInfoArtist").value = cardArtArtistList[cardArtNameNumberInput - 1]
// updateBottomInfoCanvas() // updateBottomInfoCanvas()
// } }
// //Downloads the image! //Downloads the image!
// function downloadCardImage(linkElement) { function downloadCardImage(linkElement) {
// if (document.getElementById("inputInfoArtist").value.replace(/ /g, "") != "") { if (document.getElementById("inputInfoArtist").value.replace(/ /g, "") != "") {
// linkElement.download = version.textList[0][1].toLowerCase().replace(/ /g, "_") + ".png" linkElement.download = version.textList[0][1].toLowerCase().replace(/ /g, "_") + ".png"
// if (linkElement.download == ".png") { if (linkElement.download == ".png") {
// linkElement.download = "card.png" linkElement.download = "card.png"
// } }
// } else { } else {
// event.preventDefault() event.preventDefault()
// alert("You must properly credit an artist before downloading") alert("You must properly credit an artist before downloading")
// } }
// var cardImageData = cardCanvas.toDataURL() var cardImageData = cardCanvas.toDataURL()
// if (cardImageData == undefined) { if (cardImageData == undefined) {
// alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.") alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
// } }
// linkElement.href = cardImageData linkElement.href = cardImageData
// } }
// //Toggles the visibility of tooltips // //Toggles the visibility of tooltips
// function toggleTooltips(revealed = true) { // function toggleTooltips(revealed = true) {
// var tooltipList = document.getElementsByClassName("tooltiptext") // var tooltipList = document.getElementsByClassName("tooltiptext")
@@ -986,30 +1098,7 @@ function loadScript(scriptPath){
// } // }
// function tabFunction(event, section, target, specialFunction = "none") {
// var tabButtons = document.getElementsByClassName("tabButton " + section)
// for (var i = 0; i < tabButtons.length; i++) {
// tabButtons[i].className = tabButtons[i].className.replace(" activeTab", "")
// }
// event.currentTarget.className += " activeTab"
// if (specialFunction != "none") {
// window[specialFunction](event, section, target)
// } else {
// var tabContents = document.getElementsByClassName("tabContent " + section)
// for (var i = 0; i < tabContents.length; i++) {
// tabContents[i].className = tabContents[i].className.replace(" displayed", "")
// }
// document.getElementById(target).className += " displayed"
// }
// }
// function textTabFunction(event, section, target) {
// for (var i = 0; i < version.textList.length; i ++) {
// if (version.textList[i][0] == target.replace("option", "")) {
// whichTextIndex = i
// }
// }
// document.getElementById("inputText").value = version.textList[whichTextIndex][1]
// }

2
data/scripts/setCodeList.js
View File

@@ -35,7 +35,7 @@ var setCodeListSpecialOnly = ['MPS_KLD', 'MPS_AKH']
//Only Rare / Mythic //Only Rare / Mythic
var setCodeListRareMythicOnly = ['SS2'] var setCodeListRareMythicOnly = ['SS2']
randomSet(false) // randomSet(false)
function randomSet(updateHTML = true) { function randomSet(updateHTML = true) {
var totalSetCount = setCodeListPreMythic.length + setCodeListPostMythic.length + setCodeListRareOnly.length + setCodeListMythicOnly.length + setCodeListSpecialOnly.length + setCodeListRareMythicOnly.length var totalSetCount = setCodeListPreMythic.length + setCodeListPostMythic.length + setCodeListRareOnly.length + setCodeListMythicOnly.length + setCodeListSpecialOnly.length + setCodeListRareMythicOnly.length
var setIndex = Math.floor(Math.random() * (totalSetCount - 1)) var setIndex = Math.floor(Math.random() * (totalSetCount - 1))

37
data/site/newStyles.css
View File

@@ -240,21 +240,21 @@ footer a:hover {
/*WIP (or I'm too lazy to sort these)*/ /*WIP (or I'm too lazy to sort these)*/
.tabMenu { .tabMenu {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr)); grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
grid-auto-rows: min-content; grid-auto-rows: min-content;
} }
.tabOption { .tabOption, .textTabButton {
font: 1.5em belerenbsc; font: 1.5em belerenbsc;
text-align: center; text-align: center;
background-color: var(--clear-light); background-color: var(--clear-light);
border: 1px solid var(--light-color); border: 1px solid var(--light-color);
transition: 0.5s; transition: 0.5s;
} }
.tabOption:hover { .tabOption:hover, .textTabButton:hover {
background-color: var(--clear-mid); background-color: var(--clear-mid);
transition: 0s; transition: 0s;
} }
.tabOption.tabOptionSelected { .tabOption.tabOptionSelected, .textTabButton.activeTextTab {
background-color: var(--clear-dark); background-color: var(--clear-dark);
} }
.tabContent:not(.tabVisible) { .tabContent:not(.tabVisible) {
@@ -271,11 +271,12 @@ footer a:hover {
} }
.cardMasterElement img { .cardMasterElement img {
max-height: 2em; max-height: 2em;
max-width: 2em;
position: absolute; position: absolute;
transform: translate(1em, -0.35em); transform: translate(1em, -0.35em);
} }
.cardmasterElement img.cardMasterElementMaskImage { .cardmasterElement img.cardMasterElementMaskImage {
transform: translate(3em, -0.35em); transform: translate(3.5em, -0.35em);
} }
.cardMasterElementMoving { .cardMasterElementMoving {
background-color: var(--clear-dark); background-color: var(--clear-dark);
@@ -323,3 +324,29 @@ footer a:hover {
padding: 0.125em; padding: 0.125em;
width: calc(100% - 1.4em); width: calc(100% - 1.4em);
} }
.textarea {
width: 100%;
min-height: 12em;
max-height: 36em;
resize: vertical;
}
.textTabButton {
font-size: 1em;
}
.textTab {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
grid-auto-rows: min-content;
}
.input, .textarea, .button, .select {
font: 1em mplantin;
background-color: var(--light-color);
border: 1px solid #aaa;
border-radius: 0.2em;
padding: 0px 0.2em;
outline: none;
width: 100%;
}

49
data/versions/m15.js Normal file
View File

@@ -0,0 +1,49 @@
//============================================//
// Card Conjurer, by Kyle Burton //
//============================================//
version.currentVersion = "m15"
version.artX = scale(58)
version.artY = scale(118)
version.setSymbolRight = scale(693)
version.setSymbolVertical = scale(620)
version.setSymbolWidth = scale(77)
version.setSymbolHeight = scale(42)
version.bottomInfoFunction = "m15BottomInfo"
version.manaCostX = scale(656)
version.manaCostY = scale(62)
version.manaCostDiameter = scale(36)
version.manaCostDistance = scale(-38)
version.manaCostDirection = "horizontal"
version.rareStampX = scale(340)
version.rareStampY = scale(965)
version.rareStampWidth = scale(70)
version.rareStampHeight = scale(38)
version.watermarkWidth = scale(520)
version.watermarkHeight = scale(250)
version.watermarkY = scale(815)
//Name, text, x, y, width, height, font, size, color, other
version.textList = [
["Title", "", scale(62), scale(87), scale(630), 0, "belerenb", 40, "black", "oneLine=true"],
["Type", "", scale(60), scale(624), scale(630), 0, "belerenb", 34, "black", "oneLine=true"],
["Rules Text", "", scale(63), scale(670), scale(624), scale(292), "mplantin", 38, "black", "lineSpace=0.97"],
["Power Toughness", "", scale(590), scale(970), scale(110), 0, "belerenb", 39, "black", "oneLine=true,textAlign='center'"],
["Flip PT", "", scale(588), scale(902), scale(100), 0, "belerenb", 28, "#666", "oneLine=true,textAlign='right'"]
]
function m15BottomInfo() {
//remember to ctrl+f for 'artistBrushWidth' and adjust that when fixing these values!
bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight)
bottomInfoContext.writeText(document.getElementById("inputInfoNumber").value + " " + document.getElementById("inputInfoRarity").value + " *Not For Sale*", scale(46), scale(993), scale(329), 0, "gothammedium", 18, "white", "oneLine=true")
bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u00b7 " + document.getElementById("inputInfoLanguage").value + " {fontsize1}{font:belerenbsc}{artistBrush}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1012), scale(375), 0, "gothammedium", 17, "white", "oneLine=true")
var copyrightShift = 0;
for (var i = 0; i < cardMaster.children.length; i++) {
if (frameList[parseInt(cardMaster.children[i].id.replace("frameIndex", ""))].image.src.includes("PT")) {
copyrightShift = 19;
}
}
bottomInfoContext.writeText("\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast", cardWidth / 2, scale(993 + copyrightShift), scale(322), 0, "mplantin", 17, "white", "oneLine=true,textAlign='right'")
cardImageUpdated()
}
// setTimeout(m15BottomInfo, 250)
finishChangingVersion()

81
test.html
View File

@@ -22,20 +22,94 @@
<div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div> <div class="tabOption mainEditor tabOptionSelected" onclick="toggleTabs(event, 'frame', 'mainEditor')">Frame</div>
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div> <div class="tabOption mainEditor" onclick="toggleTabs(event, 'text', 'mainEditor')">Text</div>
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div> <div class="tabOption mainEditor" onclick="toggleTabs(event, 'art', 'mainEditor')">Art</div>
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'collector', 'mainEditor')">Collector</div>
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'set', 'mainEditor')">Set Symbol</div>
<div class="tabOption mainEditor" onclick="toggleTabs(event, 'watermark', 'mainEditor')">Watermark</div>
</div> </div>
<div class="tabContent mainEditor tabVisible" id="frame"> <div class="tabContent mainEditor tabVisible" id="frame">
<div class="splitGrid"> <div class="splitGrid">
<div id="framePicker" class="frameGrid"></div> <div id="framePicker" class="frameGrid"></div>
<div id="maskPicker"></div> <div id="maskPicker"></div>
</div> </div>
<button onclick="addFrameToCardMaster()">Add</button><button onclick="addFrameToCardMaster(' - Right')">Add To Right Half</button> <div class="splitGrid">
<button onclick="addFrameToCardMaster()" class="button">Add</button>
<button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
</div>
<div id="cardMaster"></div> <div id="cardMaster"></div>
</div> </div>
<div class="tabContent mainEditor" id="text"> <div class="tabContent mainEditor" id="text">
oh cool some text! <div id="inputWhichTextTabs" class="textTab"></div>
<textarea class="textarea" id="inputText" placeholder="" oninput="updateText()"></textarea>
<input type="text" class="input text" placeholder="Mana Cost" id="inputManaCost" oninput="cardImageUpdated()" value="">
<div class="bar"></div>
<div class="title">How To Use Text Codes</div>
<div class="paragraph indent">
Remember to surround each code with curly brackets ("{" and "}"). The codes are not caps sensitive. The following is a list of available text codes and what they do:
</div>
<div id="textCodeTutorial"></div>
</div> </div>
<div class="tabContent mainEditor" id="art"> <div class="tabContent mainEditor" id="art">
art stuff! <div class="splitGrid">
<div>
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, cardArt)" placeholder="Via File Upload">
<input type="text" class="input text" placeholder="Via URL" onchange="cardArt.src = 'https://cors-anywhere.herokuapp.com/' + this.value">
<input type="text" class="input text" id="inputCardArtName" onchange="inputCardArtName(this.value)" placeholder="Via Card Name">
<input type="number" class="input number" id="inputCardArtNameNumber" onchange="inputCardArtNameNumber(this.value)" value="" min="1" max="1" placeholder="Which Art From Card Name">
</div>
<div>
<div style="text-align: center; margin: 0.18em 0px">X, Y, &amp; Zoom:</div>
<input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardImageUpdated()">
<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardImageUpdated()">
<input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardImageUpdated()">
</div>
</div>
</div>
<div class="tabContent mainEditor" id="collector">
<div class="autoGrid">
<input type="text" class="input text" placeholder="Number" id="inputInfoNumber" oninput="updateBottomInfoCanvas()" value="">
<input type="text" class="input text" placeholder="Rarity" id="inputInfoRarity" oninput="updateBottomInfoCanvas()" value="P">
<input type="text" class="input text" placeholder="Set" id="inputInfoSet" oninput="updateBottomInfoCanvas()" value="MTG">
<input type="text" class="input text" placeholder="Language" id="inputInfoLanguage" oninput="updateBottomInfoCanvas()" value="EN">
<input type="text" class="input text" placeholder="Artist's Name" id="inputInfoArtist" oninput="updateBottomInfoCanvas()" value="">
</div>
</div>
<div class="tabContent mainEditor" id="set">
<div class="autoGrid">
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload">
<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)">
<input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)">
<input type="text" class="input text" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)">
<button class="button" onclick="randomSet()">Random</button>
</div>
</div>
<div class="tabContent mainEditor" id="watermark">
<div class="autoGrid">
<input type="file" class="input file" accept="image/*" onchange="uploadImage(event, watermark)" placeholder="Via File Upload">
<input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/' + this.value)">
<input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')">
<select class="select" id="inputWatermarkPrimary" onchange="updateWatermark()">
<option value="none">None</option>
<option value="default">Default</option>
<option value="#ccc8b1" selected="selected">White</option>
<option value="#b0c3d5">Blue</option>
<option value="#b3b3b3">Black</option>
<option value="#ddac9b">Red</option>
<option value="#b9c8b5">Green</option>
<option value="#e4d49b">Gold</option>
<option value="#cfc8be">Artifact/Colorless</option>
</select>
<select class="select" id="inputWatermarkSecondary" onchange="updateWatermark()">
<option value="none">None</option>
<option value="default">Default</option>
<option value="#ccc8b1">White</option>
<option value="#b0c3d5">Blue</option>
<option value="#b3b3b3">Black</option>
<option value="#ddac9b">Red</option>
<option value="#b9c8b5">Green</option>
<option value="#e4d49b">Gold</option>
<option value="#cfc8be">Artifact/Colorless</option>
</select>
</div>
</div> </div>
<!-- Card editor tabs end here! --> <!-- Card editor tabs end here! -->
<div class="bar"></div> <div class="bar"></div>
@@ -92,6 +166,7 @@
</div> </div>
</footer> </footer>
<script async src="data/scripts/sortable.js"></script> <script async src="data/scripts/sortable.js"></script>
<script async src="data/scripts/setCodeList.js"></script>
<script defer src="data/scripts/main.js"></script> <script defer src="data/scripts/main.js"></script>
<script defer src="data/scripts/colors.js"></script> <script defer src="data/scripts/colors.js"></script>
<html> <html>