refactor: viewSize

packages/app/src/components/app/play/renderable/index.jsx

@@ -4,6 +4,7 @@ import {
   React,
   useCallback,
   useEffect,
+  useFlecks,
   useState,
 } from '@flecks/react';
 
@@ -19,14 +20,15 @@ import {
 const renderer = new Renderer();
 
 const RoomStage = () => {
+  const flecks = useFlecks();
   const selfEntity = useSelfEntity();
   const [container] = useState(new Container());
   const [roomRenderable, setRoomRenderable] = useState();
-  const [viewport] = useState([320, 180]);
+  const [viewSize, setViewSize] = useState(flecks.get('@avocado/topdown.viewSize'));
   const room = useRoom();
   useEffect(() => {
-    [container.x, container.y] = Vector.scale(viewport, 0.5);
-  }, [container, viewport]);
+    [container.x, container.y] = Vector.scale(viewSize, 0.5);
+  }, [container, viewSize]);
   useEffect(() => {
     if (!room) {
       return undefined;
@@ -43,7 +45,7 @@ const RoomStage = () => {
       return undefined;
     }
     const {camera} = selfEntity;
-    const halfViewport = Vector.scale(viewport, 0.5);
+    const halfViewport = Vector.scale(viewSize, 0.5);
     camera.realPosition = camera.position;
     const onCameraRealOffsetChanged = () => {
       roomRenderable.renderChunksForExtent(camera.rectangle);
@@ -53,20 +55,26 @@ const RoomStage = () => {
       container.rotation = camera.rotation;
     };
     const onCameraScaleChanged = () => {
-      [container.scaleX, container.scaleY] = camera.scale;
+      [container.scaleX, container.scaleY] = [1, 1] || camera.scale;
+    };
+    const onCameraViewSizeChanged = () => {
+      setViewSize(camera.viewSize);
     };
     onCameraRealOffsetChanged();
     onCameraRotationChanged();
     onCameraScaleChanged();
+    onCameraViewSizeChanged();
     camera.on('realOffsetChanged', onCameraRealOffsetChanged);
     camera.on('rotationChanged', onCameraRotationChanged);
     camera.on('scaleChanged', onCameraScaleChanged);
+    camera.on('viewSize', onCameraViewSizeChanged);
     return () => {
       camera.off('realOffsetChanged', onCameraRealOffsetChanged);
       camera.off('rotationChanged', onCameraRotationChanged);
       camera.off('scaleChanged', onCameraScaleChanged);
+      camera.off('viewSize', onCameraViewSizeChanged);
     };
-  }, [container, roomRenderable, selfEntity, viewport]);
+  }, [container, roomRenderable, selfEntity, viewSize]);
   const ticker = useCallback(
     (elapsed) => {
       container.renderTick(elapsed);
@@ -90,7 +98,7 @@ const RoomStage = () => {
       scalable={false}
       renderer={renderer}
       renderable={container}
-      size={viewport}
+      size={viewSize}
       ticker={ticker}
     />
   );