const [activeTab, setActiveTab] = useState(0);

  // batchedSetGameState((old: GameState): GameState => old );
  // batchedSetGameState.fireBatch();

      <QuestProgress remainingPoints={batchContents} />,

      <QuestProgress remainingPoints={batchContents} allocatedPoints={gameState.playerSave.allocatedPointNodeSet.size()} />,

  }, [gameState.playerUI.selectedPointNode, batchContents]);

  }, [gameState.playerUI.selectedPointNode, gameState.playerSave.allocatedPointNodeSet, batchContents]);

            value={activeTab}

            value={gameState.playerUI.activeTab}

            onChange={setActiveTab}

            onChange={updaters.playerUI.activeTab.getUpdater()}

              <TabContent key={i} showContent={activeTab === i}>

              <TabContent key={i} showContent={gameState.playerUI.activeTab === i}>

export default function QuestProgress({ remainingPoints } : any) {

type Props = {
  remainingPoints: number,
  allocatedPoints: number
}
export default function QuestProgress({ remainingPoints, allocatedPoints } : Props) {

      <h3>
        Allocated points so far: {allocatedPoints}
      </h3>

  activeTab: number,

        activeTab: 0

  }
  size(): number {
    return this._values.size();

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

      x: Math.min(1280, window?.x || Infinity),
      y: Math.min(720, window?.y || Infinity),

      x: Math.min(1280, window?.x || Infinity) - 8,
      y: Math.min(720, window?.y || Infinity) - 8,

import { ReticleComponent } from "./components/ReticleComponent";

type RootApplicationState = {

type State = {

type RootApplicationProps = {

type Props = {

  staleProps: RootApplicationProps;
  state: RootApplicationState;

  staleProps: Props;
  state: State;

  public reticle: ReticleComponent;

  constructor(props: RootApplicationProps) {

  constructor(props: Props) {

    //   const childProps = {
    //     delta: 0,
    //     args: {
    //       pointNodeTexture: this.state.pointNodeTexture.get(),
    //       z: 0,
    //     },
    //     updaters: props.updaters,
    //     position: props.appSize.multiply(0.5),
    //     zLevelGen: new ZLevelGenFactory({}).create({ seed: props.gameState.worldGen.seed, z: 0 }),
    //     selectedPointNode: props.gameState.playerUI.selectedPointNode,
    //     allocatedPointNodeSubset: props.gameState.playerSave.allocatedPointNodeSet,
    //   };
    // this.zLevel = new ZLevelComponent(childProps);
    // this.actionStage.addChild(this.zLevel.container);

    this.reticle = new ReticleComponent({
      appSize: props.appSize
    });
    this.fixedCameraStage.addChild(this.reticle.container);

  }
  shouldUpdate(prevProps: Props, props: Props): boolean {
    return true;

  public update(props: RootApplicationProps) {

  public update(props: Props) {
    if (!this.shouldUpdate(this.staleProps, props)) { return; }

    this.reticle.update({
      appSize: props.appSize
    })

  updateSelf(props: RootApplicationProps) {

  updateSelf(props: Props) {

  renderSelf(props: RootApplicationProps) {

  renderSelf(props: Props) {

  willUnmount(props: RootApplicationProps) {

  willUnmount(props: Props) {

    this.renderSelf(props);

  shouldUpdate(prevProps: Props, props: Props): boolean {
    return true;
    // for (let key of (Object.keys(prevProps) as (keyof Props)[])) {
    //   if (key === 'delta' || key === 'args' || key === 'updaters') { continue; }
    //   if (key === 'allocatedPointNodeSubset') {
    //     // subsets could be different objects but have the same contents
    //     if (prevProps[key].hash() !== props[key].hash()) {
    //       return true;
    //     } else {
    //       continue;
    //     }
    //   }
    //   if (prevProps[key] !== props[key]) {
    //     return true;
    //   }
    // }
    // return false;
  }

    if (!this.shouldUpdate(this.staleProps, props)) { return; }

    this.staleProps = props;

  shouldUpdate(prevProps: Props, props: Props): boolean {
    for (let key of (Object.keys(prevProps) as (keyof Props)[])) {
      if (key === 'delta' || key === 'args' || key === 'updaters') { continue; }
      if (prevProps[key] !== props[key]) {
        return true;
      }
    }
    return false;
  }

    if (!this.shouldUpdate(this.staleProps, props)) { return; }

    this.staleProps = props;

    this.renderSelf(props);

  shouldUpdate(prevProps: Props, props: Props): boolean {
    for (let key of (Object.keys(prevProps) as (keyof Props)[])) {
      if (key === 'delta' || key === 'args' || key === 'updaters') { continue; }
      if (key === 'position') {
        if (!prevProps[key].equals(props[key])) {
          return true;
        } else {
          continue;
        }
      }
      if (prevProps[key] !== props[key]) {
        return true;
      }
    }
    return false;
  }

    if (!this.shouldUpdate(this.staleProps, props)) { return; }

    this.staleProps = props;