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

fixes for (still crude) DoorChooser

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-02-02 15:29:26 +00:00
parent 1695e8651c
commit d0756fda92
2 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/DoorMapEditor.vue
View file

@ -5,7 +5,7 @@
<BulmaBreadcrumbs :steps="steps" v-model="current_step" /> <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
<DoorPlacer v-if="current_step === 0" v-model:doors="doors" /> <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
<!-- <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" /> --> <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
<p v-if="current_step === 2">Bar</p> <p v-if="current_step === 2">Bar</p>
</div> </div>
</template> </template>
@ -13,7 +13,6 @@
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Vue, Options } from "vue-class-component";
import { Door } from "./door_map/calendar"; import { Door } from "./door_map/calendar";
import { Rectangle } from "./rects/rectangles";
import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue"; import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue"; import DoorPlacer from "./door_map/DoorPlacer.vue";
@ -34,6 +33,5 @@ export default class extends Vue {
]; ];
private current_step = 0; private current_step = 0;
private doors: Door[] = []; private doors: Door[] = [];
private rectangles: Rectangle[] = [];
} }
</script> </script>

44
ui/src/components/door_map/DoorChooser.vue
View file

@ -9,18 +9,18 @@
<img src="@/assets/adventskalender.jpg" /> <img src="@/assets/adventskalender.jpg" />
<ThouCanvas> <ThouCanvas>
<SVGRect <SVGRect
v-for="(rect, index) in rectangles" v-for="(door, index) in unchosen_doors"
:key="`rect-${index}`" :key="`door-${index}`"
:rectangle="rect" :rectangle="door.position"
@click.left="choose_rect(index)" @click.left="choose_door(index)"
style="cursor: pointer" style="cursor: pointer"
/> />
<template <template
v-for="(rect, index) in rectangles_chosen" v-for="(door, index) in chosen_doors"
:key="`rect_chosen-${index}`" :key="`door_chosen-${index}`"
> >
<SVGRect :rectangle="rect" :focused="true" /> <SVGRect :rectangle="door.position" :focused="true" />
<SVGRectText :rectangle="rect" :text="String(index)" /> <SVGRectText :rectangle="door.position" :text="String(door.day)" />
</template> </template>
</ThouCanvas> </ThouCanvas>
</figure> </figure>
@ -29,7 +29,7 @@
<script lang="ts"> <script lang="ts">
import { Options, Vue } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Rectangle } from "../rects/rectangles"; import { Door } from "./calendar";
import ThouCanvas from "../rects/ThouCanvas.vue"; import ThouCanvas from "../rects/ThouCanvas.vue";
import SVGRect from "../rects/SVGRect.vue"; import SVGRect from "../rects/SVGRect.vue";
@ -42,23 +42,29 @@ import SVGRectText from "../rects/SVGRectText.vue";
SVGRectText, SVGRectText,
}, },
props: { props: {
rectangles: Array, doors: Array,
}, },
emits: ["update:rectangles"], emits: ["update:doors"],
}) })
export default class extends Vue { export default class extends Vue {
private rectangles!: Rectangle[]; private doors!: Door[];
private rectangles_chosen: Rectangle[] = []; private day = 0;
public choose_rect(index: number) { private get chosen_doors(): Door[] {
this.rectangles_chosen.push(this.rectangles.splice(index, 1)[0]); 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() { public beforeUnmount() {
this.$emit( this.$emit("update:doors", this.doors);
"update:rectangles",
this.rectangles.concat(this.rectangles_chosen)
);
} }
} }
</script> </script>