Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

Merge pull request #7 from ImKyle4815/test

Browse Source 
better dark flipped cards
This commit is contained in:
Kyle
2018-10-26 19:55:29 -07:00
committed by GitHub
parent 67e2e5a88a 6026bfd739
commit aa46de59d7
50 changed files with 120 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
data/borders/defaultBorder.js
View File

@@ -7,6 +7,7 @@ var nyxBorder = false
var miracleBorder = false var miracleBorder = false
var stampBorder = false var stampBorder = false
var flipBorder = false var flipBorder = false
titleRightShift = 0
//Loads the correct border data //Loads the correct border data
borderPath = "data/borders/" + document.getElementById("borderSelection").value borderPath = "data/borders/" + document.getElementById("borderSelection").value
loadScript(borderPath + "border.js") loadScript(borderPath + "border.js")

BIN
data/borders/m15/artifact/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
data/borders/m15/artifact/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

BIN
data/borders/m15/artifact/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
data/borders/m15/black/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
data/borders/m15/black/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
data/borders/m15/black/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
data/borders/m15/blackLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
data/borders/m15/blackLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 94 KiB

BIN
data/borders/m15/blackLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
data/borders/m15/blue/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
data/borders/m15/blue/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 87 KiB

BIN
data/borders/m15/blue/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
data/borders/m15/blueLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
data/borders/m15/blueLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
data/borders/m15/blueLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
data/borders/m15/colorless/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
data/borders/m15/colorless/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
data/borders/m15/colorless/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
data/borders/m15/colorlessLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
data/borders/m15/colorlessLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 96 KiB

BIN
data/borders/m15/colorlessLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
data/borders/m15/gold/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
data/borders/m15/gold/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
data/borders/m15/gold/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
data/borders/m15/goldLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
data/borders/m15/goldLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
data/borders/m15/goldLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
data/borders/m15/green/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
data/borders/m15/green/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 103 KiB

BIN
data/borders/m15/green/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
data/borders/m15/greenLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
data/borders/m15/greenLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 103 KiB

BIN
data/borders/m15/greenLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
data/borders/m15/red/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
data/borders/m15/red/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
data/borders/m15/red/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
data/borders/m15/redLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
data/borders/m15/redLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
data/borders/m15/redLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
data/borders/m15/vehicle/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
data/borders/m15/vehicle/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

BIN
data/borders/m15/vehicle/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
data/borders/m15/white/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
data/borders/m15/white/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
data/borders/m15/white/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
data/borders/m15/whiteLand/darkTitle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
data/borders/m15/whiteLand/darkframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
data/borders/m15/whiteLand/flippedDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

