97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
Vue
<template>
|
|
<MultiModal @handle="modal_handle" />
|
|
|
|
<figure>
|
|
<div class="level is-mobile mb-2">
|
|
<div class="level-left">
|
|
<figcaption class="level-item has-text-primary-dark">
|
|
{{ figure_caption }}
|
|
</figcaption>
|
|
</div>
|
|
<div class="level-right">
|
|
<BulmaButton
|
|
class="level-item tag is-link"
|
|
text="Türchen anzeigen"
|
|
:icon="'fa-solid fa-toggle-' + (show_doors ? 'on' : 'off')"
|
|
@click.left="show_doors = !show_doors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="image is-unselectable">
|
|
<img :src="$advent22.api_url('user/background_image')" />
|
|
<ThouCanvas>
|
|
<CalendarDoor
|
|
v-for="(door, index) in doors"
|
|
:key="`door-${index}`"
|
|
:door="door"
|
|
:visible="show_doors"
|
|
@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>
|
|
</figure>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Door } from "@/lib/door";
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
import MultiModal from "./MultiModal.vue";
|
|
import BulmaButton from "./bulma/Button.vue";
|
|
import CalendarDoor from "./calendar/CalendarDoor.vue";
|
|
import ThouCanvas from "./calendar/ThouCanvas.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
MultiModal,
|
|
BulmaButton,
|
|
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 show_doors = false;
|
|
private multi_modal?: MultiModal;
|
|
public figure_caption = this.idle_caption;
|
|
|
|
public modal_handle(modal: MultiModal) {
|
|
this.multi_modal = modal;
|
|
}
|
|
|
|
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() {
|
|
if (this.multi_modal === undefined) return;
|
|
this.multi_modal.show_progress();
|
|
}
|
|
|
|
public door_success(day: number, image_src: string) {
|
|
if (this.multi_modal === undefined) return;
|
|
this.multi_modal.show_image(image_src, this.$advent22.name_door(day));
|
|
}
|
|
|
|
public door_failure(msg: string) {
|
|
alert(msg);
|
|
if (this.multi_modal === undefined) return;
|
|
this.multi_modal.set_active(false);
|
|
}
|
|
}
|
|
</script>
|