mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
820 lines
30 KiB
HTML
820 lines
30 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Card Conjurer - Custom Magic Card Maker</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> This is no longer required, but possibly could be in the future -->
|
|
<div class="title">Card Conjurer</div>
|
|
</head>
|
|
<!-- <img src="data/background.png"></img> -->
|
|
<body>
|
|
<div class="row">
|
|
<div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div>
|
|
<!--OPTIONS-->
|
|
<div class="column">
|
|
<br/>
|
|
<div style="width: 375px">
|
|
<div class="toggle" onclick="toggleVisibility('cardBorder', this, 'toggleShown', 'hidden', 'shown')">Card Border</div>
|
|
<div class="cardBorder hidden">
|
|
Border
|
|
<select id="borderSelection" onchange="changeBorder()">
|
|
<option value="m15/">M15</option>
|
|
<option value="8th/">8th</option>
|
|
</select>
|
|
<br/>
|
|
Color
|
|
<select id="colorSelection" onchange="updateColor()">
|
|
<option value="white">White</option>
|
|
</select>
|
|
<br/>
|
|
<input type="checkbox" id="checkboxSecondColor" onchange="updateColor()">Second Color <select id="secondColorSelection" onchange="updateColor()"></select></input>
|
|
<br/>
|
|
<input type="checkbox" id="checkboxThirdColor" onchange="updateColor()">Third Color <select id="thirdColorSelection" onchange="updateColor()"></select></input>
|
|
<br/>
|
|
<input type="checkbox" id="creatureCheckbox" onchange="updateColor()">Power/Toughness
|
|
<input id="inputPowerToughness" value="" type="text"></input>
|
|
<br/>
|
|
<input type="checkbox" id="legendaryCheckbox" onchange="updateColor()">Legendary</input>
|
|
<br/>
|
|
<input type="checkbox" id="rareStampCheckbox" onchange="updateColor()">Rare Stamp</input>
|
|
<br/>
|
|
<input type="checkbox" id="silverBorderCheckbox">Silver Border</input>
|
|
<br/>
|
|
<input type="color" id="inputColor"> Border Color</input>
|
|
<br/>
|
|
<input type="checkbox" id="foilCheckbox">Foil</input>
|
|
<br/>
|
|
</div>
|
|
<div class="toggle" onclick="toggleVisibility('nameCostType', this, 'toggleShown', 'hidden', 'shown')">Name, Mana Cost, Type</div>
|
|
<div class="nameCostType hidden">
|
|
Name
|
|
<input id="inputName" type="text"></input>
|
|
<br/>
|
|
Mana Cost
|
|
<input id="inputCost" type="text"></input>
|
|
<br/>
|
|
Type
|
|
<input id="inputType" type="text"></input>
|
|
<br/>
|
|
</div>
|
|
<div class="toggle" onclick="toggleVisibility('rulesText', this, 'toggleShown', 'hidden', 'shown')">Rules Text</div>
|
|
<div class="rulesText hidden">
|
|
Rules Text
|
|
<br/>
|
|
<textarea id="inputText" rows="5" cols="40" style="width: 99%; resize: vertical; height: 100px"></textarea>
|
|
<br/>
|
|
Rules Text Font Size
|
|
<input id="textSize" type="number" min="0" max="100" value="37" step="0.5"></input>
|
|
<br/>
|
|
Pixels Between Paragraphs
|
|
<input id="textShift" type="number" min="0" max="300" value="0"></input>
|
|
<br/>
|
|
Shift All Text Down
|
|
<input id="textDown" type="number" min="0" max="300" value="0"></input>
|
|
<br/>
|
|
</div>
|
|
<div class="toggle" onclick="toggleVisibility('cardArt', this, 'toggleShown', 'hidden', 'shown')">Card Art</div>
|
|
<div class="cardArt hidden">
|
|
Image
|
|
<input type="file" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
|
|
<br/>
|
|
Image Zoom
|
|
<input id="imageSize" type="number" value="100" step="0.1"></input>
|
|
<br/>
|
|
Image Left
|
|
<input id="imageLeft" type="number" value="0" step="1"></input>
|
|
<br/>
|
|
Image Up
|
|
<input id="imageUp" type="number" value="0" step="1"></input>
|
|
<br/>
|
|
</div>
|
|
<div class="toggle" onclick="toggleVisibility('otherInfo', this, 'toggleShown', 'hidden', 'shown')">Other Information</div>
|
|
<div class="otherInfo hidden">
|
|
Other Info
|
|
<input id="inputInfo" value="Not A Real Card" type="text"></input>
|
|
<br/>
|
|
Card Number
|
|
<input id="inputNumber" value="001/001" type="text"></input>
|
|
<br/>
|
|
Rarity
|
|
<input id="inputRarity" value="C" type="text"></input>
|
|
<br/>
|
|
Set Abbreviation
|
|
<input id="inputSet" value="MTG" type="text"></input>
|
|
<br/>
|
|
Language
|
|
<input id="inputLanguage" value="EN" type="text"></input>
|
|
<br/>
|
|
Artist Credit
|
|
<input id="inputArtist" value="" type="text"></input>
|
|
<br/>
|
|
<input id="artistColor" type="checkbox">Make Artist Credit font black</input>
|
|
<br/>
|
|
</div>
|
|
<div class="toggle" onclick="toggleVisibility('setSymbolWatermark', this, 'toggleShown', 'hidden', 'shown')">Set Symbol and Watermark</div>
|
|
<div class="setSymbolWatermark hidden">
|
|
<input type="checkbox" id="setSymbolCheckbox" checked="true">Set Symbol</input>
|
|
<br>
|
|
Set Code
|
|
<input type="text" onchange="loadSetSymbol()" value="HM" id="setSymbolCode"></input>
|
|
<br>
|
|
Set Symbol Rarity
|
|
<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity"></input>
|
|
<br>
|
|
Custom Set Symbol
|
|
<input type="file" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol"></input>
|
|
<br/>
|
|
Scale Set Symbol
|
|
<input id="setSymbolSize" type="number" value="100" step="0.5"></input>
|
|
<br/><br/>
|
|
<input type="checkbox" id="watermarkCheckbox" checked="true"></input>
|
|
Watermark
|
|
<input type="file" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
|
|
<br/>
|
|
Watermark Color
|
|
<select id="watermarkColorSelection">
|
|
<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>
|
|
<br/>
|
|
<input type="checkbox" id="checkboxSecondWatermarkColor"> Second Watermark Color <select id="secondWatermarkColorSelection"></select></input>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text">
|
|
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 class="column" style="width: 100px">
|
|
w - <img id="w"><br/>
|
|
u - <img id="u"><br/>
|
|
b - <img id="b"><br/>
|
|
r - <img id="r"><br/>
|
|
g - <img id="g"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
pw - <img id="pw"><br/>
|
|
pu - <img id="pu"><br/>
|
|
pb - <img id="pb"><br/>
|
|
pr - <img id="pr"><br/>
|
|
pg - <img id="pg"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
2w - <img id="2w"><br/>
|
|
2u - <img id="2u"><br/>
|
|
2b - <img id="2b"><br/>
|
|
2r - <img id="2r"><br/>
|
|
2g - <img id="2g"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
w - <img id="wu"><br/>
|
|
u - <img id="wb"><br/>
|
|
b - <img id="ub"><br/>
|
|
r - <img id="ur"><br/>
|
|
g - <img id="br"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
w - <img id="bg"><br/>
|
|
u - <img id="rg"><br/>
|
|
b - <img id="rw"><br/>
|
|
r - <img id="gw"><br/>
|
|
g - <img id="gu"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
0 - <img id="0"><br/>
|
|
1 - <img id="1"><br/>
|
|
2 - <img id="2"><br/>
|
|
3 - <img id="3"><br/>
|
|
4 - <img id="4"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
5 - <img id="5"><br/>
|
|
6 - <img id="6"><br/>
|
|
7 - <img id="7"><br/>
|
|
8 - <img id="8"><br/>
|
|
9 - <img id="9"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
10 - <img id="10"><br/>
|
|
11 - <img id="11"><br/>
|
|
12 - <img id="12"><br/>
|
|
13 - <img id="13"><br/>
|
|
14 - <img id="14"><br/>
|
|
</div>
|
|
<div class="column" style="width: 100px">
|
|
15 - <img id="15"><br/>
|
|
16 - <img id="16"><br/>
|
|
17 - <img id="17"><br/>
|
|
18 - <img id="18"><br/>
|
|
19 - <img id="19"><br/>
|
|
</div>
|
|
<div class="column" style="width: 120px">
|
|
20 - <img id="20"><br/>
|
|
c - <img id="c"><br/>
|
|
x - <img id="x"><br/>
|
|
t - <img id="t"><br/>
|
|
untap - <img id="untap"><br/>
|
|
</div>
|
|
<div class="column" style="width: 120px">
|
|
snow - <img id="snow"><br/>
|
|
e - <img id="e"><br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
<br/><br/><br/><br/><br/><br/><br/> <!-- Not quite sure why I needed so many linebreaks here! -->
|
|
When selecting the card's color, use 'Second Color' for hybrid cards, and 'Third Color' for non-hybrid two-colored cards.
|
|
</div>
|
|
<div class="info">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the Github page</a>.</div>
|
|
</body>
|
|
|
|
|
|
|
|
<!--CSS-->
|
|
<style>
|
|
@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");
|
|
}
|
|
.title {
|
|
text-align: center;
|
|
color: rgb(128,255,128);
|
|
font-family: belerenbsc;
|
|
font-size: 60px;
|
|
}
|
|
.info {
|
|
text-align: center;
|
|
color: rgb(96,96,96);
|
|
font-family: belerenbsc;
|
|
font-size: 16px;
|
|
}
|
|
.toggle {
|
|
text-align: center;
|
|
color: rgb(255, 255, 255);
|
|
font-family: belerenbsc;
|
|
font-size: 20px;
|
|
width: 100%;
|
|
padding: 5px;
|
|
border: 1px solid rgb(128, 255, 128);
|
|
}
|
|
.toggle:hover {
|
|
color: rgb(128, 255, 128);
|
|
}
|
|
.toggleShown {
|
|
color: rgb(128, 255, 128);
|
|
border-color: rgb(128, 255, 128);
|
|
border-style: solid solid hidden solid;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
font-size: 100px;
|
|
}
|
|
.shown {
|
|
width: 100%;
|
|
padding: 5px;
|
|
border-width: 1px;
|
|
border-color: rgb(128, 255, 128);
|
|
border-style: dashed solid solid solid;
|
|
font-size: 20px;
|
|
color: rgb(255,255,255);
|
|
font-family: belerenbsc;
|
|
}
|
|
.shown * {
|
|
font-family: mplantin;
|
|
font-size: 20px;
|
|
}
|
|
input[type="text"] {
|
|
width: 99%;
|
|
}
|
|
input[type="number"] {
|
|
width: 99%;
|
|
}
|
|
select {
|
|
width: 100%;
|
|
}
|
|
.column {
|
|
float: left;
|
|
}
|
|
.row:after{
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.text {
|
|
padding: 10px;
|
|
text-align: left;
|
|
color: rgb(128, 128, 128);
|
|
font-family: beleren;
|
|
font-size: 25px;
|
|
}
|
|
.text img {
|
|
position: relative;
|
|
top: 8px;
|
|
width: 30px;
|
|
padding: 0px 0px 0px 0px !important;
|
|
margin: 0px;
|
|
}
|
|
body {
|
|
color: rgb(255,255,255);
|
|
font-family: mplantin;
|
|
font-size: 18px;
|
|
}
|
|
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;
|
|
}
|
|
canvas {
|
|
float: left;
|
|
padding: 10px;
|
|
}
|
|
a:link {
|
|
color: rgb(128,128,128);
|
|
}
|
|
|
|
a:visited {
|
|
color: rgb(128,128,128);
|
|
}
|
|
|
|
a:hover {
|
|
color: rgb(128,255,128);
|
|
}
|
|
|
|
a:active {
|
|
color: rgb(128,255,128);
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<script>
|
|
//set up initial variables
|
|
loadScript("data/borders/m15/border.js")
|
|
var borderPath
|
|
var m15Info = true
|
|
//set up canvas
|
|
var canvas = document.getElementById("canvas")
|
|
var card = canvas.getContext("2d")
|
|
//Load dynamic images
|
|
var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "secondBorderCreature", "thirdBorderCreature", "borderLegendary", "secondBorderLegendary", "thirdBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "LegendMultiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask"]
|
|
for (i = 0; i < dynamicImageList.length; i ++) {
|
|
var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1)
|
|
window[imgName] = new Image()
|
|
}
|
|
//Load static images
|
|
var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "artMask"]
|
|
for (i = 0; i < staticImageList.length; i ++) {
|
|
var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
|
|
window[imgName] = new Image()
|
|
window[imgName].src = "data/borders/" + staticImageList[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"]
|
|
var manaSymbolImages = new Array()
|
|
for (var i = 0; i < manaSymbolCode.length; i++) {
|
|
manaSymbolImages[i] = new Image()
|
|
manaSymbolImages[i].src = "data/manaSymbols/" + i + ".png"
|
|
if (document.getElementById(manaSymbolCode[i]) != null) {
|
|
document.getElementById(manaSymbolCode[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)
|
|
changeBorder()
|
|
setInterval(function() {
|
|
//Insures that the corners of the final image are transparent
|
|
card.globalCompositeOperation = "source-over"
|
|
drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, false, false)
|
|
card.globalCompositeOperation = "source-atop"
|
|
//These functions draw everything
|
|
drawPicture()
|
|
drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, imgArtMask, false)
|
|
drawBorder()
|
|
drawSetSymbol()
|
|
drawManaCost()
|
|
drawWatermark()
|
|
writeText()
|
|
//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
|
|
if (m15Info == true) {
|
|
bottomInfoM15()
|
|
}
|
|
if (eighthInfo == true) {
|
|
bottomInfo8th()
|
|
}
|
|
//A shiny foil overlay!
|
|
if(document.getElementById("foilCheckbox").checked == true) {
|
|
card.drawImage(imgFoil, 0, 0, canvas.width, canvas.height)
|
|
}
|
|
//These are for pinpointing coordinates while adjusting values for new border types
|
|
//Vertical Line
|
|
//card.beginPath()
|
|
//card.moveTo(setSymbolRight, 0)
|
|
//card.lineTo(setSymbolRight, 1044)
|
|
//card.stroke()
|
|
//Horizontal Line
|
|
//card.beginPath()
|
|
//card.moveTo(0, setSymbolY)
|
|
//card.lineTo(749, setSymbolY)
|
|
//card.stroke()
|
|
}, 100)
|
|
|
|
|
|
//The two following functions load different types of borders
|
|
function changeBorder() {
|
|
//the loadScript function is located in data/scripts/loadScript.js. It sets values to variables such as set symbol coordinates or title font
|
|
borderPath = "data/borders/" + document.getElementById("borderSelection").value
|
|
loadScript(borderPath + "border.js")
|
|
}
|
|
function updateBorder() {
|
|
//This is a seperate function to insure that the border.js file finishes running before running a few last commands
|
|
document.getElementById("colorSelection").value = "white"
|
|
imgMultiMask.src = borderPath + "multiMask.png"
|
|
imgFrameMask.src = borderPath + "frameMask.png"
|
|
if (m15Info == true) {
|
|
imgLegendFrameMask.src = borderPath + "legendFrameMask.png"
|
|
imgLegendMultiMask.src = borderPath + "legendMultiMask.png"
|
|
imgRareStampMask.src = borderPath + "rareStampMask.png"
|
|
imgBorderMask.src = borderPath + "borderMask.png"
|
|
} else if (eighthInfo == true) {
|
|
imgBorderMask.src = borderPath + "frameMask.png"
|
|
}
|
|
updateColor()
|
|
}
|
|
//Loads the images for the card frame, power toughness box, and rare stamp
|
|
function updateColor() {
|
|
borderPath = "data/borders/" + document.getElementById("borderSelection").value
|
|
imgBorderColor.src = borderPath + document.getElementById("colorSelection").value + "/frame.png"
|
|
imgSecondBorderColor.src = borderPath + document.getElementById("secondColorSelection").value + "/frame.png"
|
|
imgThirdBorderColor.src = borderPath + document.getElementById("thirdColorSelection").value + "/frame.png"
|
|
imgBorderCreature.src = borderPath + document.getElementById("colorSelection").value + "/pt.png"
|
|
imgSecondBorderCreature.src = borderPath + document.getElementById("secondColorSelection").value + "/pt.png"
|
|
imgThirdBorderCreature.src = borderPath + document.getElementById("thirdColorSelection").value + "/pt.png"
|
|
if (m15Info == true) {
|
|
imgBorderLegendary.src = borderPath + document.getElementById("colorSelection").value + "/legendary.png"
|
|
imgSecondBorderLegendary.src = borderPath + document.getElementById("secondColorSelection").value + "/legendary.png"
|
|
imgThirdBorderLegendary.src = borderPath + document.getElementById("thirdColorSelection").value + "/legendary.png"
|
|
imgBorderRareStamp.src = borderPath + document.getElementById("colorSelection").value + "/stamp.png"
|
|
imgSecondBorderRareStamp.src = borderPath + document.getElementById("secondColorSelection").value + "/stamp.png"
|
|
}
|
|
}
|
|
//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) {
|
|
//drawMask(imgArt, 58 - imageLeftShift, 118 - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale, imgArtMask, false, false)
|
|
}
|
|
card.drawImage(imgArt, 58 - imageLeftShift, 118 - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale)
|
|
}
|
|
//Draw Border
|
|
function drawBorder() {
|
|
//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 such that when multiple border colors are used the gradients overlap correctly
|
|
if (document.getElementById("legendaryCheckbox").checked == true && m15Info == true) {
|
|
drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, false, false)
|
|
if (document.getElementById("checkboxSecondColor").checked == true) {
|
|
drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
if (document.getElementById("checkboxThirdColor").checked == true) {
|
|
drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, imgLegendMultiMask)
|
|
}
|
|
if (document.getElementById("silverBorderCheckbox").checked == true) {
|
|
drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgLegendFrameMask, "reverseSecond")
|
|
}
|
|
} else {
|
|
drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
|
|
if (document.getElementById("checkboxSecondColor").checked == true) {
|
|
drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond")
|
|
}
|
|
if (document.getElementById("checkboxThirdColor").checked == true) {
|
|
drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false)
|
|
}
|
|
if (document.getElementById("silverBorderCheckbox").checked == true) {
|
|
drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgFrameMask, "reverseSecond")
|
|
}
|
|
}
|
|
if (document.getElementById("rareStampCheckbox").checked == true && m15Info == true) {
|
|
card.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
|
|
if (document.getElementById("checkboxSecondColor").checked == true) {
|
|
drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
|
|
}
|
|
drawMask(document.getElementById("inputColor").value, 329, rareStampY - 15, 90, 50, imgRareStampMask, false, false)
|
|
card.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
|
|
}
|
|
}
|
|
//Draw Set Symbol
|
|
function drawSetSymbol() {
|
|
//scales the set symbol so that it fits in the correct area and centers it
|
|
if (imgSetSymbol.src != "" && document.getElementById("setSymbolCheckbox").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
|
|
card.drawImage(imgSetSymbol, x, y, width, height)
|
|
}
|
|
}
|
|
//Draw Watermark
|
|
function drawWatermark() {
|
|
//The watermark is centered/scaled just like the set symbol
|
|
if (imgWatermark.src != "" && document.getElementById("watermarkCheckbox").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 = canvas.width / 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 = 0.4
|
|
//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, imgWatermark, imgMultiGradient, false)
|
|
drawMask(document.getElementById("secondWatermarkColorSelection").value, x, y, width, height, imgWatermark, imgMultiGradient, "reverseSecond")
|
|
} else {
|
|
drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, 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"
|
|
card.fillStyle = "Black"
|
|
//Title
|
|
canvas.style.letterSpacing = titleFontSpacing
|
|
card.font = titleFont
|
|
card.fillText(document.getElementById("inputName").value, titleX, titleY)
|
|
//Type
|
|
canvas.style.letterSpacing = typeFontSpacing
|
|
card.font = typeFont
|
|
card.fillText(document.getElementById("inputType").value, typeX, typeY)
|
|
//Rules Text
|
|
canvas.style.letterSpacing = textFontSpacing + "px"
|
|
card.font = document.getElementById("textSize").value + textFont
|
|
var text = document.getElementById("inputText").value
|
|
drawText(text, textX, textY)
|
|
//Power/Toughness
|
|
if (document.getElementById("creatureCheckbox").checked == true) {
|
|
if (document.getElementById("checkboxThirdColor").checked == true) {
|
|
card.drawImage(imgThirdBorderCreature, ptX, ptY, ptWidth, ptHeight)
|
|
} else if (document.getElementById("checkboxSecondColor").checked == true) {
|
|
card.drawImage(imgSecondBorderCreature, ptX, ptY, ptWidth, ptHeight)
|
|
} else {
|
|
card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight)
|
|
}
|
|
canvas.style.letterSpacing = ptFontSpacing
|
|
card.font = ptFont
|
|
powerToughness = document.getElementById("inputPowerToughness").value
|
|
card.fillText(powerToughness, ptTextX - (card.measureText(powerToughness).width / 2), ptTextY)
|
|
}
|
|
}
|
|
//Bottom info on M15 cards
|
|
function bottomInfoM15() {
|
|
if (document.getElementById("artistColor").checked == true) {
|
|
card.fillStyle = "black"
|
|
} else {
|
|
card.fillStyle = "white"
|
|
}
|
|
var shiftInfo = 445
|
|
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, 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 (445 < artistBrushShift + card.measureText(document.getElementById("inputRarity").value).width && document.getElementById("creatureCheckbox").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 (445 < artistBrushShift + 21 + card.measureText(document.getElementById("inputArtist").value).width && document.getElementById("creatureCheckbox").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"
|
|
if (document.getElementById("creatureCheckbox").checked == true) {
|
|
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value, shiftInfo, m15InfoY + 3)
|
|
} else {
|
|
card.fillText("CC \u2014 " + document.getElementById("inputInfo").value, shiftInfo, m15InfoY - 17)
|
|
}
|
|
}
|
|
}
|
|
//Bottom info on 8th edition cards
|
|
function bottomInfo8th() {
|
|
if (document.getElementById("artistColor").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 = 749/2
|
|
tempTextWidth = textWidth * 1.5
|
|
} else if (megaSplit[0] == "right") {
|
|
card.textAlign="right"
|
|
tempTextWidth = textWidth * 1.9
|
|
x = 749 - 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 {
|
|
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.19, 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)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Toggles the visibility of predetermined sections of the input boxes
|
|
function toggleVisibility(targetClass, self, selfClass, hiddenClass, shownClass) {
|
|
var alreadyShown = document.getElementsByClassName(selfClass)
|
|
if (alreadyShown.length >= 1 && alreadyShown[0] != self) {
|
|
alreadyShown[0].click()
|
|
}
|
|
self.classList.toggle(selfClass)
|
|
var elementList = document.getElementsByClassName(targetClass)
|
|
for (i = 0; i < elementList.length; i ++) {
|
|
elementList[i].classList.toggle(hiddenClass)
|
|
elementList[i].classList.toggle(shownClass)
|
|
}
|
|
}
|
|
|
|
//runs the autocrop function for the chosen set symbol
|
|
function loadSetSymbol() {
|
|
imgSetSymbol.src = "https://raw.githubusercontent.com/ImKyle4815/MTG-Set-Symbols/master/setSymbols/" + document.getElementById("setSymbolCode").value.toUpperCase() + "_" + document.getElementById("setSymbolRarity").value.toUpperCase() + ".png"
|
|
}
|
|
</script>
|
|
<html>
|