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

import {
  IMAGES,
  Miscellaneous,
  ModalClose,
  ModalOpen,
  SOUNDS,
  SPRITE_SPECS,
  SpriteSpec,
  Sprites,
} from "../config";
import { Entity, EntityNames } from ".";
import {
  BoundingBox,
  ComponentNames,
  Grid,
  Highlight,
  Interactable,
  LambdaTerm,
  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;

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

    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 LambdaTerm(code));

    this.addComponent(makeLambdaTermHighlightComponent(this));
  }
}

export const makeLambdaTermHighlightComponent = (
  entity: Entity,
  text?: string,
) => {
  const onUnhighlight = () => {
    closeModal();
    entity.removeComponent(ComponentNames.Interactable);
  };

  const onHighlight = () => {
    let modalOpen = false;
    const doModalClose = () => {
      SOUNDS.get(ModalClose.name)!.play();
      modalOpen = false;
      closeModal();
    };

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

      const code =
        text ??
        entity.getComponent<LambdaTerm>(ComponentNames.LambdaTerm)!.code;
      openModal(
        `<div style="text-align:center"><p>${code}</p> <br> <button id="close">Close</button></div>`,
      );
      modalOpen = true;
      SOUNDS.get(ModalOpen.name)!.play();

      document.getElementById("close")!.addEventListener("click", () => {
        doModalClose();
        document.getElementById(Miscellaneous.CANVAS_ID)!.focus();
      });
    };

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

  return new Highlight(onHighlight, onUnhighlight);
};