Restore the original Pixel pond

components/concepts/signal-desk/pond-environment.module.css

@@ -78,6 +78,12 @@
   opacity: 1;
 }
 
+.pond[data-switching] .pondHost,
+.pond[data-motion="reduced"] .pondHost,
+.pond[data-motion="reduced"] .pondSkeleton[skullet-reveal] {
+  transition: none;
+}
+
 .pondCanvas {
   display: block;
   width: 100%;
@@ -89,12 +95,16 @@
   visibility: hidden;
 }
 
-.pondHost > [data-pond-transition] {
+.pond > [data-pond-transition] {
   position: absolute;
   inset: 0;
+  z-index: 2;
   width: 100%;
   height: 100%;
   image-rendering: pixelated;
+}
+
+.pond > [data-pond-transition][data-fade] {
   animation: pond-view-fade 300ms cubic-bezier(0.22, 0.72, 0.24, 1) both;
 }
 
@@ -154,8 +164,4 @@
     animation: none;
   }
 
-  .pondHost > [data-pond-transition] {
-    animation: none;
-    display: none;
-  }
 }

components/concepts/signal-desk/pond-environment.tsx

@@ -13,36 +13,61 @@ export function PondEnvironment({ reduced, mode = "ascii" }: { reduced: boolean;
   const pondRef = useRef<HTMLDivElement>(null);
   const hostRef = useRef<HTMLDivElement>(null);
   const interactionRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const host = hostRef.current;
-    const pond = pondRef.current;
-    if (!host || !pond) return;
-    pond.dataset.view = mode;
-    host.dispatchEvent(new Event("pond-view-change"));
-  }, [mode]);
+  const transitionRef = useRef<HTMLImageElement | null>(null);
+  const reducedRef = useRef(reduced);
+  reducedRef.current = reduced;
 
   useEffect(() => {
     const pond = pondRef.current;
     const host = hostRef.current;
     const interaction = interactionRef.current;
     if (!pond || !host || !interaction) return;
 
+    pond.querySelectorAll('[data-pond-transition][data-fade]').forEach((image) => image.remove());
+    if (reduced) {
+      transitionRef.current?.remove();
+      transitionRef.current = null;
+    }
+    pond.dataset.motion = reduced ? "reduced" : "full";
+    pond.toggleAttribute("data-switching", Boolean(transitionRef.current));
+    pond.dataset.view = mode;
     pond.dataset.renderer = "loading";
+    for (const key of Object.keys(host.dataset)) delete host.dataset[key];
+    host.dataset.pondState = "loading";
     delete document.documentElement.dataset.pondBoot;
     const controller = new AbortController();
     let disposed = false;
     let cleanup = () => {};
-    void import("./pond-renderer")
-      .then(({ startPondRenderer }) => startPondRenderer({
+    let capture: (() => string) | undefined;
+    const observer = new MutationObserver(() => {
+      if (pond.dataset.renderer !== "three" && pond.dataset.renderer !== "fallback") return;
+      const image = transitionRef.current;
+      if (!image || reduced) {
+        image?.remove();
+        pond.removeAttribute("data-switching");
+      } else {
+        image.dataset.fade = "";
+        image.addEventListener("animationend", () => {
+          if (image.parentElement !== pond) return;
+          image.remove();
+          if (!pond.querySelector("[data-pond-transition]")) pond.removeAttribute("data-switching");
+        }, { once: true });
+      }
+      transitionRef.current = null;
+    });
+    observer.observe(pond, { attributes: true, attributeFilter: ["data-renderer"] });
+    void (mode === "pixel" ? import("./pond-pixel-renderer") : import("./pond-renderer"))
+      .then(({ startPondRenderer }) => disposed ? undefined : startPondRenderer({
         pond,
         host,
         interaction,
         reduced,
         canvasClassName: styles.pondCanvas,
         signal: controller.signal,
+        onCaptureReady: (snapshot) => { capture = snapshot; },
       }))
       .then((stop) => {
+        if (!stop) return;
         if (disposed) stop();
         else cleanup = stop;
       })
@@ -56,10 +81,25 @@ export function PondEnvironment({ reduced, mode = "ascii" }: { reduced: boolean;
 
     return () => {
       disposed = true;
+      observer.disconnect();
+      if (!reduced && !reducedRef.current && capture && pond.dataset.renderer === "three") {
+        try {
+          const image = document.createElement("img");
+          image.alt = "";
+          image.dataset.pondTransition = "";
+          image.src = capture();
+          transitionRef.current?.remove();
+          transitionRef.current = image;
+          pond.append(image);
+        } catch {
+          transitionRef.current?.remove();
+          transitionRef.current = null;
+        }
+      }
       controller.abort();
       cleanup();
     };
-  }, [reduced]);
+  }, [mode, reduced]);
 
   return (
     <>

components/concepts/signal-desk/pond-pixel-model.ts

@@ -0,0 +1,144 @@
+export type PondPoint = { x: number; y: number };
+
+export type PondTarget = {
+  id: string;
+  type: "fish" | "fly";
+  position: PondPoint;
+  velocity: PondPoint;
+  visible: boolean;
+  attackable: boolean;
+  interactionRange: number;
+  bodyRadius?: number;
+  species?: string;
+  danger?: number;
+};
+
+export type FishFoodState = "dropping" | "floating" | "depleted";
+
+export type FishFoodEntity = {
+  id: string;
+  position: PondPoint;
+  age: number;
+  state: FishFoodState;
+  remainingAmount: number;
+  attractionRadius: number;
+  consumed: boolean;
+  expired: boolean;
+  pelletSize: number;
+  settleDelay: number;
+  lifetime: number;
+  dropProgress: number;
+};
+
+export type FishFoodStateName =
+  | "cruising"
+  | "detecting-food"
+  | "approaching-food"
+  | "circling"
+  | "feeding"
+  | "startled"
+  | "returning-to-cruise";
+
+export type FishWorldIntent = {
+  fishId: string;
+  state: FishFoodStateName;
+  foodId: string | null;
+  goal: PondPoint | null;
+  arrivalRadius: number;
+  speedScale: number;
+  reserved: boolean;
+  feedingPulse: number;
+  reason: string;
+};
+
+export type FlyRoutineState = "hovering" | "foraging" | "resting" | "startled";
+
+export type FlyWorldIntent = {
+  flyId: string;
+  state: FlyRoutineState;
+  goal: PondPoint;
+  speedScale: number;
+  reason: string;
+};
+
+export type PondWorldEvent =
+  | { type: "ambient-ripple"; position: PondPoint; strength: number }
+  | { type: "food-dropped"; foodId: string; position: PondPoint; rippleStrength: number; merged: boolean }
+  | { type: "fish-state"; fishId: string; from: FishFoodStateName; to: FishFoodStateName; reason: string }
+  | { type: "fish-noticed-food"; fishId: string; foodId: string }
+  | { type: "fish-reserved-food"; fishId: string; foodId: string; slot: number }
+  | { type: "fish-arrived"; fishId: string; foodId: string; position: PondPoint }
+  | { type: "fish-fed"; fishId: string; foodId: string; position: PondPoint; remainingAmount: number }
+  | { type: "food-expired"; foodId: string; position: PondPoint; consumed: boolean; reason: "consumed" | "lifetime" | "capacity" }
+  | { type: "fly-state"; flyId: string; from: FlyRoutineState; to: FlyRoutineState; reason: string };
+
+export type PondWorldInput = {
+  now: number;
+  delta: number;
+  targets: readonly PondTarget[];
+  foodApproach?: (fish: PondTarget, food: PondPoint, arrivalRadius: number, preferred: PondPoint) => PondPoint | null;
+};
+
+export type PondWorldFrame = {
+  environment: {
+    wind: number;
+    currentA: PondPoint;
+    currentB: PondPoint;
+    surfaceA: PondPoint;
+    surfaceB: PondPoint;
+    light: number;
+  };
+  foods: readonly FishFoodEntity[];
+  fish: readonly FishWorldIntent[];
+  flies: readonly FlyWorldIntent[];
+  events: readonly PondWorldEvent[];
+  debug: {
+    seed: number;
+  };
+};
+
+export function pondDistance(a: PondPoint, b: PondPoint) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+export function pondLerp(a: number, b: number, amount: number) {
+  return a + (b - a) * amount;
+}
+
+export function pondClamp(value: number, minimum: number, maximum: number) {
+  return Math.max(minimum, Math.min(maximum, value));
+}
+
+export function pondSmoothstep(value: number) {
+  const clamped = pondClamp(value, 0, 1);
+  return clamped * clamped * (3 - 2 * clamped);
+}
+
+export function pondAngleDelta(from: number, to: number) {
+  return Math.atan2(Math.sin(to - from), Math.cos(to - from));
+}
+
+export function pondHashSeed(value: string | number) {
+  if (typeof value === "number") return value >>> 0;
+  let hash = 2166136261;
+  for (let index = 0; index < value.length; index += 1) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function seededRandom(seed: number) {
+  let state = seed >>> 0;
+  return () => {
+    state += 0x6d2b79f5;
+    let value = state;
+    value = Math.imul(value ^ (value >>> 15), value | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export function createPondRandom(seedValue: string | number) {
+  return seededRandom(pondHashSeed(seedValue));
+}