Added basic draw function for list of rooms

This commit is contained in:
Dmitriy Shishkov 2021-09-04 03:53:33 +03:00
parent 8b7f83a14a
commit 77661df39b
No known key found for this signature in database
GPG Key ID: 14358F96FCDD8060

View File

@ -1,27 +1,21 @@
import { RoomT } from "../types/room";
import { useRoomContext } from "../context";
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 },
};
const { state } = useRoomContext();
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
);
state.map.map(({ coordinates, size }, index) => {
const { free } = state.char[index];
ctx.fillStyle = free ? "green" : "gray";
ctx.fillRect(coordinates.x, coordinates.y, size.w, size.h);
});
}}
/>
);