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

import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
import { Entity, EntityNames } from ".";
import {
  BoundingBox,
  ComponentNames,
  Grid,
  Highlight,
  Interactable,
  Pushable,
  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 Pushable());

    this.addComponent(new Grid(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.addComponent(
      new Highlight(
        (_direction) => this.onHighlight(),
        () => this.onUnhighlight(),
      ),
    );
  }

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

  private onHighlight() {
    let modalOpen = false;
    const interaction = () => {
      if (modalOpen) {
        modalOpen = false;
        closeModal();
        return;
      }
      modalOpen = true;
      openModal(this.code);
    };

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