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

better CSS

Browse Source
This commit is contained in:
Kyle
2018-11-03 18:34:02 -07:00
parent 98008badfe
commit 704ad56dec
2 changed files with 265 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
data/scripts/whiteToTransparent.js Normal file
View File

@@ -0,0 +1,56 @@
var transparentCanvas = document.createElement("canvas")
var transparentContext = transparentCanvas.getContext("2d")
//transparentCanvas.onload = function() {
//document.body.appendChild(transparentCanvas) //For testing purposes only
//}
transparentCanvas.onload = function() {
alert("WHAT")
}
//document.body.appendChild(transparentCanvas)
//Function that auto the image
function whiteToTransparent(url, destination) {
//Create image, size canvas, draw image
var imgTempSetSymbol = new Image()
imgTempSetSymbol.crossOrigin = "anonymous"
imgTempSetSymbol.src = url
imgTempSetSymbol.onload = function() {
if (imgTempSetSymbol.width > 0 && imgTempSetSymbol.height > 0) {
transparentCanvas.width = imgTempSetSymbol.width
transparentCanvas.height = imgTempSetSymbol.height
transparentCanvas.drawImage(imgTempSetSymbol, 0, 0)
//declare variables
var width = transparentCanvas.width
var height = transparentCanvas.height
var pix = {x:[], y:[]}
var imageData = transparentContext.getImageData(0,0,transparentCanvas.width,transparentCanvas.height)
var x, y, index
//Go through every pixel and
for (y = 0; y < height; y++) {
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
index = (y * width + x) * 4 + 3
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.x.push(x)
pix.y.push(y)
}
}
}
//sorts the arrays numerically
pix.x.sort(function(a,b){return a-b})
pix.y.sort(function(a,b){return a-b})
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
width = pix.x[n] - pix.x[0]
height = pix.y[n] - pix.y[0]
var transparentImage = transparentContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1)
//Resizes the canvas and draws image
transparentCanvas.width = width + 1
transparentCanvas.height = height + 1
transparentContext.putImageData(transparentImage, 0, 0)
//Saves the newly image to the given image
destination.src = transparentCanvas.toDataURL()
}
}
}

311
index.html
View File

