text: import { Container, extras, Sprite } from 'pixi.js';
  import { TweenMax } from 'gsap/all';
  import colors from 'client/constants/colors';
  
  class NumericDisplay extends Container {
    constructor({ label = '', value = 0, valueSize = 48 }) {
      super();
  
      this._label = label;
      this._value = value;
      this._valueSize = valueSize;
  
      this.createElements();
    }
  
    createElements() {
      const background = new Sprite();
      background.width = 150;
      background.height = 100;
      this.addChild(background);
  
      const label = new extras.BitmapText(this._label, {
        align: 'center',
        font: {
          name: 'SF Alien Encounters',
          size: 24 * window.devicePixelRatio
        }
      });
      label.tint = colors.PURPLE;
      label.anchor.set(0, 0.5);
      label.position.set(0, Math.floor(20 + label.height / 2));
      this.addChild(label);
      this._labelText = label;
  
      const value = new extras.BitmapText(this._value.toString(), {
        align: 'center',
        font: {
          name: 'SF Alien Encounters',
          size: this._valueSize * window.devicePixelRatio
        }
      });
      value.tint = colors.CYAN;
      value.anchor.set(0, 0.5);
      value.position.set(0, Math.floor(label.y + label.height + 20 + value.height / 2));
      this.addChild(value);
      this._valueText = value;
    }
  
    set label(label) {
      this._label = label;
      this._labelText.text = label;
    }
  
    set value(value) {
      if (value === this._value) {
        return;
      }
  
      const valueObj = { value: this._value };
      const duration = value - this._value === 1 ? 0 : 0.2;
      this._value = value;
  
      TweenMax.to(valueObj, duration, {
        value,
        onUpdate: () => {
          this._valueText.text = Math.floor(valueObj.value).toString();
        }
      });
    }
  }
  
  export default NumericDisplay;
  