the-abstraction-engine/src/engine/entities/LambdaFactory.ts

import {
  IMAGES,
  Miscellaneous,
  SPRITE_SPECS,
  SpriteSpec,
  Sprites,
} from "../config";
import { Entity, EntityNames } from ".";
import {
  BoundingBox,
  Colliding,
  ComponentNames,
  Grid,
  Highlight,
  Interactable,
  LambdaSpawn,
  Sprite,
  Text,
} from "../components";
import { Coord2D, Direction } from "../interfaces";
import { openModal, closeModal } from "../utils";

export class LambdaFactory extends Entity {
  private static spriteSpec: SpriteSpec = SPRITE_SPECS.get(
    Sprites.LAMBDA_FACTORY,
  ) as SpriteSpec;

  private code: string;
  private spawns: number;

  constructor(gridPosition: Coord2D, code: string, spawns: number) {
    super(EntityNames.LambdaFactory);

    this.code = code;
    this.spawns = spawns;

    this.addComponent(
      new BoundingBox(
        {
          x: 0,
          y: 0,
        },
        {
          width: LambdaFactory.spriteSpec.width,
          height: LambdaFactory.spriteSpec.height,
        },
        0,
      ),
    );

    this.addComponent(new Text(spawns.toString()));

    this.addComponent(new Colliding());

    this.addComponent(new LambdaSpawn(this.spawns, this.code));

    this.addComponent(new Grid(gridPosition));

    this.addComponent(
      new Sprite(
        IMAGES.get(LambdaFactory.spriteSpec.sheet)!,
        { x: 0, y: 0 },
        {
          width: LambdaFactory.spriteSpec.width,
          height: LambdaFactory.spriteSpec.height,
        },
        LambdaFactory.spriteSpec.msPerFrame,
        LambdaFactory.spriteSpec.frames,
      ),
    );

    this.addComponent(
      new Highlight(
        (direction) => this.onHighlight(direction),
        () => this.onUnhighlight(),
      ),
    );
  }

  private onUnhighlight() {
    closeModal();
    this.removeComponent(ComponentNames.Interactable);
  }

  private onHighlight(direction: Direction) {
    if (direction === Direction.LEFT || direction === Direction.RIGHT) {
      const interaction = () => {
        const spawner = this.getComponent<LambdaSpawn>(
          ComponentNames.LambdaSpawn,
        );
        spawner.spawn(direction);

        const text = this.getComponent<Text>(ComponentNames.Text);
        text.text = spawner.spawnsLeft.toString();
        this.addComponent(text);
      };

      this.addComponent(new Interactable(interaction));
      return;
    }

    let modalOpen = false;
    const close = () => {
      modalOpen = false;
      closeModal();

      const spawner = this.getComponent<LambdaSpawn>(
        ComponentNames.LambdaSpawn,
      );
      spawner.code = (
        document.getElementById("code") as HTMLTextAreaElement
      ).value;
      this.addComponent(spawner);

      document.getElementById(Miscellaneous.CANVAS_ID)!.focus();
      return;
    };

    const interaction = () => {
      if (modalOpen) {
        close();
        return;
      }

      modalOpen = true;
      openModal(this.codeEditor(this.code));

      document.getElementById("close-modal")!.addEventListener("click", close);
    };

    this.addComponent(new Interactable(interaction));
  }

  private codeEditor(code: string) {
    return `
      <div>
        <textarea id="code" rows="10" cols="50">${code}</textarea>
        <button id="close-modal">Close</button>
      </div>
   `;
  }
}