Added room type definitions, drafted room drawing funtion

src/App.tsx

@@ -7,6 +7,7 @@ import {
 } from "@material-ui/core";
 
 import { RoomContextProvider } from "./context";
+import { BuildingPlan } from "./components/BuildingPlan";
 
 export const App = () => {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
@@ -25,7 +26,7 @@ export const App = () => {
     <ThemeProvider theme={theme}>
       <RoomContextProvider>
         <CssBaseline />
-        Here goes content soon!
+        <BuildingPlan height={window.innerHeight} width={window.innerWidth} />
       </RoomContextProvider>
     </ThemeProvider>
   );

src/components/BuildingPlan.tsx

@@ -0,0 +1,28 @@
+import { RoomT } from "../types/room";
+import { Canvas } from "./Canvas";
+
+export type BuildingPlanProps = { width: number; height: number };
+
+export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
+  const room: RoomT = {
+    coordinates: { x: 100, y: 200 },
+    free: true,
+    size: { h: 100, w: 200 },
+  };
+
+  return (
+    <Canvas
+      height={height}
+      width={width}
+      draw={(ctx) => {
+        ctx.fillStyle = room.free ? "green" : "gray";
+        ctx.fillRect(
+          room.coordinates.x,
+          room.coordinates.y,
+          room.size.w,
+          room.size.h
+        );
+      }}
+    />
+  );
+};

src/types/room.ts

@@ -0,0 +1,5 @@
+export type RoomT = {
+  coordinates: { x: number; y: number };
+  size: { w: number; h: number };
+  free: boolean;
+};