advent22/ui/src/components/door_map/DoorChooser.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)"
        />
        <template
          v-for="(rect, index) in rectangles_chosen"
          :key="`rect_chosen-${index}`"
        >
          <Rect :rectangle="rect" :focused="true" />
          <RectText :rectangle="rect" :text="String(index)" />
        </template>
      </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";
import RectText from "../rects/RectText.vue";

@Options({
  components: {
    ThouCanvas,
    Rect,
    RectText,
  },
  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>