3 files changed, 56 insertions, 43 deletions

diff --git a/src/scenes/hungry_partner.tsx b/src/scenes/hungry_partner.tsx
index 696870e..5198daf 100644
--- a/src/scenes/hungry_partner.tsx
+++ b/src/scenes/hungry_partner.tsx
@@ -1,8 +1,10 @@
-import { Node, Txt, makeScene2D } from "@motion-canvas/2d";
+import { Layout, Txt, makeScene2D } from "@motion-canvas/2d";
 import {
   Direction,
   beginSlide,
-  createRef,
+  range,
+  all,
+  makeRef,
   slideTransition,
 } from "@motion-canvas/core";
 
@@ -31,23 +33,27 @@ const hungryValentine = `(
   );
 
   const foodNames = Array.from(Object.keys(foods));
-  const shouldChooseRandom = Math.random() > 0.4; // side effect
+  const shouldChooseRandom = Math.random() > 0.7; // side effect
   return shouldChooseRandom
     ? foodNames[Math.floor(Math.random() * foodNames.length)]
     : bestFood;
 };`;
 
 export default makeScene2D(function* (view) {
-  const functionBox = createRef<FunctionBox>();
+  const functionBoxes: FunctionBox[] = [];
 
   view.add(
-    <FunctionBox
-      arity={4}
-      idlingText={"😴"}
-      workingText={"😋💭"}
-      source={hungryValentine}
-      ref={functionBox}
-    />,
+    <Layout direction={"column"} gap={20} layout>
+      {range(3).map((i) => (
+        <FunctionBox
+          arity={4}
+          idlingText={"😴"}
+          workingText={"😋💭"}
+          source={hungryValentine}
+          ref={makeRef(functionBoxes, i)}
+        />
+      ))}
+    </Layout>,
   );
 
   yield* slideTransition(Direction.Right);
@@ -59,50 +65,56 @@ export default makeScene2D(function* (view) {
   for (const [[a, b, c, d], i] of [
     [0.7, 0.1, 0.4, 0.1],
     [0.7, 0.1, 0.4, 0.1],
-    [0.7, 0.1, 0.4, 0.1],
-    [0.7, 0.1, 0.4, 0.1],
   ].map((x, i) => [x, i]) as [[number, number, number, number], number][]) {
     const inputId = "(" + [a, b, c, d, i].join(",") + ")";
 
-    yield* functionBox().reset(0.5);
-    yield* functionBox().setInputs(
-      [a, b, c, d].map((ratio, i) => ({
-        val: ratio,
-        node: (
-          <Txt fontFamily={theme.font} fill={theme.text.hex}>
-            {order[i]}:{" "}
-            <Txt
-              fontFamily={theme.font}
-              fill={
-                ratio > 0.6
-                  ? theme.red.hex
-                  : ratio < 0.3
-                    ? theme.green.hex
-                    : theme.lavender.hex
-              }
-            >
-              {ratio.toString()}
-            </Txt>
-          </Txt>
+    yield* all(...functionBoxes.map((box) => box.reset(0.5)));
+
+    yield* all(
+      ...functionBoxes.map((box) =>
+        box.setInputs(
+          [a, b, c, d].map((ratio, i) => ({
+            val: ratio,
+            node: (
+              <Txt fontFamily={theme.font} fill={theme.text.hex}>
+                {order[i]}:{" "}
+                <Txt
+                  fontFamily={theme.font}
+                  fill={
+                    ratio > 0.6
+                      ? theme.red.hex
+                      : ratio < 0.3
+                        ? theme.green.hex
+                        : theme.lavender.hex
+                  }
+                >
+                  {ratio.toString()}
+                </Txt>
+              </Txt>
+            ),
+          })),
+          0.5,
         ),
-      })),
-      0.5,
+      ),
     );
 
     yield* beginSlide("Add Inputs " + inputId);
+    yield* all(...functionBoxes.map((box) => box.propogateInput(0.5)));
 
-    yield* functionBox().propogateInput(0.5);
     yield* beginSlide("Propogate Inputs " + inputId);
 
-    yield* functionBox().propogateOutput(0.5);
+    yield* all(...functionBoxes.map((box) => box.propogateOutput(0.5)));
     yield* beginSlide("Propogate Outputs of " + inputId);
   }
 
-  yield* functionBox().reset(0.5);
+  yield* all(...functionBoxes.map((box) => box.reset(0.5)));
+
+  functionBoxes.slice(1).map((box) => box.remove());
 
-  yield* functionBox().showCode(0.85);
+  const [root] = functionBoxes;
+  yield* root.showCode(0.85);
   yield* beginSlide("Show Code");
 
-  yield* functionBox().hideCode(0.85);
+  yield* root.hideCode(0.85);
   yield* beginSlide("Hide Code");
 });
diff --git a/src/scenes/index.ts b/src/scenes/index.ts
index 1b467c0..8eab357 100644
--- a/src/scenes/index.ts
+++ b/src/scenes/index.ts
@@ -14,6 +14,6 @@ export const scenes = [
   //flirtingwithfunctions,
   //doctor,
   //first_box,
-  //hungry_partner,
+  hungry_partner,
   pure_functions,
 ];
diff --git a/src/scenes/pure_functions.tsx b/src/scenes/pure_functions.tsx
index af1cc4f..6025926 100644
--- a/src/scenes/pure_functions.tsx
+++ b/src/scenes/pure_functions.tsx
@@ -26,8 +26,9 @@ const impureFib = (n: number) => {
 impureFib;`;
 const impureFactFunction = `const impureFact = (n: number): number => {
   while (cache.length <= n)
-    cache.push(cache.length *
-              cache[cache.length - 1]);
+    cache.push(
+      cache.length * cache[cache.length - 1]
+    );
   return cache[n];
 };
 impureFact;`;