import { GameState, PointNodeRef } from "./data/GameState";

  const uiState = useMemo(() => ({ focusedNode }), [focusedNode]);
  const game = useMemo(() => {
    return new GameStateFactory({}).create();
  }, []);

  // const uiState = useMemo(() => ({ focusedNode }), [focusedNode]);
  // const game = useMemo(() => {
  //   return new GameStateFactory({}).create();
  // }, []);
  const [game, setGame] = useState<GameState>(new GameStateFactory({}).create());

    (chunk, node) => {
      setBatchContents((n) => n - 1);
      setFocusedNode({ chunk, node });

    (selection: PointNodeRef) => {
      console.log("GOT TO on node change callback ", selection);
      setGame(game => {
        game.playerUI.selectedPointNode = selection;
        return game;
      })

    [setFocusedNode]

    [setGame]

  // const handleFocusedNodeChange = useCallback(
  //   (chunk, node) => {
  //     setBatchContents((n) => n - 1);
  //     setFocusedNode({ chunk, node });
  //   },
  //   [setFocusedNode]
  // );

      <NodeDetail focusedNode={focusedNode} />,

      <NodeDetail selectedPointNode={game.playerUI.selectedPointNode} />,

import { PointNodeRef } from "../data/GameState";

  focusedNode,

  selectedPointNode,

  focusedNode?: { chunk: any; node: any };

  selectedPointNode?: PointNodeRef

  const [history, setHistory] = useState<{ chunk: any; node: any }[]>([]);
  useEffect(() => {
    if (!focusedNode || focusedNode?.chunk === null) return;
    setHistory((history) => [...history, focusedNode]);
  }, [focusedNode]);

  // const [history, setHistory] = useState<{ chunk: any; node: any }[]>([]);
  // useEffect(() => {
  //   if (!focusedNode || focusedNode?.chunk === null) return;
  //   setHistory((history) => [...history, focusedNode]);
  // }, [focusedNode]);
  console.log("in nodedetail, ", selectedPointNode);

      {focusedNode && focusedNode.chunk && (

      {selectedPointNode && (

            Chunk: {focusedNode.chunk.location.x},{focusedNode.chunk.location.y}

            Chunk: {selectedPointNode.chunkCoord.x},{selectedPointNode.chunkCoord.y}

          <h3>X: {focusedNode.node.x}</h3>
          <h3>Y: {focusedNode.node.y}</h3>

          <h3>X: {selectedPointNode.pointNodeCoord.x}</h3>
          <h3>Y: {selectedPointNode.pointNodeCoord.y}</h3>

          {history

          {/* ([] as any)

            .reverse()}

          .reverse() */}

/**
 * Initialize the pixi app
 */
// const game = new BaseGame({
//   scale: 1,
//   canvasWidth: 800,
//   canvasHeight: 800,
//   tileHeight: 16,
//   tileWidth: 16,
//   debugFlags: {},
//   state: {
//     tick: 0,
//   },
//   backgroundColor: 0xffffff, // TODO(bowei): fix this
// });
// let application = new Application({ originalWindowWidth: window.innerHeight * .75, originalWindowHeight: window.innerHeight * .75 });

import { PointNodeRef } from "../data/GameState";

  onFocusedNodeChange: (...x: any) => void;

  onFocusedNodeChange: (selection: PointNodeRef) => void;

  const [application, setApplication] = useState();

  const [application, setApplication] = useState<Application>();

          container.current!.removeChild(application?.app?.view);

          if (application) {
            container.current!.removeChild(application.app.view);
          }

  constructor(z: number, chunkCoord: Vector2, pointNodeCoord: Vector2, pointNodeId: number) {
    this.z = z;
    this.chunkCoord = chunkCoord;
    this.pointNodeCoord = pointNodeCoord;
    this.pointNodeId = pointNodeId;

  constructor(args: { z: number, chunkCoord: Vector2, pointNodeCoord: Vector2, pointNodeId: number }) {
    this.z = args.z;
    this.chunkCoord = args.chunkCoord;
    this.pointNodeCoord = args.pointNodeCoord;
    this.pointNodeId = args.pointNodeId;

    console.log("BOWEI CREATING GAME STATE, should only run once!!")

import { PointNodeRef } from "../data/GameState";

  onFocusedNodeChange: Function;

  onFocusedNodeChange: (selection: PointNodeRef) => void;

import { PointNodeRef } from "../data/GameState";

  constructor(chunk: Chunk, onNodeFocus?: Function, texture?: Pixi.Texture) {

  constructor(chunk: Chunk, onNodeFocus: (selection: PointNodeRef) => void, texture?: Pixi.Texture) {

        onNodeFocus?.(this.chunk, node);

        onNodeFocus(new PointNodeRef({
          z: 0, // TODO(bowei): fix
          chunkCoord: this.chunk.location,
          pointNodeCoord: node,
          pointNodeId: 0, // TODO(bowei): fix
        }));

import { PointNodeRef } from "../data/GameState";

  constructor(zLevel: ZLevel, onNodeFocus: Function, texture?: Pixi.Texture) {

  constructor(zLevel: ZLevel, onNodeFocus: (selection: PointNodeRef) => void, texture?: Pixi.Texture) {