Initial building map is now fetched from server

apps/front/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
+    "@roomruler/messages": "workspace:^0.0.0",
     "immer": "^9.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

apps/front/src/components/Canvas.tsx

@@ -41,7 +41,7 @@ export const useCanvas = (
 
       clickCb(x, y);
     },
-    [canvasRef.current]
+    [canvasRef.current, clickCb]
   );
 
   return { canvasRef, onClick };

apps/front/src/config.ts

@@ -0,0 +1 @@
+export const WS_URL = "ws://localhost:8081";

apps/front/src/constants.ts

@@ -20,21 +20,8 @@ export const WeekDays = [
   "Sunday",
 ] as const;
 
-// It will look like Windows 11 logo, lol
 export const defaultState: ContextData = {
-  map: [
-    { x: 5, y: 5 },
-    { x: 110, y: 5 },
-    { x: 5, y: 110 },
-    { x: 110, y: 110 },
-  ].map((coordinates, index) => ({
-    coordinates,
-    size: { w: 100, h: 100 },
-    title: index + 1,
-  })),
-  char: Array(4)
-    .fill(0)
-    .map(() => ({
-      free: true,
-    })),
+  map: [],
+  char: [],
+  ids: {},
 };

apps/front/src/context.tsx

@@ -1,20 +1,47 @@
 import produce from "immer";
-import { createContext, FC, useContext, useState } from "react";
+import { createContext, FC, useContext, useEffect, useState } from "react";
 
 import { defaultState } from "./constants";
 import { ContextData, ContextValue } from "./types/context";
+import { isArrayOf, isMessage, isRoom } from "@roomruler/messages";
+import { WS_URL } from "./config";
+import { RoomDisplay, RoomState } from "./types/room";
 
 const Context = createContext<ContextValue | undefined>(undefined);
 
+const ws = new WebSocket(WS_URL);
+
 export const RoomContextProvider: FC = ({ children }) => {
   const [state, setState] = useState<ContextData>(defaultState);
 
-  const toggleFree = (index: number) =>
-    setState(
-      produce((draft) => {
-        draft.char[index].free = !draft.char[index].free;
-      })
-    );
+  const toggleFree = (index: number) => {};
+
+  useEffect(() => {
+    ws.onmessage = ({ data }) => {
+      const message: unknown = JSON.parse(data);
+      if (isMessage(message) && isArrayOf(message.args, isRoom)) {
+        const map: RoomDisplay[] = [],
+          char: RoomState[] = [],
+          ids: Record<number, number> = {};
+
+        for (const {
+          x,
+          y,
+          height: h,
+          width: w,
+          title,
+          free,
+          id,
+        } of message.args) {
+          map.push({ coordinates: { x, y }, size: { w, h }, title: title });
+          char.push({ free });
+          ids[id] = map.length - 1;
+        }
+
+        setState({ map, char, ids });
+      }
+    };
+  }, []);
 
   return (
     <Context.Provider value={{ state, toggleFree }}>

apps/front/src/types/context.ts

@@ -3,6 +3,7 @@ import { RoomDisplay, RoomState } from "./room";
 export interface ContextData {
   map: RoomDisplay[];
   char: RoomState[];
+  ids: Record<number, number>;
 }
 
 export type ContextValue = {

apps/front/tsconfig.json

@@ -4,5 +4,7 @@
     "target": "es6",
     "module": "ESNext",
     "jsx": "react-jsx"
-  }
+  },
+  "include": ["src"],
+  "references": [{ "path": "../../packages/messages/tsconfig.json" }]
 }

apps/front/vite.config.js

@@ -4,4 +4,6 @@ export default defineConfig({
   esbuild: {
     jsxInject: `import React from "react"`,
   },
+  optimizeDeps: { include: ["@roomruler/messages"] },
+  
 });