better dark flipped cards
Kyle
@@ -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")
|
||||||
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 100 KiB |
BIN
data/borders/m15/artifact/flippedDark.png
Normal file
|
After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 95 KiB |
BIN
data/borders/m15/black/flippedDark.png
Normal file
|
After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 94 KiB |
BIN
data/borders/m15/blackLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 87 KiB |
BIN
data/borders/m15/blue/flippedDark.png
Normal file
|
After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 104 KiB |
BIN
data/borders/m15/blueLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 74 KiB |
BIN
data/borders/m15/colorless/flippedDark.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 96 KiB |
BIN
data/borders/m15/colorlessLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 104 KiB |
BIN
data/borders/m15/gold/flippedDark.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 104 KiB |
BIN
data/borders/m15/goldLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 103 KiB |
BIN
data/borders/m15/green/flippedDark.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 103 KiB |
BIN
data/borders/m15/greenLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 127 KiB |
BIN
data/borders/m15/red/flippedDark.png
Normal file
|
After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 110 KiB |
BIN
data/borders/m15/redLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 100 KiB |
BIN
data/borders/m15/vehicle/flippedDark.png
Normal file
|
After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 70 KiB |
BIN
data/borders/m15/white/flippedDark.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 99 KiB |
BIN
data/borders/m15/whiteLand/flippedDark.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
184
index.html
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE HTML>
|
<!DOCTYPE html5>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Card Conjurer - Custom Magic Card Maker</title>
|
<title>Card Conjurer - Custom Magic Card Maker</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>
|
||||||
|
<div class="column" id="optionsColumn">
|
||||||
<!--OPTIONS-->
|
<!--OPTIONS-->
|
||||||
<div class="column">
|
<div class="section">
|
||||||
<br/>
|
<div class="toggler" onclick="toggleSection(this)">Card Border</div>
|
||||||
<div style="width: 375px">
|
<div class="togglee shown">
|
||||||
<div class="toggle" onclick="toggleVisibility('cardBorder', this, 'toggleShown', 'hidden', 'shown')">Card Border</div>
|
|
||||||
<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) {
|
||||||
|
if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
|
||||||
|
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(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height)
|
||||||
card.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
|
card.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
|
||||||
}
|
}
|
||||||
if (document.getElementById("checkboxFlipTip").checked == true && flipBorder == true) {
|
if (document.getElementById("checkboxFlipTip").checked == true) {
|
||||||
card.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
|
card.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
|
||||||
card.fillStyle="#666"
|
card.fillStyle="#666"
|
||||||
canvas.style.letterSpacing = "0px"
|
canvas.style.letterSpacing = "0px"
|
||||||
card.font = "28px belerenb"
|
card.font = "28px belerenb"
|
||||||
card.fillText(document.getElementById("inputFlipTip").value, 688 - card.measureText(document.getElementById("inputFlipTip").value).width, 880)
|
card.fillText(document.getElementById("inputFlipTip").value, 688 - card.measureText(document.getElementById("inputFlipTip").value).width, 880)
|
||||||
}
|
}
|
||||||
// if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
|
if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) {
|
||||||
// if (thirdColor == true) {
|
titleRightShift = 50
|
||||||
// drawMask(imgBorderDarkTitle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
|
} else {
|
||||||
// } else {
|
titleRightShift = 0
|
||||||
// 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"
|
||||||
|
if (flipBorder == true && document.getElementById("checkboxFlippedDark").checked == true) {
|
||||||
|
card.fillStyle = "White"
|
||||||
|
} else {
|
||||||
card.fillStyle = "Black"
|
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)
|
}
|
||||||
var elementList = document.getElementsByClassName(targetClass)
|
target.parentElement.childNodes[3].classList.toggle("shown")
|
||||||
for (i = 0; i < elementList.length; i ++) {
|
}
|
||||||
elementList[i].classList.toggle(hiddenClass)
|
|
||||||
elementList[i].classList.toggle(shownClass)
|
//Resizes anything that may need to be resized
|
||||||
|
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"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||