1 files changed, 290 insertions, 0 deletions
diff --git a/src/components/function_box.tsx b/src/components/function_box.tsx
new file mode 100644
index 0000000..3c65062
--- /dev/null
+++ b/src/components/function_box.tsx
@@ -0,0 +1,290 @@
+import {
+  Img,
+  Rect,
+  Node,
+  Video,
+  makeScene2D,
+  Txt,
+  Line,
+  LineSegment,
+  NodeProps,
+} from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  map,
+  slideTransition,
+  tween,
+  all,
+  waitFor,
+  range,
+  makeRef,
+} from "@motion-canvas/core";
+
+import { CodeBlock } from "@motion-canvas/2d/lib/components/CodeBlock";
+import { theme } from "../theme";
+
+import * as ts from "typescript";
+
+export interface FunctionBoxProps extends NodeProps {
+  source?: string;
+  fn?: Function;
+  padding?: number;
+  delta?: number;
+
+  workingText?: string;
+  idlingText?: string;
+
+  arity?: number;
+
+  isChild?: boolean;
+}
+
+type FunctionArgs = { node?: Node; val: any }[];
+
+/*
+<Node ref={this.node} opacity={0}>
+            <CodeBlock
+              fontFamily={theme.font}
+              language="typescript"
+              ref={this.block}
+              fontSize={1}
+              code={this.source}
+            ></CodeBlock>
+          </Node>
+ */
+
+export class FunctionBox extends Node {
+  private readonly source: string;
+  private readonly workingText: string;
+  private readonly idlingText: string;
+  private readonly function: any;
+  private readonly delta: number;
+  private readonly arity: number;
+  private readonly padding: number;
+
+  private readonly block = createRef<CodeBlock>();
+  private readonly node = createRef<Node>();
+  private readonly rect = createRef<Rect>();
+
+  private readonly boxMoji = createRef<Txt>();
+  private readonly inputSegments: Line[] = [];
+  private readonly inputs: Rect[] = [];
+  private readonly outputSegment = createRef<Line>();
+  private readonly output = createRef<Node>();
+  private readonly child = createRef<FunctionBox>();
+
+  private readonly isChild: boolean;
+
+  private currentArgs: FunctionArgs = [];
+
+  public constructor(props?: FunctionBoxProps) {
+    super({
+      ...props,
+    });
+
+    this.arity = props?.arity ?? 1;
+    if (props.fn) {
+      this.source = props.fn.toString();
+      this.function = props.fn;
+    } else {
+      this.source = props?.source ?? `(x: number): number => x + 2`;
+
+      const functionCode = ts.transpile(this.source);
+      this.function = eval(functionCode);
+    }
+
+    this.delta = props?.delta ?? 20;
+    this.padding = props?.padding ?? 100;
+
+    this.workingText = props?.workingText ?? "👷‍♀️⚙️";
+    this.idlingText = props?.idlingText ?? "😴";
+
+    this.isChild = props?.isChild ?? false;
+
+    this.add(
+      <Rect
+        opacity={this.opacity}
+        direction={"row"}
+        alignItems={"center"}
+        layout
+      >
+        <Rect direction={"column"} alignItems={"end"}>
+          {range(this.arity).map((i) => (
+            <Rect direction={"row"} alignItems={"center"} gap={10}>
+              <Rect
+                direction={"row"}
+                ref={makeRef(this.inputs, i)}
+                justifyContent={"end"}
+                opacity={1}
+              ></Rect>
+
+              <Line
+                points={[]}
+                stroke={theme.green.hex}
+                ref={makeRef(this.inputSegments, i)}
+                lineWidth={5}
+                arrowSize={10}
+                endArrow
+              ></Line>
+            </Rect>
+          ))}
+        </Rect>
+
+        <Rect
+          ref={this.rect}
+          radius={4}
+          stroke={theme.overlay0.hex}
+          fill={theme.crust.hex}
+          lineWidth={4}
+          padding={60}
+          direction={"row"}
+          height={"100%"}
+          gap={40}
+        >
+          <Txt fontFamily={theme.font} fill={theme.text.hex} ref={this.boxMoji}>
+            {this.idlingText}
+          </Txt>
+        </Rect>
+
+        <Rect direction={"column"} height={"100%"} alignItems={"end"}>
+          <Rect direction={"row"} alignItems={"center"} gap={10}>
+            <Line
+              points={[]}
+              stroke={theme.red.hex}
+              lineWidth={5}
+              arrowSize={10}
+              ref={this.outputSegment}
+              endArrow
+            ></Line>
+            <Rect
+              direction={"row"}
+              ref={this.output}
+              justifyContent={"end"}
+              opacity={1}
+            ></Rect>
+          </Rect>
+        </Rect>
+      </Rect>,
+    );
+  }
+
+  public *resetInput(duration: number) {
+    yield* all(
+      ...this.inputs.map((x) =>
+        all(
+          x.opacity(0, duration),
+          x.height(0, duration),
+          x.width(0, duration),
+        ),
+      ),
+      ...this.inputSegments.map((segment) => segment.points([], duration)),
+    );
+  }
+
+  public *resetOutput(duration: number) {
+    yield* all(
+      this.output().opacity(0, duration),
+      this.outputSegment().points([], duration),
+    );
+    yield this.output().removeChildren();
+  }
+
+  public *reset(duration: number) {
+    yield* all(this.resetInput(duration), this.resetOutput(duration));
+  }
+
+  public *setInputs(args: FunctionArgs, duration: number) {
+    if (args.length != this.arity)
+      throw new Error("input length must equal function arity");
+    this.currentArgs = args;
+
+    this.inputs.forEach((input, i) => {
+      input.removeChildren();
+      input.add(
+        args[i].node ?? (
+          <Txt fontFamily={theme.font} fontSize={30} fill={theme.text.hex}>
+            {args[i].val.toString()}
+          </Txt>
+        ),
+      );
+    });
+    yield* all(
+      ...this.inputSegments.map((segment) =>
+        segment.points(
+          [
+            { x: -this.padding, y: 0 },
+            { x: -this.delta, y: 0 },
+          ],
+          duration,
+        ),
+      ),
+      ...this.inputs.map((input) =>
+        all(
+          input.height(40, duration),
+          input.width(40, duration),
+          input.opacity(1, duration),
+        ),
+      ),
+    );
+  }
+
+  public *propogateInput(duration: number) {
+    const opacityChangeDuration = 0.1;
+
+    yield* all(
+      ...this.inputSegments.map((segment) =>
+        segment.opacity(0.2, opacityChangeDuration),
+      ),
+    );
+
+    yield* all(
+      ...this.inputSegments.map((segment) => segment.points([], duration)),
+    );
+
+    yield* all(
+      ...this.inputSegments.map((segment) =>
+        segment.opacity(1, opacityChangeDuration),
+      ),
+      ...this.inputs.map((input) => input.opacity(0, opacityChangeDuration)),
+      this.boxMoji().text(this.workingText, duration),
+    );
+  }
+
+  public *propogateOutput(duration: number) {
+    const opacityChangeDuration = 0.1;
+
+    const output = this.function(...this.currentArgs.map((input) => input.val));
+    if (typeof output === "function") {
+      yield this.output().add(
+        <FunctionBox
+          opacity={0}
+          isChild={true}
+          ref={this.child}
+          fn={output}
+        ></FunctionBox>,
+      );
+    } else {
+      yield this.output().add(
+        <Txt fontFamily={theme.font} fontSize={30} fill={theme.text.hex}>
+          {output.toString()}
+        </Txt>,
+      );
+    }
+
+    yield* all(
+      this.boxMoji().text(this.idlingText, duration),
+      this.outputSegment().points(
+        [
+          { x: -this.delta, y: 0 },
+          { x: this.padding, y: 0 },
+        ],
+        duration,
+      ),
+      this.child()?.opacity(1, duration),
+      this.output().opacity(1, duration),
+      this.outputSegment().opacity(1, duration),
+    );
+  }
+}