gameManager.tsx

import {
  Icon,
  Line,
  Rect,
  Txt,
  makeScene2D,
  IconProps,
  RectProps,
  TxtProps,
} from "@motion-canvas/2d";
import {
  Direction,
  Reference,
  all,
  any,
  createRef,
  slideTransition,
  waitFor,
  waitUntil,
} from "@motion-canvas/core";

export default makeScene2D(function* (view) {
  const gameManager = createRef<Rect>();
  const line1 = createRef<Line>();
  const spawnPiece = createRef<Rect>();

  const line2 = createRef<Line>();
  const handleInput = createRef<Rect>();

  const turnInProgress = createRef<Rect>();
  const members = createRef<Rect>();

  view.add(
    <>
      <Rect
        layout
        direction={"column"}
        ref={gameManager}
        fill={"#242424"}
        y={50}
        radius={10}
        opacity={0}
        clip
      >
        <IconRow
          icon={"majesticons:curly-braces-line"}
          text="GameManager"
          iconColor="#f35b61"
        />
        <Rect
          layout
          direction={"column"}
          clip
          ref={members}
          height={0}
          fill="#121212"
        >
          <IconRow
            icon="tabler:circle-check"
            iconColor="#80a74f"
            text="turnInProgress"
            ref={turnInProgress}
          ></IconRow>
        </Rect>
      </Rect>
      ,
      <IconRow
        rectProps={{
          fill: "#242424",
          radius: 10,
          y: 100,
          x: 300,
          opacity: 0,
          layout: true,
        }}
        icon={"tabler:cube"}
        text={"spawnPiece"}
        iconColor={"#1bb6d4"}
        ref={spawnPiece}
      />
      ,
      <Line
        ref={line1}
        lineWidth={8}
        stroke={"#666"}
        opacity={0}
        endArrow
        startOffset={20}
        endOffset={450}
        radius={50}
        points={[
          gameManager().bottom,
          () => gameManager().bottom().addY(100),
          () => spawnPiece().top().addY(-80),
          spawnPiece().top,
        ]}
      />
      ,
      <IconRow
        rectProps={{
          fill: "#242424",
          radius: 10,
          y: 100,
          x: -300,
          opacity: 0,
          layout: true,
        }}
        icon={"tabler:keyboard"}
        text={"handleInput"}
        iconColor={"#1bb6d4"}
        ref={handleInput}
      />
      ,
      <Line
        ref={line2}
        lineWidth={8}
        stroke={"#666"}
        opacity={0}
        endArrow
        startOffset={20}
        endOffset={450}
        radius={50}
        points={[
          gameManager().bottom,
          () => gameManager().bottom().addY(100),
          () => handleInput().top().addY(-80),
          handleInput().top,
        ]}
      />
    </>
  );
  yield slideTransition(Direction.Right);

  yield* waitUntil("gameManager");
  yield* all(gameManager().opacity(1, 0.5), gameManager().y(0, 0.5));

  yield* waitUntil("decides");
  yield* gameManager().y(-200, 0.5);

  yield* waitUntil("spawnPiece");
  yield line1().opacity(1, 0);
  yield* any(line1().endOffset(20, 0.5), waitFor(0.2));
  yield* all(spawnPiece().opacity(1, 0.5), spawnPiece().y(150, 0.5));

  yield* waitUntil("handleInput");
  yield line2().opacity(1, 0);
  yield* any(line2().endOffset(20, 0.5), waitFor(0.2));
  yield* all(handleInput().opacity(1, 0.5), handleInput().y(150, 0.5));

  yield* waitUntil("endInputandSpawn");
  yield* all(
    handleInput().opacity(0, 0.5),
    handleInput().y(200, 0.5),
    spawnPiece().opacity(0, 0.5),
    spawnPiece().y(200, 0.5),
    line1().startOffset(500, 0.5),
    line2().startOffset(500, 0.5),
    gameManager().y(0, 0.5)
  );

  yield* waitUntil("turnInProgress");
  yield* all(members().height(100, 0.5));

  yield* waitUntil("end");
});

const IconRow = (props: {
  icon: string;
  iconColor: string;
  text: string;
  ref?: Reference<Rect>;
  iconProps?: IconProps;
  rectProps?: RectProps;
  txtProps?: TxtProps;
}) => {
  return (
    <Rect
      layout
      direction={"row"}
      alignItems={"center"}
      gap={20}
      padding={20}
      ref={props.ref}
      {...props.rectProps}
    >
      <Icon
        size={50}
        color={props.iconColor}
        {...props.iconProps}
        icon={props.icon}
      ></Icon>
      <Txt
        fontSize={39}
        fontFamily={"JetBrains Mono"}
        fontWeight={800}
        fill={"#959595"}
        {...props.txtProps}
        text={props.text}
      ></Txt>
    </Rect>
  );
};