mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
Add grayscale toggle
This commit is contained in:
@@ -331,6 +331,13 @@
|
|||||||
<button class='input' onclick='autoFitArt();'>Auto Fit Art</button>
|
<button class='input' onclick='autoFitArt();'>Auto Fit Art</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class='readable-background padding margin-bottom'>
|
||||||
|
<h5 class='input-description margin-bottom'>Make the art grayscale</h5>
|
||||||
|
<label class='checkbox-container input'>Grayscale
|
||||||
|
<input id='grayscale-art' type='checkbox' onchange='drawCard();'>
|
||||||
|
<span class='checkmark'></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<div class='readable-background padding margin-bottom'>
|
<div class='readable-background padding margin-bottom'>
|
||||||
<h5 class='padding margin-bottom input-description'>Clears the art, making it blank</h5>
|
<h5 class='padding margin-bottom input-description'>Clears the art, making it blank</h5>
|
||||||
<button class='input margin-bottom' onclick='uploadArt(blank.src);'>Remove Art</button>
|
<button class='input margin-bottom' onclick='uploadArt(blank.src);'>Remove Art</button>
|
||||||
|
@@ -4490,6 +4490,9 @@ function drawCard() {
|
|||||||
cardContext.save();
|
cardContext.save();
|
||||||
cardContext.translate(scaleX(card.artX), scaleY(card.artY));
|
cardContext.translate(scaleX(card.artX), scaleY(card.artY));
|
||||||
cardContext.rotate(Math.PI / 180 * (card.artRotate || 0));
|
cardContext.rotate(Math.PI / 180 * (card.artRotate || 0));
|
||||||
|
if (document.querySelector('#grayscale-art').checked) {
|
||||||
|
cardContext.filter='grayscale(1)';
|
||||||
|
}
|
||||||
cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom);
|
cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom);
|
||||||
cardContext.restore();
|
cardContext.restore();
|
||||||
// frame elements
|
// frame elements
|
||||||
|
@@ -63,6 +63,7 @@ document.querySelector('#loadFrameVersion').onclick = async function() {
|
|||||||
rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2875, size:0.0362, color:'white'},
|
rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2875, size:0.0362, color:'white'},
|
||||||
pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
|
pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
|
||||||
});
|
});
|
||||||
|
notify('You can now make the art grayscale in the art tab!');
|
||||||
}
|
}
|
||||||
//loads available frames
|
//loads available frames
|
||||||
loadFramePack();
|
loadFramePack();
|
Reference in New Issue
Block a user