const tabLabels = ["Node Details", "Quest Progress"];

const tabLabels = ["Quest Progress", "Node Details", ];

  tabViews[0] = useMemo(() => {

  tabViews[1] = useMemo(() => {

  tabViews[1] = useMemo(() => {

  tabViews[0] = useMemo(() => {

      <h1>Quest Progress</h1>

      <h1>Quests</h1>

  width:30%;

  width:15%;

import { GameStateFactory } from "../../dataFactory/GameStateFactory";

  public container: Pixi.Sprite;

  public container: Pixi.Container;

  public sprite!: Pixi.Sprite

  public sprite: Pixi.Sprite
  public centerSprite: Pixi.Sprite;

    this.container = new Pixi.Sprite(props.args.pointNodeTexture);
    this.container.anchor.x = 0.5;
    this.container.anchor.y = 0.5;

    this.container = new Pixi.Container();
    this.container.sortableChildren = true;
    this.sprite = new Pixi.Sprite(props.args.pointNodeTexture);
    this.sprite.anchor.x = 0.5;
    this.sprite.anchor.y = 0.5;
    this.sprite.zIndex = -1;
    this.container.addChild(this.sprite);
    this.centerSprite = new Pixi.Sprite(props.args.pointNodeTexture);
    this.centerSprite.anchor.x = 0.5;
    this.centerSprite.anchor.y = 0.5;
    this.centerSprite.scale = PixiPointFrom(new Vector2(0.5, 0.5));
    this.centerSprite.zIndex = 1;
    this.container.addChild(this.centerSprite);
    // this.container.mask

    let centerTint: number;
    if (props.isSelected) {
      tint = 0xBBBBFF;
      centerTint = 0xBBBBFF;
    } else {
      tint = 0xFFFFFF;
      centerTint = 0xFFFFFF;
    }

      if (props.isSelected) {
        tint = 0xBBBBBB;
      } else {
        tint = 0xFFFFFF;
      }

    this.container.tint = multiplyColor(baseColor, tint);

    this.sprite.tint = multiplyColor(baseColor, tint);
    this.centerSprite.tint = multiplyColor(baseColor, centerTint);

    this.container.drawCircle(0, 0, 6);

    this.container.drawCircle(0, 0, 10);