From 5b8b3abcba8746502014266583907421b71a330b Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Thu, 8 Feb 2024 18:36:10 -0700 Subject: add hungry partner function --- src/components/function_box.tsx | 180 ++++++++++++++++++++++------------------ 1 file changed, 100 insertions(+), 80 deletions(-) (limited to 'src/components') diff --git a/src/components/function_box.tsx b/src/components/function_box.tsx index e046d63..43d3985 100644 --- a/src/components/function_box.tsx +++ b/src/components/function_box.tsx @@ -1,31 +1,10 @@ -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 { Rect, Node, Txt, Line, NodeProps } from "@motion-canvas/2d"; +import { createRef, all, range, makeRef } from "@motion-canvas/core"; import { CodeBlock } from "@motion-canvas/2d/lib/components/CodeBlock"; import { theme } from "../theme"; -import * as ts from "typescript"; +import { transpile } from "typescript"; export interface FunctionBoxProps extends NodeProps { source?: string; @@ -33,6 +12,9 @@ export interface FunctionBoxProps extends NodeProps { padding?: number; delta?: number; + inputFontSize?: number; + outputFontSize?: number; + workingText?: string; idlingText?: string; @@ -43,18 +25,6 @@ export interface FunctionBoxProps extends NodeProps { type FunctionArgs = { node?: Node; val: any }[]; -/* - - - - */ - export class FunctionBox extends Node { private readonly source: string; private readonly workingText: string; @@ -72,11 +42,14 @@ export class FunctionBox extends Node { private readonly inputSegments: Line[] = []; private readonly inputs: Rect[] = []; private readonly outputSegment = createRef(); - private readonly output = createRef(); + private readonly output = createRef(); private readonly child = createRef(); private readonly isChild: boolean; + private readonly inputFontSize: number; + private readonly outputFontSize: number; + private currentArgs: FunctionArgs = []; public constructor(props?: FunctionBoxProps) { @@ -91,7 +64,7 @@ export class FunctionBox extends Node { } else { this.source = props?.source ?? `(x: number): number => x + 2`; - const functionCode = ts.transpile(this.source); + const functionCode = transpile(this.source); this.function = eval(functionCode); } @@ -103,6 +76,9 @@ export class FunctionBox extends Node { this.isChild = props?.isChild ?? false; + this.outputFontSize = props?.outputFontSize ?? 30; + this.inputFontSize = props?.inputFontSize ?? 30; + this.add( {this.idlingText} + + + @@ -163,6 +148,7 @@ export class FunctionBox extends Node { ref={this.output} justifyContent={"end"} opacity={1} + fontSize={this.outputFontSize} > @@ -173,22 +159,25 @@ export class FunctionBox extends Node { public *resetInput(duration: number) { yield* all( ...this.inputs.map((x) => - all( - x.opacity(0, duration), - x.height(0, duration), - x.width(0, duration), - ), + all(x.opacity(0, duration), x.fontSize(0, duration)), + ), + ...this.inputSegments.map((segment) => + all(segment.points([], duration), segment.opacity(1, duration)), ), - ...this.inputSegments.map((segment) => segment.points([], duration)), ); + + this.inputs.forEach((x) => x.removeChildren()); } public *resetOutput(duration: number) { yield* all( this.output().opacity(0, duration), + this.output().fontSize(0, duration), this.outputSegment().points([], duration), + this.outputSegment().opacity(0, duration), ); - yield this.output().removeChildren(); + + this.output().removeChildren(); } public *reset(duration: number) { @@ -204,7 +193,7 @@ export class FunctionBox extends Node { input.removeChildren(); input.add( args[i].node ?? ( - + {args[i].val.toString()} ), @@ -222,68 +211,99 @@ export class FunctionBox extends Node { ), ...this.inputs.map((input) => all( - input.height(40, duration), - input.width(40, duration), input.opacity(1, duration), + input.fontSize(this.inputFontSize, duration), ), ), ); } public *propogateInput(duration: number) { - const opacityChangeDuration = 0.1; - yield* all( ...this.inputSegments.map((segment) => - segment.opacity(0.2, opacityChangeDuration), + all(segment.opacity(0.2, duration), segment.points([], duration)), ), ); - 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.resetInput(duration), this.boxMoji().text(this.workingText, duration), ); } public *propogateOutput(duration: number) { + yield* all( + this.boxMoji().text(this.idlingText, duration), + this.child()?.opacity(0.2, duration), + this.output().opacity(0.2, duration), + this.outputSegment().opacity(0, duration), + ); + const output = this.function(...this.currentArgs.map((input) => input.val)); - if (typeof output === "function") { - this.output().add( - , - ); - } else { - this.output().add( - - {output.toString()} - , - ); - } - yield* this.boxMoji().text(this.idlingText, duration); + switch (typeof output) { + case "function": + yield this.output().add( + , + ); + break; + case "number": + case "string": + yield this.output().add( + + {output.toString()} + , + ); + break; + default: + yield this.output().add( + , + ); + } yield* all( this.outputSegment().points( [ - { x: -this.delta, y: 0 }, + { x: 0, y: 0 }, { x: this.padding, y: 0 }, ], duration, ), + this.outputSegment().opacity(1, duration), + this.output().fontSize(this.outputFontSize, duration), this.child()?.opacity(1, duration), this.output().opacity(1, duration), - this.outputSegment().opacity(1, duration), ); } + + public *showCode(duration: number) { + yield* all( + this.boxMoji().text("", duration), + this.boxMoji().opacity(0, duration), + this.block().fontSize(30, duration), + this.node().opacity(1, duration), + ); + } + + public *hideCode(duration: number) { + yield* this.boxMoji().text(this.idlingText, 0); + yield* all( + this.block().fontSize(0, duration), + this.node().opacity(0, duration), + this.boxMoji().opacity(1, duration), + ); + } + + public getChild() { + return this.child; + } } -- cgit v1.2.3-70-g09d2