advent22/ui/src/components/rects/Rect.vue

<template>
  <rect
    :class="classes"
    :x="rectangle.left"
    :y="rectangle.top"
    :width="rectangle.width"
    :height="rectangle.height"
  />
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { Rectangle } from "./rectangles";

@Options({
  props: {
    focused: {
      type: Boolean,
      default: false,
    },
    rectangle: Rectangle,
  },
})
export default class Rect extends Vue {
  private focused!: boolean;
  private rectangle!: Rectangle;

  private get classes(): string {
    let result: string[] = [];

    if (this.focused) {
      result.push("focus");
    }

    return result.join(" ");
  }
}
</script>

<style lang="scss" scoped>
rect {
  fill: lightgreen;
  stroke: green;
  fill-opacity: 0.2;
  stroke-opacity: 0.9;
  stroke-width: 1;

  &.focus {
    fill: gold;
    stroke: yellow;
  }
}
</style>