forked from GithubMirrors/cardconjurer
set symbols
This commit is contained in:
Kyle
@@ -804,6 +804,9 @@ function uploadImage(event, destination) {
|
|||||||
reader.onload = function() {
|
reader.onload = function() {
|
||||||
var dataURL = reader.result;
|
var dataURL = reader.result;
|
||||||
destination.src = dataURL;
|
destination.src = dataURL;
|
||||||
|
if (destination == setSymbol) {
|
||||||
|
autocrop(setSymbol)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
reader.readAsDataURL(input.files[0]);
|
reader.readAsDataURL(input.files[0]);
|
||||||
}
|
}
|
||||||
|
|||||||
64
data/site/other/setSymbol/setSymbol.js
Normal file
64
data/site/other/setSymbol/setSymbol.js
Normal file
@@ -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('"></path>')[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(/^<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;
|
||||||
|
}
|
||||||
98
setSymbol.html
Normal file
98
setSymbol.html
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<!DOCTYPE html5>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Card Conjurer</title>
|
||||||
|
<!-- Other things -->
|
||||||
|
<link rel="stylesheet" href="data/site/styles.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="mainDiv">
|
||||||
|
<div class="pageTitle">
|
||||||
|
Card Conjurer
|
||||||
|
</div>
|
||||||
|
<div class="mainGrid">
|
||||||
|
<div class="canvasContainer">
|
||||||
|
<svg id="displaySVG">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="gradCommon" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#302b2c;stop-opacity:1" />
|
||||||
|
<stop offset="50%" style="stop-color:#474040;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#302b2c;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="gradUncommon" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#5a6572;stop-opacity:1" />
|
||||||
|
<stop offset="50%" style="stop-color:#9e9e9e;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#5a6572;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="gradRare" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#876a3b;stop-opacity:1" />
|
||||||
|
<stop offset="50%" style="stop-color:#dfbd6b;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#876a3b;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="gradMythic" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#b21f0f;stop-opacity:1" />
|
||||||
|
<stop offset="50%" style="stop-color:#f38300;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#b21f0f;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="gradTimeshifted" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" style="stop-color:#652978;stop-opacity:1" />
|
||||||
|
<stop offset="50%" style="stop-color:#c09ac5;stop-opacity:1" />
|
||||||
|
<stop offset="100%" style="stop-color:#652978;stop-opacity:1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path stroke-width="2" stroke-linejoin="arcs"></path>
|
||||||
|
<path></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="cardMenu">
|
||||||
|
Enter a set code and select a rarity:
|
||||||
|
<input type="text" class="input text" value="rtr" onchange="fetchSVGData(this.value)" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||||
|
<select class="select" id="inputSetSymbolRarity" onchange="decorateSVG()">
|
||||||
|
<option>Common</option>
|
||||||
|
<option>Uncommon</option>
|
||||||
|
<option selected="selected">Rare</option>
|
||||||
|
<option>Mythic</option>
|
||||||
|
<option>Timeshifted</option>
|
||||||
|
</select>
|
||||||
|
<div class="bar"></div>
|
||||||
|
<div>
|
||||||
|
<div class="download">
|
||||||
|
<a onclick="downloadSetSymbolImage(this)" id="downloadSetSymbolImage" href="" target="_blank" download="setSymbol.svg">Download</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden"></div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="title">Have Any Questions?</div>
|
||||||
|
<div class="paragraph indent">
|
||||||
|
If you have any questions please don't hesitate to email me at <label class="truncate"><a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a></label>. Even if you made a cool card and want to share, I'd love to see it!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<div class="footerGrid">
|
||||||
|
<div>
|
||||||
|
<div class="visitorCountTrigger">Card Conjurer By Kyle Burton</div>
|
||||||
|
<div class="visitorCount"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Navigation:<br>
|
||||||
|
<a href="index.html">Card Creator</a><br>
|
||||||
|
<a href="life.html">Life Counter</a><br>
|
||||||
|
<a href="setSymbol.html">Set Symbol Creator</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Legal:<br>
|
||||||
|
<a href="disclaimer.html">Disclaimer</a><br>
|
||||||
|
<a href="termsOfUse.html">Terms of Use</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script async src="data/scripts/setCodeList.js"></script>
|
||||||
|
<script defer src="data/site/other/setSymbol/setSymbol.js"></script>
|
||||||
|
<script defer src="data/scripts/colors.js"></script>
|
||||||
|
<html>
|
||||||
Reference in New Issue
Block a user