More refactoring

UI/Base/AsyncLazy.ts

@@ -1,6 +1,6 @@
 import BaseUIElement from "../BaseUIElement"
 import { VariableUiElement } from "./VariableUIElement"
-import { Stores, UIEventSource } from "../../Logic/UIEventSource"
+import { Stores } from "../../Logic/UIEventSource"
 import Loading from "./Loading"
 
 export default class AsyncLazy extends BaseUIElement {

UI/Base/DivContainer.ts

@@ -1,4 +1,3 @@
-import { UIElement } from "../UIElement"
 import BaseUIElement from "../BaseUIElement"
 
 /**

UI/Base/DragInvitation.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  /**
+   * This overlay element will regularly show a hand that swipes over the underlying element.
+   * This element will hide as soon as the Store 'hideSignal' receives a change (which is not undefined)
+   */
+  import ToSvelte from "./ToSvelte.svelte";
+  import Svg from "../../Svg";
+  import { Store } from "../../Logic/UIEventSource";
+  import { onDestroy } from "svelte";
+
+  let mainElem: HTMLElement;
+  export let hideSignal: Store<any>;
+  function hide(){
+    console.trace("Hiding...")
+      mainElem.style.visibility = "hidden";
+  }
+  if (hideSignal) {
+    onDestroy(hideSignal.addCallbackD(() => {
+      console.trace("Hiding invitation")
+      return true;
+    }));
+  }
+  
+$: {
+    console.log("Binding listeners on", mainElem)
+  mainElem?.addEventListener("click",_ => hide())
+  mainElem?.addEventListener("touchstart",_ => hide())
+}
+</script>
+
+
+<div bind:this={mainElem} class="absolute bottom-0 right-0 w-full h-full">
+  <div id="hand-container">
+    <ToSvelte construct={Svg.hand_ui}></ToSvelte>
+  </div>
+</div>
+
+<style>
+
+    @keyframes hand-drag-animation {
+        /* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */
+        0% {
+            opacity: 0;
+            transform: rotate(-30deg);
+        }
+
+        6% {
+            opacity: 1;
+            transform: rotate(-30deg);
+        }
+
+        12% {
+            opacity: 1;
+            transform: rotate(-45deg);
+        }
+
+        24% {
+            opacity: 1;
+            transform: rotate(-00deg);
+        }
+
+        30% {
+            opacity: 1;
+            transform: rotate(-30deg);
+        }
+
+        36% {
+            opacity: 0;
+            transform: rotate(-30deg);
+        }
+
+        100% {
+            opacity: 0;
+            transform: rotate(-30deg);
+        }
+    }
+
+
+    #hand-container {
+      position: absolute;
+      width: 2rem;
+      left: calc(50% + 4rem); 
+      top: calc(50%); 
+      opacity: 0.7;
+      animation: hand-drag-animation 4s ease-in-out infinite;
+      transform-origin: 50% 125%;
+  }
+  
+</style>

UI/Base/FromHtml.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  /**
+   * Given an HTML string, properly shows this
+   */
+
+  export let src: string;
+  let htmlElem: HTMLElement;
+  $: {
+    if(htmlElem !== undefined){
+    htmlElem.innerHTML = src
+    }
+  }
+
+</script>
+
+{#if src !== undefined}
+  <span bind:this={htmlElem}></span>
+{/if}
+

UI/Base/Link.ts

@@ -1,6 +1,6 @@
 import Translations from "../i18n/Translations"
 import BaseUIElement from "../BaseUIElement"
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import { Store } from "../../Logic/UIEventSource"
 
 export default class Link extends BaseUIElement {
     private readonly _href: string | Store<string>

UI/Base/Tr.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  /**
+   * Properly renders a translation
+   */
+  import { Translation } from "../i18n/Translation";
+  import { onDestroy } from "svelte";
+  import Locale from "../i18n/Locale";
+  import { Utils } from "../../Utils";
+  import FromHtml from "./FromHtml.svelte";
+
+  export let t: Translation;
+  export let tags: Record<string, string> | undefined;
+  // Text for the current language
+  let txt: string | undefined;
+
+  onDestroy(Locale.language.addCallbackAndRunD(l => {
+    const translation = t?.textFor(l)
+    if(translation === undefined){
+      return
+    }
+    if(tags){
+      txt = Utils.SubstituteKeys(txt, tags)
+    }else{
+      txt = translation
+    }
+  }));
+
+</script>
+
+<FromHtml src={txt}></FromHtml>