Added room title to data model and canvas view

src/components/BuildingPlan.tsx

@@ -9,10 +9,24 @@ export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
 
   const draw = useCallback(
     (ctx: CanvasRenderingContext2D) => {
-      state.map.map(({ coordinates, size }, index) => {
+      // Text styles
+      ctx.font = "20px sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+
+      state.map.map(({ coordinates, size, title }, index) => {
+        // Draw room rectangle
         const { free } = state.char[index];
         ctx.fillStyle = free ? "green" : "gray";
         ctx.fillRect(coordinates.x, coordinates.y, size.w, size.h);
+
+        // Draw its number
+        ctx.fillStyle = "black";
+        ctx.fillText(
+          `${title}`,
+          coordinates.x + size.w / 2,
+          coordinates.y + size.h / 2
+        );
       });
     },
     [state.char, state.map]

src/constants.ts

@@ -27,7 +27,11 @@ export const defaultState: ContextData = {
     { x: 110, y: 5 },
     { x: 5, y: 110 },
     { x: 110, y: 110 },
-  ].map((coordinates) => ({ coordinates, size: { w: 100, h: 100 } })),
+  ].map((coordinates, index) => ({
+    coordinates,
+    size: { w: 100, h: 100 },
+    title: index + 1,
+  })),
   char: Array(4)
     .fill(0)
     .map(() => ({

src/types/room.ts

@@ -1,6 +1,7 @@
 export interface RoomDisplay {
   coordinates: { x: number; y: number };
   size: { w: number; h: number };
+  title: string | number;
 }
 
 export interface RoomState {