availableSp={gameState.playerSave.availableSp}

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

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

        remainingPoints={batchContents}

        remainingPoints={gameState.playerSave.availableSp}

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

  }, [gameState.playerSave.allocatedPointNodeSet,  gameState.playerSave.availableSp]);

  availableSp: number,

  worldGen

  worldGen,
  availableSp,

  const canBeAllocated = canAllocate(selectedPointNode, worldGen, allocatedPointNodeSet)

  const canBeAllocated: string = canAllocate(selectedPointNode, worldGen, allocatedPointNodeSet, availableSp);

      <div>Can be allocated? {canBeAllocated ? (<>yes</>) : (<b>no</b>)} </div>

      <div>Can be allocated? {canBeAllocated} </div>

import React from "react";

import React, { useState } from "react";

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

export default function QuestProgress({
  remainingPoints,
  allocatedPoints
}: Props) {
  let [activeQuest, setActiveQuest] = useState<string | null>(null);

      <h1>Quests</h1>
      <h3>
        Allocated points so far: {allocatedPoints}
      </h3>
      <h3>
        You have {remainingPoints} skill points left in your current batch
      </h3>

      <h2> Available SP: </h2>
      <div>{remainingPoints}</div>
      {(remainingPoints === 0) ? (<div><br></br>(Start a quest first!)</div>) : (<></>) }
      {activeQuest === null ? (<>
        <h2> You have no active quests! </h2>
        <button onClick={() => {
          setActiveQuest("1000 Mana0");
        }}>Get a quest</button>
      </>) : (<>
          <h2> Active quest: </h2>
          <div>Goal: {activeQuest}</div>
          <br></br>
          <div>Current: {'[PLACEHOLDER]'}</div>
          <br></br>
          <div>(Hint: You won't run out of skill points, but they come in batches - try to use the fewest you can!)</div>
          <br></br>
          <h3>Batches so far: </h3>
          <div>{3}</div>
      </>)}

  availableSp: number,

        availableSp: 0,

}
button {
  font-family: "PixelMix", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;

    this.container.addListener("pointerdown", () => {

    this.container.addListener("pointerdown", (event: Pixi.InteractionEvent) => {
      event.stopPropagation();

          canAllocate(args.selfPointNodeRef, prevGameState.worldGen, prevGameState.playerSave.allocatedPointNodeSet)

          canAllocate(
            args.selfPointNodeRef,
            prevGameState.worldGen,
            prevGameState.playerSave.allocatedPointNodeSet,
            prevGameState.playerSave.availableSp
          ) === 'yes'

export function canAllocate(selfPointNodeRef: PointNodeRef, worldGen: WorldGenState, allocatedPointNodeSet: HashSet<PointNodeRef>): boolean {

export function canAllocate(
  selfPointNodeRef: PointNodeRef,
  worldGen: WorldGenState,
  allocatedPointNodeSet: HashSet<PointNodeRef>,
  availableSp: number
): "yes" | "already allocated" | "not enough sp" | "no" {

    return false;

    return "already allocated";
  }
  if (availableSp < 1) {
    return "not enough sp";

      return true;

      return "yes";

  return false;

  return "no";