From dcbcdc425a9b6c66e01523a68179e0773388980d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 5 Nov 2023 21:37:05 +0000
Subject: [PATCH 1/3] general UI improvements

---
 ui/src/components/MultiModal.vue            | 5 +++++
 ui/src/components/calendar/CalendarDoor.vue | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/MultiModal.vue b/ui/src/components/MultiModal.vue
index e8eeda1..1ed1a5b 100644
--- a/ui/src/components/MultiModal.vue
+++ b/ui/src/components/MultiModal.vue
@@ -17,6 +17,11 @@
         </figure>
       </template>
     </div>
+
+    <button
+      v-if="!progress"
+      class="modal-close is-large has-background-primary"
+    />
   </div>
 </template>
 
diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index 198157b..74b2c3a 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/ui/src/components/calendar/CalendarDoor.vue
@@ -3,8 +3,8 @@
     style="cursor: pointer"
     :variant="visible || hovered ? 'primary' : undefined"
     :rectangle="door.position"
-    @mouseover="hovered = true"
-    @mouseout="hovered = false"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
   >
     <div class="has-text-danger">{{ door.day }}</div>
   </SVGRect>

From 9413b96c1a27f8ce55816fc288a573ca954a5907 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 5 Nov 2023 21:57:50 +0000
Subject: [PATCH 2/3] "touch mode" improvement

---
 ui/src/components/TouchButton.vue |  4 +++-
 ui/src/plugins/store.ts           | 23 +++++++++++++----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/TouchButton.vue b/ui/src/components/TouchButton.vue
index 621e75d..f356bc3 100644
--- a/ui/src/components/TouchButton.vue
+++ b/ui/src/components/TouchButton.vue
@@ -1,10 +1,12 @@
 <template>
+  <span>Eingabemodus:&nbsp;</span>
   <BulmaButton
