public filter: Pixi.filters.BlurFilter;

  public filter!: Pixi.filters.BlurFilter;

    this.titleText.anchor = PixiPointFrom(new Vector2(0.5, 0.0));

    this.titleText.anchor = PixiPointFrom(new Vector2(0.5, 0.0)); // center ourselves, left-right

    this.titleText.x = 50;
    this.titleText.y = 4;

    this.titleText.x = 50; // full container width is 100, we want to be in the middle
    this.titleText.y = 4; // bit of padding for the top

    this.outerBar.beginFill(0xDDEEFF);
    this.outerBar.drawRoundedRect(0, 0, 100, 236, 10);

    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.alpha = .9;
    this.filter = new Pixi.filters.BlurFilter();

    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.container.addChild(this.outerBar);
    this.filter.blur = 8;

    // this.filter.blur = 8;

    this.innerBar.lineStyle(2, 0x000000, 1);

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

    this.innerBar.drawRoundedRect(0, 0, 40, 200, 10);

    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.pivot.x = 20;
    this.innerBar.x = 50;
    this.innerBar.y = 24;

    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

    // rainbow red-green gradient for the contents of the inner bar

    this.barFill.y = 24;

    this.barFill.y = 24; // same positioning as innerBar

    this.container.addChild(this.barFill);

    // mask controls how much of the red-green gradient fillings are visible, depending on how well the player is doing

    this.mask.beginFill(0x000000, 1);
    this.mask.drawRoundedRect(0, 0, 40, 200, 10);
    this.mask.zIndex = 30;

    this.mask.beginFill(0x000000, 1); // color and alpha literally dont matter cuz its a mmask
    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.zIndex = 30; // doesnt matter

    this.mask.y = 24; // mask y starts at 24, the same as inner bar, and goes till 224
    this.container.addChild(this.mask);

    this.mask.y = 24; // same positioning as inner bar
    this.container.addChild(this.mask); // have to add child here -- not sure why

    // another copy of innerbar, except this time the fill is transparent; we just need the line style to be redrawn so that 
    // the inner filling mask leakage gets hidden

    this.innerBar2.beginFill(0xFFFFFF, 0);

    this.innerBar2.beginFill(0x000000, 0);

    this.container.addChild(this.barFill);