From 3d6710dd189e657251c254b8907b200aaf5d99e5 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Fri, 28 Feb 2025 16:18:31 -0700
Subject: [PATCH] Get the fate compass looking good

---
 templates/Apps/DelveDiceHUD/fateCompass.hbs | 17 ++++++++--
 templates/Apps/DelveDiceHUD/style.css       | 36 +++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/templates/Apps/DelveDiceHUD/fateCompass.hbs b/templates/Apps/DelveDiceHUD/fateCompass.hbs
index 3ad015d..19ea83c 100644
--- a/templates/Apps/DelveDiceHUD/fateCompass.hbs
+++ b/templates/Apps/DelveDiceHUD/fateCompass.hbs
@@ -1,3 +1,16 @@
 <div id="fate-compass">
-	North
-</div>
\ No newline at end of file
+	<div class="compass-container">
+		<div class="compass">
+			<span style="grid-area: N;">N</span>
+			<span style="grid-area: W;">W</span>
+			<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>
+		</div>
+	</div>
+</div>
diff --git a/templates/Apps/DelveDiceHUD/style.css b/templates/Apps/DelveDiceHUD/style.css
index a7ab971..0e4a226 100644
--- a/templates/Apps/DelveDiceHUD/style.css
+++ b/templates/Apps/DelveDiceHUD/style.css
@@ -15,4 +15,40 @@
 			cursor: pointer;
 		}
 	}
+
+	#fate-compass {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+		position: relative;
+
+		.compass-container {
+			position: absolute;
+			background: var(--DelveDice-background);
+			border-radius: 0 0 999px 999px;
+			padding: 4px;
+			width: 100%;
+		}
+
+		.compass {
+			display: grid;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			grid-template-rows: repeat(3, minmax(0, 1fr));
+			grid-template-areas:
+				". N ."
+				"W A E"
+				". S .";
+			align-items: center;
+			justify-items: center;
+			background: var(--accent-2);
+			border-radius: 999px;
+			aspect-ratio: 1;
+		}
+
+		.compass-pointer {
+			grid-area: A;
+			transition: 500ms transform;
+			transform: rotate(-90deg); /* North by default */
+		}
+	}
 }