GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-26 21:04:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Kyle
2020-01-10 18:00:29 -08:00
parent c1acda99d1
commit 41a37457e3
10 changed files with 151 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
data/site/other/setSymbol/setSymbol.js
View File

@@ -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('"></path>')[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(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
linkElement.download = 'setSymbol.' + imageType
if (imageType == 'svg') {
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
//set url value to a element's href attribute.
linkElement.href = url;
} else {
var setSymbolDownload = canvas.toDataURL();
linkElement.href = setSymbolDownload;
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
//set url value to a element's href attribute.
linkElement.href = url;
}
function uploadImage(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
imageType = 'png';
hideShow();
setSymbolImage.src = reader.result;
}
reader.readAsDataURL(input.files[0]);
}
function drawSetSymbol() {
var scaleAmount;
if (setSymbolImage.width > 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');
}
}
}