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

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

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

  private code: string;

  constructor(gridPosition: Coord2D, code: string) {
    super(EntityNames.FunctionBox);

    this.code = code;

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

    this.addComponent(new Grid(true, gridPosition));

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

    this.hooks.set(ComponentNames.Highlight, {
      add: () => {
        let modalOpen = false;
        const interaction = () => {
          if (modalOpen) {
            modalOpen = false;
            closeModal();
            return;
          }
          modalOpen = true;
          openModal(this.code);
        };

        this.addComponent(new Interactable(interaction));
      },
      remove: () => {
        closeModal();
        this.removeComponent(ComponentNames.Interactable);
      },
    });
  }
}