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 glow">{{ door.day }}</div>
  </SVGRect>
</template>

<style lang="scss" scoped>
@import "@/bulma-scheme";

.glow {
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px $primary,
      0 0 40px $primary, 0 0 50px $primary, 0 0 60px $primary, 0 0 70px $primary;
  }
  to {
    text-shadow: 0 0 10px white;
  }
}
</style>

<script lang="ts">
import { Door } from "@/lib/door";
import { advent22Store } from "@/plugins/store";
import { Options, Vue } from "vue-class-component";

import SVGRect from "./SVGRect.vue";

@Options({
  components: {
    SVGRect,
  },
  props: {
    door: Door,
    force_visible: {
      type: Boolean,
      default: false,
    },
  },
})
export default class extends Vue {
  public readonly store = advent22Store();

  public door!: Door;
  public force_visible!: boolean;
}
</script>