Centred canvas

apps/front/src/App.tsx

@@ -10,15 +10,22 @@ import { Header } from "./components/Header";
 const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(10, 2, 2, 2),
+    boxSizing: "border-box",
     height: "100vh",
-    overflow: "hidden",
+    width: "100vw",
+    margin: 0,
     "& > div": {
       height: "100%",
     },
-    "& > div > *": {
+    "& > div > div": {
       height: "100%",
     },
   },
+  canvasContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
 }));
 
 export const App = () => {
@@ -40,8 +47,13 @@ export const App = () => {
     <AppTheme>
       <RoomContextProvider>
         <Header />
-        <Grid className={classes.root} container>
+        <Grid spacing={2} className={classes.root} container>
-          <Grid ref={planContainer} item xs={9}>
+          <Grid
+            className={classes.canvasContainer}
+            ref={planContainer}
+            item
+            xs={9}
+          >
             <BuildingPlan width={canvasSize.w} height={canvasSize.h} />
           </Grid>
           <Grid item xs={3}>

apps/front/src/components/BuildingPlan.tsx

@@ -5,7 +5,7 @@ import { useRoomContext } from "../context";
 import { RoomDisplay } from "../types/room";
 import { Canvas } from "./Canvas";
 
-export type BuildingPlanProps = { width?: number; height?: number };
+export type BuildingPlanProps = { width: number; height: number };
 
 const getRoomByCoord = (x: number, y: number, map: RoomDisplay[]) => {
   for (let i = 0; i < map.length; i++) {
@@ -53,7 +53,7 @@ export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
         );
       });
     },
-    [state.char, state.map]
+    [state.char, state.map, state.boardSize]
   );
 
   const clickCb = (x: number, y: number) => {
@@ -63,7 +63,12 @@ export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
 
   return (
     <>
-      <Canvas clickCb={clickCb} height={height} width={width} draw={draw} />
+      <Canvas
+        clickCb={clickCb}
+        height={Math.min(height, state.boardSize.h)}
+        width={Math.min(width, state.boardSize.w)}
+        draw={draw}
+      />
     </>
   );
 };

apps/front/src/constants.ts

@@ -1,27 +1,8 @@
 import { ContextData } from "./types/context";
-import { PeriodFormat } from "./types/time";
-
-export const lessonPeriods: readonly PeriodFormat[] = [
-  "8:30-9:10",
-  "9:20-10:00",
-  "10:15-10:55",
-  "11:10-11:50",
-  "12:00-12:40",
-  "12:50-13:30",
-] as const;
-
-export const WeekDays = [
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday",
-  "Sunday",
-] as const;
 
 export const defaultState: ContextData = {
   map: [],
   char: [],
   ids: {},
+  boardSize: { w: 0, h: 0 },
 };

apps/front/src/context.tsx

@@ -40,6 +40,9 @@ export const RoomContextProvider: FC = ({ children }) => {
             char: RoomState[] = [],
             ids: Record<number, number> = {};
 
+          let maxWidth = 0,
+            maxHeight = 0;
+
           for (const {
             x,
             y,
@@ -56,9 +59,17 @@ export const RoomContextProvider: FC = ({ children }) => {
             });
             char.push({ free });
             ids[id] = map.length - 1;
+
+            maxHeight = Math.max(maxHeight, y + h);
+            maxWidth = Math.max(maxWidth, x + w);
           }
 
-          setState({ map, char, ids });
+          setState({
+            map,
+            char,
+            ids,
+            boardSize: { w: maxWidth, h: maxHeight },
+          });
         } else if (isUpdateMessage(message)) {
           setState(
             produce((draft) => {

apps/front/src/types/context.ts

@@ -4,6 +4,7 @@ export interface ContextData {
   map: RoomDisplay[];
   char: RoomState[];
   ids: Record<number, number>;
+  boardSize: { w: number; h: number };
 }
 
 export type ContextValue = {

apps/front/src/types/time.ts

@@ -1,5 +0,0 @@
-import { WeekDays } from "../constants";
-
-export type PeriodFormat = `${number}:${number}-${number}:${number}`;
-
-export type WeekDay = typeof WeekDays[number];