Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Calendar <figcaption>

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-09 23:52:58 +00:00
parent 74c22fc8a6
commit 6e4578ec5e
1 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/src/components/Calendar.vue
View file

@ -1,18 +1,25 @@
<template> <template>
<MultiModal ref="multi_modal" /> <MultiModal ref="multi_modal" />
<figure class="image is-unselectable"> <figure>
<img :src="$advent22.api_url('general/background')" /> <div class="image is-unselectable">
<ThouCanvas> <img :src="$advent22.api_url('general/background')" />
<CalendarDoor <ThouCanvas>
v-for="(_, index) in doors" <CalendarDoor
:key="`door-${index}`" v-for="(door, index) in doors"
:door="doors[index]" :key="`door-${index}`"
@doorClick="door_click" :door="door"
@doorSuccess="door_success" @doorClick="door_click"
@doorFailure="door_failure" @doorSuccess="door_success"
/> @doorFailure="door_failure"
</ThouCanvas> @touch="door_hover(door.day)"
@mouseover="door_hover(door.day)"
@touchend="door_unhover"
@mouseout="door_unhover"
/>
</ThouCanvas>
</div>
<figcaption>{{ figure_caption }}</figcaption>
</figure> </figure>
</template> </template>
@ -36,11 +43,21 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
}) })
export default class extends Vue { export default class extends Vue {
public readonly doors!: Door[]; public readonly doors!: Door[];
private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
public figure_caption = this.idle_caption;
declare $refs: { declare $refs: {
multi_modal: MultiModal; 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() { public door_click() {
this.$refs.multi_modal.show_progress(); this.$refs.multi_modal.show_progress();
} }