@@ -6,7 +6,8 @@
<script src="data/scripts/loadImage.js"></script> <script src="data/scripts/loadImage.js"></script>
<script src="data/scripts/loadColors.js"></script> <script src="data/scripts/loadColors.js"></script>
<script src="data/scripts/mask.js"></script> <script src="data/scripts/mask.js"></script>
<script src="data/scripts/autocrop.js"></script> <!-- This script may not be currently used --> <script src="data/scripts/autocrop.js"></script>
<script src="data/scripts/whiteToTransparent.js"></script>
<div class="title">Card Conjurer</div> <div class="title">Card Conjurer</div>
</head> </head>
<!-- <img src="data/background.png"></img> --> <!-- <img src="data/background.png"></img> -->
@@ -18,8 +19,21 @@
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Border</div> <div class="toggler" onclick="toggleSection(this)">Card Border</div>
<div class="togglee shown"> <div class="togglee shown">
<!-- <div class="checkbox">
<input type="checkbox" id="testCheckbox" />
<label for="testCheckbox" />
<div>Label hmmm</div>
</div> -->
Border Border
<select id="borderSelection" onchange="changeTemplate()"> <select class="input" id="borderSelection" onchange="changeTemplate()">
<option value="m15/">M15</option> <option value="m15/">M15</option>
<option value="map/">Map (Ixalan)</option> <option value="map/">Map (Ixalan)</option>
<option value="plane/">Plane</option> <option value="plane/">Plane</option>
@@ -27,30 +41,61 @@
</select> </select>
<br/> <br/>
Color Color
<select id="colorSelection" onchange="updateBorder()"> <select class="input" id="colorSelection" onchange="updateBorder()">
<option value="white">White</option> <option value="white">White</option>
</select> </select>
<br/> <br/>
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()">Second Color <select id="secondColorSelection" onchange="updateBorder()"></select></input> <div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" />
<div>Second Color</div>
</div>
<select class="input" id="secondColorSelection" onchange="updateBorder()"></select>
<br/> <br/>
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()">Third Color <select id="thirdColorSelection" onchange="updateBorder()"></select></input> <div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" />
<div>Third Color</div>
</div>
<select class="input" id="thirdColorSelection" onchange="updateBorder()"></select>
<br/> <br/>
<input type="checkbox" id="checkboxCreature">Power/Toughness <div class="checkbox">
<input id="inputPowerToughness" value="" type="text"></input> <input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" value="" type="text"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div> <div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
<div class="togglee"> <div class="togglee">
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()">Legendary</input> <div class="checkbox">
<br/> <input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()">Nyx</input> <label for="checkboxLegendary" />
<br/> <div>Legendary</div>
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()">Miracle</input> </div>
<br/> <div class="checkbox">
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()">Rare Stamp</input> <input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
<br/> <label for="checkboxNyx" />
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()">Flip Icon <select id="inputFlipIcon" onchange="updateBorder()"> <div>Nyx</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
<label for="checkboxMiracle" />
<div>Miracle</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
<label for="checkboxRareStamp" />
<div>Rare Stamp</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
<label for="checkboxFlipIcon" />
<div>Flip Icon</div>
</div>
<select class="input" id="inputFlipIcon" onchange="updateBorder()">
<option value="blank.png">Blank</option> <option value="blank.png">Blank</option>
<option value="day.png">Day</option> <option value="day.png">Day</option>
<option value="night.png">Night</option> <option value="night.png">Night</option>
@@ -58,34 +103,48 @@
<option value="moon.png">Moon</option> <option value="moon.png">Moon</option>
<option value="eldrazi.png">Eldrazi</option> <option value="eldrazi.png">Eldrazi</option>
<option value="planeswalker.png">Planeswalker</option> <option value="planeswalker.png">Planeswalker</option>
</select></input> </select>
<br/> <div class="checkbox">
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()">Flip Tip <input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
<input id="inputFlipTip" value="" type="text"></input> <label for="checkboxFlipTip" />
<br/> <div>Flip Tip</div>
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()">Flipped (Darker)</input> </div>
<br/> <input id="inputFlipTip" value="" type="text" class="input"></input>
<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()">Silver Border</input> <div class="checkbox">
<br/> <input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
<label for="checkboxFlippedDark" />
<div>Flipped (Darker)</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" />
<label for="checkboxSilverBorder" />
<div>Silver Border</div>
</div>
<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input> <input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
<br/> <div class="checkbox">
<input type="checkbox" id="checkboxFoil">Foil</input> <input type="checkbox" id="checkboxFoil" />
<br/> <label for="checkboxFoil" />
<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()">Color Identity <div>Foil</div>
<input id="inputIdentity" type="text" onchange="updateBorder()"></input> </div>
<div class="checkbox">
<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" />
<label for="checkboxIdentity" />
<div>Color Identity</div>
</div>
<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div> <div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div>
<div class="togglee"> <div class="togglee">
Name Name
<input id="inputName" type="text"></input> <input id="inputName" type="text" class="input"></input>
<br/> <br/>
Mana Cost Mana Cost
<input id="inputCost" type="text"></input> <input id="inputCost" type="text" class="input"></input>
<br/> <br/>
Type Type
<input id="inputType" type="text"></input> <input id="inputType" type="text" class="input"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
@@ -93,16 +152,16 @@
<div class="togglee"> <div class="togglee">
Rules Text Rules Text
<br/> <br/>
<textarea id="inputText" rows="5" cols="40" style="width: 99%; resize: vertical; height: 100px"></textarea> <textarea id="inputText" class="input" rows="5" cols="40" style="width: 99%; resize: none; height: 200px"></textarea>
<br/> <br/>
Rules Text Font Size Rules Text Font Size
<input id="textSize" type="number" min="0" max="100" value="37" step="0.5"></input> <input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"></input>
<br/> <br/>
Pixels Between Paragraphs Pixels Between Paragraphs
<input id="textShift" type="number" min="0" max="300" value="13"></input> <input id="textShift" type="number" class="input" min="0" max="300" value="13"></input>
<br/> <br/>
Shift All Text Down Shift All Text Down
<input id="textDown" type="number" min="0" max="300" value="0"></input> <input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
@@ -111,71 +170,80 @@
Image Image
<input type="file" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input> <input type="file" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
<br/> <br/>
<input type="text" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input> <input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input>
<br/> <br/>
Image Zoom Image Zoom
<input id="imageSize" type="number" value="100" step="0.1"></input> <input id="imageSize" type="number" class="input" value="100" step="0.1"></input>
<br/> <br/>
Image Left Image Left
<input id="imageLeft" type="number" value="0" step="1"></input> <input id="imageLeft" type="number" class="input" value="0" step="1"></input>
<br/> <br/>
Image Up Image Up
<input id="imageUp" type="number" value="0" step="1"></input> <input id="imageUp" type="number" class="input" value="0" step="1"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Bottom Information</div> <div class="toggler" onclick="toggleSection(this)">Bottom Information</div>
<div class="togglee"> <div class="togglee">
Other Info Other Info
<input id="inputInfo" value="Not A Real Card" type="text"></input> <input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
<br/> <br/>
Card Number Card Number
<input id="inputNumber" value="001/001" type="text"></input> <input id="inputNumber" value="001/001" type="text" class="input"></input>
<br/> <br/>
Rarity Rarity
<input id="inputRarity" value="C" type="text"></input> <input id="inputRarity" value="C" type="text" class="input"></input>
<br/> <br/>
Set Abbreviation Set Abbreviation
<input id="inputSet" value="MTG" type="text"></input> <input id="inputSet" value="MTG" type="text" class="input"></input>
<br/> <br/>
Language Language
<input id="inputLanguage" value="EN" type="text"></input> <input id="inputLanguage" value="EN" type="text" class="input"></input>
<br/> <br/>
Artist Credit Artist Credit
<input id="inputArtist" value="" type="text"></input> <input id="inputArtist" value="" type="text" class="input"></input>
<br/> <br/>
<input id="checkboxArtistColor" type="checkbox">Make Artist Credit font black</input> <div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" />
<div>Make Artist Credit font black</div>
</div>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div> <div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div>
<div class="togglee"> <div class="togglee">
<input type="checkbox" id="checkboxSetSymbol" checked="true">Set Symbol</input> <div class="checkbox">
<br> <input type="checkbox" id="checkboxSetSymbol" checked="true" />
<label for="checkboxSetSymbol" />
<div>Set Symbol</div>
</div>
Set Code Set Code
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode"></input> <input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
<br> <br>
Set Symbol Rarity Set Symbol Rarity
<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity"></input> <input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity" class="input"></input>
<br> <br>
Custom Set Symbol Custom Set Symbol
<input type="file" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input> <input type="file" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
<br/> <br/>
<input type="text" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input> <input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input>
<br/> <br/>
Scale Set Symbol Scale Set Symbol
<input id="setSymbolSize" type="number" value="100" step="0.5"></input> <input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
<br/><br/> <br/><br/>
<input type="checkbox" id="checkboxWatermark" checked="true"></input> <div class="checkbox">
Watermark <input type="checkbox" id="checkboxWatermark" checked="true" />
<br/> <label for="checkboxWatermark" />
<div>Watermark</div>
</div>
<input type="file" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input> <input type="file" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<br/> <br/>
<input type="text" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input> <input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
<br/> <br/>
Watermark Color Watermark Color
<br/> <br/>
<select id="watermarkColorSelection"> <select class="input" id="watermarkColorSelection">
<option value="#afa360">White</option> <option value="#afa360">White</option>
<option value="#04527c">Blue</option> <option value="#04527c">Blue</option>
<option value="#494949">Black</option> <option value="#494949">Black</option>
@@ -185,16 +253,19 @@
<option value="#616b72">Artifact/Colorless</option> <option value="#616b72">Artifact/Colorless</option>
</select> </select>
<br/> <br/>
<input type="checkbox" id="checkboxSecondWatermarkColor"> Second Watermark Color <div class="checkbox">
<br/> <input type="checkbox" id="checkboxSecondWatermarkColor" />
<select id="secondWatermarkColorSelection"></select></input> <label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div>
</div>
<select class="input" id="secondWatermarkColorSelection"></select></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Download/Options</div> <div class="toggler" onclick="toggleSection(this)">Download/Options</div>
<div class="togglee"> <div class="togglee">
Frame Rate Frame Rate
<input type="number" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input> <input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a> <a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
</div> </div>
</div> </div>
@@ -204,11 +275,11 @@
<div class="row"> <div class="row">
Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after.<br/> Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after.<br/>
</div> </div>
<div id="symbolList" class="row"></div> <div id="symbolList" class="row section"></div>
<div class="row"> <div class="row">
When selecting the card's color, use 'Second Color' for hybrid cards, and 'Third Color' for non-hybrid two-colored cards. When selecting the card's color, use 'Second Color' for hybrid cards, and 'Third Color' for non-hybrid two-colored cards.
</div> </div>
<div class="row" style="background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(128, 255, 128, 0.1); padding-top: 5px"> <div class="row section">
Check out some samples! <br/> Check out some samples! <br/>
<img id="sampleCardA" style="width: 33.33%;" class="column"></img> <img id="sampleCardA" style="width: 33.33%;" class="column"></img>
<img id="sampleCardB" style="width: 33.33%;" class="column"></img> <img id="sampleCardB" style="width: 33.33%;" class="column"></img>
@@ -254,12 +325,23 @@
font-family: mplantini; font-family: mplantini;
src: url("data/fonts/mplantin-i.ttf"); src: url("data/fonts/mplantin-i.ttf");
} }
/*Color Palette*/
:root {
--title-text-color: rgb(100, 200, 50); /*TITLE*/
--main-text-color: rgb(150, 150, 150); /*REGULAR*/
--input-text-color: rgb(100, 200, 50); /*INPUTS*/
--dark-text-color: rgb(96, 96, 96); /*DARK*/
--hover-text-color: rgb(100, 200, 50); /*HOVER*/
--section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/
--section-border-color: rgba(128, 255, 128, 0.1); /*BORDER*/
}
/*Applies to most elements (with rows and columns)*/ /*Applies to most elements (with rows and columns)*/
* { * {
text-align: center; text-align: center;
font-family: belerenb; font-family: belerenb;
font-size: 22px; font-size: 22px;
color: rgb(128, 128, 128); color: var(--main-text-color);
user-select: none;
} }
.row { .row {
margin-bottom: 5; margin-bottom: 5;
@@ -278,21 +360,21 @@
} }
/*Style for sections, togglers, and togglees*/ /*Style for sections, togglers, and togglees*/
.section { .section {
border: 1px solid rgba(128, 255, 128, 0.1); border: 1px solid var(--section-border-color);
background-color: rgba(0, 0, 0, 0.5); background-color: var(--section-background-color);
padding: 0px; padding: 0px;
} }
.toggler { .toggler {
width: 100%; width: 100%;
} }
.toggler:hover { .toggler:hover {
color: rgb(128, 255, 128); color: var(--hover-text-color);
} }
.togglee { .togglee {
width: 100%; width: 100%;
text-align: left; text-align: left;
border-width: 1px; border-width: 1px;
border-color: rgba(128, 255, 128, 0.1); border-color: var(--section-border-color);
border-style: dashed solid solid solid; border-style: dashed solid solid solid;
display: none; display: none;
} }
@@ -300,25 +382,48 @@
display: block; display: block;
} }
/*Specific input element styles*/ /*Specific input element styles*/
input[type="text"], input[type="number"], textarea { .input {
text-align: left; text-align: left;
color: black; border: none;
background-color: var(--section-border-color);
color: var(--input-text-color);
width: 99%; width: 99%;
} }
input[type="color"] { input[type="color"] {
border: none;
background-color: var(--section-border-color);
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
} }
select, option { /*Custom checkboxes!*/
color: black; .checkbox {
width: 100%; top: 4px;
position: relative;
}
.checkbox label {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: var(--section-border-color);
}
.checkbox input[type=checkbox]:checked + label {
background: var(--title-text-color);
}
.checkbox input {
opacity: 0;
}
.checkbox div {
white-space: pre;
position: absolute;
top: -8px;
left: 18px;
} }
/*List of all mana symbols and their associated codes*/ /*List of all mana symbols and their associated codes*/
#symbolList {
border: 1px solid rgba(128, 255, 128, 0.1);
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 10px;
}
#symbolList img { #symbolList img {
padding: 0px; padding: 0px;
position: relative; position: relative;
@@ -329,12 +434,17 @@ select, option {
/*Other*/ /*Other*/
.title { .title {
text-align: center; text-align: center;
color: rgb(128,255,128); color: var(--title-text-color);
font-family: belerenbsc; font-family: belerenbsc;
font-size: 60px; font-size: 60px;
position: sticky;
top: 0px;
z-index: 1;
background-color: var(--section-background-color);
border: 1px solid var(--section-border-color);
} }
.info, .info * { .info, .info * {
color: rgb(96,96,96); color: var(--dark-text-color);
font-family: belerenbsc; font-family: belerenbsc;
font-size: 16px; font-size: 16px;
} }
@@ -347,16 +457,16 @@ html {
} }
/*Hyperlinks*/ /*Hyperlinks*/
a:link { a:link {
color: rgb(128,128,128); color: var(--main-text-color);
} }
a:visited { a:visited {
color: rgb(128,128,128); color: var(--main-text-color);
} }
a:hover { a:hover {
color: rgb(128,255,128); color: var(--hover-text-color);
} }
a:active { a:active {
color: rgb(128,255,128); color: var(--hover-text-color);
} }
</style> </style>
@@ -757,7 +867,7 @@ function drawPicture() {
//Draw Set Symbol //Draw Set Symbol
function drawSetSymbol() { function drawSetSymbol() {
//scales the set symbol so that it fits in the correct area and centers it //scales the set symbol so that it fits in the correct area and centers it
if (imgSetSymbol.src != "" && document.getElementById("checkboxSetSymbol").checked == true) { if (imgSetSymbol.width > 0 && document.getElementById("checkboxSetSymbol").checked == true) {
var height = setSymbolHeight var height = setSymbolHeight
var width = imgSetSymbol.width * (height / imgSetSymbol.height) var width = imgSetSymbol.width * (height / imgSetSymbol.height)
if (width > setSymbolWidth) { if (width > setSymbolWidth) {
@@ -1019,7 +1129,6 @@ function drawText(text, xCoord, yCoord) {
//Make things go back to normal :) //Make things go back to normal :)
card.textAlign="left" card.textAlign="left"
} }
//Toggles the visibility of predetermined sections of the input boxes //Toggles the visibility of predetermined sections of the input boxes
function toggleSection(target) { function toggleSection(target) {
for (i = 0; i < target.parentElement.parentElement.childNodes.length; i++) { for (i = 0; i < target.parentElement.parentElement.childNodes.length; i++) {
@@ -1030,7 +1139,6 @@ function toggleSection(target) {
} }
target.parentElement.childNodes[3].classList.toggle("shown") target.parentElement.childNodes[3].classList.toggle("shown")
} }
//Resizes anything that may need to be resized //Resizes anything that may need to be resized
function resizeThings() { function resizeThings() {
if (window.innerWidth > 809 + 300 && cardWidth <= 749) { if (window.innerWidth > 809 + 300 && cardWidth <= 749) {
@@ -1051,27 +1159,16 @@ function resizeThings() {
} }
document.getElementById("symbolList").innerHTML = symbolList document.getElementById("symbolList").innerHTML = symbolList
} }
//Loads the set symbol from the gatherer site
//Loads the set symbol from my seperate repository
function loadSetSymbol() { function loadSetSymbol() {
imgSetSymbol.crossOrigin = "Anonymous" imgSetSymbol.cropped = false
imgSetSymbol.src = "https://raw.githubusercontent.com/ImKyle4815/MTG-Set-Symbols/master/setSymbols/" + document.getElementById("setSymbolCode").value.toUpperCase() + "_" + document.getElementById("setSymbolRarity").value.toUpperCase() + ".png" imgSetSymbol.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("setSymbolCode").value.toUpperCase() + "&size=large&rarity=" + document.getElementById("setSymbolRarity").value.toUpperCase()
} }
//Loads an image from URL //Loads an image from URL
function imageURL(input, targetImage) { function imageURL(input, targetImage) {
targetImage.cropped = false targetImage.cropped = false
targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
} }
//Best for last - downloads the image!
function downloadCardImage(linkElement) {
var cardImageData = canvas.toDataURL()
if (cardImageData == undefined) {
alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
}
linkElement.href = cardImageData
}
//Randomizes the sample cards at the bottom of the page. Runs it here too //Randomizes the sample cards at the bottom of the page. Runs it here too
randomizeSampleCards(6) randomizeSampleCards(6)
function randomizeSampleCards(count) { function randomizeSampleCards(count) {
@@ -1087,5 +1184,13 @@ function randomizeSampleCards(count) {
document.getElementById("sampleCardB").src = "sampleCards/sample-card-" + cardNumbers[1] + ".png" document.getElementById("sampleCardB").src = "sampleCards/sample-card-" + cardNumbers[1] + ".png"
document.getElementById("sampleCardC").src = "sampleCards/sample-card-" + cardNumbers[2] + ".png" document.getElementById("sampleCardC").src = "sampleCards/sample-card-" + cardNumbers[2] + ".png"
} }
//Best for last - downloads the image!
function downloadCardImage(linkElement) {
var cardImageData = canvas.toDataURL()
if (cardImageData == undefined) {
alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
}
linkElement.href = cardImageData
}
</script> </script>
<html> <html>