refactor: camera propagation

app/react-components/ecs.jsx

@@ -1,7 +1,6 @@
 import {Container} from '@pixi/react';
 import {useEffect, useState} from 'react';
 
-import {RESOLUTION} from '@/constants.js';
 import {useEcs, useEcsTick} from '@/context/ecs.js';
 import {useMainEntity} from '@/context/main-entity.js';
 
@@ -27,11 +26,10 @@ function calculateDarkness(hour) {
   return Math.floor(darkness * 1000) / 1000;
 }
 
-export default function Ecs({applyFilters, scale}) {
+export default function Ecs({applyFilters, camera, scale}) {
   const [ecs] = useEcs();
   const [filters, setFilters] = useState([]);
   const [mainEntity] = useMainEntity();
-  const [camera, setCamera] = useState({x: 0, y: 0});
   const [layers, setLayers] = useState([]);
   const [hour, setHour] = useState(10);
   const [night, setNight] = useState();
@@ -66,9 +64,6 @@ export default function Ecs({applyFilters, scale}) {
     }
   }, [hour, night]);
   useEcsTick((payload) => {
-    if (!ecs) {
-      return;
-    }
     const entity = ecs.get(mainEntity);
     for (const id in payload) {
       const update = payload[id];
@@ -86,14 +81,6 @@ export default function Ecs({applyFilters, scale}) {
           }
           break;
         }
-        case mainEntity: {
-          const {Camera} = entity;
-          setCamera({
-            x: Math.round((Camera.x * scale) - RESOLUTION.x / 2),
-            y: Math.round((Camera.y * scale) - RESOLUTION.y / 2),
-          });
-          break;
-        }
       }
     }
     if (entity) {

app/react-components/pixi.jsx

@@ -45,7 +45,7 @@ export const Stage = ({children, ...props}) => {
   );
 };
 
-export default function Pixi({applyFilters, scale}) {
+export default function Pixi({applyFilters, camera, scale}) {
   return (
     <Stage
       className={styles.stage}
@@ -55,7 +55,11 @@ export default function Pixi({applyFilters, scale}) {
         background: 0x1099bb,
       }}
     >
-      <Ecs applyFilters={applyFilters} scale={scale} />
+      <Ecs
+        applyFilters={applyFilters}
+        camera={camera}
+        scale={scale}
+      />
     </Stage>
   );
 }

app/react-components/ui.jsx

@@ -56,6 +56,7 @@ export default function Ui({disconnected}) {
   const [bufferSlot, setBufferSlot] = useState();
   const [devtoolsIsOpen, setDevtoolsIsOpen] = useState(false);
   const ratio = (RESOLUTION.x * (devtoolsIsOpen ? 2 : 1)) / RESOLUTION.y;
+  const [camera, setCamera] = useState({x: 0, y: 0});
   const [hotbarSlots, setHotbarSlots] = useState(emptySlots());
   const [activeSlot, setActiveSlot] = useState(0);
   const [scale, setScale] = useState(2);
@@ -258,7 +259,14 @@ export default function Ui({disconnected}) {
         }
       }
     }
-  }, [ecs, mainEntity]);
+    if (localMainEntity) {
+      const mainEntityEntity = ecs.get(localMainEntity);
+      setCamera({
+        x: Math.round((mainEntityEntity.Camera.x * scale) - RESOLUTION.x / 2),
+        y: Math.round((mainEntityEntity.Camera.y * scale) - RESOLUTION.y / 2),
+      });
+    }
+  }, [ecs, mainEntity, scale]);
   useEffect(() => {
     function onContextMenu(event) {
       event.preventDefault();
@@ -367,7 +375,11 @@ export default function Ui({disconnected}) {
         }}
         ref={gameRef}
       >
-        <Pixi applyFilters={applyFilters} scale={scale} />
+        <Pixi
+          applyFilters={applyFilters}
+          camera={camera}
+          scale={scale}
+        />
         <Dom devtoolsIsOpen={devtoolsIsOpen}>
           <HotBar
             active={activeSlot}