mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-11-23 00:03:07 +00:00
UI: one-indexed days
This commit is contained in:
parent
f5825ae19b
commit
c718ab7d42
5 changed files with 22 additions and 21 deletions
|
@ -50,8 +50,8 @@ export default class extends Vue {
|
|||
multi_modal: MultiModal;
|
||||
};
|
||||
|
||||
public door_hover(index: number) {
|
||||
this.figure_caption = `Türchen ${index + 1}`;
|
||||
public door_hover(day: number) {
|
||||
this.figure_caption = `Türchen ${day}`;
|
||||
}
|
||||
|
||||
public door_unhover() {
|
||||
|
|
|
@ -16,11 +16,12 @@
|
|||
<dt>Reihenfolge</dt>
|
||||
<dd>
|
||||
<template
|
||||
v-for="(day_part, idx) in admin_config_model.puzzle.day_parts"
|
||||
:key="`part-${idx}`"
|
||||
v-for="(day_part, index) in admin_config_model.puzzle
|
||||
.day_parts"
|
||||
:key="`part-${index}`"
|
||||
>
|
||||
<span>
|
||||
<template v-if="idx > 0"> – </template>
|
||||
<template v-if="index > 0"> – </template>
|
||||
{{ day_part.day }}:
|
||||
</span>
|
||||
<span class="is-family-monospace">{{ day_part.part }}</span>
|
||||
|
@ -64,11 +65,12 @@
|
|||
<dt>Türchen</dt>
|
||||
<dd>
|
||||
<template
|
||||
v-for="(day_part, idx) in admin_config_model.puzzle.day_parts"
|
||||
:key="`door-${idx}`"
|
||||
v-for="(day_part, index) in admin_config_model.puzzle
|
||||
.day_parts"
|
||||
:key="`door-${index}`"
|
||||
>
|
||||
<span>
|
||||
<template v-if="idx > 0">, </template>
|
||||
<template v-if="index > 0">, </template>
|
||||
{{ day_part.day }}
|
||||
</span>
|
||||
</template>
|
||||
|
@ -85,8 +87,8 @@
|
|||
|
||||
<dt>Schriftarten</dt>
|
||||
<dd
|
||||
v-for="(font, idx) in admin_config_model.image.fonts"
|
||||
:key="`font-${idx}`"
|
||||
v-for="(font, index) in admin_config_model.image.fonts"
|
||||
:key="`font-${index}`"
|
||||
>
|
||||
{{ font.file }} (Größe {{ font.size }})
|
||||
</dd>
|
||||
|
|
|
@ -89,10 +89,6 @@ export default class extends Vue {
|
|||
const data: DoorsSaved = [];
|
||||
|
||||
for (const door of this.doors) {
|
||||
if (door.day === -1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
data.push(door.save());
|
||||
}
|
||||
|
||||
|
|
|
@ -18,12 +18,12 @@
|
|||
ref="day_input"
|
||||
class="input is-large"
|
||||
type="number"
|
||||
min="-1"
|
||||
:min="MIN_DAY"
|
||||
placeholder="Tag"
|
||||
@keydown="on_keydown"
|
||||
/>
|
||||
<div v-else class="is-size-1 has-text-weight-bold">
|
||||
<template v-if="door.day >= 0">{{ door.day }}</template>
|
||||
<div v-else-if="door.day > 0" class="is-size-1 has-text-weight-bold">
|
||||
{{ door.day }}
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
@ -46,6 +46,7 @@ import SVGRect from "../calendar/SVGRect.vue";
|
|||
})
|
||||
export default class extends Vue {
|
||||
public door!: Door;
|
||||
public readonly MIN_DAY = Door.MIN_DAY;
|
||||
|
||||
public day_str = "";
|
||||
public editing = false;
|
||||
|
|
|
@ -12,12 +12,14 @@ export interface DoorSaved {
|
|||
export type DoorsSaved = DoorSaved[];
|
||||
|
||||
export class Door {
|
||||
private _day = -1;
|
||||
public static readonly MIN_DAY = 1;
|
||||
|
||||
private _day = Door.MIN_DAY;
|
||||
public position: Rectangle;
|
||||
|
||||
constructor(position: Rectangle);
|
||||
constructor(position: Rectangle, day: number);
|
||||
constructor(position: Rectangle, day = -1) {
|
||||
constructor(position: Rectangle, day = Door.MIN_DAY) {
|
||||
this.day = day;
|
||||
this.position = position;
|
||||
}
|
||||
|
@ -31,9 +33,9 @@ export class Door {
|
|||
const result = Number(day);
|
||||
|
||||
if (isNaN(result)) {
|
||||
this._day = -1;
|
||||
this._day = Door.MIN_DAY;
|
||||
} else {
|
||||
this._day = Math.max(Math.floor(result), -1);
|
||||
this._day = Math.max(Math.floor(result), Door.MIN_DAY);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue