From 536d49fac3f97326d5652615c08745974b256269 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sun, 16 May 2021 11:15:03 -0700
Subject: [PATCH] art rotation

---
 creator/index.php |  3 ++-
 js/creator-18.js  | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/creator/index.php b/creator/index.php
index b712044c..8c689fe8 100644
--- a/creator/index.php
+++ b/creator/index.php
@@ -237,11 +237,12 @@ include('../globalHTML/header-1.php');
 							</div>
 						</div>
 						<div class='readable-background padding margin-bottom'>
-							<h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale)<br>Art is now visually adjustable! Click and drag anywhere on the card to move your art around, and hold shift while doing so to scale your art.</h5>
+							<h5 class='margin-bottom padding input-description'>Position/scale your art (X, Y, Scale, Rotation)<br>Art is now visually adjustable! Click and drag anywhere on the card to move your art around. Hold shift while doing so to scale, or control to rotate.</h5>
 							<div class='input-grid margin-bottom'>
 								<input id='art-x' type='number' class='input' oninput='artEdited();' value=0>
 								<input id='art-y' type='number' class='input' oninput='artEdited();' value=0>
 								<input id='art-zoom' type='number' class='input' oninput='artEdited();' value=100 step=0.1 min=0>
+								<input id='art-rotate' type='number' class='input' oninput='artEdited();' value=0 step=1 min=0 max=360>
 							</div>
 							<div class='input-grid'>
 								<button class='input' onclick='autoFitArt();'>Auto Fit Art</button>
diff --git a/js/creator-18.js b/js/creator-18.js
index 8d05dc1c..f1200598 100644
--- a/js/creator-18.js
+++ b/js/creator-18.js
@@ -16,7 +16,7 @@ function fixUri(input) {
 	}
 }
 //card object
-var card = {width:1500, height:2100, marginX:0, marginY:0, frames:[], artSource:fixUri('/img/blank.png'), artX:0, artY:0, artZoom:1, setSymbolSource:fixUri('/img/blank.png'), setSymbolX:0, setSymbolY:0, setSymbolZoom:1, watermarkSource:fixUri('/img/blank.png'), watermarkX:0, watermarkY:0, watermarkZoom:1, watermarkLeft:'none', watermarkRight:'none', watermarkOpacity:0.4, version:'', manaSymbols:[]};
+var card = {width:1500, height:2100, marginX:0, marginY:0, frames:[], artSource:fixUri('/img/blank.png'), artX:0, artY:0, artZoom:1, artRotate:0, setSymbolSource:fixUri('/img/blank.png'), setSymbolX:0, setSymbolY:0, setSymbolZoom:1, watermarkSource:fixUri('/img/blank.png'), watermarkX:0, watermarkY:0, watermarkZoom:1, watermarkLeft:'none', watermarkRight:'none', watermarkOpacity:0.4, version:'', manaSymbols:[]};
 //core images/masks
 const black = new Image(); black.crossOrigin = 'anonymous'; black.src = fixUri('/img/black.png');
 const blank = new Image(); blank.crossOrigin = 'anonymous'; blank.src = fixUri('/img/blank.png');
@@ -1004,9 +1004,11 @@ function artEdited() {
 	card.artX = document.querySelector('#art-x').value / card.width;
 	card.artY = document.querySelector('#art-y').value / card.height;
 	card.artZoom = document.querySelector('#art-zoom').value / 100;
+	card.artRotate = document.querySelector('#art-rotate').value;
 	drawCard();
 }
 function autoFitArt() {
+	document.querySelector('#art-rotate').value = 0;
 	if (art.width / art.height > scaleWidth(card.artBounds.width) / scaleHeight(card.artBounds.height)) {
 		document.querySelector('#art-y').value = Math.round(scaleY(card.artBounds.y) - scaleHeight(card.marginY));
 		document.querySelector('#art-zoom').value = (scaleHeight(card.artBounds.height) / art.height * 100).toFixed(1);
@@ -1059,10 +1061,14 @@ function artDrag(e) {
 	e.stopPropagation();
 	if (draggingArt && Date.now() > lastArtDragTime + 25) {
 		lastArtDragTime = Date.now();
-		if (e.shiftKey) {
+		if (e.shiftKey || e.ctrlKey) {
 			startX = parseInt(e.clientX);
 			const endY = parseInt(e.clientY);
-			document.querySelector('#art-zoom').value = Math.round((parseFloat(document.querySelector('#art-zoom').value) * (1.002 ** (startY - endY))) * 10) / 10;
+			if (e.ctrlKey) {
+				document.querySelector('#art-rotate').value = Math.round((parseFloat(document.querySelector('#art-rotate').value) - (startY - endY) / 10) % 360 * 10) / 10;
+			} else {
+				document.querySelector('#art-zoom').value = Math.round((parseFloat(document.querySelector('#art-zoom').value) * (1.002 ** (startY - endY))) * 10) / 10;
+			}
 			startY = endY;
 			artEdited();
 		} else {
@@ -1274,7 +1280,11 @@ function setDefaultCollector() {
 function drawCard() {
 	cardContext.globalCompositeOperation = 'source-over';
 	cardContext.clearRect(0, 0, cardCanvas.width, cardCanvas.height);
-	cardContext.drawImage(art, scaleX(card.artX), scaleY(card.artY), art.width * card.artZoom, art.height * card.artZoom);
+	cardContext.save();
+	cardContext.translate(scaleX(card.artX), scaleY(card.artY));
+	cardContext.rotate(Math.PI / 180 * (card.artRotate || 0));
+	cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom);
+	cardContext.restore();
 	cardContext.drawImage(frameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
 	if (card.version.includes('planeswalker') && typeof planeswalkerCanvas !== "undefined") {
 		cardContext.drawImage(planeswalkerCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
@@ -1485,6 +1495,7 @@ async function loadCard(selectedCardKey) {
 		document.querySelector('#art-x').value = scaleX(card.artX) - scaleWidth(card.marginX);
 		document.querySelector('#art-y').value = scaleY(card.artY) - scaleHeight(card.marginY);
 		document.querySelector('#art-zoom').value = card.artZoom * 100;
+		document.querySelector('#art-rotate').value = card.artRotate || 0;
 		uploadArt(card.artSource);
 		document.querySelector('#setSymbol-x').value = scaleX(card.setSymbolX) - scaleWidth(card.marginX);
 		document.querySelector('#setSymbol-y').value = scaleY(card.setSymbolY) - scaleHeight(card.marginY);