public outerBar: Pixi.Graphics;

  private cornerRadius: number = 10;
  private boundingBoxWidth: number = 100;
  public boundingBox: Pixi.Graphics;
  private innerBarWidth: number = 40;
  private innerBarHeight: number = 200;
  private textHeight: number = 24; // observed height of the title text, including padding at the top of the text
  private paddingBottom: number = 12;

  public innerBar2: Pixi.Graphics;

  public barBorder: Pixi.Graphics;

  public titleText: Pixi.Text;

    // object documentation: https://pixijs.download/dev/docs/PIXI.TextStyle.html

  public titleText: Pixi.Text;
  private textStyle: Partial<Pixi.TextStyle> = {
    fontFamily: 'PixelMix',
    padding: 4, // https://github.com/pixijs/pixi.js/issues/4500 -- otherwise on first load the text bounding box is calculated to be too small and the tops of the f's get cut off
    fontSize: 26, // use 26 then scale down 50% results in sharper letters than 13
    // align: 'center'
  };

    // object documentation: https://pixijs.download/dev/docs/PIXI.TextStyle.html
    const style: Partial<Pixi.TextStyle> = {
      fontFamily: 'PixelMix',
      padding: 4, // https://github.com/pixijs/pixi.js/issues/4500 -- otherwise on first load the text bounding box is calculated to be too small and the tops of the f's get cut off
      fontSize: 26, // use 26 then scale down 50% results in sharper letters than 13
      // align: 'center'
    };
    this.titleText = new Pixi.Text('Efficiency', style);

    this.titleText = new Pixi.Text('Efficiency', this.textStyle);

    this.outerBar = new Pixi.Graphics();
    this.outerBar.beginFill(0xDDEEFF); // background color is the blue AACCEE, this is very light bluer than that
    this.outerBar.drawRoundedRect(0, 0, 100, 236, 10); // outerbar = the box containing the efficiency text + bar. 100px is just enough width for the word "Efficiency". 236px height was chosen arbitrarily
    this.outerBar.zIndex = -1;
    this.outerBar.alpha = .9; // let a bit of the background poke through. TODO: actually blur the background?? cant figure out how to do it
    this.container.addChild(this.outerBar);
    // this.filter = new Pixi.filters.BlurFilter();
    // this.outerBar.filters = [this.filter];
    // this.filter.blur = 8;

    this.boundingBox = new Pixi.Graphics();
    this.boundingBox.beginFill(0xDDEEFF); // background color is the blue AACCEE, this is very light bluer than that
    this.boundingBox.drawRoundedRect(
      0, 0,
      this.boundingBoxWidth,
      this.textHeight + this.innerBarHeight + this.paddingBottom,
      this.cornerRadius
    ); // outerbar = the box containing the efficiency text + bar. 100px is just enough width for the word "Efficiency". 236px height was chosen arbitrarily
    this.boundingBox.zIndex = -1;
    this.boundingBox.alpha = .9; // let a bit of the background poke through. TODO: actually blur the background?? cant figure out how to do it
    this.container.addChild(this.boundingBox);

    // this.innerBar.lineStyle(2, 0x000000, 1); // 2 pixel wide lines look sharp but noticeable

    this.innerBar.drawRoundedRect(0, 0, 40, 200, 10); // we want the inner bar (containing the actual efficiency colors) to be 40 wide and 200 tall. round the corners at the same radius as the outer box.

    this.innerBar.drawRoundedRect(0, 0, this.innerBarWidth, this.innerBarHeight, this.cornerRadius); // we want the inner bar (containing the actual efficiency colors) to be 40 wide and 200 tall. round the corners at the same radius as the outer box.

    this.innerBar.pivot.x = 20; // this is our width over 2
    this.innerBar.x = 50; // this is outer bar width / 2
    this.innerBar.y = 24; // this is just enough space below the "Efficiency" text to look nice

    this.innerBar.pivot.x = this.innerBarWidth/2; // this is our width over 2
    this.innerBar.x = this.boundingBoxWidth/2; // this is outer bar width / 2
    this.innerBar.y = this.textHeight; // this is just enough space below the "Efficiency" text to look nice

    this.barFill.drawRect(0, 0, 40, 40);

    this.barFill.drawRect(0, 0, this.innerBarWidth, this.innerBarHeight/5);

    this.barFill.drawRect(0, 40, 40, 40);

    this.barFill.drawRect(0, 40, this.innerBarWidth, this.innerBarHeight/5);

    this.barFill.drawRect(0, 80, 40, 40);

    this.barFill.drawRect(0, 80, this.innerBarWidth, this.innerBarHeight/5);

    this.barFill.drawRect(0, 120, 40, 40);

    this.barFill.drawRect(0, 120, this.innerBarWidth, this.innerBarHeight/5);

    this.barFill.drawRect(0, 160, 40, 40);
    this.barFill.pivot.x = 20;
    this.barFill.x = 50;
    this.barFill.y = 24; // same positioning as innerBar

    this.barFill.drawRect(0, 160, this.innerBarWidth, this.innerBarHeight/5);
    this.barFill.pivot.x = this.innerBarWidth / 2;
    this.barFill.x = this.boundingBoxWidth / 2;
    this.barFill.y = this.textHeight; // same positioning as innerBar

    this.mask.drawRoundedRect(0, 0, 40, 200, 10); // same dims as the inner bar. note that this doesnt take into account the line style of width 2, so it will cause the filling to leak over into the line style. to fix this innerBar2 is reapplied over the top to cover the leaks.

    this.mask.drawRoundedRect(0, 0, this.innerBarWidth, this.innerBarHeight, this.cornerRadius); // same dims as the inner bar. note that this doesnt take into account the line style of width 2, so it will cause the filling to leak over into the line style. to fix this barBorder is reapplied over the top to cover the leaks.

    this.mask.pivot.x = 20; // left-right center in ourselves
    this.mask.x = 50; // center in the outerBar
    this.mask.y = 24; // same positioning as inner bar

    this.mask.pivot.x = this.innerBarWidth/2; // left-right center in ourselves
    this.mask.x = this.boundingBoxWidth/2; // center in the boundingBox
    this.mask.y = this.textHeight; // same positioning as inner bar

    this.innerBar2 = new Pixi.Graphics();
    this.innerBar2.lineStyle(2, 0x000000, 1);
    this.innerBar2.beginFill(0x000000, 0);
    this.innerBar2.drawRoundedRect(0, 0, 40, 200, 10);
    this.innerBar2.pivot.x = 20;
    this.innerBar2.x = 50;
    this.innerBar2.y = 24;
    this.innerBar2.zIndex = 7;
    this.container.addChild(this.innerBar2);

    this.barBorder = new Pixi.Graphics();
    this.barBorder.lineStyle(2, 0x000000, 1);
    // this.barBorder.beginFill(0x000000, 0);
    this.barBorder.drawRoundedRect(0, 0, this.innerBarWidth, this.innerBarHeight, this.cornerRadius);
    this.barBorder.pivot.x = this.innerBarWidth / 2;
    this.barBorder.x = this.boundingBoxWidth / 2;
    this.barBorder.y = this.textHeight;
    this.barBorder.zIndex = 7;
    this.container.addChild(this.barBorder);

    // console.log({ style: this.titleText.style });

    // this.mask.width -= props.delta / 2;
    // this.mask.height -= props.delta / 10;