Begin working on HUD interactivity

module/Apps/DelveDiceHUD.mjs

@@ -83,6 +83,10 @@ export class DelveDiceHUD extends HandlebarsApplicationMixin(ApplicationV2) {
 				await this._prepareDifficultyContext(ctx);
 				break;
 			};
+			case `fateCompass`: {
+				await this._prepareFateCompassContext(ctx);
+				break;
+			};
 		};
 
 		Logger.log(`${partId} Context`, ctx);
@@ -95,12 +99,20 @@ export class DelveDiceHUD extends HandlebarsApplicationMixin(ApplicationV2) {
 
 	async _prepareDifficultyContext(ctx) {
 		ctx.dc = game.settings.get(`ripcrypt`, `dc`);
+	};
+
+	async _prepareFateCompassContext(ctx) {
+		ctx.direction = game.settings.get(`ripcrypt`, `currentFate`);
 	}
 	// #endregion
 
 	// #region Actions
 	static async #tourDelta() {
-		ui.notifications.info(`Button Clicked!`, { console: false });
+		ui.notifications.info(`Delve Tour Changed`, { console: false });
+	};
+
+	static async #setFate() {
+		ui.notifications.info(`Fate Set!`, { console: false });
 	};
 	// #endregion
 };

templates/Apps/DelveDiceHUD/fateCompass.hbs

@@ -1,16 +1,16 @@
 <div id="fate-compass">
 	<div class="compass-container">
 		<div class="compass">
-			<span style="grid-area: N;">N</span>
-			<span style="grid-area: W;">W</span>
+			<button type="button" class="transparent" style="grid-area: N;">N</button>
+			<button type="button" class="transparent" style="grid-area: W;">W</button>
 			<rc-icon
 				class="compass-pointer"
 				name="icons/arrow-compass"
 				var:fill="var(--accent-3)"
 				var:size="1rem"
 			></rc-icon>
-			<span style="grid-area: E;">E</span>
-			<span style="grid-area: S;">S</span>
+			<button type="button" class="transparent" style="grid-area: E;">E</button>
+			<button type="button" class="transparent" style="grid-area: S;">S</button>
 		</div>
 	</div>
 </div>

templates/Apps/DelveDiceHUD/tour/next.hbs

@@ -1,7 +1,20 @@
-<button
+<div>
+	{{!-- This is here to prevent height collapsing --}}
+	&ZeroWidthSpace;
+
+	{{#if meta.editable}}
+		<button
 			type="button"
 			class="icon"
 			data-action="tourDelta"
->
-	&gt;
-</button>
+			data-tooltip="Next Delve Tour"
+		>
+			<rc-icon
+				name="icons/arrow-right"
+				var:size="0.75rem"
+				var:fill="currentColor"
+			></rc-icon>
+		</button>
+	{{/if}}
+</div>
+

templates/Apps/DelveDiceHUD/tour/previous.hbs

@@ -1,7 +1,20 @@
-<button
+<div>
+	{{!-- This is here to prevent height collapsing --}}
+	&ZeroWidthSpace;
+
+	{{#if meta.editable}}
+		<button
 			type="button"
 			class="icon"
 			data-action="tourDelta"
->
-	&lt;
-</button>
+			data-tooltip="Previous Delve Tour"
+		>
+			<rc-icon
+				name="icons/arrow-left"
+				var:size="0.75rem"
+				var:fill="currentColor"
+			></rc-icon>
+		</button>
+	{{/if}}
+</div>
+

templates/css/elements/button.css

@@ -3,6 +3,8 @@
 	outline: none;
 	border: none;
 	padding: 2px 4px;
+	font-family: inherit;
+	font-size: inherit;
 	background: var(--button-background);
 	color: var(--button-text);
 
@@ -23,4 +25,10 @@
 		width: 20px;
 		height: 20px;
 	}
+
+	&.transparent {
+		background: inherit;
+		color: inherit;
+		padding: 0;
+	}
 }