opt: render and compositing

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

@@ -3,7 +3,9 @@ import {usePropertyChange} from '@avocado/react';
 import {RoomUi} from '@avocado/topdown';
 import {
   React,
+  useEffect,
   useFlecks,
+  useRef,
 } from '@flecks/react';
 
 import {
@@ -15,13 +17,34 @@ import styles from './index.module.scss';
 
 const PlayUi = () => {
   const {config: {'@humus/app': {resolution}}} = useFlecks();
+  const ref = useRef();
   const room = useRoom();
   const selfEntity = useSelfEntity();
+  const viewSize = usePropertyChange(selfEntity?.camera, 'viewSize', [0, 0]);
+  const {camera} = selfEntity || {};
+  // Update the transform.
+  useEffect(() => {
+    if (!ref.current || !room || !camera) {
+      return undefined;
+    }
+    const onRealOffsetChanged = () => {
+      const translated = Vector.mul(
+        Vector.scale(camera.realOffset, -1),
+        Vector.div(resolution, viewSize),
+      );
+      ref.current
+        .style.transform = `translate(${translated[0]}px, ${translated[1]}px)`;
+    };
+    camera.on('realOffsetChanged', onRealOffsetChanged);
+    return () => {
+      camera.off('realOffsetChanged', onRealOffsetChanged);
+    };
+  }, [camera, ref, resolution, room, viewSize]);
   return (
     <div className={styles.ui}>
       <RoomUi
-        domScale={Vector.div(resolution, usePropertyChange(selfEntity?.camera, 'viewSize', [0, 0]))}
-        position={Vector.scale(usePropertyChange(selfEntity?.camera, 'realOffset', [0, 0]), -1)}
+        domScale={Vector.div(resolution, viewSize)}
+        ref={ref}
         room={room}
       />
       {selfEntity && <Hotbar selfEntity={selfEntity} />}

packages/app/src/components/app/play/ui/index.module.scss

@@ -1,5 +1,6 @@
 .ui {
   height: 100%;
-  position: relative;
+  // Move children to a separate composite layer.
+  position: absolute;
   width: 100%;
 }