mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
1283 lines
50 KiB
HTML
1283 lines
50 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
<title>Card Conjurer - testing</title>
|
|
<script src="data/scripts/loadScript.js"></script>
|
|
<script src="data/scripts/loadImage.js"></script>
|
|
<script src="data/scripts/loadColors.js"></script>
|
|
<script src="data/scripts/mask.js"></script>
|
|
<script src="data/scripts/autocrop.js"></script>
|
|
<div class="title">Card Conjurer</div>
|
|
<!-- Favicon craziness! -->
|
|
<!-- <link rel="apple-touch-icon" sizes="180x180" href="https://imkyle4815.github.io/cardconjurer/data/favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://imkyle4815.github.io/cardconjurer/data/favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://imkyle4815.github.io/cardconjurer/data/favicons/favicon-16x16.png">
|
|
<link rel="manifest" href="https://imkyle4815.github.io/cardconjurer/data/favicons/site.webmanifest">
|
|
<link rel="mask-icon" href="https://imkyle4815.github.io/cardconjurer/data/favicons/safari-pinned-tab.svg" color="#64ca2f">
|
|
<link rel="shortcut icon" href="https://imkyle4815.github.io/cardconjurer/data/favicons/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#00a300">
|
|
<meta name="msapplication-config" content="https://imkyle4815.github.io/cardconjurer/data/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#64ca2f"> -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="https://imkyle4815.github.io/cardconjurer/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="https://imkyle4815.github.io/cardconjurer/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="https://imkyle4815.github.io/cardconjurer/favicon-16x16.png">
|
|
<link rel="manifest" href="https://imkyle4815.github.io/cardconjurer/site.webmanifest">
|
|
<link rel="mask-icon" href="https://imkyle4815.github.io/cardconjurer/safari-pinned-tab.svg" color="#64ca2f">
|
|
<link rel="shortcut icon" href="https://imkyle4815.github.io/cardconjurer/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#00a300">
|
|
<meta name="msapplication-config" content="https://imkyle4815.github.io/cardconjurer/browserconfig.xml">
|
|
<meta name="theme-color" content="#64ca2f">
|
|
</head>
|
|
<!-- <img src="data/background.png"></img> -->
|
|
<body onresize="resizeThings()" onload="resizeThings()">
|
|
<div class="row">
|
|
<div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div>
|
|
<div class="column" id="optionsColumn">
|
|
<!--OPTIONS-->
|
|
<div class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Card Border</div>
|
|
<div class="togglee shown">
|
|
Border
|
|
<span class="dropdown">
|
|
<select id="borderSelection" onchange="changeTemplate()">
|
|
<option value="m15/">M15</option>
|
|
<option value="map/">Map (Ixalan)</option>
|
|
<option value="plane/">Plane</option>
|
|
<option value="8th/">8th</option>
|
|
</select>
|
|
</span>
|
|
<br/>
|
|
Color
|
|
<span class="dropdown">
|
|
<select id="colorSelection" onchange="updateBorder()">
|
|
<option value="white">White</option>
|
|
</select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
|
|
<label for="checkboxSecondColor" />
|
|
<div>Second Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="secondColorSelection" onchange="updateBorder()"></select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
|
|
<label for="checkboxThirdColor" />
|
|
<div>Third Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="thirdColorSelection" onchange="updateBorder()"></select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<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 class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
|
|
<div class="togglee">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
|
|
<label for="checkboxLegendary" />
|
|
<div>Legendary</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
|
|
<label for="checkboxNyx" />
|
|
<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>
|
|
<span class="dropdown">
|
|
<select id="inputFlipIcon" onchange="updateBorder()">
|
|
<option value="blank.png">Blank</option>
|
|
<option value="day.png">Day</option>
|
|
<option value="night.png">Night</option>
|
|
<option value="compass.png">Compass</option>
|
|
<option value="moon.png">Moon</option>
|
|
<option value="eldrazi.png">Eldrazi</option>
|
|
<option value="planeswalker.png">Planeswalker</option>
|
|
</select>
|
|
</span>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
|
|
<label for="checkboxFlipTip" />
|
|
<div>Flip Tip</div>
|
|
</div>
|
|
<input id="inputFlipTip" value="" type="text" class="input"></input>
|
|
<div class="checkbox">
|
|
<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>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFoil" />
|
|
<label for="checkboxFoil" />
|
|
<div>Foil</div>
|
|
</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 class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div>
|
|
<div class="togglee">
|
|
Name
|
|
<input id="inputName" type="text" class="input"></input>
|
|
<br/>
|
|
Mana Cost
|
|
<input id="inputCost" type="text" class="input"></input>
|
|
<br/>
|
|
Type
|
|
<input id="inputType" type="text" class="input"></input>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Rules Text</div>
|
|
<div class="togglee">
|
|
Rules Text
|
|
<br/>
|
|
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
|
|
<br/>
|
|
Rules Text Font Size
|
|
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5"></input>
|
|
<br/>
|
|
Pixels Between Paragraphs
|
|
<input id="textShift" type="number" class="input" min="0" max="300" value="13"></input>
|
|
<br/>
|
|
Shift All Text Down
|
|
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Card Art</div>
|
|
<div class="togglee">
|
|
Image
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)"></input>
|
|
<br/>
|
|
Image Zoom
|
|
<input id="imageSize" type="number" class="input" value="100" step="0.1"></input>
|
|
<br/>
|
|
Image Left
|
|
<input id="imageLeft" type="number" class="input" value="0" step="1"></input>
|
|
<br/>
|
|
Image Up
|
|
<input id="imageUp" type="number" class="input" value="0" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Bottom Information</div>
|
|
<div class="togglee">
|
|
Other Info
|
|
<input id="inputInfo" value="Not A Real Card" type="text" class="input"></input>
|
|
<br/>
|
|
Card Number
|
|
<input id="inputNumber" value="001/001" type="text" class="input"></input>
|
|
<br/>
|
|
Rarity
|
|
<input id="inputRarity" value="C" type="text" class="input"></input>
|
|
<br/>
|
|
Set Abbreviation
|
|
<input id="inputSet" value="MTG" type="text" class="input"></input>
|
|
<br/>
|
|
Language
|
|
<input id="inputLanguage" value="EN" type="text" class="input"></input>
|
|
<br/>
|
|
Artist Credit
|
|
<input id="inputArtist" value="" type="text" class="input"></input>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxArtistColor" />
|
|
<label for="checkboxArtistColor" />
|
|
<div>Make Artist Credit font black</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div>
|
|
<div class="togglee">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSetSymbol" checked="true" />
|
|
<label for="checkboxSetSymbol" />
|
|
<div>Set Symbol</div>
|
|
</div>
|
|
Set Code
|
|
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
|
|
<br>
|
|
Set Symbol Rarity
|
|
<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity" class="input"></input>
|
|
<br>
|
|
Custom Set Symbol
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)"></input>
|
|
<br/>
|
|
Scale Set Symbol
|
|
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5"></input>
|
|
<br/><br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxWatermark" checked="true" />
|
|
<label for="checkboxWatermark" />
|
|
<div>Watermark</div>
|
|
</div>
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)"></input>
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode"></input>
|
|
<br/>
|
|
Watermark Color
|
|
<br/>
|
|
<span class="dropdown">
|
|
<select id="watermarkColorSelection">
|
|
<!-- <option value="#f3f2ef">White</option>
|
|
<option value="#1d7097">Blue</option>
|
|
<option value="#31302e">Black</option>
|
|
<option value="#bf544c">Red</option>
|
|
<option value="#1c6449">Green</option>
|
|
<option value="#e3d591">Gold</option>
|
|
<option value="#e0e0e0">Artifact/Colorless</option> -->
|
|
<option value="#afa360">White</option>
|
|
<option value="#04527c">Blue</option>
|
|
<option value="#494949">Black</option>
|
|
<option value="#a3280d">Red</option>
|
|
<option value="#0f4f14">Green</option>
|
|
<option value="#7f5f00">Gold</option>
|
|
<option value="#616b72">Artifact/Colorless</option>
|
|
</select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSecondWatermarkColor" />
|
|
<label for="checkboxSecondWatermarkColor" />
|
|
<div>Second Watermark Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="secondWatermarkColorSelection"></select></input>
|
|
</span>
|
|
Watermark Opacity
|
|
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01"></input>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="toggler" onclick="toggleSection(this)">Download/Options</div>
|
|
<div class="togglee">
|
|
Frame Rate
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<!--END-->
|
|
</div>
|
|
</div>
|
|
<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/>
|
|
</div>
|
|
<div id="symbolList" class="row section"></div>
|
|
<div class="row">
|
|
When selecting the card's color, use 'Second Color' for hybrid cards, and 'Third Color' for non-hybrid two-colored cards.
|
|
</div>
|
|
<div class="row section">
|
|
Check out some samples! <br/>
|
|
<img id="sampleCardA" style="width: 33.33%;" class="column"></img>
|
|
<img id="sampleCardB" style="width: 33.33%;" class="column"></img>
|
|
<img id="sampleCardC" style="width: 33.33%;" class="column"></img>
|
|
</div>
|
|
<div class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the Github page</a>.</div>
|
|
</body>
|
|
|
|
|
|
|
|
<!--CSS-->
|
|
<style>
|
|
/*fonts*/
|
|
@font-face {
|
|
font-family: relaymedium;
|
|
src: url("data/fonts/relay-medium.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenb;
|
|
src: url("data/fonts/beleren-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenbsc;
|
|
src: url("data/fonts/beleren-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixbsc;
|
|
src: url("data/fonts/matrix-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrix;
|
|
src: url("data/fonts/matrix.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixb;
|
|
src: url("data/fonts/matrix-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantin;
|
|
src: url("data/fonts/mplantin.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantini;
|
|
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.25); /*BORDER*/
|
|
--solid-border-color: rgb(39, 71, 39); /*Opaque Border*/
|
|
}
|
|
/*Applies to most elements (with rows and columns)*/
|
|
* {
|
|
text-align: center;
|
|
font-family: belerenb;
|
|
font-size: 24px;
|
|
color: var(--main-text-color);
|
|
user-select: none;
|
|
}
|
|
.row {
|
|
margin-bottom: 5;
|
|
}
|
|
.row:after{
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.row * {
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
}
|
|
.column {
|
|
float: left;
|
|
}
|
|
/*Style for sections, togglers, and togglees*/
|
|
.section {
|
|
border: 1px solid var(--section-border-color);
|
|
background-color: var(--section-background-color);
|
|
padding: 0px;
|
|
}
|
|
.toggler {
|
|
width: 100%;
|
|
}
|
|
.toggler:hover {
|
|
color: var(--hover-text-color);
|
|
}
|
|
.togglee {
|
|
width: 100%;
|
|
text-align: left;
|
|
border-width: 1px;
|
|
border-color: var(--section-border-color);
|
|
border-style: dashed solid solid solid;
|
|
display: none;
|
|
}
|
|
.shown {
|
|
display: block;
|
|
}
|
|
/*Specific input element styles*/
|
|
.input {
|
|
text-align: left;
|
|
border: none;
|
|
background-color: var(--section-border-color);
|
|
color: var(--input-text-color);
|
|
width: 100%;
|
|
}
|
|
input[type="color"] {
|
|
border: none;
|
|
background-color: var(--section-border-color);
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
/*Custom checkboxes!*/
|
|
.checkbox {
|
|
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;
|
|
}
|
|
/*Custom select box (dropdown)*/
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 0px;
|
|
}
|
|
.dropdown select {
|
|
width: inherit;
|
|
background-color: var(--section-border-color);
|
|
color: var(--title-text-color);
|
|
border: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance:none;
|
|
appearance: none;
|
|
}
|
|
.dropdown select option {
|
|
color: var(--title-text-color);
|
|
background-color: var(--solid-border-color);
|
|
}
|
|
.dropdown::after {
|
|
content: "\25BC";
|
|
font-size: 10px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
color: var(--title-text-color);
|
|
right: 10px;
|
|
top: 38%;
|
|
}
|
|
/*List of all mana symbols and their associated codes*/
|
|
#symbolList img {
|
|
padding: 0px;
|
|
position: relative;
|
|
top: 8px;
|
|
width: 30px;
|
|
/*padding: 0px 0px 0px 0px !important;*/
|
|
}
|
|
/*Other*/
|
|
.title {
|
|
text-align: center;
|
|
color: var(--title-text-color);
|
|
font-family: belerenbsc;
|
|
font-size: 60px;
|
|
}
|
|
.info, .info * {
|
|
color: var(--dark-text-color);
|
|
font-family: belerenbsc;
|
|
font-size: 16px;
|
|
}
|
|
html {
|
|
background:url(data/background.png) no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
/*Hyperlinks*/
|
|
a:link {
|
|
color: var(--main-text-color);
|
|
}
|
|
a:visited {
|
|
color: var(--main-text-color);
|
|
}
|
|
a:hover {
|
|
color: var(--hover-text-color);
|
|
}
|
|
a:active {
|
|
color: var(--hover-text-color);
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<script crossorigin="anonymous">
|
|
//Create the canvas for creating the border image
|
|
var borderCanvas = document.createElement("canvas")
|
|
var border = borderCanvas.getContext("2d")
|
|
//document.body.appendChild(borderCanvas)
|
|
//Load the initial border (m15)
|
|
changeTemplate()
|
|
//set up initial variables
|
|
var borderPath
|
|
var secondColor
|
|
var thirdColor
|
|
var titleRightShift = 0
|
|
var typeRightShift = 0
|
|
var imagesToLoad
|
|
//set up canvas
|
|
var canvas = document.getElementById("canvas")
|
|
var card = canvas.getContext("2d")
|
|
//load template images (images that may change based off of the selected template)
|
|
var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask"]
|
|
for (i = 0; i < imgListTemplate.length; i ++) {
|
|
var imgName = "img" + imgListTemplate[i].charAt(0).toUpperCase() + imgListTemplate[i].slice(1)
|
|
window[imgName] = new Image()
|
|
}
|
|
//Load border images (images that are determined by border settings)
|
|
var imgListBorder = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark"]
|
|
for (i = 0; i < imgListBorder.length; i ++) {
|
|
var imgName = "img" + imgListBorder[i].charAt(0).toUpperCase() + imgListBorder[i].slice(1)
|
|
window[imgName] = new Image()
|
|
imgListBorder[i] = window[imgName]
|
|
imgListBorder[i].onload = function() {
|
|
if (this.hasToLoad == true) {
|
|
this.hasToLoad = false
|
|
imagesToLoad --
|
|
if (imagesToLoad == 0) {
|
|
createBorder()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//Load dynamic images (images that are input by the user)
|
|
var imgListUser = ["art", "setSymbol", "watermark", "border"]
|
|
for (i = 0; i < imgListUser.length; i ++) {
|
|
var imgName = "img" + imgListUser[i].charAt(0).toUpperCase() + imgListUser[i].slice(1)
|
|
window[imgName] = new Image()
|
|
window[imgName].crossOrigin = "anonymous"
|
|
window[imgName].onload = function() {
|
|
//If both tasks are required, it will make white pixels transparent first. That way they also get cropped out.
|
|
if (this.whiteToTransparent == false) {
|
|
this.whiteToTransparent = true
|
|
whiteToTransparent(imgWatermark)
|
|
} else if (this.cropped == false) {
|
|
this.cropped = true
|
|
autocrop(this.src, this)
|
|
}
|
|
}
|
|
}
|
|
//Load static images
|
|
var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
|
|
for (i = 0; i < imgListStatic.length; i ++) {
|
|
var imgName = "img" + imgListStatic[i].charAt(0).toUpperCase() + imgListStatic[i].slice(1)
|
|
window[imgName] = new Image()
|
|
window[imgName].src = "data/borders/" + imgListStatic[i] + ".png"
|
|
}
|
|
//Mana symbol Array setup
|
|
var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "snow", "c", "t","untap", "e", "y", "z", "half", "inf", "chaos", "plane"]
|
|
var manaSymbolImages = new Array()
|
|
for (var i = 0; i < manaSymbolCode.length; i++) {
|
|
manaSymbolImages[i] = new Image()
|
|
manaSymbolImages[i].src = "data/manaSymbols/" + i + ".png"
|
|
}
|
|
//load first set symbol
|
|
loadSetSymbol()
|
|
//fill second watermark dropdown menu
|
|
document.getElementById("secondWatermarkColorSelection").innerHTML = document.getElementById("watermarkColorSelection").innerHTML
|
|
|
|
//Runs ten times every second (main loop)
|
|
function cardClock() {
|
|
//fixes the global alpha just incase...
|
|
//Insures that the corners of the final image are transparent
|
|
card.globalCompositeOperation = "source-over"
|
|
drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
|
|
card.globalCompositeOperation = "source-atop"
|
|
//Draws the card image, then...
|
|
drawPicture()
|
|
//draws the card frame on top
|
|
if (transparentBorder == false) {
|
|
drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
|
|
} else {
|
|
card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
|
|
}
|
|
//draws the set symbol, mana cost, and watermark
|
|
drawSetSymbol()
|
|
drawManaCost()
|
|
drawWatermark()
|
|
//writes all the text: name, type, rules...
|
|
writeText()
|
|
//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
|
|
if (m15Info == true) {
|
|
bottomInfoM15()
|
|
} else if (eighthInfo == true) {
|
|
bottomInfo8th()
|
|
}else if (planechaseInfo == true) {
|
|
bottomInfoPlanechase()
|
|
}
|
|
//A shiny foil overlay!
|
|
if(document.getElementById("checkboxFoil").checked == true) {
|
|
card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
|
|
}
|
|
//These are for pinpointing coordinates while adjusting values for new border types
|
|
//Vertical Line
|
|
// card.beginPath()
|
|
// card.moveTo(688, 0)
|
|
// card.lineTo(688, 1044)
|
|
// card.stroke()
|
|
//Horizontal Line
|
|
// card.beginPath()
|
|
// card.moveTo(0, setSymbolY)
|
|
// card.lineTo(749, setSymbolY)
|
|
// card.stroke()
|
|
}
|
|
//Sets up the initial clock
|
|
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
|
|
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
//The two following functions load border images
|
|
function changeTemplate() {
|
|
//the loadScript function is located in data/scripts/loadScript.js. It sets values to variables such as set symbol coordinates or title font
|
|
loadScript("data/borders/defaultBorder.js")
|
|
}
|
|
function finishTemplate() {
|
|
//This is a seperate function to insure that the border.js file finishes running before running a few last commands
|
|
canvas.width = cardWidth
|
|
canvas.height = cardHeight
|
|
borderCanvas.width = cardWidth
|
|
borderCanvas.height = cardHeight
|
|
resizeThings()
|
|
document.getElementById("colorSelection").value = "white"
|
|
imgMultiMask.src = borderPath + "multiMask.png"
|
|
imgFrameMask.src = borderPath + "frameMask.png"
|
|
if (m15Info == true) {
|
|
imgLegendFrameMask.src = borderPath + "legendFrameMask.png"
|
|
imgRareStampMask.src = borderPath + "rareStampMask.png"
|
|
imgBorderMask.src = borderPath + "borderMask.png"
|
|
} else if (eighthInfo == true) {
|
|
imgBorderMask.src = borderPath + "frameMask.png"
|
|
}
|
|
updateBorder()
|
|
}
|
|
//Loads the images for the card frame, power toughness box, and rare stamp
|
|
function updateBorder() {
|
|
borderPath = "data/borders/" + document.getElementById("borderSelection").value
|
|
secondColor = document.getElementById("checkboxSecondColor").checked
|
|
thirdColor = document.getElementById("checkboxThirdColor").checked
|
|
var firstColorPath = borderPath + document.getElementById("colorSelection").value
|
|
var secondColorPath = borderPath + document.getElementById("secondColorSelection").value
|
|
var thirdColorPath = borderPath + document.getElementById("thirdColorSelection").value
|
|
var altframe = ""
|
|
imgArtMask.src = borderPath + "artMask.png"
|
|
imgBorderColor.src = firstColorPath + "/frame.png"
|
|
imgSecondBorderColor.src = secondColorPath + "/frame.png"
|
|
imgThirdBorderColor.src = thirdColorPath + "/frame.png"
|
|
if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
|
|
altframe = "dark"
|
|
} else {
|
|
altframe = ""
|
|
}
|
|
if (creatureBorder == true) {
|
|
if (thirdColor == true) {
|
|
imgBorderCreature.src = thirdColorPath + "/" + altframe + "pt.png"
|
|
} else if (secondColor == true) {
|
|
imgBorderCreature.src = secondColorPath + "/" + altframe + "pt.png"
|
|
} else {
|
|
imgBorderCreature.src = firstColorPath + "/" + altframe + "pt.png"
|
|
}
|
|
}
|
|
if (legendaryBorder == true) {
|
|
imgBorderLegendary.src = firstColorPath + "/legendary.png"
|
|
imgSecondBorderLegendary.src = secondColorPath + "/legendary.png"
|
|
}
|
|
if (stampBorder == true) {
|
|
imgBorderRareStamp.src = firstColorPath + "/stamp.png"
|
|
imgSecondBorderRareStamp.src = secondColorPath + "/stamp.png"
|
|
}
|
|
if (nyxBorder == true) {
|
|
if (thirdColor == true) {
|
|
imgBorderNyx.src = thirdColorPath + "/nyx.png"
|
|
} else {
|
|
imgBorderNyx.src = firstColorPath + "/nyx.png"
|
|
imgSecondBorderNyx.src = secondColorPath + "/nyx.png"
|
|
}
|
|
}
|
|
if (miracleBorder == true) {
|
|
if (thirdColor == true) {
|
|
imgBorderMiracle.src = thirdColorPath + "/" + altframe + "miracle.png"
|
|
} else {
|
|
imgBorderMiracle.src = firstColorPath + "/" + altframe + "miracle.png"
|
|
imgSecondBorderMiracle.src = secondColorPath + "/" + altframe + "miracle.png"
|
|
}
|
|
}
|
|
if (flipBorder == true) {
|
|
if (thirdColor == true) {
|
|
imgBorderFlippedDark.src = thirdColorPath + "/flippedDark.png"
|
|
} else {
|
|
imgBorderFlippedDark.src = firstColorPath + "/flippedDark.png"
|
|
imgSecondBorderFlippedDark.src = secondColorPath + "/flippedDark.png"
|
|
}
|
|
if (secondColor == true) {
|
|
imgBorderFlipTip.src = secondColorPath + "/flipTip.png"
|
|
} else {
|
|
imgBorderFlipTip.src = firstColorPath + "/flipTip.png"
|
|
}
|
|
imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
|
|
imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value
|
|
}
|
|
//This allows all the images to be loaded
|
|
imagesToLoad = 0
|
|
//Makes a count of all images that are loading, also tags them
|
|
for (i = 0; i < imgListBorder.length; i++) {
|
|
if (imgListBorder[i].complete == false) {
|
|
imagesToLoad ++
|
|
imgListBorder[i].hasToLoad = true
|
|
}
|
|
}
|
|
//If no images needed to be loaded, runs the createBorder function anyways
|
|
if (imagesToLoad == 0) {
|
|
createBorder()
|
|
}
|
|
}
|
|
//Once the border images have finished loading, they are all drawn into a temporary canvas then saved to a single image
|
|
function createBorder() {
|
|
//These if else statements check to see whether or not to draw different parts of the card, like the legendary border or rare stamp, and draws them in the appropriate order so that when multiple border colors are used the gradients overlap correctly
|
|
//BACKGROUND COLOR
|
|
border.clearRect(0, 0, cardWidth, cardHeight)
|
|
drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, border, imgArtMask, false, false)
|
|
//MAIN CARD FRAME
|
|
drawMask(imgBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
if (secondColor == true && secondBorder == true) {
|
|
drawMask(imgSecondBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
if (thirdColor == true && thirdBorder == true) {
|
|
drawMask(imgThirdBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiMask, false)
|
|
}
|
|
//Draws the silver border usually on un-cards
|
|
if (document.getElementById("checkboxSilverBorder").checked == true) {
|
|
drawMask("#a3aeb7", 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgFrameMask, "reverseSecond")
|
|
}
|
|
//NYX
|
|
if (document.getElementById("checkboxNyx").checked == true && nyxBorder == true) {
|
|
if (thirdColor == true) {
|
|
drawMask(imgBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiMask, false)
|
|
} else {
|
|
drawMask(imgBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
if (secondColor == true) {
|
|
drawMask(imgSecondBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
}
|
|
}
|
|
//MIRACLE
|
|
if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true && (document.getElementById("checkboxFlippedDark").checked == false || flipBorder == false)) {
|
|
if (document.getElementById("checkboxFlippedDark").checked == true) {
|
|
alert("hmmm")
|
|
}
|
|
if (thirdColor == true) {
|
|
drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
} else {
|
|
drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
if (secondColor == true) {
|
|
drawMask(imgSecondBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
}
|
|
}
|
|
//LEGENDARY
|
|
if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true) {
|
|
drawMask(imgBorderLegendary, 0, 0, cardWidth, cardHeight, border, imgLegendFrameMask, false, false)
|
|
if (secondColor == true) {
|
|
drawMask(imgSecondBorderLegendary, 0, 0, cardWidth, cardHeight, border, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
//redraws the custom-color border to match the legendary frame
|
|
drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
|
|
//redraws the silver border usually on un-cards to match the legendary frame
|
|
if (document.getElementById("checkboxSilverBorder").checked == true) {
|
|
drawMask("#a3aeb7", 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
|
|
}
|
|
}
|
|
//FLIP CARDS
|
|
if (flipBorder == true) {
|
|
if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
|
|
if (thirdColor == true) {
|
|
drawMask(imgBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
} else {
|
|
drawMask(imgBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
if (secondColor == true) {
|
|
drawMask(imgSecondBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
|
|
}
|
|
}
|
|
}
|
|
//redraws the miracle border if required to match with the newer darker overlay
|
|
if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true && (document.getElementById("checkboxLegendary").checked == false || legendaryBorder == false)) {
|
|
if (thirdColor == true) {
|
|
drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
} else {
|
|
drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
|
|
if (secondColor == true) {
|
|
drawMask(imgSecondBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
}
|
|
}
|
|
if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) {
|
|
border.drawImage(imgBorderFlipCircle, 0, 0, cardWidth, cardHeight)
|
|
border.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
|
|
}
|
|
if (document.getElementById("checkboxFlipTip").checked == true) {
|
|
border.drawImage(imgBorderFlipTip, 0, 0, cardWidth, cardHeight)
|
|
border.fillStyle="#666"
|
|
canvas.style.letterSpacing = "0px"
|
|
border.font = "28px belerenb"
|
|
border.fillText(document.getElementById("inputFlipTip").value, 688 - border.measureText(document.getElementById("inputFlipTip").value).width, 880)
|
|
}
|
|
if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) {
|
|
titleRightShift = 50
|
|
} else {
|
|
titleRightShift = 0
|
|
}
|
|
}
|
|
//COLOR IDENTITY
|
|
if (document.getElementById("checkboxIdentity").checked == true) {
|
|
var identityList = document.getElementById("inputIdentity").value.split(" ")
|
|
var angleSize = Math.PI * 2 / identityList.length
|
|
var identityRadius = 14
|
|
var identityX = typeX + 8
|
|
var identityY = typeY + 21
|
|
switch (identityList.length) {
|
|
case 1:
|
|
var originAngle = 0
|
|
break;
|
|
case 2:
|
|
var originAngle = 3 * Math.PI / 4
|
|
break;
|
|
case 3:
|
|
var originAngle = 7 * Math.PI / 6
|
|
break;
|
|
case 4:
|
|
var originAngle = 3 * Math.PI / 2
|
|
break;
|
|
case 5:
|
|
var originAngle = 13 * Math.PI / 10
|
|
break;
|
|
default:
|
|
var originAngle = 0
|
|
}
|
|
for (i = 0; i < identityList.length; i ++) {
|
|
switch (identityList[i]) {
|
|
case "w":
|
|
border.fillStyle = "#f3f2ef"
|
|
break;
|
|
case "u":
|
|
border.fillStyle = "#1d7097"
|
|
break;
|
|
case "b":
|
|
border.fillStyle = "#31302e"
|
|
break;
|
|
case "r":
|
|
border.fillStyle = "#bf544c"
|
|
break;
|
|
case "g":
|
|
border.fillStyle = "#1c6449"
|
|
break;
|
|
case "m":
|
|
border.fillStyle = "#e3d591"
|
|
break;
|
|
default:
|
|
border.fillStyle = "#e0e0e0"
|
|
}
|
|
var startAngle = originAngle + i * angleSize
|
|
border.beginPath()
|
|
border.moveTo(identityX, identityY)
|
|
border.arc(identityX, identityY, identityRadius, startAngle, startAngle + angleSize)
|
|
border.lineTo(identityX, identityY)
|
|
border.fill()
|
|
}
|
|
border.drawImage(imgIdentity, identityX - identityRadius, identityY - identityRadius, 2 * identityRadius, 2 * identityRadius)
|
|
typeRightShift = 33
|
|
} else {
|
|
typeRightShift = 0
|
|
}
|
|
//RARE STAMP
|
|
if (document.getElementById("checkboxRareStamp").checked == true && stampBorder == true) {
|
|
border.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
|
|
|
|
if (document.getElementById("checkboxSecondColor").checked == true) {
|
|
drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, border, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
|
|
}
|
|
//Draws over the rare stamp (part that's usually black) to match custom border color
|
|
drawMask(document.getElementById("inputColor").value, 329, rareStampY - 15, 90, 50, border, imgRareStampMask, false, false)
|
|
//This is when the holo stamp is drawn
|
|
border.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
|
|
}
|
|
imgBorder.src = borderCanvas.toDataURL()
|
|
}
|
|
//Draw Picture
|
|
function drawPicture() {
|
|
//scales the card art and draws it
|
|
var imageScale = document.getElementById("imageSize").value * 0.01
|
|
var imageLeftShift = parseInt(document.getElementById("imageLeft").value)
|
|
var imageUpShift = parseInt(document.getElementById("imageUp").value)
|
|
if (imgArt.width > 0) {
|
|
card.drawImage(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale)
|
|
//drawMask(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale, card, imgArtMask, false, false)
|
|
}
|
|
}
|
|
//Draw Set Symbol
|
|
function drawSetSymbol() {
|
|
//scales the set symbol so that it fits in the correct area and centers it
|
|
if (imgSetSymbol.width > 0 && document.getElementById("checkboxSetSymbol").checked == true) {
|
|
var height = setSymbolHeight
|
|
var width = imgSetSymbol.width * (height / imgSetSymbol.height)
|
|
if (width > setSymbolWidth) {
|
|
width = setSymbolWidth
|
|
height = imgSetSymbol.height * (width / imgSetSymbol.width)
|
|
}
|
|
height *= document.getElementById("setSymbolSize").value / 100
|
|
width *= document.getElementById("setSymbolSize").value / 100
|
|
var y = setSymbolY - height / 2
|
|
var x = setSymbolRight - width / centerSetSymbol
|
|
card.drawImage(imgSetSymbol, x, y, width, height)
|
|
}
|
|
}
|
|
//Draw Watermark
|
|
function drawWatermark() {
|
|
//The watermark is centered/scaled just like the set symbol
|
|
if (imgWatermark.width > 0 && document.getElementById("checkboxWatermark").checked == true) {
|
|
var height = watermarkHeight
|
|
var width = imgWatermark.width * (height / imgWatermark.height)
|
|
if (width > watermarkWidth) {
|
|
width = watermarkWidth
|
|
height = imgWatermark.height * (width / imgWatermark.width)
|
|
}
|
|
var x = cardWidth / 2 - width / 2
|
|
var y = watermarkY - height / 2
|
|
//globalAlpha insures that the watermark is drawn partially transparent. This value may not be perfect but the watermark colors are calibrated to it
|
|
card.globalAlpha = document.getElementById("inputWatermarkOpacity").value
|
|
//if the following if statement is true, the watermark will be drawn in two halves of the chosen colors. Otherwise, a single watermark of the first chosen color is drawn.
|
|
if (document.getElementById("checkboxSecondWatermarkColor").checked == true) {
|
|
drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, imgMultiGradient, false)
|
|
drawMask(document.getElementById("secondWatermarkColorSelection").value, x, y, width, height, card, imgWatermark, imgMultiGradient, "reverseSecond")
|
|
} else {
|
|
drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false)
|
|
}
|
|
}
|
|
card.globalAlpha = 1
|
|
}
|
|
//Mana cost
|
|
function drawManaCost() {
|
|
//the symbols string splits the mana cost input into an array of strings which is then put into a for loop that draws the appropriate set symbol then adjusts the xShift so the set symbols are spaced properly
|
|
card.fillStyle = "Black"
|
|
var symbols = document.getElementById("inputCost").value.split(" ")
|
|
var xShift = 0
|
|
for (n = symbols.length; n > -1; n--) {
|
|
if (manaSymbolCode.indexOf(symbols[n]) != -1) {
|
|
card.beginPath()
|
|
card.arc(manaCostX + xShift + manaCostRadius - 1, manaCostY + manaCostRadius + 3.5, manaCostRadius, 0, 6.29, false)
|
|
card.fill()
|
|
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(symbols[n])], manaCostX + xShift, manaCostY, manaCostRadius * 2, manaCostRadius * 2)
|
|
xShift -= 39
|
|
}
|
|
}
|
|
}
|
|
//Write Text
|
|
function writeText() {
|
|
//Draws the entered text onto the card, also draws the power/toughness box if necessary
|
|
//All use these:
|
|
card.textBaseline = "top"
|
|
if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
|
|
card.fillStyle = "White"
|
|
} else {
|
|
card.fillStyle = "Black"
|
|
}
|
|
//Title
|
|
card.textAlign = titleAlign
|
|
canvas.style.letterSpacing = titleFontSpacing
|
|
card.font = titleFont
|
|
card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY)
|
|
//Type
|
|
card.textAlign = typeAlign
|
|
canvas.style.letterSpacing = typeFontSpacing
|
|
card.font = typeFont
|
|
card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY)
|
|
//Power/Toughness
|
|
if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
|
|
if (imgBorderCreature.src.substr(imgBorderCreature.src.length - 14) == "vehicle/pt.png") {
|
|
card.fillStyle = "White"
|
|
}
|
|
card.textAlign = "center"
|
|
card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight)
|
|
canvas.style.letterSpacing = ptFontSpacing
|
|
card.font = ptFont
|
|
powerToughness = document.getElementById("inputPowerToughness").value
|
|
card.fillText(powerToughness, ptTextX, ptTextY)
|
|
}
|
|
card.textAlign = "left"
|
|
card.fillStyle = "Black"
|
|
//Rules Text
|
|
canvas.style.letterSpacing = textFontSpacing + "px"
|
|
card.font = document.getElementById("textSize").value + textFont
|
|
var text = document.getElementById("inputText").value
|
|
drawText(text, textX, textY)
|
|
}
|
|
//Bottom info on M15 cards
|
|
function bottomInfoM15() {
|
|
if (document.getElementById("checkboxArtistColor").checked == true) {
|
|
card.fillStyle = "black"
|
|
} else {
|
|
card.fillStyle = "white"
|
|
}
|
|
var shiftInfo = 442
|
|
canvas.style.letterSpacing = "0.8px"
|
|
card.font = "19.5px relaymedium"
|
|
var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
|
|
card.fillText(bottomLine, 48, m15InfoY)
|
|
var artistBrushShift = card.measureText(bottomLine).width + 58
|
|
drawMask(card.fillStyle, artistBrushShift, m15InfoY + 5, 21, 13, card, imgArtistBrush, false, false)
|
|
canvas.style.letterSpacing = "1.3px"
|
|
card.font = "19.5px relaymedium"
|
|
card.fillText(document.getElementById("inputNumber").value, 49, m15InfoY - 20)
|
|
card.fillText(document.getElementById("inputRarity").value, artistBrushShift - 1, m15InfoY - 20)
|
|
if (442 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("checkboxCreature").checked == false) {
|
|
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width + 5
|
|
}
|
|
canvas.style.letterSpacing = "-0.1px"
|
|
card.font = "24px matrixbsc"
|
|
card.fillText(document.getElementById("inputArtist").value, artistBrushShift + 21, m15InfoY + 2)
|
|
if (442 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("checkboxCreature").checked == true) {
|
|
shiftInfo = artistBrushShift + card.measureText(document.getElementById("inputArtist").value).width + 26
|
|
}
|
|
//This is where "CC —" is hardcoded. The only reason is to prevent users from easily typing in the trademark and copyright that's usually on real cards. It's also there so I can see if a card was created with my program, it makes me feel good :)
|
|
if (document.getElementById("inputInfo").value != "") {
|
|
canvas.style.letterSpacing = "0px"
|
|
card.font = "17px mplantin"
|
|
var bottomInfo = "CC \u2014 " + document.getElementById("inputInfo").value
|
|
if (bottomInfo == "CC \u2014 secretcode") {
|
|
var date = new Date()
|
|
var year = date.getFullYear()
|
|
bottomInfo = "\u2122 & \u00a9 " + year + " Wizards of the Coast"
|
|
}
|
|
if (document.getElementById("checkboxCreature").checked == true) {
|
|
card.fillText(bottomInfo, shiftInfo, m15InfoY + 3)
|
|
} else {
|
|
card.fillText(bottomInfo, shiftInfo, m15InfoY - 17)
|
|
}
|
|
}
|
|
}
|
|
//Bottom info on 8th edition cards
|
|
function bottomInfo8th() {
|
|
if (document.getElementById("checkboxArtistColor").checked == true) {
|
|
card.fillStyle = "black"
|
|
} else {
|
|
card.fillStyle = "white"
|
|
}
|
|
canvas.style.letterSpacing = "1px"
|
|
card.font = "25px matrixb"
|
|
card.fillText(document.getElementById("inputArtist").value, 116, eighthInfoY)
|
|
canvas.style.letterSpacing = "0.5px"
|
|
card.font = "16px mplantin"
|
|
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value + " " + document.getElementById("inputNumber").value, 62, eighthInfoY + 31)
|
|
}
|
|
//Write the rules and flavor text!
|
|
function drawText(text, xCoord, yCoord) {
|
|
var x = xCoord
|
|
var lineSpace = parseInt(document.getElementById("textShift").value, 10)
|
|
var textSize = parseInt(document.getElementById("textSize").value, 10)
|
|
var y = yCoord + parseInt(document.getElementById("textDown").value, 10)
|
|
var textXShift = 0
|
|
var words = (text).split(" ")
|
|
var line = ""
|
|
var tempTextWidth = textWidth
|
|
for (wordIndex = 0; wordIndex < words.length; wordIndex ++) {
|
|
if (words[wordIndex].includes("<") == false || words[wordIndex].includes(">") == false) {
|
|
//Just a regular old word
|
|
testLine = line + words[wordIndex]
|
|
var lineWidth = card.measureText(testLine).width
|
|
if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
|
|
//Word is too big
|
|
card.fillText(line, x + textXShift, y)
|
|
line = words[wordIndex] + " "
|
|
y += textSize + 1
|
|
textXShift = 0
|
|
} else {
|
|
//Word fits
|
|
line = testLine + " "
|
|
}
|
|
if (wordIndex + 1 == words.length) {
|
|
card.fillText(line, x + textXShift, y)
|
|
}
|
|
} else {
|
|
//Symbols and more!
|
|
var splitWord = words[wordIndex].split("<")
|
|
for (splitIndex = 0; splitIndex < splitWord.length; splitIndex ++) {
|
|
//Write what's there first!
|
|
card.fillText(line, x + textXShift, y)
|
|
textXShift += card.measureText(line).width
|
|
line = ""
|
|
if (splitWord[splitIndex].includes(">")) {
|
|
var plainWord = ""
|
|
var megaSplit = splitWord[splitIndex].split(">")
|
|
//series of if statements to determine an action based off of the given code
|
|
if (megaSplit[0] == "i") {
|
|
canvas.style.letterSpacing = textFontSpacing * 1/3 + "px"
|
|
card.font = textSize + textFont + "i"
|
|
} else if (megaSplit[0] == "/i") {
|
|
canvas.style.letterSpacing = textFontSpacing + "px"
|
|
card.font = "normal " + textSize + textFont
|
|
} else if (megaSplit[0] == "center") {
|
|
card.textAlign="center"
|
|
x = cardWidth / 2
|
|
tempTextWidth = textWidth * 1.5
|
|
} else if (megaSplit[0] == "right") {
|
|
card.textAlign="right"
|
|
tempTextWidth = textWidth * 1.9
|
|
x = cardWidth - xCoord
|
|
} else if (megaSplit[0] == "left") {
|
|
card.textAlign="left"
|
|
tempTextWidth = textWidth
|
|
x = xCoord
|
|
} else if (megaSplit[0] == "line") {
|
|
textXShift = 0
|
|
y += lineSpace + textSize + 1
|
|
} else if (megaSplit[0] == "lineNoSpace") {
|
|
textXShift = 0
|
|
y += textSize + 1
|
|
} else if (megaSplit[0] == "bar") {
|
|
card.drawImage(imgBar, cardWidth / 2 - imgBar.width / 2, y + textSize + lineSpace + 5)
|
|
textXShift = 0
|
|
y += 2 * lineSpace + textSize + 3
|
|
} else if (megaSplit[0] == "chaos") {
|
|
//The chaos symbol (on planar cards) needs to be a bit bigger
|
|
card.drawImage(manaSymbolImages[56], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize, manaSymbolImages[56].height * textSize / manaSymbolImages[56].width)
|
|
textXShift += textSize * 1
|
|
} else if (megaSplit[0] == "plane") {
|
|
//This draws the large chaos symbol found on planar cards and permenantly shifts the text over
|
|
card.drawImage(manaSymbolImages[56], x, y + 6, 48, 42)
|
|
x += 58
|
|
} else {
|
|
//It's an image (mana symbol, tap, etc...)
|
|
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize * 0.77, textSize * 0.77)
|
|
textXShift += textSize * 0.84
|
|
}
|
|
if (megaSplit[1] != "") {
|
|
plainWord = megaSplit[1] + " "
|
|
} else if (splitIndex == splitWord.length - 1) {
|
|
line += " "
|
|
}
|
|
} else {
|
|
plainWord = splitWord[splitIndex]
|
|
}
|
|
if (plainWord != "") {
|
|
//After isolating the plain word, write it!
|
|
testLine = line + plainWord
|
|
var lineWidth = card.measureText(testLine).width
|
|
if (lineWidth + textXShift + x > tempTextWidth && wordIndex > 0) {
|
|
//Word is too big
|
|
card.fillText(line, x + textXShift, y)
|
|
line = plainWord
|
|
y += textSize + 1
|
|
textXShift = 0
|
|
} else {
|
|
//Word fits
|
|
line = testLine
|
|
}
|
|
if (wordIndex + 1 == words.length) {
|
|
card.fillText(line, x + textXShift, y)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//Make things go back to normal :)
|
|
card.textAlign="left"
|
|
}
|
|
//Toggles the visibility of predetermined sections of the input boxes
|
|
function toggleSection(target) {
|
|
for (i = 0; i < target.parentElement.parentElement.childNodes.length; i++) {
|
|
var targetChild = target.parentElement.parentElement.childNodes[i].childNodes[3]
|
|
if (targetChild != undefined && targetChild.classList.contains("shown") == true) {
|
|
targetChild.classList.toggle("shown")
|
|
}
|
|
}
|
|
target.parentElement.childNodes[3].classList.toggle("shown")
|
|
}
|
|
//Resizes anything that may need to be resized
|
|
function resizeThings() {
|
|
if (window.innerWidth > 809 + 300 && cardWidth <= 749) {
|
|
document.getElementById("optionsColumn").style = "width: calc(100% - 769px)"
|
|
} else {
|
|
document.getElementById("optionsColumn").style = "width: 100%"
|
|
}
|
|
var symbolList = ""
|
|
var rowCount = Math.ceil(manaSymbolCode.length / Math.floor((window.innerWidth - 30) / 130))
|
|
for (var i = 0; i < manaSymbolCode.length; i++) {
|
|
if (i%rowCount == 0) {
|
|
symbolList += "<div class='column' style='width: 130px'>"
|
|
}
|
|
symbolList += manaSymbolCode[i] + "\u2192" + "<img src=" + manaSymbolImages[i].src + "></img><br/>"
|
|
if (i%rowCount == rowCount - 1) {
|
|
symbolList += "</div>"
|
|
}
|
|
}
|
|
document.getElementById("symbolList").innerHTML = symbolList
|
|
}
|
|
//Loads the set symbol from the gatherer site
|
|
function loadSetSymbol() {
|
|
imgSetSymbol.cropped = false
|
|
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()
|
|
}
|
|
//Set Image to watermark!!!
|
|
function loadSetSymbolWatermark() {
|
|
imgWatermark.whiteToTransparent = false
|
|
imgWatermark.cropped = false
|
|
imgWatermark.src = "https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=" + document.getElementById("inputWatermarkSetCode").value.toUpperCase() + "&size=large&rarity=C"
|
|
}
|
|
//Loads an image from URL
|
|
function imageURL(input, targetImage) {
|
|
targetImage.cropped = false
|
|
if (targetImage == imgWatermark) {
|
|
imgWatermark.whiteToTransparent = false
|
|
}
|
|
targetImage.src = "https://cors-anywhere.herokuapp.com/" + input.value
|
|
}
|
|
//Randomizes the sample cards at the bottom of the page. Runs it here too
|
|
randomizeSampleCards(7) //The number in here should always be set to the number of sample cards that are available
|
|
function randomizeSampleCards(count) {
|
|
var cardNumbers = []
|
|
while (cardNumbers.length < 3) {
|
|
var randomNumber = Math.floor(Math.random() * count) + 1
|
|
if (cardNumbers.indexOf(randomNumber) > -1) {
|
|
continue
|
|
}
|
|
cardNumbers[cardNumbers.length] = randomNumber
|
|
}
|
|
document.getElementById("sampleCardA").src = "sampleCards/sample-card-" + cardNumbers[0] + ".png"
|
|
document.getElementById("sampleCardB").src = "sampleCards/sample-card-" + cardNumbers[1] + ".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 src="data/scripts/whiteToTransparent.js"></script>
|
|
<html> |