advent22/ui/src/App.vue

<template>
  <div class="container">
    <LoginModal ref="login_modal" />
    <ImageModal ref="image_modal" />

    <div class="section">
      <h1 class="title has-text-centered is-uppercase">
        Adventskalender {{ date }}
      </h1>
      <h2 class="subtitle has-text-centered">Der Gelöt</h2>

      <DoorMapEditor />

      <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @openDoor="open_calendar_door" />
    </div>

    <div class="section">
      <button class="button" @click="$refs.login_modal.set_active(true)">
        Login
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import CalendarDoor from "./components/CalendarDoor.vue";
import DoorMapEditor from "./components/DoorMapEditor.vue";
import ImageModal from "./components/ImageModal.vue";
import LoginModal from "./components/LoginModal.vue";

@Options({
  components: {
    CalendarDoor,
    DoorMapEditor,
    ImageModal,
    LoginModal,
  },
})
export default class extends Vue {
  private visible_days = 0;
  date = "";

  declare $refs: {
    login_modal: LoginModal;
    image_modal: ImageModal;
  };

  public mounted() {
    this.$advent22.api_get_string("days/date", (date: string) => {
      this.date = date;
    });

    this.$advent22.api_get_number(
      "days/visible_days",
      (visible_days: number) => {
        this.visible_days = visible_days;
      }
    );
  }

  public open_calendar_door(image_src: string) {
    this.$refs.image_modal.show_src(image_src);
  }
}
</script>

<style>
body {
  min-height: 100vh;
}
</style>