Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 00:03:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

DoorChooser usable but bad

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-02-02 18:06:55 +00:00
parent d0756fda92
commit ef5281e57b
3 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +1,28 @@
<template> <template>
<section> <section>
<div class="content"> <div class="content">
<p class="title is-5">Steuerung</p>
<ul> <ul>
<li>Linksklick: Türchen auswählen</li> <li>Linksklick: Türchen hochzählen</li>
<li>Rechtsklick: Türchen runterzählen</li>
</ul> </ul>
</div> </div>
<figure class="image"> <figure class="image">
<img src="@/assets/adventskalender.jpg" /> <img src="@/assets/adventskalender.jpg" />
<ThouCanvas> <ThouCanvas>
<SVGRect <template v-for="(door, index) in doors" :key="`door-${index}`">
v-for="(door, index) in unchosen_doors" <SVGRectText
:key="`door-${index}`" v-if="door.day >= 0"
:rectangle="door.position" :text="String(door.day)"
@click.left="choose_door(index)" :rectangle="door.position"
style="cursor: pointer" />
/> <SVGRect
<template :rectangle="door.position"
v-for="(door, index) in chosen_doors" :focused="door.day >= 0"
:key="`door_chosen-${index}`" @click.left="door.day++"
> @click.right="door.day--"
<SVGRect :rectangle="door.position" :focused="true" /> style="cursor: pointer"
<SVGRectText :rectangle="door.position" :text="String(door.day)" /> />
</template> </template>
</ThouCanvas> </ThouCanvas>
</figure> </figure>
@ -48,20 +50,6 @@ import SVGRectText from "../rects/SVGRectText.vue";
}) })
export default class extends Vue { export default class extends Vue {
private doors!: Door[]; 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() { public beforeUnmount() {
this.$emit("update:doors", this.doors); this.$emit("update:doors", this.doors);

3
ui/src/components/door_map/DoorPlacer.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<section> <section>
<div class="content"> <div class="content">
<p class="title is-5">Steuerung</p>
<ul> <ul>
<li>Linksklick + Ziehen: Neues Türchen erstellen</li> <li>Linksklick + Ziehen: Neues Türchen erstellen</li>
<li>Rechtsklick + Ziehen: Türchen verschieben</li> <li>Rechtsklick + Ziehen: Türchen verschieben</li>
@ -42,7 +43,7 @@ export default class extends Vue {
} }
private on_draw(position: Rectangle) { private on_draw(position: Rectangle) {
this.doors.push({ position: position }); this.doors.push(new Door(position));
} }
private find_door_index(position: Rectangle): number { private find_door_index(position: Rectangle): number {

19
ui/src/components/door_map/calendar.ts
View file

@ -1,6 +1,19 @@
import { Rectangle } from "../rects/rectangles"; import { Rectangle } from "../rects/rectangles";
export interface Door { export class Door {
day?: number; private _day = -1;
position: Rectangle; public position: Rectangle;
constructor(position: Rectangle, day = -1) {
this.day = day;
this.position = position;
}
public get day(): number {
return this._day
}
public set day(day: number) {
this._day = Math.max(day, -1);
}
} }