From ffe307b9e0d38067942e23222d076580744a0414 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Mon, 27 Jul 2020 17:56:10 -0700
Subject: [PATCH] outline/shadow fix and restyle

---
 data/scripts/main.js | 26 +++++++++++++++----------
 data/styles/main.css | 45 ++++++++++++++++++++++++++++++++------------
 2 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/data/scripts/main.js b/data/scripts/main.js
index 048891c4..8b292e8d 100644
--- a/data/scripts/main.js
+++ b/data/scripts/main.js
@@ -466,6 +466,10 @@ function writeText(textObjectList, targetContext) {
 		textParagraphContext.clearRect(0, 0, textParagraphCanvas.width, textParagraphCanvas.height)
 		var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0, permanentLineShift = 0, temporaryLineShift = 0, fontStyle = '', manaCost = false, canWriteText = true
 		textObjectList[i].otherParameters.forEach(item => eval(item))
+		textLineContext.shadowOffsetX = shadow
+		textLineContext.shadowOffsetY = shadow
+		textLineContext.shadowBlur = 0
+		textLineContext.shadowColor = 'black'
 		textLineContext.strokeStyle = outline
 		textLineContext.lineWidth = outlineThickness
 		textFont = textObjectList[i].font
@@ -538,11 +542,18 @@ function writeText(textObjectList, targetContext) {
 					} else if (possibleCodeLower == 'loadtextx') {
 						textX = savedTextX
 					} else if (possibleCodeLower.includes('outline:')) {
-	                    outline = true
-	                    textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0]
-	                    textLineContext.lineWidth = parseInt(possibleCodeLower.replace('outline:', '').split(',')[1])
+						console.log(parseInt(possibleCodeLower.replace('outline:', '').split(',')[1]), possibleCodeLower.replace('outline:', '').split(',')[1], possibleCodeLower.replace('outline:', '').split(','))
+						if (parseInt(possibleCodeLower.replace('outline:', '').split(',')[1]) == 0) {
+							outline = false
+						} else {
+							outline = true
+		                    textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0]
+		                    textLineContext.lineWidth = parseInt(possibleCodeLower.replace('outline:', '').split(',')[1])
+						}
 	                } else if (possibleCodeLower.includes('shadow')) {
-	                    shadow = parseInt(possibleCodeLower.replace('shadow', ''))
+	                    var shadowOffset = parseInt(possibleCodeLower.replace('shadow', ''))
+	                    textLineContext.shadowOffsetX = shadowOffset
+	                    textLineContext.shadowOffsetY = shadowOffset
 	                } else if (possibleCodeLower.includes('fontcolor')) {
 	                	currentFontColor = possibleCodeLower.slice(9, possibleCodeLower.length)
 	                	textLineContext.fillStyle = currentFontColor
@@ -617,12 +628,7 @@ function writeText(textObjectList, targetContext) {
 							}
 						}
 					}
-					if (shadow > 0) {
-	                    textLineContext.fillStyle = 'black'
-	                    textLineContext.fillText(wordToWrite, textX + shadow, textCanvasBuffer + textSize + shadow)
-	                    textLineContext.fillStyle = currentFontColor
-					}
-					if (outline != undefined) {
+					if (outline == true) {
 						textLineContext.strokeText(wordToWrite, textX, textCanvasBuffer + textSize)
 					}
 					textLineContext.fillText(wordToWrite, textX, textCanvasBuffer + textSize)
diff --git a/data/styles/main.css b/data/styles/main.css
index 81f3df08..5368a076 100644
--- a/data/styles/main.css
+++ b/data/styles/main.css
@@ -211,15 +211,13 @@ img {
 	padding: 0.5rem;
 }
 
-textarea {
-	resize: vertical;
-	min-height: 4rem;
-	max-height: 12rem;
-}
 
+
+/*Hides anything*/
 .hidden {
 	display: none;
 }
+/*Overrides hiding custom uploaded frame images*/
 .hidden.frameClassCustom {
 	display: inline-block;
 }
@@ -241,28 +239,47 @@ textarea {
 	padding: 0.5rem 0;
 }
 
+/*Gives non-text inputs the pointer cursor*/
+input:not([type='text']), select, option, button {
+    cursor: pointer;
+}
+/*Styles most of the inputs, except checkboxes*/
 input:not([type='checkbox']), textarea, button, select {
 	font: inherit;
 	color: inherit;
 	width: 100%;
-	background: var(--layer-background);
-	border: none;
 	outline: none;
+	border-style: solid none none none;
 	padding: 0.25rem;
 	margin-top: 0.25rem;
+	background: var(--layer-background);
+	border-top: 0.1rem solid var(--interactable-unselected);
+	border-radius: 0.1rem;
+	transition: 0.25s;
+	position: relative;
+	top: 0;
 }
-input:not([type='checkbox']):active, textarea:active, button:active {
-	padding: 0.1rem;
-	border: 0.1rem solid var(--interactable-unselected);
+/*Slightly lifts inputs upon hovering over them*/
+input:not([type='checkbox']):hover, textarea:hover, button:hover, select:hover {
+	top: -0.1rem;
+	box-shadow: 0 0.125rem 0.25rem black;
 }
+/*Shows that inputs that aren't checkboxes are in use*/
+input:not([type='checkbox']):active, button:active, input:not([type='checkbox']):not([type='input']):focus, textarea:focus, select:active {
+	border-top-color: var(--interactable-selected);
+}
+/*Styles checboxes*/
 input[type='checkbox'] {
 	position: relative;
 	top: 0.25rem;
 	width: 1rem;
 	height: 1rem;
 }
-input[type='checkbox'], select, option, input[type='file'], button {
-    cursor: pointer;
+/*Allows resizing of the textarea*/
+textarea {
+	resize: vertical;
+	min-height: 6rem;
+	max-height: 12rem;
 }
 
 @keyframes fade-in {
@@ -395,6 +412,7 @@ input[type='checkbox'], select, option, input[type='file'], button {
 }
 
 #textCodeReference {
+	background: var(--interactable-unselected);
 	display: grid;
 	grid-template-columns: 7rem auto;
 	margin-top: 1rem;
@@ -406,6 +424,9 @@ input[type='checkbox'], select, option, input[type='file'], button {
 	background: var(--layer-background);
 	padding: 0.25rem;
 }
+#textCodeReference > div:nth-child(2n + 1):not(:nth-child(1)) {
+	user-select: all;
+}
 
 
 .notificationContainer {