From a3e47c73c4a7494a6f44d7e2acf40741e4ba20c9 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Sat, 4 Jan 2020 15:28:23 -0800 Subject: [PATCH] set symbols --- data/scripts/main.js | 3 + data/site/other/setSymbol/setSymbol.js | 64 +++++++++++++++++ setSymbol.html | 98 ++++++++++++++++++++++++++ 3 files changed, 165 insertions(+) create mode 100644 data/site/other/setSymbol/setSymbol.js create mode 100644 setSymbol.html diff --git a/data/scripts/main.js b/data/scripts/main.js index 2b7229e5..c48336cd 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -804,6 +804,9 @@ function uploadImage(event, destination) { reader.onload = function() { var dataURL = reader.result; destination.src = dataURL; + if (destination == setSymbol) { + autocrop(setSymbol) + } } reader.readAsDataURL(input.files[0]); } diff --git a/data/site/other/setSymbol/setSymbol.js b/data/site/other/setSymbol/setSymbol.js new file mode 100644 index 00000000..39ccecd5 --- /dev/null +++ b/data/site/other/setSymbol/setSymbol.js @@ -0,0 +1,64 @@ +var svg = document.getElementById('displaySVG'); +var svgWidth = 500, svgHeight = 500, setSymbolWidth = 300, setSymbolHeight = 300; +var svgStroke = svg.children[1] +var svgFill = svg.children[2] +svg.setAttribute('width', svgWidth); +svg.setAttribute('height', svgHeight); +fetchSVGData('rtr'); + +function fetchSVGData(setCode) { + var url = 'https://raw.githubusercontent.com/andrewgioia/Keyrune/master/svg/' + setCode + '.svg'; + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + setSymbolPath = xhttp.responseText.split('d="')[1].split('">')[0]; + svgStroke.setAttribute('d', setSymbolPath); + svgFill.setAttribute('d', setSymbolPath); + var svgPathBoundingBox = svgStroke.getBBox(); + if (svgPathBoundingBox.width > svgPathBoundingBox.height) { + scaleAmount = setSymbolWidth / svgPathBoundingBox.width; + } else { + scaleAmount = setSymbolHeight / svgPathBoundingBox.height; + } + svgStroke.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')'); + svgFill.setAttribute('transform', 'scale(' + scaleAmount + ') translate(' + parseFloat(((svgWidth - svgPathBoundingBox.width * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.x) + ', ' + parseFloat(((svgHeight - svgPathBoundingBox.height * scaleAmount)/2/scaleAmount)-svgPathBoundingBox.y) + ')'); + decorateSVG(); + } + } + xhttp.open('GET', url, true); + xhttp.send(); +} + +function decorateSVG() { + var setSymbolGradient = document.getElementById('inputSetSymbolRarity').value; + var setSymbolStrokeColor = 'black'; + if (setSymbolGradient == 'Common') { + setSymbolStrokeColor = 'white' + } + 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(/^]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){ + source = source.replace(/^ + + + Card Conjurer + + + + + + +
+
+ Card Conjurer +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Enter a set code and select a rarity: + + +
+
+
+ Download +
+
+
+
+ +
+
Have Any Questions?
+
+ If you have any questions please don't hesitate to email me at . Even if you made a cool card and want to share, I'd love to see it! +
+
+
+ + + + + +