zone rendering

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

@@ -1,12 +1,14 @@
-import { type LevelNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
-import type { Group } from 'three'
-import { NodeRenderer } from '../node-renderer'
+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";
 
 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}>
@@ -17,6 +19,17 @@ 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} />);
+};

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

@@ -1,10 +1,12 @@
-'use client'
+"use client";
 
-import { useScene } from '@pascal-app/core'
-import { NodeRenderer } from './node-renderer'
+import { useScene } from "@pascal-app/core";
+import { NodeRenderer } from "./node-renderer";
 
 export const SceneRenderer = () => {
-  const rootNodes = useScene((state) => state.rootNodeIds)
+  const rootNodes = useScene((state) => state.rootNodeIds);
 
-  return rootNodes.map((nodeId) => <NodeRenderer key={nodeId} nodeId={nodeId} />)
-}
+  return rootNodes.map((nodeId) => (
+    <NodeRenderer key={nodeId} nodeId={nodeId} />
+  ));
+};

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

@@ -0,0 +1,17 @@
+import { useRegistry, type Zone } from "@pascal-app/core";
+
+import { useRef } from "react";
+import type { Group } from "three";
+
+export const ZoneRenderer = ({ zoneId }: { zoneId: Zone["id"] }) => {
+  const ref = useRef<Group>(null!);
+  useRegistry(zoneId, "zone", ref);
+
+  return (
+    <mesh ref={ref}>
+      {/* <shapeGeometry /> */}
+      <boxGeometry args={[1, 1, 1]} />
+      <meshBasicNodeMaterial color="pink" />
+    </mesh>
+  );
+};