1 files changed, 91 insertions, 0 deletions
diff --git a/src/scenes/function_dna.tsx b/src/scenes/function_dna.tsx
new file mode 100644
index 0000000..64098d3
--- /dev/null
+++ b/src/scenes/function_dna.tsx
@@ -0,0 +1,91 @@
+import { makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  all,
+  beginSlide,
+  createRef,
+  slideTransition,
+} from "@motion-canvas/core";
+import { PEOPLE, Person, PersonI } from "../components/person";
+import { birthdayCardFn, valentineCardFn } from "./generalized";
+import { CardI } from "./birthday_letters";
+import { FunctionBox } from "../components/function_box";
+
+export const cardGeneratorFor = (
+  person: PersonI,
+  type: string,
+): (() => CardI) => {
+  const birthdayCardGenerator = () => birthdayCardFn(person);
+  const valentineCardGenerator = () => valentineCardFn(person);
+
+  switch (type) {
+    case "valentine":
+      return valentineCardGenerator;
+    case "birthday":
+      return birthdayCardGenerator;
+  }
+
+  throw new Error(type + " not implemented");
+};
+
+export const cardGeneratorForSource = `const cardGeneratorFor = (person: PersonI, type: string): (() => CardI) => {
+  const birthdayCardGenerator = () => birthdayCardFn(person); // closure
+  const valentineCardGenerator = () => valentineCardFn(person); // closure
+
+  switch (type) {
+    case "valentine":
+      return valentineCardGenerator;
+    case "birthday":
+      return birthdayCardGenerator;
+  }
+
+  throw new Error(type + " not implemented");
+}`;
+
+export default makeScene2D(function* (view) {
+  const box = createRef<FunctionBox>();
+
+  view.add(
+    <FunctionBox
+      arity={2}
+      ref={box}
+      fn={cardGeneratorFor}
+      source={cardGeneratorForSource}
+      outputFontSize={20}
+    />,
+  );
+
+  yield* all(
+    box().reset(0.1),
+    box().showCode(0.5),
+    slideTransition(Direction.Left, 0.5),
+  );
+
+  yield* beginSlide("show code");
+
+  const [alan] = PEOPLE;
+  yield* box().setInputs(
+    [{ val: alan, node: <Person person={alan} /> }, { val: "valentine" }],
+    0.5,
+  );
+
+  yield* beginSlide("show inputs");
+
+  yield* box().hideCode(0.5);
+  yield* box().propogateInput(0.5);
+  yield* box().propogateOutput(0.5);
+
+  yield* beginSlide("create child function");
+
+  const child = box().getChild();
+  yield* child().showCode(0.5);
+
+  yield* beginSlide("show child function");
+
+  yield* child().hideCode(0.5);
+  yield* child().setInputs([{ val: "" }], 0.5);
+  yield* child().propogateInput(0.5);
+  yield* child().propogateOutput(0.5);
+
+  yield* beginSlide("propogate child function");
+});