zones as nodes

packages/viewer/src/components/renderers/level/level-renderer.tsx

@@ -1,14 +1,12 @@
-import { type LevelNode, useRegistry, useScene } from "@pascal-app/core";
-import { useRef } from "react";
-import type { Group } from "three";
-import { useShallow } from "zustand/shallow";
-import { NodeRenderer } from "../node-renderer";
-import { ZoneRenderer } from "../zone/zone-renderer";
+import { type LevelNode, useRegistry } from '@pascal-app/core'
+import { useRef } from 'react'
+import type { Group } from 'three'
+import { NodeRenderer } from '../node-renderer'
 
 export const LevelRenderer = ({ node }: { node: LevelNode }) => {
-  const ref = useRef<Group>(null!);
+  const ref = useRef<Group>(null!)
 
-  useRegistry(node.id, node.type, ref);
+  useRegistry(node.id, node.type, ref)
 
   return (
     <group ref={ref}>
@@ -19,17 +17,6 @@ export const LevelRenderer = ({ node }: { node: LevelNode }) => {
       {node.children.map((childId) => (
         <NodeRenderer key={childId} nodeId={childId} />
       ))}
-      <LevelZones levelId={node.id} />
     </group>
-  );
-};
-
-const LevelZones = ({ levelId }: { levelId: LevelNode["id"] }) => {
-  const zoneIds = useScene(
-    useShallow((s) =>
-      s.zoneIds.filter((id) => s.zones[id]?.levelId === levelId),
-    ),
-  );
-
-  return zoneIds.map((zoneId) => <ZoneRenderer key={zoneId} zoneId={zoneId} />);
-};
+  )
+}