From 7cf2017e9563ec2ddd7c0b4c6e9137b1a4e5428d Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Fri, 9 Feb 2024 10:58:28 -0700 Subject: [PATCH] make function box more smooth --- src/components/function_box.tsx | 28 +++++++++++++++++----------- src/scenes/me.tsx | 9 +++++---- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/function_box.tsx b/src/components/function_box.tsx index dc00a24..8b3b243 100644 --- a/src/components/function_box.tsx +++ b/src/components/function_box.tsx @@ -91,7 +91,7 @@ export class FunctionBox extends Node { @@ -164,10 +164,10 @@ export class FunctionBox extends Node { public *resetInput(duration: number) { yield* all( ...this.inputs.map((x) => - all(x.opacity(1, duration), x.fontSize(this.inputFontSize, duration)), + all(x.opacity(0, duration), x.fontSize(0, duration)), ), ...this.inputSegments.map((segment) => - all(segment.points([], duration), segment.opacity(1, duration)), + all(segment.points([], duration), segment.opacity(0, duration)), ), ); @@ -206,12 +206,15 @@ export class FunctionBox extends Node { }); yield* all( ...this.inputSegments.map((segment) => - segment.points( - [ - { x: -this.padding, y: 0 }, - { x: -this.delta, y: 0 }, - ], - duration, + all( + segment.points( + [ + { x: -this.padding, y: 0 }, + { x: -this.delta, y: 0 }, + ], + duration, + ), + segment.opacity(1, duration), ), ), ...this.inputs.map((input) => @@ -231,6 +234,9 @@ export class FunctionBox extends Node { ); yield* all( this.resetInput(duration), + ...this.inputs.map((input) => + all(input.opacity(0.2, duration), input.fontSize(0, duration)), + ), this.boxMoji().text(this.workingText, duration), ); } @@ -239,7 +245,6 @@ export class FunctionBox extends Node { yield* all( this.child()?.opacity(0.2, duration), this.output().opacity(0.2, duration), - this.output().fontSize(this.outputFontSize, duration), this.outputSegment().opacity(0, duration), ); @@ -276,6 +281,7 @@ export class FunctionBox extends Node { yield* all( this.boxMoji().text(this.idlingText, duration), + this.output().fontSize(this.outputFontSize, duration), this.outputSegment().points( [ { x: 0, y: 0 }, diff --git a/src/scenes/me.tsx b/src/scenes/me.tsx index 1557c6c..1d819e3 100644 --- a/src/scenes/me.tsx +++ b/src/scenes/me.tsx @@ -20,6 +20,7 @@ export default makeScene2D(function* (view) { gap={12} alignItems="start" y={-10} + fontSize={40} > @@ -32,10 +33,10 @@ export default makeScene2D(function* (view) { {"=>"} I {"<3"} Functional Programming λ - {"=>"} I'm a soon to be SDE at {"\n"} AWS in Seattle. + {"=>"} I'm a soon to be SDE at AWS in {"\n"}Seattle. - {"=>"} 20, president of FSLC from {"\n "} 2021 - 2024, grad this + {"=>"} 20, president of FSLC from 2021{"\n "} - 2024, grad this semester @@ -49,12 +50,12 @@ export default makeScene2D(function* (view) { yield img().fill(img().getColorAtPoint(0)); - const diff = 380; + const diff = 320; yield* all( img().size([450, 450], 1), img().radius(50, 1), img().alpha(1, 1), - img().position.x(-diff, 1), + img().position.x(-1.3 * diff, 1), node().opacity(1, 1), layout().position.x(diff, 1), src().opacity(1, 1),