advent22/ui/src/components/Calendar.vue

<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>
</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[];

  declare $refs: {
    multi_modal: MultiModal;
  };

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

  public door_success(image_src: string) {
    this.$refs.multi_modal.show_image(image_src);
  }

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