204
index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE HTML> <!DOCTYPE html5>
<html> <html>
<head> <head>
<title>Card Conjurer - Custom Magic Card Maker (v1.3.1)</title> <title>Card Conjurer - Custom Magic Card Maker (v1.3.1)</title>
@@ -10,15 +10,14 @@
<div class="title">Card Conjurer</div> <div class="title">Card Conjurer</div>
</head> </head>
<!-- <img src="data/background.png"></img> --> <!-- <img src="data/background.png"></img> -->
<body> <body onresize="resizeThings()" onload="resizeThings()">
<div class="row"> <div class="row">
<div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div> <div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div>
<!--OPTIONS--> <div class="column" id="optionsColumn">
<div class="column"> <!--OPTIONS-->
<br/> <div class="section">
<div style="width: 375px"> <div class="toggler" onclick="toggleSection(this)">Card Border</div>
<div class="toggle" onclick="toggleVisibility('cardBorder', this, 'toggleShown', 'hidden', 'shown')">Card Border</div> <div class="togglee shown">
<div class="cardBorder hidden">
Border Border
<select id="borderSelection" onchange="changeBorder()"> <select id="borderSelection" onchange="changeBorder()">
<option value="m15/">M15</option> <option value="m15/">M15</option>
@@ -36,7 +35,11 @@
<br/> <br/>
<input type="checkbox" id="checkboxCreature" onchange="updateColor()">Power/Toughness <input type="checkbox" id="checkboxCreature" onchange="updateColor()">Power/Toughness
<input id="inputPowerToughness" value="" type="text"></input> <input id="inputPowerToughness" value="" type="text"></input>
<br/> </div>
</div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
<div class="togglee">
<input type="checkbox" id="checkboxLegendary" onchange="updateColor()">Legendary</input> <input type="checkbox" id="checkboxLegendary" onchange="updateColor()">Legendary</input>
<br/> <br/>
<input type="checkbox" id="checkboxNyx" onchange="updateColor()">Nyx</input> <input type="checkbox" id="checkboxNyx" onchange="updateColor()">Nyx</input>
@@ -65,10 +68,11 @@
<input type="color" id="inputColor"> Border Color</input> <input type="color" id="inputColor"> Border Color</input>
<br/> <br/>
<input type="checkbox" id="checkboxFoil">Foil</input> <input type="checkbox" id="checkboxFoil">Foil</input>
<br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('nameCostType', this, 'toggleShown', 'hidden', 'shown')">Name, Mana Cost, Type</div> </div>
<div class="nameCostType hidden"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Name, Mana Cost, Type</div>
<div class="togglee">
Name Name
<input id="inputName" type="text"></input> <input id="inputName" type="text"></input>
<br/> <br/>
@@ -77,10 +81,11 @@
<br/> <br/>
Type Type
<input id="inputType" type="text"></input> <input id="inputType" type="text"></input>
<br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('rulesText', this, 'toggleShown', 'hidden', 'shown')">Rules Text</div> </div>
<div class="rulesText hidden"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Rules Text</div>
<div class="togglee">
Rules Text Rules Text
<br/> <br/>
<textarea id="inputText" rows="5" cols="40" style="width: 99%; resize: vertical; height: 100px"></textarea> <textarea id="inputText" rows="5" cols="40" style="width: 99%; resize: vertical; height: 100px"></textarea>
@@ -93,10 +98,11 @@
<br/> <br/>
Shift All Text Down Shift All Text Down
<input id="textDown" type="number" min="0" max="300" value="0"></input> <input id="textDown" type="number" min="0" max="300" value="0"></input>
<br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('cardArt', this, 'toggleShown', 'hidden', 'shown')">Card Art</div> </div>
<div class="cardArt hidden"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Art</div>
<div class="togglee">
Image Image
<input type="file" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input> <input type="file" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture"></input>
<br/> <br/>
@@ -108,10 +114,11 @@
<br/> <br/>
Image Up Image Up
<input id="imageUp" type="number" value="0" step="1"></input> <input id="imageUp" type="number" value="0" step="1"></input>
<br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('otherInfo', this, 'toggleShown', 'hidden', 'shown')">Other Information</div> </div>
<div class="otherInfo hidden"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Bottom Information</div>
<div class="togglee">
Other Info Other Info
<input id="inputInfo" value="Not A Real Card" type="text"></input> <input id="inputInfo" value="Not A Real Card" type="text"></input>
<br/> <br/>
@@ -131,10 +138,11 @@
<input id="inputArtist" value="" type="text"></input> <input id="inputArtist" value="" type="text"></input>
<br/> <br/>
<input id="checkboxArtistColor" type="checkbox">Make Artist Credit font black</input> <input id="checkboxArtistColor" type="checkbox">Make Artist Credit font black</input>
<br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('setSymbolWatermark', this, 'toggleShown', 'hidden', 'shown')">Set Symbol and Watermark</div> </div>
<div class="setSymbolWatermark hidden"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Set Symbol and Watermark</div>
<div class="togglee">
<input type="checkbox" id="checkboxSetSymbol" checked="true">Set Symbol</input> <input type="checkbox" id="checkboxSetSymbol" checked="true">Set Symbol</input>
<br> <br>
Set Code Set Code
@@ -151,9 +159,11 @@
<br/><br/> <br/><br/>
<input type="checkbox" id="checkboxWatermark" checked="true"></input> <input type="checkbox" id="checkboxWatermark" checked="true"></input>
Watermark Watermark
<br/>
<input type="file" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input> <input type="file" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<br/> <br/>
Watermark Color Watermark Color
<br/>
<select id="watermarkColorSelection"> <select id="watermarkColorSelection">
<option value="#afa360">White</option> <option value="#afa360">White</option>
<option value="#04527c">Blue</option> <option value="#04527c">Blue</option>
@@ -164,11 +174,20 @@
<option value="#616b72">Artifact/Colorless</option> <option value="#616b72">Artifact/Colorless</option>
</select> </select>
<br/> <br/>
<input type="checkbox" id="checkboxSecondWatermarkColor"> Second Watermark Color <select id="secondWatermarkColorSelection"></select></input> <input type="checkbox" id="checkboxSecondWatermarkColor"> Second Watermark Color
<br/> <br/>
<select id="secondWatermarkColorSelection"></select></input>
</div> </div>
<div class="toggle" onclick="downloadCardImage()" id="downloadCardImage" href="" download="card.jpg">Download</div>
</div> </div>
<div class="section">
<div class="toggler" onclick="toggleSection(this)">Download/Options</div>
<div class="togglee">
Frame Rate
<input type="number" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)"></input>
<div onclick="downloadCardImage()" id="downloadCardImage" href="" download="card.jpg">Download</div>
</div>
</div>
<!--END-->
</div> </div>
</div> </div>
<div class="row text"> <div class="row text">
@@ -304,29 +323,24 @@
font-family: belerenbsc; font-family: belerenbsc;
font-size: 16px; font-size: 16px;
} }
.toggle { .section {
border: 1px solid rgb(128, 255, 128);
background-color: rgba(0, 0, 0, 0.5);
}
.toggler {
text-align: center; text-align: center;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-family: belerenbsc; font-family: belerenbsc;
font-size: 20px; font-size: 20px;
width: 100%; width: 100%;
padding: 5px; padding: 5px;
border: 1px solid rgb(128, 255, 128);
} }
.toggle:hover { .toggler:hover {
color: rgb(128, 255, 128); color: rgb(128, 255, 128);
} }
.toggleShown { .togglee {
color: rgb(128, 255, 128); width: calc(100% - 12px);
border-color: rgb(128, 255, 128);
border-style: solid solid hidden solid;
}
.hidden {
display: none;
font-size: 100px;
}
.shown {
width: 100%;
padding: 5px; padding: 5px;
border-width: 1px; border-width: 1px;
border-color: rgb(128, 255, 128); border-color: rgb(128, 255, 128);
@@ -334,6 +348,10 @@
font-size: 20px; font-size: 20px;
color: rgb(255,255,255); color: rgb(255,255,255);
font-family: belerenbsc; font-family: belerenbsc;
display: none;
}
.shown {
display: block;
} }
.shown * { .shown * {
font-family: mplantin; font-family: mplantin;
@@ -405,7 +423,7 @@ a:active {
<script> <script crossorigin="anonymous">
//Load the initial border (m15) //Load the initial border (m15)
changeBorder() changeBorder()
//set up initial variables //set up initial variables
@@ -417,7 +435,7 @@ var titleRightShift = 0
var canvas = document.getElementById("canvas") var canvas = document.getElementById("canvas")
var card = canvas.getContext("2d") var card = canvas.getContext("2d")
//Load dynamic images //Load dynamic images
var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderDarkTitle", "secondBorderDarkTitle"] var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark"]
for (i = 0; i < dynamicImageList.length; i ++) { for (i = 0; i < dynamicImageList.length; i ++) {
var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1) var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1)
window[imgName] = new Image() window[imgName] = new Image()
@@ -427,6 +445,7 @@ var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient",
for (i = 0; i < staticImageList.length; i ++) { for (i = 0; i < staticImageList.length; i ++) {
var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1) var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
window[imgName] = new Image() window[imgName] = new Image()
//window[imgName].crossOrigin = "use-credentials"
window[imgName].src = "data/borders/" + staticImageList[i] + ".png" window[imgName].src = "data/borders/" + staticImageList[i] + ".png"
} }
//Mana symbol Array setup //Mana symbol Array setup
@@ -445,7 +464,7 @@ loadSetSymbol()
document.getElementById("secondWatermarkColorSelection").innerHTML = document.getElementById("watermarkColorSelection").innerHTML document.getElementById("secondWatermarkColorSelection").innerHTML = document.getElementById("watermarkColorSelection").innerHTML
//Runs ten times every second (main loop) //Runs ten times every second (main loop)
setInterval(function() { function cardClock() {
//Insures that the corners of the final image are transparent //Insures that the corners of the final image are transparent
card.globalCompositeOperation = "source-over" card.globalCompositeOperation = "source-over"
drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, false, false) drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, false, false)
@@ -484,7 +503,8 @@ setInterval(function() {
//card.moveTo(0, setSymbolY) //card.moveTo(0, setSymbolY)
//card.lineTo(749, setSymbolY) //card.lineTo(749, setSymbolY)
//card.stroke() //card.stroke()
}, 100) }
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
//The two following functions load different types of borders //The two following functions load different types of borders
@@ -520,9 +540,9 @@ function updateColor() {
} else { } else {
altframe = "" altframe = ""
} }
imgBorderColor.src = firstColorPath + "/" + altframe + "frame.png" imgBorderColor.src = firstColorPath + "/frame.png"
imgSecondBorderColor.src = secondColorPath + "/" + altframe + "frame.png" imgSecondBorderColor.src = secondColorPath + "/frame.png"
imgThirdBorderColor.src = thirdColorPath + "/" + altframe + "frame.png" imgThirdBorderColor.src = thirdColorPath + "/frame.png"
if (thirdColor == true) { if (thirdColor == true) {
imgBorderCreature.src = thirdColorPath + "/" + altframe + "pt.png" imgBorderCreature.src = thirdColorPath + "/" + altframe + "pt.png"
} else if (secondColor == true) { } else if (secondColor == true) {
@@ -556,23 +576,18 @@ function updateColor() {
} }
if (flipBorder == true) { if (flipBorder == true) {
if (thirdColor == true) { if (thirdColor == true) {
imgBorderDarkTitle.src = thirdColorPath + "/darkTitle.png" imgBorderFlippedDark.src = thirdColorPath + "/flippedDark.png"
} else { } else {
imgBorderDarkTitle.src = firstColorPath + "/darkTitle.png" imgBorderFlippedDark.src = firstColorPath + "/flippedDark.png"
if (secondColor == true) { imgSecondBorderFlippedDark.src = secondColorPath + "/flippedDark.png"
imgSecondBorderDarkTitle.src = secondColorPath + "/darkTitle.png"
}
} }
if (secondColor == true) { if (secondColor == true) {
imgBorderFlipTip.src = secondColorPath + "/flipTip.png" imgBorderFlipTip.src = secondColorPath + "/flipTip.png"
} else { } else {
imgBorderFlipTip.src = firstColorPath + "/flipTip.png" imgBorderFlipTip.src = firstColorPath + "/flipTip.png"
} }
titleRightShift = 50
imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png" imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value
} else {
titleRightShift = 0
} }
} }
//Draw Picture //Draw Picture
@@ -649,27 +664,34 @@ function drawBorder() {
} }
} }
//FLIP CARDS //FLIP CARDS
if (document.getElementById("checkboxFlipIcon").checked == true && flipBorder == true) { if (flipBorder == true) {
card.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height) if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
card.drawImage(imgBorderFlipIcon, 39, 51, 60, 60) if (thirdColor == true) {
drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
} else {
drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
if (secondColor == true) {
drawMask(imgSecondBorderFlippedDark, 0, 0, canvas.width, canvas.height, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
}
}
}
if (document.getElementById("checkboxFlipIcon").checked == true) {
card.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height)
card.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
}
if (document.getElementById("checkboxFlipTip").checked == true) {
card.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
card.fillStyle="#666"
canvas.style.letterSpacing = "0px"
card.font = "28px belerenb"
card.fillText(document.getElementById("inputFlipTip").value, 688 - card.measureText(document.getElementById("inputFlipTip").value).width, 880)
}
if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) {
titleRightShift = 50
} else {
titleRightShift = 0
}
} }
if (document.getElementById("checkboxFlipTip").checked == true && flipBorder == true) {
card.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
card.fillStyle="#666"
canvas.style.letterSpacing = "0px"
card.font = "28px belerenb"
card.fillText(document.getElementById("inputFlipTip").value, 688 - card.measureText(document.getElementById("inputFlipTip").value).width, 880)
}
// if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
// if (thirdColor == true) {
// drawMask(imgBorderDarkTitle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
// } else {
// drawMask(imgBorderDarkTitle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
// if (secondColor == true) {
// drawMask(imgSecondBorderDarkTitle, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond")
// }
// }
// }
} }
//Draw Set Symbol //Draw Set Symbol
function drawSetSymbol() { function drawSetSymbol() {
@@ -733,7 +755,11 @@ function writeText() {
//Draws the entered text onto the card, also draws the power/toughness box if necessary //Draws the entered text onto the card, also draws the power/toughness box if necessary
//All use these: //All use these:
card.textBaseline = "top" card.textBaseline = "top"
card.fillStyle = "Black" if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
card.fillStyle = "White"
} else {
card.fillStyle = "Black"
}
//Title //Title
canvas.style.letterSpacing = titleFontSpacing canvas.style.letterSpacing = titleFontSpacing
card.font = titleFont card.font = titleFont
@@ -742,6 +768,7 @@ function writeText() {
canvas.style.letterSpacing = typeFontSpacing canvas.style.letterSpacing = typeFontSpacing
card.font = typeFont card.font = typeFont
card.fillText(document.getElementById("inputType").value, typeX, typeY) card.fillText(document.getElementById("inputType").value, typeX, typeY)
card.fillStyle = "Black"
//Rules Text //Rules Text
canvas.style.letterSpacing = textFontSpacing + "px" canvas.style.letterSpacing = textFontSpacing + "px"
card.font = document.getElementById("textSize").value + textFont card.font = document.getElementById("textSize").value + textFont
@@ -920,21 +947,28 @@ function drawText(text, xCoord, yCoord) {
} }
//Toggles the visibility of predetermined sections of the input boxes //Toggles the visibility of predetermined sections of the input boxes
function toggleVisibility(targetClass, self, selfClass, hiddenClass, shownClass) { function toggleSection(target) {
var alreadyShown = document.getElementsByClassName(selfClass) for (i = 0; i < target.parentElement.parentElement.childNodes.length; i++) {
if (alreadyShown.length >= 1 && alreadyShown[0] != self) { var targetChild = target.parentElement.parentElement.childNodes[i].childNodes[3]
alreadyShown[0].click() if (targetChild != undefined && targetChild.classList.contains("shown") == true) {
targetChild.classList.toggle("shown")
}
} }
self.classList.toggle(selfClass) target.parentElement.childNodes[3].classList.toggle("shown")
var elementList = document.getElementsByClassName(targetClass) }
for (i = 0; i < elementList.length; i ++) {
elementList[i].classList.toggle(hiddenClass) //Resizes anything that may need to be resized
elementList[i].classList.toggle(shownClass) function resizeThings() {
if (window.innerWidth > 1100) {
document.getElementById("optionsColumn").style = "width: calc(100% - 777px)"
} else {
document.getElementById("optionsColumn").style = "width: 100%"
} }
} }
//runs the autocrop function for the chosen set symbol //runs the autocrop function for the chosen set symbol
function loadSetSymbol() { function loadSetSymbol() {
imgSetSymbol.crossOrigin = "anonymous"
imgSetSymbol.src = "https://raw.githubusercontent.com/ImKyle4815/MTG-Set-Symbols/master/setSymbols/" + document.getElementById("setSymbolCode").value.toUpperCase() + "_" + document.getElementById("setSymbolRarity").value.toUpperCase() + ".png" imgSetSymbol.src = "https://raw.githubusercontent.com/ImKyle4815/MTG-Set-Symbols/master/setSymbols/" + document.getElementById("setSymbolCode").value.toUpperCase() + "_" + document.getElementById("setSymbolRarity").value.toUpperCase() + ".png"
} }