toggle door visibility

ui/src/components/Calendar.vue

@@ -2,9 +2,21 @@
   <MultiModal @handle="modal_handle" />
 
   <figure>
-    <figcaption class="has-text-primary-dark">
+    <div class="level is-mobile mb-2">
-      {{ figure_caption }}
+      <div class="level-left">
-    </figcaption>
+        <figcaption class="level-item has-text-primary-dark">
+          {{ figure_caption }}
+        </figcaption>
+      </div>
+      <div class="level-right">
+        <BulmaButton
+          class="level-item tag is-link"
+          text="Türchen anzeigen"
+          :icon="'fa-solid fa-toggle-' + (show_doors ? 'on' : 'off')"
+          @click.left="show_doors = !show_doors"
+        />
+      </div>
+    </div>
     <div class="image is-unselectable">
       <img :src="$advent22.api_url('user/background_image')" />
       <ThouCanvas>
@@ -12,6 +24,7 @@
           v-for="(door, index) in doors"
           :key="`door-${index}`"
           :door="door"
+          :visible="show_doors"
           @doorClick="door_click"
           @doorSuccess="door_success"
           @doorFailure="door_failure"
@@ -30,12 +43,14 @@ import { Door } from "@/lib/door";
 import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "./MultiModal.vue";
+import BulmaButton from "./bulma/Button.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 @Options({
   components: {
     MultiModal,
+    BulmaButton,
     ThouCanvas,
     CalendarDoor,
   },
@@ -47,6 +62,7 @@ export default class extends Vue {
   public readonly doors!: Door[];
   private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
 
+  public show_doors = false;
   private multi_modal?: MultiModal;
   public figure_caption = this.idle_caption;
 

ui/src/components/calendar/CalendarDoor.vue

@@ -1,9 +1,11 @@
 <template>
   <SVGRect
     style="cursor: pointer"
+    :variant="visible ? 'primary' : undefined"
     :rectangle="door.position"
     @click.left="on_click"
   >
+    <div class="has-text-danger">{{ door.day }}</div>
   </SVGRect>
 </template>
 
@@ -19,11 +21,16 @@ import SVGRect from "./SVGRect.vue";
   },
   props: {
     door: Door,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["doorClick", "doorSuccess", "doorFailure"],
 })
 export default class extends Vue {
   public door!: Door;
+  public visible!: boolean;
 
   public on_click() {
     this.$emit("doorClick");