add all the stuffHEADmain

1 files changed, 134 insertions, 0 deletions

diff --git a/src/scenes/impostor.tsx b/src/scenes/impostor.tsx
new file mode 100644
index 0000000..830178a
--- /dev/null
+++ b/src/scenes/impostor.tsx
@@ -0,0 +1,134 @@
+import { Img, Layout, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  slideTransition,
+  all,
+} from "@motion-canvas/core";
+import {
+  CodeBlock,
+  edit,
+  insert,
+  lines,
+} from "@motion-canvas/2d/lib/components/CodeBlock";
+import amogusSus from "../../public/amogus.png";
+
+const cardBuilder = `const buildCards = (
+  people: PersonI[],
+  cardGenerator: (person: PersonI) => CardI,
+): CardI[] => {
+  const cards: CardI[] = [];
+
+  for (const person of people) {
+    const card = cardGenerator(person);
+    cards.push(card);
+  }
+
+  return cards;
+};`;
+
+export default makeScene2D(function* (view) {
+  const layout = createRef<Layout>();
+
+  const buildCards = createRef<CodeBlock>();
+  const amogus = createRef<Img>();
+
+  view.add(
+    <Layout ref={layout} layout direction="row" gap={0}>
+      <CodeBlock
+        fontSize={25}
+        language="typescript"
+        ref={buildCards}
+        code={cardBuilder}
+      />
+      <Img ref={amogus} src={amogusSus} opacity={0} width={0} height={0} />
+    </Layout>,
+  );
+
+  yield* slideTransition(Direction.Right);
+  yield* beginSlide("show buildCards");
+
+  yield* buildCards().selection([...lines(6), ...lines(8)], 0.75);
+  yield* all(
+    amogus().width(300, 0.5),
+    amogus().height(400, 0.5),
+
+    amogus().opacity(1, 0.5),
+    layout().gap(100, 0.5),
+  );
+
+  yield* beginSlide("show side effects");
+
+  yield* all(
+    buildCards().edit(1.2)`const buildCards = (
+  people: PersonI[],
+  cardGenerator: (person: PersonI) => CardI,
+): CardI[] => {${insert(`
+  if (people.length === 0) {
+    return [];
+  }
+`)}
+  const cards: CardI[] = [];
+
+  for (const person of people) {
+    const card = cardGenerator(person);
+    cards.push(card);
+  }
+
+  return cards;
+};`,
+    amogus().width(0, 0.3),
+    amogus().height(0, 0.3),
+
+    layout().gap(0, 0.3),
+  );
+  yield* beginSlide("base case");
+
+  yield* buildCards().edit(1.2)`const buildCards = (
+  people: PersonI[],
+  cardGenerator: (person: PersonI) => CardI,
+): CardI[] => {
+  if (people.length === 0) {
+    return [];
+  }
+
+  ${edit(
+    "const cards: CardI[] = [];",
+    `const person = people[0];
+  const card = cardGenerator(person);`,
+  )}
+
+  for (const person of people) {
+    const card = cardGenerator(person);
+    cards.push(card);
+  }
+
+  return cards;
+};`;
+  yield* beginSlide("first card");
+
+  yield* buildCards().edit(1.2)`const buildCards = (
+  people: PersonI[],
+  cardGenerator: (person: PersonI) => CardI,
+): CardI[] => {
+  if (people.length === 0) {
+    return [];
+  }
+
+  const person = people[0];
+  const card = cardGenerator(person);
+
+  ${edit(
+    `for (const person of people) {
+    const card = cardGenerator(person);
+    cards.push(card);
+  }`,
+    `const restPeople = people.slice(1);
+  const cards = [card].concat(buildCards(restPeople, cardGenerator));`,
+  )}
+
+  return cards;
+};`;
+  yield* beginSlide("recursion");
+});