Calendar <figcaption>

ui/src/components/Calendar.vue

@@ -1,18 +1,25 @@
 <template>
   <MultiModal ref="multi_modal" />
 
-  <figure class="image is-unselectable">
+  <figure>
+    <div class="image is-unselectable">
       <img :src="$advent22.api_url('general/background')" />
       <ThouCanvas>
         <CalendarDoor
-        v-for="(_, index) in doors"
+          v-for="(door, index) in doors"
           :key="`door-${index}`"
-        :door="doors[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();
   }