summaryrefslogtreecommitdiff
path: root/src/engine/entities/Sign.ts
blob: b5bbfd4200385279e6444aa069f3621d5fdf9146 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import { Entity, EntityNames } from ".";
import {
  BoundingBox,
  Colliding,
  ComponentNames,
  Grid,
  Highlight,
  Interactable,
  Modal,
  Sprite,
} from "../components";
import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
import { Coord2D } from "../interfaces";

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

  constructor(
    private readonly text: string,
    gridPosition: Coord2D,
  ) {
    super(EntityNames.Sign);

    const dimension = {
      width: Sign.spriteSpec.width,
      height: Sign.spriteSpec.height,
    };

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

    this.addComponent(
      new BoundingBox(
        {
          x: 0,
          y: 0,
        },
        dimension,
        0,
      ),
    );

    this.addComponent(new Grid(gridPosition));

    this.addComponent(new Colliding());

    this.addComponent(
      new Highlight(this.onHighlight.bind(this), this.onUnhighlight.bind(this)),
    );
  }

  private onHighlight() {
    this.addComponent(new Interactable(this.interaction.bind(this)));
  }

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

  private interaction() {
    if (this.hasComponent(ComponentNames.Modal)) {
      this.removeComponent(ComponentNames.Modal);
      return;
    }
    this.addComponent(
      new Modal({
        type: "CONTENT",
        contentInit: {
          content: `<p>${this.text}</p>`,
        },
      }),
    );
  }
}