From 88d4d00911a4956508ad191dae5bfcd3a4d932d1 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 1 Aug 2025 18:06:20 +0200
Subject: [PATCH] UX: tweaks to compass element

---
 src/Logic/UIEventSource.ts                |  1 -
 src/UI/BigComponents/CompassWidget.svelte | 22 +++++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/Logic/UIEventSource.ts b/src/Logic/UIEventSource.ts
index efb68a8af..780d04fbc 100644
--- a/src/Logic/UIEventSource.ts
+++ b/src/Logic/UIEventSource.ts
@@ -610,7 +610,6 @@ class MappedStore<TIn, T> extends Store<T> {
         }
         this._upstreamPingCount = this._upstreamCallbackHandler.pingCount
         this._callbacksAreRegistered = false
-        console.log("Unregistering from upstream", this._upstream)
         this._unregisterFromUpstream()
         this._unregisterFromExtraStores?.forEach((unr) => unr())
     }
diff --git a/src/UI/BigComponents/CompassWidget.svelte b/src/UI/BigComponents/CompassWidget.svelte
index 30ea2b391..1f5236327 100644
--- a/src/UI/BigComponents/CompassWidget.svelte
+++ b/src/UI/BigComponents/CompassWidget.svelte
@@ -9,6 +9,12 @@ import North_arrow from "../../assets/svg/North_arrow.svelte"
 
 export let mapProperties: { rotation: UIEventSource<number>, allowRotating: Store<boolean> }
 let orientation = Orientation.singleton.alpha
+let gotNonZero = new UIEventSource(false)
+orientation.addCallbackAndRunD(o => {
+  if (o !== undefined && o !== 0) {
+    gotNonZero.set(true)
+  }
+})
 let mapRotation = mapProperties.rotation
 export let size = "h-10 w-10"
 let wrapperClass = "absolute top-0 left-0 " + size
@@ -26,9 +32,11 @@ function clicked(e: Event) {
 }
 
 </script>
+{#if $allowRotation || !$gotNonZero}
 <button style="z-index: -1" class={"relative as-link pointer-events-auto "+size} on:click={(e) => clicked(e)}>
-  {#if $allowRotation && !$compassLoaded}
-    <div class={"border-2 rounded-full border-gray-500 border-dotted  "+wrapperClass} style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
+  {#if $allowRotation && !$compassLoaded && !$gotNonZero}
+    <div class={"border-2 rounded-full border-gray-500 border-dotted  "+wrapperClass}
+         style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
       <North_arrow class="w-full" />
     </div>
   {:else}
@@ -37,8 +45,12 @@ function clicked(e: Event) {
         <Compass_back class="w-full" />
       </div>
     {/if}
-    <div class={wrapperClass} style={`transform: rotate(${-$orientation}deg)`}>
-      <Compass_needle class="w-full" />
-    </div>
+    {#if $compassLoaded && $gotNonZero}
+      <div class={wrapperClass+ (!$allowRotation ? " rounded-full bg-white bg-opacity-50" : "")}
+           style={`transform: rotate(${-$orientation}deg)`}>
+        <Compass_needle class="w-full" />
+      </div>
+    {/if}
   {/if}
 </button>
+{/if}