From 6e4578ec5e6e017f9513614f6ad45d3cd005230c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 9 Sep 2023 23:52:58 +0000
Subject: [PATCH] Calendar `<figcaption>`

---
 ui/src/components/Calendar.vue | 41 ++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index fb23999..313d43a 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -1,18 +1,25 @@
 <template>
   <MultiModal ref="multi_modal" />
 
-  <figure class="image is-unselectable">
-    <img :src="$advent22.api_url('general/background')" />
-    <ThouCanvas>
-      <CalendarDoor
-        v-for="(_, index) in doors"
-        :key="`door-${index}`"
-        :door="doors[index]"
-        @doorClick="door_click"
-        @doorSuccess="door_success"
-        @doorFailure="door_failure"
-      />
-    </ThouCanvas>
+  <figure>
+    <div class="image is-unselectable">
+      <img :src="$advent22.api_url('general/background')" />
+      <ThouCanvas>
+        <CalendarDoor
+          v-for="(door, index) in doors"
+          :key="`door-${index}`"
+          :door="door"
+          @doorClick="door_click"
+          @doorSuccess="door_success"
+          @doorFailure="door_failure"
+          @touch="door_hover(door.day)"
+          @mouseover="door_hover(door.day)"
+          @touchend="door_unhover"
+          @mouseout="door_unhover"
+        />
+      </ThouCanvas>
+    </div>
+    <figcaption>{{ figure_caption }}</figcaption>
   </figure>
 </template>
 
@@ -36,11 +43,21 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
 })
 export default class extends Vue {
   public readonly doors!: Door[];
+  private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
+  public figure_caption = this.idle_caption;
 
   declare $refs: {
     multi_modal: MultiModal;
   };
 
+  public door_hover(index: number) {
+    this.figure_caption = `Türchen ${index + 1}`;
+  }
+
+  public door_unhover() {
+    this.figure_caption = this.idle_caption;
+  }
+
   public door_click() {
     this.$refs.multi_modal.show_progress();
   }