flow: room render
This commit is contained in:
parent
f4b0c605d8
commit
e6f7fd4e95
|
@ -30,7 +30,7 @@ const RoomComponent = ({
|
||||||
const {Room} = latus.get('%resources');
|
const {Room} = latus.get('%resources');
|
||||||
const [room, setRoom] = useState();
|
const [room, setRoom] = useState();
|
||||||
const [roomRenderable, setRoomRenderable] = useState();
|
const [roomRenderable, setRoomRenderable] = useState();
|
||||||
const [viewport] = useState([320, 180]);
|
const [viewport, setViewport] = useState([0, 0]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setRoom();
|
setRoom();
|
||||||
const loadRoom = async () => {
|
const loadRoom = async () => {
|
||||||
|
@ -56,13 +56,12 @@ const RoomComponent = ({
|
||||||
const load = async () => {
|
const load = async () => {
|
||||||
await room.load(resource);
|
await room.load(resource);
|
||||||
const roomRenderable = new (room.constructor.Renderable)(room, renderer);
|
const roomRenderable = new (room.constructor.Renderable)(room, renderer);
|
||||||
roomRenderable.renderChunksForExtent(Rectangle.compose(
|
const viewport = Vector.mul(
|
||||||
[0, 0],
|
room.tiles[0].area,
|
||||||
Vector.mul(
|
room.tiles[0].tileSize,
|
||||||
room.tiles[0].area,
|
);
|
||||||
room.tiles[0].tileSize,
|
setViewport(viewport);
|
||||||
),
|
roomRenderable.renderChunksForExtent(Rectangle.compose([0, 0], viewport));
|
||||||
));
|
|
||||||
setRoomRenderable(roomRenderable);
|
setRoomRenderable(roomRenderable);
|
||||||
};
|
};
|
||||||
load();
|
load();
|
||||||
|
@ -74,7 +73,6 @@ const RoomComponent = ({
|
||||||
<div className="room-renderer">
|
<div className="room-renderer">
|
||||||
<Stage
|
<Stage
|
||||||
centered={false}
|
centered={false}
|
||||||
scalable={false}
|
|
||||||
renderer={renderer}
|
renderer={renderer}
|
||||||
renderable={roomRenderable}
|
renderable={roomRenderable}
|
||||||
size={viewport}
|
size={viewport}
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
.room-renderer {
|
||||||
|
|
||||||
|
&, .stage, .canvas-host {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-host {
|
||||||
|
display: block;
|
||||||
|
overflow: scroll;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-slider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user