RectText component

ui/src/components/door_map/DoorChooser.vue

@@ -14,12 +14,13 @@
           :rectangle="rect"
           @click.left="choose_rect(index)"
         />
-        <Rect
+        <template
           v-for="(rect, index) in rectangles_chosen"
           :key="'rect_chosen' + index"
-          :rectangle="rect"
-          :focused="true"
-        />
+        >
+          <Rect :rectangle="rect" :focused="true" />
+          <RectText :rectangle="rect" :text="String(index)" />
+        </template>
       </ThouCanvas>
     </figure>
   </section>
@@ -31,11 +32,13 @@ import { Rectangle } from "../rects/rectangles";
 
 import ThouCanvas from "../rects/ThouCanvas.vue";
 import Rect from "../rects/Rect.vue";
+import RectText from "../rects/RectText.vue";
 
 @Options({
   components: {
     ThouCanvas,
     Rect,
+    RectText,
   },
   props: {
     rectangles: Array,

ui/src/components/rects/RectText.vue

@@ -0,0 +1,36 @@
+<template>
+  <text
+    :x="rectangle.left + 0.5 * rectangle.width"
+    :y="rectangle.top + 0.5 * rectangle.height"
+    text-anchor="middle"
+    dominant-baseline="middle"
+  >
+    {{ text }}
+  </text>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from "vue-class-component";
+import { Rectangle } from "./rectangles";
+
+@Options({
+  props: {
+    rectangle: Rectangle,
+    text: String,
+  },
+})
+export default class RectText extends Vue {
+  private rectangle!: Rectangle;
+  private text!: string;
+}
+</script>
+
+<style lang="scss" scoped>
+text {
+  fill: red;
+
+  font-weight: bold;
+  font-size: 40px;
+  font-stretch: condensed;
+}
+</style>