From dbe46c2425b4fd87eff7589b54cdf235e31a9b96 Mon Sep 17 00:00:00 2001
From: Josh birnholz <josh@birnholz.com>
Date: Wed, 11 Oct 2023 17:40:25 -0400
Subject: [PATCH] Add grayscale toggle

---
 creator/index.html             | 7 +++++++
 js/creator-23.js               | 3 +++
 js/frames/packDoubleFeature.js | 1 +
 3 files changed, 11 insertions(+)

diff --git a/creator/index.html b/creator/index.html
index 1dae1b9b..6fb764ff 100644
--- a/creator/index.html
+++ b/creator/index.html
@@ -331,6 +331,13 @@
 								<button class='input' onclick='autoFitArt();'>Auto Fit Art</button>
 							</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'>
 							<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>
diff --git a/js/creator-23.js b/js/creator-23.js
index 845fd2c2..4520a3cb 100644
--- a/js/creator-23.js
+++ b/js/creator-23.js
@@ -4490,6 +4490,9 @@ function drawCard() {
 	cardContext.save();
 	cardContext.translate(scaleX(card.artX), scaleY(card.artY));
 	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.restore();
 	// frame elements
diff --git a/js/frames/packDoubleFeature.js b/js/frames/packDoubleFeature.js
index 7f248189..d377341d 100644
--- a/js/frames/packDoubleFeature.js
+++ b/js/frames/packDoubleFeature.js
@@ -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'},
 		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
 loadFramePack();
\ No newline at end of file