Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 08:13:01 +00:00
Code Issues 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

23
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>
<div class="image is-unselectable">
<img :src="$advent22.api_url('general/background')" /> <img :src="$advent22.api_url('general/background')" />
<ThouCanvas> <ThouCanvas>
<CalendarDoor <CalendarDoor
v-for="(_, index) in doors" v-for="(door, index) in doors"
:key="`door-${index}`" :key="`door-${index}`"
:door="doors[index]" :door="door"
@doorClick="door_click" @doorClick="door_click"
@doorSuccess="door_success" @doorSuccess="door_success"
@doorFailure="door_failure" @doorFailure="door_failure"
@touch="door_hover(door.day)"
@mouseover="door_hover(door.day)"
@touchend="door_unhover"
@mouseout="door_unhover"
/> />
</ThouCanvas> </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();
} }