import { GameContext, UIContext } from "./contexts";

import { GameContext } from "./contexts";

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

  // const uiState = { focusedNode }; // recomputes every rerender

  const game = useMemo(() => ({}), []);

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

        <UIContext.Provider value={uiState}>
          <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
          <Sidebar>
            <Tabs
              value={activeTab}
              labels={tabLabels}
              onChange={handleActiveTabChange}
            />
            {tabViews.map((component, i) => {
              return (
                <TabContent key={i} showContent={activeTab === i}>
                  {component}
                </TabContent>
              );
            })}
          </Sidebar>
        </UIContext.Provider>

        <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
        <Sidebar>
          <Tabs
            value={activeTab}
            labels={tabLabels}
            onChange={handleActiveTabChange}
          />
          {tabViews.map((component, i) => {
            return (
              <TabContent key={i} showContent={activeTab === i}>
                {component}
              </TabContent>
            );
          })}
        </Sidebar>

import { Vector2 } from "./lib/util/geometry/vector2";
import { Chunk } from "./pixi/Chunk";
export const GameContext = React.createContext<{
  [k: string]: any;
}>({});

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

export const UIContext = React.createContext<{
  focusedNode?: { chunk: Chunk; node: Vector2 };
}>({});

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

/**
 * Data owned by the master "App" component, to be made available as props to ALL subcomponents (both pixi and react); react uses context providers to make this easier
 * 1. world generation data, stuff that was computed off of the random seed and is stored so we can do logic off of it,
 *   but can be deleted/recomputed any time.
 *   May or may not be persisted to disk - unimportant apart from the random seed.
 * 2. data about player activity in the game e.g. which nodes were allocated, what quest stage they are on
 *   Must be persisted to disk - this is essentially the player's "save file"
 * 3. data about player activity that only influences the UI, e.g. which node was selected, but affects UI across
 *   very far away pixi/react components.
 *   Should be persisted to disk - will help the player "remember their place" in the game, but not a big deal if lost.
 * 
 * Does NOT include UI data which is only relevant to a small part of the component hierarchy - e.g. how many seconds since last tap.
 * That data should belong in state owned by subcomponents.
 */

  player: PlayerState

  playerSave: PlayerSaveState
  playerUI: PlayerUIState

export type PlayerState = {
  selectedPointNode?: PointNodeRef,

export type PlayerSaveState = {
  // TODO(bowei): save the seed in here as well?

}
export type PlayerUIState = {
  selectedPointNode?: PointNodeRef,

      player: {
        selectedPointNode: undefined,

      playerSave: {

      },
      playerUI: {
        selectedPointNode: undefined,