+    v-bind="$attrs"
     :icon="
       'fa-solid fa-' +
       (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
     "
-    text="Eingabemodus"
+    :text="store.is_touch_device ? 'Touch' : 'Desktop'"
     @click.left="store.toggle_touch_device"
   />
 </template>
diff --git a/ui/src/plugins/store.ts b/ui/src/plugins/store.ts
index 891223a..e96d8c6 100644
--- a/ui/src/plugins/store.ts
+++ b/ui/src/plugins/store.ts
@@ -3,16 +3,23 @@ import { Advent22 } from "@/plugins/advent22";
 import { AxiosBasicCredentials } from "axios";
 import { acceptHMRUpdate, defineStore } from "pinia";
 
-const check_touch_device = () => window.matchMedia("(any-hover: none)").matches;
-const empty_creds = () => ["", ""] as Credentials;
+declare global {
+  interface Navigator {
+    readonly msMaxTouchPoints: number;
+  }
+}
 
 export const advent22Store = defineStore({
   id: "advent22",
 
   state: () => ({
     advent22: {} as Advent22,
-    api_creds: empty_creds(),
-    is_touch_device: check_touch_device(),
+    api_creds: ["", ""] as Credentials,
+    is_touch_device:
+      window.matchMedia("(any-hover: none)").matches ||
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0,
     is_admin: false,
     site_config: {
       title: document.title,
@@ -70,7 +77,7 @@ export const advent22Store = defineStore({
         .catch(advent22.alert_user_error);
     },
 
-    login(creds: Credentials = empty_creds()): Promise<boolean> {
+    login(creds: Credentials): Promise<boolean> {
       this.api_creds = creds;
 
       return new Promise<boolean>((resolve, reject) => {
@@ -85,11 +92,7 @@ export const advent22Store = defineStore({
     },
 
     logout(): Promise<boolean> {
-      return this.login();
-    },
-
-    set_touch_device(state: boolean = check_touch_device()): void {
-      this.is_touch_device = state;
+      return this.login(["", ""]);
     },
 
     toggle_touch_device(): void {

From e613ead63587c8bbd2c715f9f5f11122b1906fe8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 5 Nov 2023 22:36:58 +0000
Subject: [PATCH 3/3] "calendar_aspect_ratio" into store

---
 ui/src/components/calendar/SVGRect.vue    | 46 +++--------------------
 ui/src/components/calendar/ThouCanvas.vue | 12 ++++++
 ui/src/plugins/store.ts                   |  9 +++++
 3 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 2c410f4..952a7e9 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -1,10 +1,10 @@
 <template>
   <foreignObject
-    :x="Math.round(parent_aspect_ratio * rectangle.left)"
+    :x="Math.round(store.calendar_aspect_ratio * rectangle.left)"
     :y="rectangle.top"
-    :width="Math.round(parent_aspect_ratio * rectangle.width)"
+    :width="Math.round(store.calendar_aspect_ratio * rectangle.width)"
     :height="rectangle.height"
-    :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
+    :style="`transform: scaleX(${1 / store.calendar_aspect_ratio})`"
   >
     <div
       v-if="variant !== undefined"
@@ -16,7 +16,6 @@
     </div>
   </foreignObject>
   <rect
-    ref="rect"
     v-bind="$attrs"
     :class="variant !== undefined ? variant : ''"
     :x="rectangle.left"
@@ -28,6 +27,7 @@
 
 <script lang="ts">
 import { Rectangle } from "@/lib/rectangle";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 type BulmaVariant =
@@ -51,43 +51,7 @@ export default class extends Vue {
   public variant?: BulmaVariant;
   public rectangle!: Rectangle;
 
-  private refreshKey = 0;
-
-  declare $refs: {
-    rect: unknown;
-  };
-
-  private refresh() {
-    window.setTimeout(() => {
-      // don't loop endlessly
-      if (this.refreshKey < 10000) {
-        this.refreshKey++;
-      }
-    }, 100);
-  }
-
-  public get parent_aspect_ratio(): number {
-    this.refreshKey; // read it just to force recompute on change
-
-    if (
-      !(this.$refs.rect instanceof SVGRectElement) ||
-      this.$refs.rect.parentElement === null
-    ) {
-      this.refresh();
-      return 1;
-    }
-
-    const parent = this.$refs.rect.parentElement;
-    const result = parent.clientWidth / parent.clientHeight;
-
-    // force recompute for suspicious results
-    if (result === 0 || result === Infinity) {
-      this.refresh();
-      return 1;
-    }
-
-    return result;
-  }
+  public readonly store = advent22Store();
 }
 </script>
 
diff --git a/ui/src/components/calendar/ThouCanvas.vue b/ui/src/components/calendar/ThouCanvas.vue
index 4a54b74..3774fbf 100644
--- a/ui/src/components/calendar/ThouCanvas.vue
+++ b/ui/src/components/calendar/ThouCanvas.vue
@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import { Vector2D } from "@/lib/vector2d";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";
 
 function get_event_thous(event: MouseEvent): Vector2D {
@@ -56,6 +57,17 @@ function mouse_event_validator(event: object, point: object): boolean {
   },
 })
 export default class extends Vue {
+  public readonly store = advent22Store();
+
+  public mounted(): void {
+    new ResizeObserver(([first, ...rest]) => {
+      if (rest.length > 0)
+        console.warn(`Unexpected ${rest.length} extra entries!`);
+
+      this.store.set_calendar_aspect_ratio(first.contentRect);
+    }).observe(this.$el);
+  }
+
   public transform_mouse_event(event: MouseEvent) {
     const point = get_event_thous(event);
     this.$emit(event.type, event, point);
diff --git a/ui/src/plugins/store.ts b/ui/src/plugins/store.ts
index e96d8c6..5a35f09 100644
--- a/ui/src/plugins/store.ts
+++ b/ui/src/plugins/store.ts
@@ -27,6 +27,7 @@ export const advent22Store = defineStore({
       content: "",
       footer: "",
     } as SiteConfigModel,
+    calendar_aspect_ratio: 1,
     user_doors: [] as DoorsSaved,
     next_door_target: null as number | null,
   }),
@@ -98,6 +99,14 @@ export const advent22Store = defineStore({
     toggle_touch_device(): void {
       this.is_touch_device = !this.is_touch_device;
     },
+
+    set_calendar_aspect_ratio(rect: DOMRectReadOnly): void {
+      const result = rect.width / rect.height;
+
+      // filter suspicious results
+      if (result !== 0 && isFinite(result) && !isNaN(result))
+        this.calendar_aspect_ratio = result;
+    },
   },
 });