advent22/ui/src/components/Calendar.vue

<template>
  <MultiModal ref="multi_modal" />

  <figure>
    <div class="image is-unselectable">
      <img :src="$advent22.api_url('images/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>

<script lang="ts">
import { Door } from "@/lib/door";
import { Options, Vue } from "vue-class-component";

import CalendarDoor from "./calendar/CalendarDoor.vue";
import MultiModal from "./calendar/MultiModal.vue";
import ThouCanvas from "./calendar/ThouCanvas.vue";

@Options({
  components: {
    MultiModal,
    ThouCanvas,
    CalendarDoor,
  },
  props: {
    doors: Array,
  },
})
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(day: number) {
    this.figure_caption = this.$advent22.name_door(day);
  }

  public door_unhover() {
    this.figure_caption = this.idle_caption;
  }

  public door_click() {
    this.$refs.multi_modal.show_progress();
  }

  public door_success(day: number, image_src: string) {
    this.$refs.multi_modal.show_image(image_src, this.$advent22.name_door(day));
  }

  public door_failure(msg: string) {
    this.$refs.multi_modal.set_active(false);
    alert(msg);
  }
}
</script>