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>
        <SVGRect
          v-for="(door, index) in unchosen_doors"
          :key="`door-${index}`"
          :rectangle="door.position"
          @click.left="choose_door(index)"
          style="cursor: pointer"
        />
        <template
          v-for="(door, index) in chosen_doors"
          :key="`door_chosen-${index}`"
        >
          <SVGRect :rectangle="door.position" :focused="true" />
          <SVGRectText :rectangle="door.position" :text="String(door.day)" />
        </template>
      </ThouCanvas>
    </figure>
  </section>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Door } from "./calendar";

import ThouCanvas from "../rects/ThouCanvas.vue";
import SVGRect from "../rects/SVGRect.vue";
import SVGRectText from "../rects/SVGRectText.vue";

@Options({
  components: {
    ThouCanvas,
    SVGRect,
    SVGRectText,
  },
  props: {
    doors: Array,
  },
  emits: ["update:doors"],
})
export default class extends Vue {
  private doors!: Door[];
  private day = 0;

  private get chosen_doors(): Door[] {
    return this.doors.filter((door) => door.day !== undefined);
  }

  private get unchosen_doors(): Door[] {
    return this.doors.filter((door) => door.day === undefined);
  }

  private choose_door(index: number) {
    this.unchosen_doors[index].day = this.day;
    this.day++;
  }

  public beforeUnmount() {
    this.$emit("update:doors", this.doors);
  }
}
</script>

<style lang="scss" scoped>
section > figure {
  user-select: none;
}
</style>