size(): number {
    return Object.keys(this._kvalues).length;
  }

  public willUnmount() { }

    // this.container.mask

    // NOTE(bowei): ive tested, the following 2 settings don't significantly affect FPS

  public willUnmount() { } 

  public container: Pixi.Graphics;

  public container: Pixi.Container;

    this.container = new Pixi.Graphics();

    this.container = new Pixi.Container();

    this.container.lineStyle(2, 0x999999);
    this.container.drawCircle(0, 0, 10);
    this.container.interactive = true;
    this.container.buttonMode = true;

    const outerCircle = new Pixi.Graphics();
    outerCircle.lineStyle(2, 0x000000);
    outerCircle.alpha = 0.5;
    outerCircle.drawCircle(0, 0, 16);
    outerCircle.interactive = true;
    this.container.addChild(outerCircle)
    outerCircle.moveTo(0, -8);
    outerCircle.lineTo(0, 8);
    outerCircle.moveTo(-8, 0);
    outerCircle.lineTo(8, 0);

    if (props.gameState.intent.newIntent[IntentName.TRAVEL_IN]) this.state.playerCurrentZ--;
    if (props.gameState.intent.newIntent[IntentName.TRAVEL_OUT]) this.state.playerCurrentZ++;

    if (props.gameState.intent.newIntent[IntentName.TRAVEL_IN]) {
      this.state.playerCurrentZ--;
      console.log({ currentZ: this.state.playerCurrentZ });
    }
    if (props.gameState.intent.newIntent[IntentName.TRAVEL_OUT]) {
      this.state.playerCurrentZ++;
      console.log({ currentZ: this.state.playerCurrentZ });
    }

  willUnmount(props: Props) {

  public willUnmount() {

    let childrenToDelete = this.children.clone();
    console.log(`i have ${this.children.size()} children`)

        childrenToDelete.remove(chunkRef);

    for (let [ref, childComponent] of childrenToDelete.entries()) {
      childComponent.willUnmount();
      this.children.remove(ref);
      this.container.removeChild(childComponent.container);
    }

  public willUnmount() { }