import { GameContext } from "./contexts";

import { UseGameStateContext } from "./contexts";

  const [game, setGame] = useState<GameState>(

  const [gameState, setGameState] = useState<GameState>(

    console.log(game);
  }, [game]);

    console.log(gameState);
  }, [gameState]);

  let updaters = updaterGenerator(game, setGame);

  let updaters = updaterGenerator(gameState, setGameState);

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

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

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

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

      <GameContext.Provider value={game}>

      <UseGameStateContext.Provider value={[gameState, updaters]}>

      </GameContext.Provider>

      </UseGameStateContext.Provider>

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

import { GameState, PointNodeRef } from "../data/GameState";
import { PixiWrapperComponent } from "./PixiWrapperComponent";
import { DeepReadonly, UpdaterGeneratorType } from "../lib/util/misc";
export type PixiComponentState = {
  innerWidth: number,
  innerHeight: number,
}

export function PixiComponent({
  onFocusedNodeChange,
}: {
  whatever?: any;

export function PixiComponent(props: {
  // gameState: DeepReadonly<GameState>,
  // gameStateUpdaters: UpdaterGeneratorType<GameState>,

  const [pixiComponentState, setPixiComponentState] = useState<PixiComponentState>({ innerHeight: 0, innerWidth: 0});

      onFocusedNodeChange,

      ...props

    // application.register(container.current!);
    container.current!.appendChild(newApp.app.view);
    // container.current!.appendChild(application.app.view)
    // console.log(container.current!)

    // // application.register(container.current!);
    // container.current!.appendChild(newApp.app.view);
    // // container.current!.appendChild(application.app.view)
    // // console.log(container.current!)

    setPixiComponentState(old => {
      old.innerWidth = window.innerWidth;
      old.innerHeight = window.innerHeight;
      return { ...old };
    })

  // application.rerender({
  //   gameState,
  //   pixiComponentState
  // })

      <div ref={container} />

      <PixiWrapperComponent application={application}/>

import React, { useContext, useEffect, useRef } from "react";
import { UseGameStateContext } from "../contexts";
import { GameState } from "../data/GameState";
import { DeepReadonly, UpdaterGeneratorType } from "../lib/util/misc";
import { Application } from "../pixi/Application";
export function PixiWrapperComponent(props: {
  application: Application | undefined
}) {
  const container = useRef<HTMLDivElement>(null);
  const [gameState, gameStateUpdaters]  = useContext(UseGameStateContext);
  useEffect(() => {
    if (props.application) {
      container.current!.appendChild(props.application.app.view);
    }
  }, [props.application]);
  // Trigger component rerender when game state is updated
  props.application?.rerender({
    gameState
  })
  return (
    <>
      <div ref={container} />
    </>
  );
}

import { DeepReadonly, UpdaterGeneratorType } from "./lib/util/misc";

// should be OK, just remember to populate the context
export const GameContext = React.createContext<GameState>(null as any);

// nullable, but should be OK, just remember to populate the context
// export const GameContext = React.createContext<GameState>(null as any);
// export const GameUpdatersContext = React.createContext<UpdaterGeneratorType<GameState>>(null as any);
export const UseGameStateContext = React.createContext<[DeepReadonly<GameState>, UpdaterGeneratorType<GameState>]>([] as any);

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

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

import { DeepReadonly } from "../lib/util/misc";

  public rerender(props: {
    gameState: DeepReadonly<GameState>
  }) {
  }