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/>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" />
<div>Second Color</div>
<label for="checkboxSecondColor" />
<div>Second Color</div>
</div>
<span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select>
@@ -46,8 +46,8 @@
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" />
<div>Third Color</div>
<label for="checkboxThirdColor" />
<div>Third Color</div>
</div>
<span class="dropdown">
<select id="thirdColorSelection" onchange="updateBorder()"></select>
@@ -55,8 +55,8 @@
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxCreature" />
<label for="checkboxCreature" />
<div>Power/Toughness</div>
<label for="checkboxCreature" />
<div>Power/Toughness</div>
</div>
<input id="inputPowerToughness" class="input" value="" type="text"></input>
</div>
@@ -66,28 +66,28 @@
<div class="togglee">
<div class="checkbox">
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
<label for="checkboxLegendary" />
<div>Legendary</div>
<label for="checkboxLegendary" />
<div>Legendary</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
<label for="checkboxNyx" />
<div>Nyx</div>
<label for="checkboxNyx" />
<div>Nyx</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
<label for="checkboxMiracle" />
<div>Miracle</div>
<label for="checkboxMiracle" />
<div>Miracle</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
<label for="checkboxRareStamp" />
<div>Rare Stamp</div>
<label for="checkboxRareStamp" />
<div>Rare Stamp</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
<label for="checkboxFlipIcon" />
<div>Flip Icon</div>
<label for="checkboxFlipIcon" />
<div>Flip Icon</div>
</div>
<span class="dropdown">
<select id="inputFlipIcon" onchange="updateBorder()">
@@ -102,30 +102,30 @@
</span>
<div class="checkbox">
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
<label for="checkboxFlipTip" />
<div>Flip Tip</div>
<label for="checkboxFlipTip" />
<div>Flip Tip</div>
</div>
<input id="inputFlipTip" value="" type="text" class="input"></input>
<div class="checkbox">
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
<label for="checkboxFlippedDark" />
<div>Flipped (Darker)</div>
<label for="checkboxFlippedDark" />
<div>Flipped (Darker)</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" />
<label for="checkboxSilverBorder" />
<div>Silver Border</div>
<label for="checkboxSilverBorder" />
<div>Silver Border</div>
</div>
<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
<div class="checkbox">
<input type="checkbox" id="checkboxFoil" />
<label for="checkboxFoil" />
<div>Foil</div>
<label for="checkboxFoil" />
<div>Foil</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" />
<label for="checkboxIdentity" />
<div>Color Identity</div>
<label for="checkboxIdentity" />
<div>Color Identity</div>
</div>
<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
</div>
@@ -201,8 +201,8 @@
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxArtistColor" />
<label for="checkboxArtistColor" />
<div>Make Artist Credit font black</div>
<label for="checkboxArtistColor" />
<div>Make Artist Credit font black</div>
</div>
</div>
</div>
@@ -211,8 +211,8 @@
<div class="togglee">
<div class="checkbox">
<input type="checkbox" id="checkboxSetSymbol" checked="true" />
<label for="checkboxSetSymbol" />
<div>Set Symbol</div>
<label for="checkboxSetSymbol" />
<div>Set Symbol</div>
</div>
Set Code
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
@@ -230,8 +230,8 @@
<br/><br/>
<div class="checkbox">
<input type="checkbox" id="checkboxWatermark" checked="true" />
<label for="checkboxWatermark" />
<div>Watermark</div>
<label for="checkboxWatermark" />
<div>Watermark</div>
</div>
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
<br/>
@@ -255,8 +255,8 @@
<br/>
<div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div>
<label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div>
</div>
<span class="dropdown">
<select id="secondWatermarkColorSelection"></select></input>
@@ -401,21 +401,21 @@ input[type="color"] {
/*Custom checkboxes!*/
.checkbox {
top: 4px;
position: relative;
position: relative;
}
.checkbox label {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: var(--section-border-color);
display: inline-block;
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
background: var(--section-border-color);
}
.checkbox input[type=checkbox]:checked + label {
background: var(--title-text-color);
background: var(--title-text-color);
}
.checkbox input {
opacity: 0;
@@ -428,10 +428,10 @@ input[type="color"] {
}
/*Custom select box (dropdown)*/
.dropdown {
position: relative;
display: inline-block;
width: 100%;
padding: 0px;
position: relative;
display: inline-block;
width: 100%;
padding: 0px;
}
.dropdown select {
width: inherit;
@@ -452,8 +452,8 @@ input[type="color"] {
position: absolute;
pointer-events: none;
color: var(--title-text-color);
right: 10px;
top: 38%;
right: 10px;
top: 38%;
}
/*List of all mana symbols and their associated codes*/
#symbolList img {
@@ -576,48 +576,50 @@ document.getElementById("secondWatermarkColorSelection").innerHTML = document.ge
//Runs ten times every second (main loop)
function cardClock() {
//Insures that the corners of the final image are transparent
card.globalCompositeOperation = "source-over"
drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
card.globalCompositeOperation = "source-atop"
//Draws the card image, then...
drawPicture()
//draws the card frame on top
if (transparentBorder == false) {
drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
} else {
card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
}
//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()
//fixes the global alpha just incase...
card.globalAlpha = 1
//Insures that the corners of the final image are transparent
card.globalCompositeOperation = "source-over"
drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
card.globalCompositeOperation = "source-atop"
//Draws the card image, then...
drawPicture()
//draws the card frame on top
if (transparentBorder == false) {
drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
} else {
card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
}
//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
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)
}
}
card.globalAlpha = 1
}
//Mana cost
function drawManaCost() {