GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed transparency

Browse Source
This commit is contained in:
Kyle
2018-11-04 11:37:33 -08:00
parent e49db11c3b
commit ab58456a4a
1 changed files with 94 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
index.html
View File

@@ -37,8 +37,8 @@
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" /> <input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" /> <label for="checkboxSecondColor" />
<div>Second Color</div> <div>Second Color</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select> <select id="secondColorSelection" onchange="updateBorder()"></select>
@@ -46,8 +46,8 @@
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" /> <input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" /> <label for="checkboxThirdColor" />
<div>Third Color</div> <div>Third Color</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select id="thirdColorSelection" onchange="updateBorder()"></select> <select id="thirdColorSelection" onchange="updateBorder()"></select>
@@ -55,8 +55,8 @@
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxCreature" /> <input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" /> <label for="checkboxCreature" />
<div>Power/Toughness</div> <div>Power/Toughness</div>
</div> </div>
<input id="inputPowerToughness" class="input" value="" type="text"></input> <input id="inputPowerToughness" class="input" value="" type="text"></input>
</div> </div>
@@ -66,28 +66,28 @@
<div class="togglee"> <div class="togglee">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" /> <input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
<label for="checkboxLegendary" /> <label for="checkboxLegendary" />
<div>Legendary</div> <div>Legendary</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" /> <input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
<label for="checkboxNyx" /> <label for="checkboxNyx" />
<div>Nyx</div> <div>Nyx</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" /> <input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
<label for="checkboxMiracle" /> <label for="checkboxMiracle" />
<div>Miracle</div> <div>Miracle</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" /> <input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
<label for="checkboxRareStamp" /> <label for="checkboxRareStamp" />
<div>Rare Stamp</div> <div>Rare Stamp</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" /> <input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
<label for="checkboxFlipIcon" /> <label for="checkboxFlipIcon" />
<div>Flip Icon</div> <div>Flip Icon</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select id="inputFlipIcon" onchange="updateBorder()"> <select id="inputFlipIcon" onchange="updateBorder()">
@@ -102,30 +102,30 @@
</span> </span>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" /> <input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
<label for="checkboxFlipTip" /> <label for="checkboxFlipTip" />
<div>Flip Tip</div> <div>Flip Tip</div>
</div> </div>
<input id="inputFlipTip" value="" type="text" class="input"></input> <input id="inputFlipTip" value="" type="text" class="input"></input>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" /> <input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
<label for="checkboxFlippedDark" /> <label for="checkboxFlippedDark" />
<div>Flipped (Darker)</div> <div>Flipped (Darker)</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" /> <input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" />
<label for="checkboxSilverBorder" /> <label for="checkboxSilverBorder" />
<div>Silver Border</div> <div>Silver Border</div>
</div> </div>
<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input> <input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxFoil" /> <input type="checkbox" id="checkboxFoil" />
<label for="checkboxFoil" /> <label for="checkboxFoil" />
<div>Foil</div> <div>Foil</div>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" /> <input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" />
<label for="checkboxIdentity" /> <label for="checkboxIdentity" />
<div>Color Identity</div> <div>Color Identity</div>
</div> </div>
<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input> <input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
</div> </div>
@@ -201,8 +201,8 @@
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" /> <input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" /> <label for="checkboxArtistColor" />
<div>Make Artist Credit font black</div> <div>Make Artist Credit font black</div>
</div> </div>
</div> </div>
</div> </div>
@@ -211,8 +211,8 @@
<div class="togglee"> <div class="togglee">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSetSymbol" checked="true" /> <input type="checkbox" id="checkboxSetSymbol" checked="true" />
<label for="checkboxSetSymbol" /> <label for="checkboxSetSymbol" />
<div>Set Symbol</div> <div>Set Symbol</div>
</div> </div>
Set Code Set Code
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input> <input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
@@ -230,8 +230,8 @@
<br/><br/> <br/><br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxWatermark" checked="true" /> <input type="checkbox" id="checkboxWatermark" checked="true" />
<label for="checkboxWatermark" /> <label for="checkboxWatermark" />
<div>Watermark</div> <div>Watermark</div>
</div> </div>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input> <input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<br/> <br/>
@@ -255,8 +255,8 @@
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" /> <input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" /> <label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div> <div>Second Watermark Color</div>
</div> </div>
<span class="dropdown"> <span class="dropdown">
<select id="secondWatermarkColorSelection"></select></input> <select id="secondWatermarkColorSelection"></select></input>
@@ -401,21 +401,21 @@ input[type="color"] {
/*Custom checkboxes!*/ /*Custom checkboxes!*/
.checkbox { .checkbox {
top: 4px; top: 4px;
position: relative; position: relative;
} }
.checkbox label { .checkbox label {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 100%; border-radius: 100%;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
z-index: 1; z-index: 1;
background: var(--section-border-color); background: var(--section-border-color);
} }
.checkbox input[type=checkbox]:checked + label { .checkbox input[type=checkbox]:checked + label {
background: var(--title-text-color); background: var(--title-text-color);
} }
.checkbox input { .checkbox input {
opacity: 0; opacity: 0;
@@ -428,10 +428,10 @@ input[type="color"] {
} }
/*Custom select box (dropdown)*/ /*Custom select box (dropdown)*/
.dropdown { .dropdown {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding: 0px; padding: 0px;
} }
.dropdown select { .dropdown select {
width: inherit; width: inherit;
@@ -452,8 +452,8 @@ input[type="color"] {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
color: var(--title-text-color); color: var(--title-text-color);
right: 10px; right: 10px;
top: 38%; top: 38%;
} }
/*List of all mana symbols and their associated codes*/ /*List of all mana symbols and their associated codes*/
#symbolList img { #symbolList img {
@@ -576,48 +576,50 @@ document.getElementById("secondWatermarkColorSelection").innerHTML = document.ge
//Runs ten times every second (main loop) //Runs ten times every second (main loop)
function cardClock() { function cardClock() {
//Insures that the corners of the final image are transparent //fixes the global alpha just incase...
card.globalCompositeOperation = "source-over" card.globalAlpha = 1
drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false) //Insures that the corners of the final image are transparent
card.globalCompositeOperation = "source-atop" card.globalCompositeOperation = "source-over"
//Draws the card image, then... drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
drawPicture() card.globalCompositeOperation = "source-atop"
//draws the card frame on top //Draws the card image, then...
if (transparentBorder == false) { drawPicture()
drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false) //draws the card frame on top
} else { if (transparentBorder == false) {
card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight) drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
} } else {
//draws the set symbol, mana cost, and watermark card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
drawSetSymbol()
drawManaCost()
drawWatermark()
//writes all the text: name, type, rules...
writeText()
//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
if (m15Info == true) {
bottomInfoM15()
} else if (eighthInfo == true) {
bottomInfo8th()
}else if (planechaseInfo == true) {
bottomInfoPlanechase()
}
//A shiny foil overlay!
if(document.getElementById("checkboxFoil").checked == true) {
card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
}
//These are for pinpointing coordinates while adjusting values for new border types
//Vertical Line
// card.beginPath()
// card.moveTo(688, 0)
// card.lineTo(688, 1044)
// card.stroke()
//Horizontal Line
// card.beginPath()
// card.moveTo(0, setSymbolY)
// card.lineTo(749, setSymbolY)
// card.stroke()
} }
//draws the set symbol, mana cost, and watermark
drawSetSymbol()
drawManaCost()
drawWatermark()
//writes all the text: name, type, rules...
writeText()
//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
if (m15Info == true) {
bottomInfoM15()
} else if (eighthInfo == true) {
bottomInfo8th()
}else if (planechaseInfo == true) {
bottomInfoPlanechase()
}
//A shiny foil overlay!
if(document.getElementById("checkboxFoil").checked == true) {
card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
}
//These are for pinpointing coordinates while adjusting values for new border types
//Vertical Line
// card.beginPath()
// card.moveTo(688, 0)
// card.lineTo(688, 1044)
// card.stroke()
//Horizontal Line
// card.beginPath()
// card.moveTo(0, setSymbolY)
// card.lineTo(749, setSymbolY)
// card.stroke()
}
//Sets up the initial clock //Sets up the initial clock
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value) var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -934,7 +936,6 @@ function drawWatermark() {
drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false) drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false)
} }
} }
card.globalAlpha = 1
} }
//Mana cost //Mana cost
function drawManaCost() { function drawManaCost() {