From 37738e424984b639a45a6655a179644873c535b3 Mon Sep 17 00:00:00 2001
From: Brian Beck <exogen@gmail.com>
Date: Thu, 13 Nov 2025 23:45:51 -0800
Subject: [PATCH] finish WaterBlock

---
 app/InteriorInstance.tsx |  6 ++++++
 app/TerrainBlock.tsx     |  3 +++
 app/WaterBlock.tsx       | 41 ++++++++++++++++++++++++++++++++++++----
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/app/InteriorInstance.tsx b/app/InteriorInstance.tsx
index 8f212968..65c622ef 100644
--- a/app/InteriorInstance.tsx
+++ b/app/InteriorInstance.tsx
@@ -13,6 +13,9 @@ import { setupColor } from "@/src/textureUtils";
 
 const FALLBACK_URL = `${BASE_URL}/black.png`;
 
+/**
+ * Load a .gltf file that was converted from a .dif, used for "interior" models.
+ */
 function useInterior(interiorFile: string) {
   const url = interiorToUrl(interiorFile);
   return useGLTF(url);
@@ -32,6 +35,9 @@ function InteriorTexture({ material }: { material: Material }) {
 }
 
 function InteriorMesh({ node }: { node: Mesh }) {
+  if (Array.isArray(node.material)) {
+    throw new Error("Unexpected multi-material node");
+  }
   return (
     <mesh geometry={node.geometry} castShadow receiveShadow>
       {node.material ? (
diff --git a/app/TerrainBlock.tsx b/app/TerrainBlock.tsx
index 3660a7f3..4b047a94 100644
--- a/app/TerrainBlock.tsx
+++ b/app/TerrainBlock.tsx
@@ -26,6 +26,9 @@ import {
   updateTerrainTextureShader,
 } from "@/src/textureUtils";
 
+/**
+ * Load a .ter file, used for terrain heightmap and texture info.
+ */
 function useTerrain(terrainFile: string) {
   return useQuery({
     queryKey: ["terrain", terrainFile],
diff --git a/app/WaterBlock.tsx b/app/WaterBlock.tsx
index 5bf2b329..6ecd811f 100644
--- a/app/WaterBlock.tsx
+++ b/app/WaterBlock.tsx
@@ -1,10 +1,43 @@
-import { ConsoleObject } from "@/src/mission";
+import { textureToUrl } from "@/src/loaders";
+import {
+  ConsoleObject,
+  getPosition,
+  getProperty,
+  getRotation,
+  getScale,
+} from "@/src/mission";
+import { setupColor } from "@/src/textureUtils";
+import { useTexture } from "@react-three/drei";
+import { Suspense, useMemo } from "react";
+
+export function WaterMaterial({ surfaceTexture }: { surfaceTexture: string }) {
+  const url = textureToUrl(surfaceTexture);
+  const texture = useTexture(url, (texture) => setupColor(texture, [8, 8]));
+
+  return <meshStandardMaterial map={texture} transparent opacity={0.8} />;
+}
 
 export function WaterBlock({ object }: { object: ConsoleObject }) {
+  const [z, y, x] = useMemo(() => getPosition(object), [object]);
+  const [scaleZ, scaleY, scaleX] = useMemo(() => getScale(object), [object]);
+  const q = useMemo(() => getRotation(object, true), [object]);
+
+  const surfaceTexture =
+    getProperty(object, "surfaceTexture")?.value ?? "liquidTiles/BlueWater";
+
   return (
-    <mesh>
-      <boxGeometry />
-      <meshStandardMaterial color="blue" transparent opacity={0.5} />
+    <mesh
+      position={[x - 1024 + scaleX / 2, y + scaleY / 2, z - 1024 + scaleZ / 2]}
+      quaternion={q}
+    >
+      <boxGeometry args={[scaleZ, scaleY, scaleX]} />
+      <Suspense
+        fallback={
+          <meshStandardMaterial color="blue" transparent opacity={0.3} />
+        }
+      >
+        <WaterMaterial surfaceTexture={surfaceTexture} />
+      </Suspense>
     </mesh>
   );
 }