66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<section>
|
||
|
|
<div class="content">
|
||
|
|
<ul>
|
||
|
|
<li>Linksklick: Türchen auswählen</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<figure class="image">
|
||
|
|
<img src="@/assets/adventskalender.jpg" />
|
||
|
|
<ThouCanvas>
|
||
|
|
<Rect
|
||
|
|
v-for="(rect, index) in rectangles"
|
||
|
|
:key="'rect' + index"
|
||
|
|
:rectangle="rect"
|
||
|
|
@click.left="choose_rect(index)"
|
||
|
|
/>
|
||
|
|
<Rect
|
||
|
|
v-for="(rect, index) in rectangles_chosen"
|
||
|
|
:key="'rect_chosen' + index"
|
||
|
|
:rectangle="rect"
|
||
|
|
:focused="true"
|
||
|
|
/>
|
||
|
|
</ThouCanvas>
|
||
|
|
</figure>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Options, Vue } from "vue-class-component";
|
||
|
|
import { Rectangle } from "../rects/rectangles";
|
||
|
|
|
||
|
|
import ThouCanvas from "../rects/ThouCanvas.vue";
|
||
|
|
import Rect from "../rects/Rect.vue";
|
||
|
|
|
||
|
|
@Options({
|
||
|
|
components: {
|
||
|
|
ThouCanvas,
|
||
|
|
Rect,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
rectangles: Array,
|
||
|
|
},
|
||
|
|
emits: ["update:rectangles"],
|
||
|
|
})
|
||
|
|
export default class DoorChooser extends Vue {
|
||
|
|
private rectangles!: Rectangle[];
|
||
|
|
private rectangles_chosen: Rectangle[] = [];
|
||
|
|
|
||
|
|
public choose_rect(index: number) {
|
||
|
|
this.rectangles_chosen.push(this.rectangles.splice(index, 1)[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
public beforeUnmount() {
|
||
|
|
this.$emit(
|
||
|
|
"update:rectangles",
|
||
|
|
this.rectangles.concat(this.rectangles_chosen)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
section > figure {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
</style>
|