This commit is contained in:
Kyle Burton
2018-08-25 17:58:05 -07:00
parent b718005a83
commit bc614b610c
178 changed files with 917 additions and 0 deletions

BIN
CardForge/.DS_Store vendored Normal file

Binary file not shown.

767
CardForge/CardForge.html Normal file
View File

@@ -0,0 +1,767 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CardForge - 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>
<div class="title">CardForge</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="updateBorder()">
<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="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"></input>
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/CardForge" 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", "artMask", "setSymbol", "watermark", "multiMask", "LegendMultiMask", "legendSilver"]
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", "silverBorder", "borderEdge"]
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"
//alert(document.getElementById(manaSymbolImages[i]))
if (document.getElementById(manaSymbolCode[i]) != null) {
document.getElementById(manaSymbolCode[i]).src = "data/manaSymbols/" + i + ".png"
}
}
//fill second watermark dropdown menu
document.getElementById("secondWatermarkColorSelection").innerHTML = document.getElementById("watermarkColorSelection").innerHTML
//Runs ten times every second (main loop)
updateBorder()
setInterval(function() {
//Insures that the corners of the final image are transparent
card.globalCompositeOperation = "source-over"
card.drawImage(imgCardMask, 0, 0, 749, 1044)
card.globalCompositeOperation = "source-atop"
//These functions draw everything
drawPicture()
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)
//Loads different types of borders
function updateBorder() {
//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/" + document.getElementById("borderSelection").value + "border.js")
document.getElementById("colorSelection").value = "white"
imgArtMask.src = "data/borders/" + document.getElementById("borderSelection").value + "artMask.png"
imgMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "multiMask.png"
imgLegendMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "legendMultiMask.png"
imgLegendSilver.src = "data/borders/" + document.getElementById("borderSelection").value + "legendSilver.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)
card.drawImage(imgArt, 58 - imageLeftShift, 119 - 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
drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, imgArtMask, false, false)
if (document.getElementById("checkboxSecondColor").checked == true) {
drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, imgArtMask, imgMultiGradient, "reverseSecond")
}
if (document.getElementById("checkboxThirdColor").checked == true) {
drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgMultiMask, imgArtMask, false)
}
if (m15Info == true) {
if (document.getElementById("legendaryCheckbox").checked == true && imgBorderLegendary.width != 0) {
card.drawImage(imgBorderLegendary, 0, 0, canvas.width, canvas.height)
if (document.getElementById("checkboxSecondColor").checked == true && imgBorderLegendary.width != 0) {
drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, imgArtMask, imgMultiGradient, "reverseSecond")
}
if (document.getElementById("checkboxThirdColor").checked == true) {
drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgLegendMultiMask, imgArtMask, false)
}
}
if (document.getElementById("rareStampCheckbox").checked == true) {
if (imgBorderRareStamp.width != 0) {
card.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
if (document.getElementById("checkboxSecondColor").checked == true) {
drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
}
}
card.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
}
}
if(document.getElementById("legendaryCheckbox").checked == true) {
card.drawImage(imgBorderEdge, 0, 0, canvas.width, canvas.height)
if (document.getElementById("silverBorderCheckbox").checked == true) {
drawMask(imgLegendSilver, 0, 0, canvas.width, canvas.height, imgCardMask, imgLegendMultiMask, false)
}
} else {
card.drawImage(imgBorderEdge, 0, 0, canvas.width, canvas.height)
if (document.getElementById("silverBorderCheckbox").checked == true) {
card.drawImage(imgSilverBorder, 0, 0, canvas.width, canvas.height)
}
}
}
//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
rulesText(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() {
var shiftInfo = 445
card.fillStyle = "white"
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
card.drawImage(imgArtistBrush, artistBrushShift, m15InfoY + 5, 21, 13)
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 "CF —" 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("CF \u2014 " + document.getElementById("inputInfo").value, shiftInfo, m15InfoY + 3)
} else {
card.fillText("CF \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("CF \u2014 " + document.getElementById("inputInfo").value + " " + document.getElementById("inputNumber").value, 62, eighthInfoY + 31)
}
//Write rules and flavor text
function rulesText(text, x, y) {
//This uses a long series of if/else statements to process the entered text (after its split into an array). It writes the rules text line by line taking into accounts symbols, line breaks, and italicized text
var paragraphShift = parseInt(document.getElementById("textShift").value, 10)
var paragraphDown = parseInt(document.getElementById("textDown").value, 10)
var words = (text + " ").split(" ")
var testLine = ""
var line = ""
var xShift = 0
var textSize = parseInt(document.getElementById("textSize").value)
y += paragraphDown
for(var n = 0; n < words.length; n++) {
//Special characters/fonts
if (words[n] == "<i>") {
card.fillText(line, x + xShift, y)
xShift += card.measureText(line).width
line = ""
canvas.style.letterSpacing = textFontSpacing * 1/3 + "px"
card.font = textSize + textFont + "i"
} else if (words[n] == "</i>") {
card.fillText(line, x + xShift, y)
xShift += card.measureText(line).width
line = ""
canvas.style.letterSpacing = textFontSpacing + "px"
card.font = "normal " + textSize + textFont
} else if (words[n] == "<line>") {
card.fillText(line, x + xShift, y)
line = ""
y += textSize + 1 + paragraphShift
xShift = 0
} else if (words[n] == "<lineNoSpace>") {
card.fillText(line, x + xShift, y)
line = ""
y += textSize + 1
xShift = 0
} else if (words[n].includes("<") && words[n].includes(">")) {
var splitWord = words[n].split("<")
aMax = words[n].length
for (var a = 0; a < aMax; a++) {
var extraSpace
if (words[n].charAt(0) == "<") {
card.fillText(line, x + xShift, y)
xShift += card.measureText(line).width
line = ""
if (extraSpace == true) {
xShift += 2
}
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(words[n].substring(words[n].indexOf("<") + 1, words[n].indexOf(">")))], x + xShift + textSize * 0.054, y + textSize * 0.22 - 1, textSize * 0.77, textSize * 0.77)
xShift += textSize * 0.84
words[n] = words[n].slice(words[n].indexOf(">") + 1, words[n].length)
extraSpace = true
} else {
line += words[n].charAt(0)
words[n] = words[n].slice(1, words[n].length)
extraSpace = false
}
if (a == aMax -1) {
line += " "
}
}
} else {
//REAL WORD
testLine = line + words[n]
var lineSize = card.measureText(testLine).width
if (lineSize + xShift + x > textWidth && n > 0) {
//Word is too big
card.fillText(line, x + xShift, y)
line = words[n] + " "
y += textSize + 1
xShift = 0
} else {
//Word fits
line = testLine + " "
if (n + 1 == words.length) {
card.fillText(line, x + xShift, 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)
}
}
</script>
<html>

BIN
CardForge/data/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -0,0 +1,48 @@
var titleFont = "44px matrixb"
var titleFontSpacing = "0.5px"
var titleX = 66
var titleY = 62
var manaCostRadius = 16.5
var manaCostX = 652
var manaCostY = 68
var typeFont = "37.5px matrixb"
var typeFontSpacing = "0px"
var typeX = 74
var typeY = 598
var textFont = "px mplantin"
var textFontSpacing = 1.2
var textX = 76
var textY = 656
var textWidth = 680
var ptFont = "bold 48px matrix"
var ptFontSpacing = "0.3px"
var ptTextX = 626
var ptTextY = 936
var ptX = 541
var ptY = 920.5
var ptWidth = 162
var ptHeight = 84
var eighthInfo = true
var eighthInfoY = 956
var m15Info = false
var m15InfoY = 992
var setSymbolY = 615
var setSymbolRight = 689
var setSymbolWidth = 77
var setSymbolHeight = 44
var watermarkWidth = 520
var watermarkHeight = 208
var watermarkY = 796
var rareStampY = 958
loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact,oldArtifact-Old Artifact,oldGold-Old Gold,oldGoldLand-Old Gold Land")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 857 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,48 @@
var titleFont = "40px belerenb"
var titleFontSpacing = "0.15px"
var titleX = 62
var titleY = 56
var manaCostRadius = 17.5
var manaCostX = 657
var manaCostY = 59
var typeFont = "33.5px belerenb"
var typeFontSpacing = "0.05px"
var typeX = 62
var typeY = 595
var textFont = "px mplantin"
var textFontSpacing = 1.3
var textX = 66
var textY = 656
var textWidth = 682
var ptFont = "39px belerenb"
var ptFontSpacing = "0.3px"
var ptTextX = 645
var ptTextY = 936
var ptX = 571
var ptY = 929
var ptWidth = 137
var ptHeight = 75
var eighthInfo = false
var eighthInfoY = 992
var m15Info = true
var m15InfoY = 993
var setSymbolY = 616
var setSymbolRight = 693
var setSymbolWidth = 77
var setSymbolHeight = 44
var watermarkWidth = 520
var watermarkHeight = 250
var watermarkY = 805
var rareStampY = 958
loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact")
document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 473 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Some files were not shown because too many files have changed in this diff Show More