1 files changed, 88 insertions, 63 deletions
diff --git a/src/components/function_box.tsx b/src/components/function_box.tsx
index e1ed497..9f72979 100644
--- a/src/components/function_box.tsx
+++ b/src/components/function_box.tsx
@@ -72,9 +72,13 @@ export class FunctionBox extends Node {
     this.padding = props?.padding ?? 100;
 
     this.workingText = props?.workingText ?? "👷‍♀️⚙️";
+
     this.idlingText = props?.idlingText ?? "😴";
 
     this.isChild = props?.isChild ?? false;
+    if (this.isChild) {
+      this.idlingText += " | 🧬";
+    }
 
     this.outputFontSize = props?.outputFontSize ?? 30;
     this.inputFontSize = props?.inputFontSize ?? 30;
@@ -82,80 +86,97 @@ export class FunctionBox extends Node {
     this.add(
       <Rect
         opacity={this.opacity}
-        direction={"row"}
-        alignItems={"center"}
+        direction="column"
+        alignItems="center"
         layout
       >
-        <Rect direction={"column"} alignItems={"end"} gap={10}>
-          {range(this.arity).map((i) => (
-            <Rect direction={"row"} alignItems={"center"} gap={10}>
-              <Rect
-                direction={"row"}
+        <Rect direction="row" alignItems="center">
+          <Rect
+            direction="column"
+            justifyContent="center"
+            alignItems="end"
+            gap={10}
+          >
+            {range(this.arity).map((i) => (
+              <Rect direction="row" alignItems="center" gap={10}>
+                <Rect
+                  direction="row"
+                  fontSize={0}
+                  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%"
+            alignItems="center"
+          >
+            <Txt
+              fontFamily={theme.font}
+              fill={theme.text.hex}
+              ref={this.boxMoji}
+            >
+              {this.idlingText}
+            </Txt>
+            <Rect
+              gap={10}
+              alignItems="center"
+              direction="column"
+              ref={this.node}
+              opacity={0}
+            >
+              <CodeBlock
+                fontFamily={theme.font}
+                language="typescript"
+                ref={this.block}
                 fontSize={0}
-                ref={makeRef(this.inputs, i)}
-                justifyContent={"end"}
-                opacity={1}
-              ></Rect>
+                code={this.source}
+              ></CodeBlock>
+            </Rect>
+          </Rect>
 
+          <Rect
+            direction="column"
+            height={"100%"}
+            alignItems={"end"}
+            justifyContent="center"
+          >
+            <Rect direction="row" alignItems="center" gap={10}>
               <Line
                 points={[]}
-                stroke={theme.green.hex}
-                ref={makeRef(this.inputSegments, i)}
+                stroke={theme.red.hex}
                 lineWidth={5}
                 arrowSize={10}
+                ref={this.outputSegment}
                 endArrow
               ></Line>
+              <Rect
+                direction={"row"}
+                ref={this.output}
+                justifyContent={"end"}
+                opacity={1}
+                fontSize={0}
+              ></Rect>
             </Rect>
-          ))}
-        </Rect>
-
-        <Rect
-          ref={this.rect}
-          radius={4}
-          stroke={theme.overlay0.hex}
-          fill={theme.crust.hex}
-          lineWidth={4}
-          padding={60}
-          direction="row"
-          height="100%"
-          alignItems="center"
-        >
-          <Txt fontFamily={theme.font} fill={theme.text.hex} ref={this.boxMoji}>
-            {this.idlingText}
-          </Txt>
-          <Node ref={this.node} opacity={0}>
-            <CodeBlock
-              fontFamily={theme.font}
-              language="typescript"
-              ref={this.block}
-              fontSize={0}
-              code={this.source}
-            ></CodeBlock>
-          </Node>
-        </Rect>
-
-        <Rect
-          direction="column"
-          height={"100%"}
-          alignItems={"end"}
-          justifyContent="center"
-        >
-          <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}
-              fontSize={0}
-            ></Rect>
           </Rect>
         </Rect>
       </Rect>,
@@ -252,11 +273,15 @@ export class FunctionBox extends Node {
     const output = this.function(...this.currentArgs.map((input) => input.val));
     switch (typeof output) {
       case "function":
+        console.dir(output);
+
         yield this.output().add(
           <FunctionBox
             opacity={0}
             isChild={true}
             ref={this.child}
+            outputFontSize={this.outputFontSize}
+            inputFontSize={this.inputFontSize}
             fn={output}
           ></FunctionBox>,
         );