From 64a29437d113d7afe7a92cac356e09d6c21998b8 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 17 Dec 2021 01:43:45 -0600
Subject: [PATCH] Allow custom classes to be on the button, make the button
 change the cursor type, and adjust indent on the script to make it consistent
 with other components

---
 web-svelte/src/components/SciFi-Button.svelte | 57 +++++++++++--------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/web-svelte/src/components/SciFi-Button.svelte b/web-svelte/src/components/SciFi-Button.svelte
index baf0fb8..6a9e133 100644
--- a/web-svelte/src/components/SciFi-Button.svelte
+++ b/web-svelte/src/components/SciFi-Button.svelte
@@ -1,35 +1,38 @@
 <script lang="ts">
-	export let height: string|number = "50px";
-	export let width: string|number = "unset";
-	export let background: string = "#00aa00";
-	export let handler: (e: Event) => unknown;
-	export let hoverBackground: string = "transparent";
+export let height: string|number = "50px";
+export let width: string|number = "unset";
+export let background: string = "#00aa00";
+export let handler: (e: Event) => unknown;
+export let hoverBackground: string = "transparent";
+export let classes: string = "";
+export let title: string = "";
 
-	// Add the units to the height value if not provided, and ensure that the
-	// provided height is not less than 50 (the default)
-	$: if (typeof(height) == "string") {
-		if (height.match(/[0-9]$/)) {
-			if (height.match(/^[0-4]?[0-9]$/)) {
-				height = `50`;
-			};
-			height = `${height}px`;
-		};
-	} else {
-		if (height < 50) {
-			height = 50;
+
+// Add the units to the height value if not provided, and ensure that the
+// provided height is not less than 50 (the default)
+$: if (typeof(height) == "string") {
+	if (height.match(/[0-9]$/)) {
+		if (height.match(/^[0-4]?[0-9]$/)) {
+			height = `50`;
 		};
 		height = `${height}px`;
 	};
+} else {
+	if (height < 50) {
+		height = 50;
+	};
+	height = `${height}px`;
+};
 
 
-	// Add the units to the width value if not provided
-	$: if (typeof(width) == "string") {
-		if (width.match(/[0-9]$/)) {
-			width = `${width}px`;
-		};
-	} else {
+// Add the units to the width value if not provided
+$: if (typeof(width) == "string") {
+	if (width.match(/[0-9]$/)) {
 		width = `${width}px`;
 	};
+} else {
+	width = `${width}px`;
+};
 </script>
 
 <div
@@ -38,9 +41,13 @@
 		--width: {width};
 		--background-colour: {background};
 		--hover-background-colour: {hoverBackground};"
-	class="button-container"
+	class="button-container {classes}"
 >
-	<button on:click={handler}>
+	<button
+		class="clickable"
+		{title}
+		on:click|trusted|stopPropagation={handler}
+	>
 		<slot></slot>
 	</button>
 </div>