diff --git a/data/scripts/main.js b/data/scripts/main.js index 8c53a135..83e43f39 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -8,6 +8,17 @@ function initiate() { window.version = {} window.cardWidth = 744; window.cardHeight = 1039; + if (window.location.search != "") { + var parameters = window.location.search.replace('?', '').split('&'); + for (var i = 0; i < parameters.length; i ++) { + var targetParameter = parameters[i].split('='); + if (targetParameter[0] == 'width') { + cardWidth = parseInt(targetParameter[1]); + } else if (targetParameter[0] == 'height') { + cardHeight = parseInt(targetParameter[1]); + } + } + } window.whichTextIndex = 0; window.frameList = new Array(); window.maskNameList = []; diff --git a/data/site/other/setSymbol/setSymbol.js b/data/site/other/setSymbol/setSymbol.js index 39ccecd5..1f3a3040 100644 --- a/data/site/other/setSymbol/setSymbol.js +++ b/data/site/other/setSymbol/setSymbol.js @@ -4,13 +4,23 @@ var svgStroke = svg.children[1] var svgFill = svg.children[2] svg.setAttribute('width', svgWidth); svg.setAttribute('height', svgHeight); -fetchSVGData('rtr'); +var imageType = 'svg'; +var canvas = document.getElementById('displayCanvas'); +canvas.width = svgWidth +canvas.height = svgHeight +var context = canvas.getContext('2d'); +var setSymbolImage = new Image(); +setSymbolImage.onload = drawSetSymbol; +var setSymbolPath = ''; +fetchSVGData('https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/rtr.svg'); -function fetchSVGData(setCode) { - var url = 'https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/' + setCode + '.svg'; + +function fetchSVGData(url) { + hideShow(); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { - if (this.readyState == 4) { + if (this.readyState == 4 && xhttp.status != 404) { + imageType = 'svg' setSymbolPath = xhttp.responseText.split('d="')[1].split('">')[0]; svgStroke.setAttribute('d', setSymbolPath); svgFill.setAttribute('d', setSymbolPath); @@ -30,35 +40,95 @@ function fetchSVGData(setCode) { } function decorateSVG() { - var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value; - var setSymbolStrokeColor = 'black'; - if (setSymbolGradient == 'Common') { - setSymbolStrokeColor = 'white' + if (imageType == 'svg') { + var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value; + var setSymbolStrokeColor = 'black'; + if (setSymbolGradient == 'Common') { + setSymbolStrokeColor = 'white' + } + svgStroke.setAttribute('stroke', setSymbolStrokeColor) + svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')'); + } else { + drawSetSymbol() } - svgStroke.setAttribute('stroke', setSymbolStrokeColor) - svgFill.setAttribute('fill', 'url(#grad' + setSymbolGradient + ')'); } function downloadSetSymbolImage(linkElement) { -// var setSymbolDownload = cardFinalCanvas.toDataURL() -// linkElement.href = setSymbolDownload - var serializer = new XMLSerializer(); - var source = serializer.serializeToString(svg); - - //add name spaces. - if(!source.match(/^]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){ - source = source.replace(/^]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){ + source = source.replace(/^]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){ + source = source.replace(/^]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){ - source = source.replace(/^ setSymbolImage.height) { + scaleAmount = setSymbolWidth / setSymbolImage.width; + } else { + scaleAmount = setSymbolHeight / setSymbolImage.height; + } + context.globalCompositeOperation = 'source-over'; + context.clearRect(0, 0, svgWidth, svgHeight); + var x1 = (svgWidth - setSymbolImage.width * scaleAmount) / 2, y1 = (svgHeight - setSymbolImage.height * scaleAmount) / 2, x2 = x1 + setSymbolImage.width * scaleAmount, y2 = y1 + setSymbolImage.height * scaleAmount; + context.drawImage(setSymbolImage, x1, y1, x2 - x1, y2 - y1); + context.globalCompositeOperation = 'source-in'; + var gradient = context.createLinearGradient(x1, y1, x2, y1); + var gradientColors = document.getElementById('grad' + document.getElementById('inputSetSymbolRarity').value).innerHTML.split('stop-color:'); + gradient.addColorStop(0, gradientColors[1].split(';')[0]); + gradient.addColorStop(0.5, gradientColors[2].split(';')[0]); + gradient.addColorStop(1, gradientColors[3].split(';')[0]); + context.fillStyle = gradient; + context.fillRect(x1, y1, x2 - x1, y2 - y1); +} + +function hideShow() { + if (imageType == 'svg') { + if (svg.classList.contains('hidden')) { + svg.classList.remove('hidden'); + } + if (!canvas.classList.contains('hidden')) { + canvas.classList.add('hidden'); + } + } else { + if (canvas.classList.contains('hidden')) { + canvas.classList.remove('hidden'); + } + if (!svg.classList.contains('hidden')) { + svg.classList.add('hidden'); + } + } +} + + diff --git a/data/versions/expedition.js b/data/versions/expedition.js index d7ba36a3..da7a50b1 100644 --- a/data/versions/expedition.js +++ b/data/versions/expedition.js @@ -4,10 +4,10 @@ if (version.currentVersion != "expedition") { //Name, text, x, y, width, height, font, size, color, other, alternative-function version.textList = [ - ["Title", "", scale(64), scale(77), scale(630), 0, "belerenb", 37, "black", "oneLine=true"], - ["Type", "", scale(64), scale(875), scale(630), 0, "belerenb", 37, "black", "oneLine=true"], - ["Rules Text", "", scale(64), scale(729), scale(616), scale(0), "mplantin", 38, "black", "lineSpace=0.97"], - ["Power Toughness", "", scale(587), scale(958), scale(110), 0, "belerenb", 38, "black", "oneLine=true,textAlign='center'"] + ["Title", "", scale(64), scale(77), scale(630), 0, "belerenb", scale(37), "black", "oneLine=true"], + ["Type", "", scale(64), scale(875), scale(630), 0, "belerenb", scale(37), "black", "oneLine=true"], + ["Rules Text", "", scale(64), scale(729), scale(616), 0, "mplantin", scale(38), "black", "lineSpace=0.97"], + ["Power Toughness", "", scale(587), scale(958), scale(110), 0, "belerenb", scale(38), "black", "oneLine=true,textAlign='center'"] ] version.frameIndexToInsert = 7; } diff --git a/data/versions/future.js b/data/versions/future.js index 35a229ea..8dbae6b3 100644 --- a/data/versions/future.js +++ b/data/versions/future.js @@ -4,10 +4,10 @@ if (version.currentVersion != "future") { //Name, text, x, y, width, height, font, size, color, other version.textList = [ - ["Title", "", scale(131), scale(87), scale(550), 0, "matrixb", 45, "white", "oneLine=true"], - ["Type", "", scale(91), scale(615), scale(557), 0, "matrixb", 37, "white", "oneLine=true"], - ["Rules Text", "", scale(76), scale(650), scale(594), scale(278), "mplantin", 36, "black", "lineSpace=0.97"], - ["Power Toughness", "", scale(574), scale(960), scale(106), 0, "mplantin", 42, "white", "oneLine=true,textAlign='center'"] + ["Title", "", scale(131), scale(87), scale(550), 0, "matrixb", scale(45), "white", "oneLine=true"], + ["Type", "", scale(91), scale(615), scale(557), 0, "matrixb", scale(37), "white", "oneLine=true"], + ["Rules Text", "", scale(76), scale(650), scale(594), scale(278), "mplantin", scale(36), "black", "lineSpace=0.97"], + ["Power Toughness", "", scale(574), scale(960), scale(106), 0, "mplantin", scale(42), "white", "oneLine=true,textAlign='center'"] ]; if (!version.addedFuture) { version.addedFuture = true; @@ -34,7 +34,7 @@ version.manaCostX = scale(91) version.manaCostY = scale(140) version.manaCostDiameter = scale(59) version.manaCostDistance = scale(-38) -version.manaCostDirection = [[91, 140], [61, 207], [46, 281], [46, 356], [59, 437], [106, 512]]; +version.manaCostDirection = [[scale(91), scale(140)], [scale(61), scale(207)], [scale(46), scale(281)], [scale(46), scale(356)], [scale(59), scale(437)], [scale(106), scale(512)]]; version.manaCostVersion = "future"; version.watermarkWidth = scale(520) version.watermarkHeight = scale(250) diff --git a/data/versions/m15.js b/data/versions/m15.js index 1c35d9a8..55b170f5 100644 --- a/data/versions/m15.js +++ b/data/versions/m15.js @@ -4,10 +4,10 @@ if (version.currentVersion != "m15") { //Name, text, x, y, width, height, font, size, color, other version.textList = [ - ["Title", "", scale(64), scale(83), scale(630), 0, "belerenb", 37, "black", "oneLine=true"], - ["Type", "", scale(64), scale(615), scale(630), 0, "belerenb", 33, "black", "oneLine=true"], - ["Rules Text", "", scale(64), scale(662), scale(616), scale(292), "mplantin", 38, "black", "lineSpace=0.97"], - ["Power Toughness", "", scale(587), scale(958), scale(110), 0, "belerenb", 38, "black", "oneLine=true,textAlign='center'"]/*, + ["Title", "", scale(64), scale(83), scale(630), 0, "belerenb", scale(37), "black", "oneLine=true"], + ["Type", "", scale(64), scale(615), scale(630), 0, "belerenb", scale(33), "black", "oneLine=true"], + ["Rules Text", "", scale(64), scale(662), scale(616), scale(292), "mplantin", scale(38), "black", "lineSpace=0.97"], + ["Power Toughness", "", scale(587), scale(958), scale(110), 0, "belerenb", scale(38), "black", "oneLine=true,textAlign='center'"]/*, ["Flip PT", "", scale(588), scale(902), scale(100), 0, "belerenb", 28, "#666", "oneLine=true,textAlign='right'"]*/ ] version.frameIndexToInsert = 5; @@ -28,10 +28,6 @@ version.manaCostDiameter = scale(34) version.manaCostDistance = scale(-38) version.manaCostDirection = "horizontal" version.manaCostVersion = "m15" -// 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(800) @@ -42,15 +38,15 @@ filterFramePicker("frameClassRegular"); 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(980), scale(329), 0, "gothammedium", 17, "white", "oneLine=true") - bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u2022 " + document.getElementById("inputInfoLanguage").value + " {font:belerenbsc}{artistBrush}{fontsize1}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1000), scale(375), 0, "gothammedium", 17, "white", "oneLine=true") + bottomInfoContext.writeText(document.getElementById("inputInfoNumber").value + " " + document.getElementById("inputInfoRarity").value + " *Not For Sale*", scale(46), scale(980), scale(329), 0, "gothammedium", scale(17), "white", "oneLine=true") + bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u2022 " + document.getElementById("inputInfoLanguage").value + " {font:belerenbsc}{artistBrush}{fontsize1}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1000), scale(375), 0, "gothammedium", scale(17), "white", "oneLine=true") var copyrightShift = 0; for (var i = 0; i < cardMaster.children.length; i++) { if (parseInt(cardMaster.children[i].id.replace("frameIndex", "")) >= 0 && frameList[parseInt(cardMaster.children[i].id.replace("frameIndex", ""))].image.src.includes("PT") && !frameList[parseInt(cardMaster.children[i].id.replace("frameIndex", ""))].framePickerClasses.includes("frameClassCustom")) { - copyrightShift = 19; + copyrightShift = scale(19); } } - bottomInfoContext.writeText("\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast", cardWidth / 2, scale(980 + copyrightShift), scale(322), 0, "mplantin", 17, "white", "oneLine=true,textAlign='right'") + bottomInfoContext.writeText("\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast", cardWidth / 2, scale(980 + copyrightShift), scale(322), 0, "mplantin", scale(17), "white", "oneLine=true,textAlign='right'") cardImageUpdated() } // setTimeout(m15BottomInfo, 250) diff --git a/data/versions/m15extras.js b/data/versions/m15extras.js index 6546d75b..edf24fde 100644 --- a/data/versions/m15extras.js +++ b/data/versions/m15extras.js @@ -4,10 +4,10 @@ if (version.currentVersion != "m15") { //Name, text, x, y, width, height, font, size, color, other version.textList = [ - ["Title", "", scale(64), scale(83), scale(630), 0, "belerenb", 37, "black", "oneLine=true"], - ["Type", "", scale(64), scale(615), scale(630), 0, "belerenb", 33, "black", "oneLine=true"], - ["Rules Text", "", scale(64), scale(662), scale(616), scale(292), "mplantin", 38, "black", "lineSpace=0.97"], - ["Power Toughness", "", scale(587), scale(958), scale(110), 0, "belerenb", 38, "black", "oneLine=true,textAlign='center'"]/*, + ["Title", "", scale(64), scale(83), scale(630), 0, "belerenb", scale(37), "black", "oneLine=true"], + ["Type", "", scale(64), scale(615), scale(630), 0, "belerenb", scale(33), "black", "oneLine=true"], + ["Rules Text", "", scale(64), scale(662), scale(616), scale(292), "mplantin", scale(38), "black", "lineSpace=0.97"], + ["Power Toughness", "", scale(587), scale(958), scale(110), 0, "belerenb", scale(38), "black", "oneLine=true,textAlign='center'"]/*, ["Flip PT", "", scale(588), scale(902), scale(100), 0, "belerenb", 28, "#666", "oneLine=true,textAlign='right'"]*/ ] } diff --git a/data/versions/planeswalker.js b/data/versions/planeswalker.js index 9e1577c8..e63ce70b 100644 --- a/data/versions/planeswalker.js +++ b/data/versions/planeswalker.js @@ -39,7 +39,7 @@ filterFramePicker("frameClassPlaneswalker") function m15PlaneswalkerBottomInfo() { //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(982), scale(329), 0, "gothammedium", scale(17), "white", "oneLine=true") - bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u2022 " + document.getElementById("inputInfoLanguage").value + " {font:belerenbsc}{artistBrush}{fontsize1}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1002), scale(375), 0, "gothammedium", 17, "white", "oneLine=true") + bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u2022 " + document.getElementById("inputInfoLanguage").value + " {font:belerenbsc}{artistBrush}{fontsize1}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1002), scale(375), 0, "gothammedium", scale(17), "white", "oneLine=true") bottomInfoContext.writeText("\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast", cardWidth / 2, scale(1001), scale(322), 0, "mplantin", scale(17), "white", "oneLine=true,textAlign='right'") cardImageUpdated() } @@ -141,7 +141,7 @@ function planeswalkerTextFunction() { planeswalkerContext.drawImage(maskList[maskNameList.indexOf("Rules Text Planeswalker")], 0, 0, cardWidth, cardHeight) planeswalkerContext.globalCompositeOperation = "source-over" planeswalkerContext.fillStyle = "white" - planeswalkerContext.font = "30px belerenbsc" + planeswalkerContext.font = scale(30) + "px belerenbsc" planeswalkerContext.textAlign = "center" for (var i = 1; i < planeswalkerAbilityCount + 1; i++) { var planeswalkerIconValue = document.getElementById("inputPlaneswalker" + i + "Icon").value diff --git a/data/versions/seventh.js b/data/versions/seventh.js index 4338df17..b2d43705 100644 --- a/data/versions/seventh.js +++ b/data/versions/seventh.js @@ -4,10 +4,10 @@ if (version.currentVersion != "seventh") { //Name, text, x, y, width, height, font, size, color, other version.textList = [ - ["Title", "", scale(82), scale(70), scale(630), 0, "goudymedieval", 42, "white", "oneLine=true,shadow=2"], - ["Type", "", scale(82), scale(600), scale(630), 0, "mplantin", 33, "white", "oneLine=true,shadow=2"], - ["Rules Text", "", scale(97), scale(630), scale(554), scale(292), "mplantin", 36, "black", "lineSpace=0.97"], - ["Power Toughness", "", scale(592), scale(959), scale(110), 0, "mplantin", 47, "white", "oneLine=true,textAlign='center',shadow=2"] + ["Title", "", scale(82), scale(70), scale(630), 0, "goudymedieval", scale(42), "white", "oneLine=true,shadow=2"], + ["Type", "", scale(82), scale(600), scale(630), 0, "mplantin", scale(33), "white", "oneLine=true,shadow=2"], + ["Rules Text", "", scale(97), scale(630), scale(554), scale(292), "mplantin", scale(36), "black", "lineSpace=0.97"], + ["Power Toughness", "", scale(592), scale(959), scale(110), 0, "mplantin", scale(47), "white", "oneLine=true,textAlign='center',shadow=2"] ]; version.frameIndexToInsert = 6; } @@ -37,8 +37,8 @@ filterFramePicker("frameClassSeventh"); function seventhBottomInfo() { //remember to ctrl+f for 'artistBrushWidth' and adjust that when fixing these values! bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight) - bottomInfoContext.writeText("{center}{shadow2}Illus: " + document.getElementById("inputInfoArtist").value, scale(46), scale(948), scale(651), 0, "mplantin", 29, "white", "oneLine=true") - bottomInfoContext.writeText("{center}\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast *Not For Sale*", scale(46), scale(972), scale(651), 0, "mplantin", 18, "white", "oneLine=true,textAlign='right'") + bottomInfoContext.writeText("{center}{shadow2}Illus: " + document.getElementById("inputInfoArtist").value, scale(46), scale(948), scale(651), 0, "mplantin", scale(29), "white", "oneLine=true") + bottomInfoContext.writeText("{center}\u2122 & \u00a9 " + date.getFullYear() + " Wizards of the Coast *Not For Sale*", scale(46), scale(972), scale(651), 0, "mplantin", scale(18), "white", "oneLine=true,textAlign='right'") cardImageUpdated() } setTimeout(seventhBottomInfo, 250) diff --git a/data/versions/unhinged.js b/data/versions/unhinged.js index eae7e279..d22e904e 100644 --- a/data/versions/unhinged.js +++ b/data/versions/unhinged.js @@ -4,7 +4,7 @@ if (version.currentVersion != "unhinged") { //Name, text, x, y, width, height, font, size, color, other version.textList = [ - ["Title", "", scale(280), scale(56), scale(174), 0, "belerenb", 37, "black", "oneLine=true,textAlign='center'"] + ["Title", "", scale(280), scale(56), scale(174), 0, "belerenb", scale(37), "black", "oneLine=true,textAlign='center'"] ] version.frameIndexToInsert = 4; } diff --git a/setSymbol.html b/setSymbol.html index 325c58c2..3926c150 100644 --- a/setSymbol.html +++ b/setSymbol.html @@ -6,6 +6,12 @@ +
@@ -45,10 +51,11 @@ +
Enter a set code and select a rarity: - + + Or upload your own image/svg: +