advent22/ui/src/components/calendar/CalendarDoor.vue

<template>
  <SVGRect
    variant="primary"
    :visible="store.is_touch_device || force_visible"
    :rectangle="door.position"
  >
    <div
      class="has-text-danger"
      style="text-shadow: 0 0 10px white, 0 0 20px white"
    >
      {{ door.day }}
    </div>
  </SVGRect>
</template>

<script setup lang="ts">
import { VueDoor } from "@/lib/rects/door";
import { advent22Store } from "@/lib/store";

import SVGRect from "./SVGRect.vue";

const store = advent22Store();

withDefaults(
  defineProps<{
    door: VueDoor;
    force_visible?: boolean;
  }>(),
  {
    force_visible: false,
  },
);
</script>