Narrow objects to viewport

This doesn't work for doors yet but we're getting into the weeds

src/App.jsx

@@ -187,7 +187,7 @@ export default function App({
           ))
         )}
       </div> */}
-      <Visualizer startWorld={startWorld} />
+      <Visualizer startWorld={startWorld} width={width} height={height} />
     </>
   )
 }

src/Visualizer.jsx

@@ -2,11 +2,12 @@ import { useState, useEffect, useCallback } from 'react';
 
 import useEvent from './hooks/useEvent';
 
-export default function Visualizer({ startWorld }) {
+export default function Visualizer({ startWorld, width, height }) {
   const [rawWorld, setRawWorld] = useState(null);
   const [rawInteractions, setRawInteractions] = useState({});
   const [rawOverlays, setRawOverlays] = useState({});
   const [rawItems, setRawItems] = useState({});
+  const [origin, setOrigin] = useState(null);
   const [fontDemo, setFontDemo] = useState(null);
 
   useEffect(() => {
@@ -16,6 +17,20 @@ export default function Visualizer({ startWorld }) {
     setRawItems({});
   }, [startWorld]);
 
+  useEffect(() => {
+    setRawInteractions((interactions) => Object.fromEntries(
+      Object.entries(interactions).filter(
+        ([key, { type, coordinate }]) => type !== 'npc' && (
+          !coordinate || (
+            origin[0] <= coordinate[0]
+            && coordinate[0] < origin[0] + height
+            && origin[1] <= coordinate[1]
+            && coordinate[1] < origin[1] + width
+          ))  // fixme: doesn't get doors because it's baked in the key string
+      ))
+    );
+  }, [origin]);
+
   useEffect(() => {
     fetch(`world/debug.txt`)
       .then((res) => res.text())
@@ -26,6 +41,7 @@ export default function Visualizer({ startWorld }) {
   useEventInteractions({ setRawInteractions });
   useEventOverlays({ setRawOverlays });
   useEventItems({ setRawItems });
+  useEventOrigin({ setOrigin });
 
   return (
     <div id="visualizer">
@@ -185,3 +201,10 @@ function useEventItems({ setRawItems }) {
   }, []);
   useEvent('_item', itemHandler);
 }
+
+function useEventOrigin({ setOrigin }) {
+  const originHandler = useCallback(({ detail: origin }) => {
+    setOrigin(origin)
+  }, []);
+  useEvent('origin', originHandler);
+}

src/components/DisplayWorld.jsx

@@ -105,6 +105,10 @@ export default function DisplayWorld({
     });
   }, [zone, origin, size, animation]);
 
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent('origin', { detail: origin }));
+  }, [origin])
+
   // Find responders to ambient events
   useEffect(() => {
     const ambientHandler = ({ detail: { name }}) => {