boweiliu/procgen-skill-tree-pijul - Change WPC667PRTGRE7BNP6E7ZCQIKXYMIHJT3LUTTQT7VX2HQVRBXNIKAC

ready for switchover

Created by Bowei Liu on December 23, 2020

WPC667PRTGRE7BNP6E7ZCQIKXYMIHJT3LUTTQT7VX2HQVRBXNIKAC

Dependencies

In channels

alice-test

main

Change contents

Replacement in frontend/src/App.tsx at line 15 [8.24939]

B:BD[6.127] → [7.15:73]

import { Lazy, updaterGenerator } from "./lib/util/misc";

[6.127]

[9.664]

import { batchify, Lazy, updaterGenerator } from "./lib/util/misc";

Replacement in frontend/src/App.tsx at line 43 [8.24939]

B:BD[5.1] → [5.1:151]

∅:D[5.151] → [10.0:104]

B:BD[11.703] → [10.0:104]

  let batchedSetGameState = batchUpdates(setGameState)
  batchedSetGameState((old: GameState): GameState => old );
  batchedSetGameState.fireBatch();
  let updaters = useMemo(() => updaterGenerator(initialGameState.get(), setGameState), [setGameState]);

[5.1]

[12.798]

  let [batchedSetGameState, fireBatch] = useMemo(() => batchify(setGameState), [setGameState]);
  // batchedSetGameState((old: GameState): GameState => old );
  // batchedSetGameState.fireBatch();
  let updaters = useMemo(() => updaterGenerator(initialGameState.get(), batchedSetGameState), [batchedSetGameState]);

Replacement in frontend/src/App.tsx at line 63 [8.24939]

B:BD[9.881] → [13.360:427]

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

[9.881]

[3.47]

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

Replacement in frontend/src/components/PixiComponent.tsx at line 1 [14.97253]
B:BD[14.97253] → [2.0:41]
```
import React, { useState } from "react";
```
[14.97253]
[15.126]
```
import React, { useMemo, useState } from "react";
```
Replacement in frontend/src/components/PixiComponent.tsx at line 6 [14.97253]
B:BD[13.591] → [16.751:792]
```
import { Lazy } from "../lib/util/misc";
```
[13.591]
[13.662]
```
import { batchify, Lazy } from "../lib/util/misc";
```

Insertion in frontend/src/components/PixiComponent.tsx at line 27 [14.97253]

[17.283]

[13.1002]

  let [batchedSetPixiComponentState, fireBatchedSetPixiComponentState] =
    useMemo(() => batchify(setPixiComponentState), [setPixiComponentState]);

Replacement in frontend/src/components/PixiComponent.tsx at line 33 [14.97253]
B:BD[18.154] → [13.1234:1269]
```
    setPixiComponentState(old => {
```
[18.154]
[13.1269]
```
    batchedSetPixiComponentState(old => {
```
Deletion in frontend/src/components/PixiComponent.tsx at line 38 [14.97253]
B:BD[13.1387] → [13.1387:1388]
B:BD[13.1388] → [19.99:168]
```
    // application?.resize?.(window.innerWidth, window.innerHeight);
```

Replacement in frontend/src/components/PixiComponent.tsx at line 42 [14.97253]

B:BD[20.199] → [17.284:380]

      <PixiWrapperComponent application={application} pixiComponentState={pixiComponentState}/>

[20.199]

[21.1252]

      <PixiWrapperComponent application={application} pixiComponentState={pixiComponentState} fireBatchedSetPixiComponentState={fireBatchedSetPixiComponentState}/>

Insertion in frontend/src/components/PixiWrapperComponent.tsx at line 11 [13.1555]
[17.506]
[13.1924]
```
  fireBatchedSetPixiComponentState: () => void,
```

Replacement in frontend/src/components/PixiWrapperComponent.tsx at line 15 [13.1555]

B:BD[13.1979] → [22.189:264]

  const [gameState, gameStateUpdaters]  = useContext(UseGameStateContext);

[13.1979]

[13.2054]

  const [gameState, gameStateUpdaters, fireBatchedSetGameState]  = useContext(UseGameStateContext);
  const fireBatch = () => {
      fireBatchedSetGameState();
      props.fireBatchedSetPixiComponentState();
    }

Replacement in frontend/src/components/PixiWrapperComponent.tsx at line 37 [13.1555]

B:BD[13.2204] → [13.2204:2263]

  // Trigger component rerender when game state is updated

[13.2204]

[17.677]

  // Trigger component render on first load and also when game state is updated

Deletion in frontend/src/components/PixiWrapperComponent.tsx at line 41 [13.1555]
B:BD[17.717] → [22.445:464]
```
    prevGameState,
```
Insertion in frontend/src/components/PixiWrapperComponent.tsx at line 42 [13.1555]
[22.487]
[13.2309]
```
    fireBatch
```

Replacement in frontend/src/contexts.ts at line 8 [23.1824]

B:BD[13.2698] → [13.2698:2824]

export const UseGameStateContext = React.createContext<[DeepReadonly<GameState>, UpdaterGeneratorType<GameState>]>([] as any);

[13.2698]

export const UseGameStateContext = React.createContext<[DeepReadonly<GameState>, UpdaterGeneratorType<GameState>, () => void]>([] as any);

Insertion in frontend/src/lib/util/misc.ts at line 260 [26.45665]

[24.429]

[25.1385]

}
export function batchify<A extends any[]>(fn: (...args: A)=> void): [((...args: A) => void), () => void] {
  let batch: A[] = [];
  return [(...args: A) => {
    batch.push(args);
  }, (() => {
      for (let a of batch) {
        fn(...a);
      }
      batch = [];
    })
  ];

Insertion in frontend/src/pixi/Application.ts at line 342 [20.320]
[13.3016]
[27.1827]
```
  public update(t?: any) { }
```

Replacement in frontend/src/pixi/BaseApplication.ts at line 5 [28.158]

B:BD[22.1081] → [22.1081:1149]

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

[22.1081]

[28.1042]

import { RootApplication } from "./RootApplication";

Insertion in frontend/src/pixi/BaseApplication.ts at line 7 [28.158]
[28.1043]
[28.1043]
```
// temp for backcompatibility
```

Replacement in frontend/src/pixi/BaseApplication.ts at line 18 [28.158]

B:BD[28.1382] → [22.1150:1235]

∅:D[22.1235] → [24.608:632]

B:BD[24.608] → [24.608:632]

B:BD[24.632] → [22.1236:1279]

export type BaseApplicationProps = DeepReadonly<MutableProps>
type MutableProps = {
  gameState: GameState,
  pixiComponentState: WindowState, // shim

[28.1382]

[22.1279]

export type BaseApplicationProps = {
  args?: Partial<Config>,
  gameStateUpdaters: UpdaterGeneratorType<GameState>, // aka updaters
  pixiComponentState: DeepReadonly<WindowState>,
  // // needed to avoid double-updates
  // prevGameState: DeepReadonly<GameState>,
  gameState: DeepReadonly<GameState>,
  fireBatch: () => void,

Deletion in frontend/src/pixi/BaseApplication.ts at line 28 [28.158]
B:BD[22.1282] → [22.1282:1371]
∅:D[22.1371] → [28.1886:1887]
∅:D[24.658] → [28.1886:1887]
B:BD[28.1886] → [28.1886:1887]
```
export type BaseApplicationUpdaters = {
  gameState: UpdaterGeneratorType<GameState>,
};
```
Insertion in frontend/src/pixi/BaseApplication.ts at line 30 [28.158]
[24.716]
[24.716]
```
  originalAppSize: Vector2,
```
Replacement in frontend/src/pixi/BaseApplication.ts at line 34 [28.158]
∅:D[24.750] → [28.1923:1949]
B:BD[28.1923] → [28.1923:1949]
B:BD[28.1949] → [22.1372:1429]
```
  public config!: Config;
  originalAppWidth: number;
  originalAppHeight: number;
```
[24.750]
[24.751]
```
  public config!: Config; // temp shim
```
Deletion in frontend/src/pixi/BaseApplication.ts at line 37 [28.158]
B:BD[22.1431] → [22.1431:1493]
```
  public globalEventQueue: ((...args: any[]) => void)[] = [];
```
Replacement in frontend/src/pixi/BaseApplication.ts at line 38 [28.158]
B:BD[24.816] → [22.1494:1532]
```
  updaters!: BaseApplicationUpdaters;
```
[24.816]
[28.1983]
```
  props!: BaseApplicationProps;
```

Replacement in frontend/src/pixi/BaseApplication.ts at line 40 [28.158]

B:BD[28.1984] → [22.1533:1625]

  gameState!: GameState;
  props!: MutableProps;
  // nextProps!: MutableProps | undefined;

[28.1984]

[29.57]

  rootApplication: RootApplication;

Replacement in frontend/src/pixi/BaseApplication.ts at line 42 [28.158]

B:BD[29.58] → [24.817:897]

  public static appSizeFromWindowSize(window: DeepReadonly<Vector2>): Vector2 {

[29.58]

[29.124]

  public static appSizeFromWindowSize(window?: DeepReadonly<Vector2>): Vector2 {

Replacement in frontend/src/pixi/BaseApplication.ts at line 44 [28.158]

B:BD[29.149] → [29.149:218]

      x: Math.min(1280, window.x),
      y: Math.min(720, window.y),

[29.149]

[29.218]

      x: Math.min(1280, window?.x || Infinity),
      y: Math.min(720, window?.y || Infinity),

Replacement in frontend/src/pixi/BaseApplication.ts at line 52 [28.158]

B:BD[28.2177] → [24.898:971]

  constructor(args: Partial<Config> = {}, props: BaseApplicationProps) {

[28.2177]

[24.971]

  constructor(args: Partial<Config> = {}, props: Partial<BaseApplicationProps> = {}) {

Insertion in frontend/src/pixi/BaseApplication.ts at line 55 [28.158]
[24.1087]
[28.2390]
```
    // this.props = props;
```

Replacement in frontend/src/pixi/BaseApplication.ts at line 57 [28.158]

B:BD[28.2391] → [22.1626:1778]

∅:D[22.1778] → [24.1170:1271]

B:BD[24.1170] → [24.1170:1271]

    this.state.appSize = BaseApplication.appSizeFromWindowSize(new Vector2(props.pixiComponentState.innerWidth, props.pixiComponentState.innerHeight));
    this.originalAppWidth = this.state.appSize.x;
    this.originalAppHeight = this.state.appSize.y;

[28.2391]

[29.504]

    this.state.appSize = BaseApplication.appSizeFromWindowSize(
      props.pixiComponentState && new Vector2(props.pixiComponentState.innerWidth, props.pixiComponentState.innerHeight)
    );
    this.state.originalAppSize = this.state.appSize;

Insertion in frontend/src/pixi/BaseApplication.ts at line 74 [28.158]

[28.3222]

[28.4174]


    this.rootApplication = new RootApplication({
      args: {
        renderer: this.app.renderer,
      },
      updaters: this.props.gameStateUpdaters,
      delta: 0,
      gameState: this.props.gameState,
      appSize: this.state.appSize,
    })
    this.app.stage.addChild(this.rootApplication.container);
    this.renderSelf(this.props);

Replacement in frontend/src/pixi/BaseApplication.ts at line 89 [28.158]

B:BD[28.4187] → [28.4187:4330]

    // createBunnyExample({ parent: this.actionStage, ticker: this.app.ticker, x: this.app.screen.width / 2, y: this.app.screen.height / 2 });

[28.4187]

[24.1344]

    // createBunnyExample({ parent: this.app.stage, ticker: this.app.ticker, x: this.app.screen.width / 2, y: this.app.screen.height / 2 });
    this.didMount();
  }
  public didMount() {

Replacement in frontend/src/pixi/BaseApplication.ts at line 105 [28.158]

B:BD[28.4588] → [24.1407:1467]

  updateState(delta: number, props: BaseApplicationProps) {

[28.4588]

[22.1779]

  public update(props: BaseApplicationProps) {
    this.props = props;
  }
  updateSelf(props: BaseApplicationProps) {

Replacement in frontend/src/pixi/BaseApplication.ts at line 114 [28.158]

B:BD[22.2050] → [22.2050:2485]

  rerender(props: {
    gameStateUpdaters: UpdaterGeneratorType<GameState>,
    pixiComponentState: DeepReadonly<WindowState>,
    // needed to avoid double-updates
    prevGameState: DeepReadonly<GameState>,
    gameState: DeepReadonly<GameState>,
  }) {
    this.globalEventQueue.push(() => {
      this.props.pixiComponentState = props.pixiComponentState;
      this.updaters.gameState = props.gameStateUpdaters; // optional
    })

[22.2050]

[24.1549]

  rerender(props: BaseApplicationProps) {
    this.props = props;

Replacement in frontend/src/pixi/BaseApplication.ts at line 118 [28.158]
B:BD[24.1554] → [24.1554:1609]
```
  render(delta: number, props: BaseApplicationProps) {
```
[24.1554]
[24.1609]
```
  renderSelf(props: BaseApplicationProps) {
```
Deletion in frontend/src/pixi/BaseApplication.ts at line 121 [28.158]
B:BD[24.1687] → [24.1687:1688]

Replacement in frontend/src/pixi/BaseApplication.ts at line 122 [28.158]

B:BD[22.2487] → [22.2487:2557]

  blockedReactUpdate: { old: GameState, new: GameState } | undefined;

[22.2487]

[22.2557]

  public didUpdate(props: BaseApplicationProps) {
  }

Replacement in frontend/src/pixi/BaseApplication.ts at line 126 [28.158]

B:BD[24.1720] → [22.2559:2934]

∅:D[22.2934] → [28.4706:4707]

∅:D[24.1720] → [28.4706:4707]

B:BD[28.4706] → [28.4706:4707]

B:BD[28.4707] → [22.2935:3584]

    // now: read the value of this.gameState
    let startGameState = this.gameState
    // generates a new object by shallow copying
    let setStartGameState = (arg: GameState | ((old: GameState) => GameState)) => {
      if (typeof arg === 'function') {
        startGameState = { ...arg(startGameState) };
      } else {
        startGameState = { ...arg }
      }
    }
    // apply changes to gameState - this should be synchronous, or at least locked
    let updater = updaterGenerator<GameState>(startGameState, setStartGameState);
    for (let eventAction of this.globalEventQueue) {
      eventAction(updater); // includes actions sent down from react
    }
    // pass the new game state back up
    this.gameState = startGameState;
    // note that react will view this as a state change and trigger this.rerender immediately, so we need to block that
    this.updaters.gameState.update((old: GameState): GameState => {
      this.blockedReactUpdate = { old, new: this.gameState };
      return this.gameState;

[24.1720]

[22.3584]

    // assume props is up to date
    this.updateSelf(this.props);
    // send props downwards
    this.rootApplication.update({
      args: {
        renderer: this.app.renderer,
      },
      updaters: this.props.gameStateUpdaters,
      delta,
      gameState: this.props.gameState,
      appSize: this.state.appSize,

Insertion in frontend/src/pixi/BaseApplication.ts at line 138 [28.158]
[22.3592]
[22.3592]
```
    
    this.renderSelf(this.props);
    this.didUpdate(this.props);
```

Insertion in frontend/src/pixi/BaseApplication.ts at line 142 [28.158]

[22.3593]

[28.4707]

    this.props.fireBatch(); // fire enqueued game state updates, which should come back from react in the rerender()

Replacement in frontend/src/pixi/RootApplication.ts at line 15 [24.3626]

B:BD[24.4373] → [24.4373:4450]

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

[24.4373]

[24.4450]

import { assertOnlyCalledOnce, Const, DeepReadonly, Lazy, UpdaterGeneratorType } from "../lib/util/misc";
type RootApplicationState = {
  pointNodeTexture: Lazy<Pixi.Texture>;
}

Replacement in frontend/src/pixi/RootApplication.ts at line 21 [24.3626]

B:BD[24.4451] → [24.4451:4513]

type RootApplicationState = {}
type RootApplicationProps = {}

[24.4451]

[24.4513]

type RootApplicationProps = {
  args: {
    renderer: Pixi.Renderer,
  },
  updaters: UpdaterGeneratorType<GameState>,
  delta: number,
  gameState: Const<GameState>,
  appSize: Vector2
}

Replacement in frontend/src/pixi/RootApplication.ts at line 33 [24.3626]
B:BD[24.4577] → [24.4577:4623]
```
  props!: DeepReadonly<RootApplicationProps>;
```
[24.4577]
[4.0]
```
  staleProps!: RootApplicationProps;
```
Deletion in frontend/src/pixi/RootApplication.ts at line 43 [24.3626]
B:BD[24.5092] → [24.5092:5093]
Deletion in frontend/src/pixi/RootApplication.ts at line 44 [24.3626]
B:BD[24.5128] → [24.5128:5129]

Deletion in frontend/src/pixi/RootApplication.ts at line 45 [24.3626]

B:BD[24.5163] → [24.5163:5336]


  public static appSizeFromWindowSize(window: Vector2): Vector2 {
    return new Vector2({
      x: Math.min(1280, window.x),
      y: Math.min(720, window.y),
    });
  }

Replacement in frontend/src/pixi/RootApplication.ts at line 49 [24.3626]

B:BD[24.5403] → [4.31:119]

  constructor(args: any) {
    // assertOnlyCalledOnce("Base application constructor");

[24.5403]

[24.5563]

  constructor(props: RootApplicationProps) {
    this.staleProps = props;
    this.container = new Pixi.Container();

Replacement in frontend/src/pixi/RootApplication.ts at line 53 [24.3626]

B:BD[24.5564] → [4.120:817]

∅:D[4.817] → [24.5794:5795]

B:BD[24.5794] → [24.5794:5795]

B:BD[24.5795] → [4.818:897]

    // this.app = new Pixi.Application({
    //   width: this.originalAppWidth, // both are ignored - see resize() below
    //   height: this.originalAppHeight,
    //   antialias: true, // both about the same FPS, i get around 30 fps on 1600 x 900
    //   transparent: true, // true -> better fps?? https://github.com/pixijs/pixi.js/issues/5580
    //   resolution: window.devicePixelRatio || 1, // lower -> more FPS but uglier
    //   // resolution: 0.5,
    //   // resolution: 2,
    //   autoDensity: true,
    //   powerPreference: "low-power", // the only valid one for webgl
    //   backgroundColor: 0xffffff, // immaterial - we recommend setting color in backdrop graphics
    // });
    // this.stage = this.app.stage;
    // this.stage.sortableChildren = true;

[24.5564]

[24.6456]

    this.container.sortableChildren = true;

Replacement in frontend/src/pixi/RootApplication.ts at line 55 [24.3626]

B:BD[24.6457] → [4.898:1106]

    // // this.fixedCameraStage = new Pixi.Sprite();
    // // this.fixedCameraStage.zIndex = 1;
    // // this.fixedCameraStage.sortableChildren = true;
    // // this.stage.addChild(this.fixedCameraStage);

[24.6457]

[24.6530]

    this.fixedCameraStage = new Pixi.Sprite();
    this.fixedCameraStage.zIndex = 1;
    this.fixedCameraStage.sortableChildren = true;
    this.container.addChild(this.fixedCameraStage);

Replacement in frontend/src/pixi/RootApplication.ts at line 60 [24.3626]

B:BD[24.6531] → [4.1107:1295]

    // // this.actionStage = new Pixi.Sprite();
    // // this.actionStage.zIndex = 0;
    // // this.actionStage.sortableChildren = true;
    // // this.stage.addChild(this.actionStage);

[24.6531]

[24.6727]

    this.actionStage = new Pixi.Sprite();
    this.actionStage.zIndex = 0;
    this.actionStage.sortableChildren = true;
    this.container.addChild(this.actionStage);

Replacement in frontend/src/pixi/RootApplication.ts at line 65 [24.3626]

B:BD[24.6728] → [4.1296:1493]

    // // this.backdropStage = new Pixi.Sprite();
    // // this.backdropStage.zIndex = -1;
    // // this.backdropStage.sortableChildren = true;
    // // this.stage.addChild(this.backdropStage);

[24.6728]

[24.6904]

    this.backdropStage = new Pixi.Sprite();
    this.backdropStage.zIndex = -1;
    this.backdropStage.sortableChildren = true;
    this.container.addChild(this.backdropStage);

Replacement in frontend/src/pixi/RootApplication.ts at line 81 [24.3626]

B:BD[24.7214] → [4.1829:1920]

    // let pointNodeTexture = new Lazy(() => generatePointNodeTexture(this.app.renderer));

[24.7214]

[24.7398]

    this.state.pointNodeTexture = new Lazy(() => generatePointNodeTexture(props.args.renderer));

Replacement in frontend/src/pixi/RootApplication.ts at line 83 [24.3626]

B:BD[24.7399] → [4.1921:2147]

    // // test
    // // createBunnyExample({ parent: this.actionStage, ticker: this.app.ticker, x: this.app.screen.width / 2, y: this.app.screen.height / 2 });
    // this.app.ticker.add((delta) => this.baseGameLoop(delta));

[24.7399]

[24.7705]

    this.renderSelf(props);
    this.didMount(props);

Replacement in frontend/src/pixi/RootApplication.ts at line 87 [24.3626]

B:BD[24.7963] → [24.7963:8086]

  // render(props: {
  //   gameState: DeepReadonly<GameState>,
  //   pixiComponentState: PixiComponentState,
  // }) { }

[24.7710]

[24.8124]

  public update(props: RootApplicationProps) {
    this.updateSelf(props)
    // this.keyboard.update(props);
    this.renderSelf(props);
    this.didUpdate(props);
  }

Insertion in frontend/src/pixi/RootApplication.ts at line 94 [24.3626]

[24.8125]

[24.8130]

  updateSelf(props: RootApplicationProps) {
  }
  renderSelf(props: RootApplicationProps) {
  }
  didMount(props: RootApplicationProps) {
  }
  willUnmount(props: RootApplicationProps) {
  }
  didUpdate(props: RootApplicationProps) {
  }

ready for switchover

Dependencies

In channels

Change contents

Replacement in frontend/src/App.tsx at line 15 [8.24939]

Replacement in frontend/src/App.tsx at line 43 [8.24939]

Replacement in frontend/src/App.tsx at line 63 [8.24939]

Replacement in frontend/src/components/PixiComponent.tsx at line 1 [14.97253]

Replacement in frontend/src/components/PixiComponent.tsx at line 6 [14.97253]

Insertion in frontend/src/components/PixiComponent.tsx at line 27 [14.97253]

Replacement in frontend/src/components/PixiComponent.tsx at line 33 [14.97253]

Deletion in frontend/src/components/PixiComponent.tsx at line 38 [14.97253]

Replacement in frontend/src/components/PixiComponent.tsx at line 42 [14.97253]

Insertion in frontend/src/components/PixiWrapperComponent.tsx at line 11 [13.1555]

Replacement in frontend/src/components/PixiWrapperComponent.tsx at line 15 [13.1555]

Replacement in frontend/src/components/PixiWrapperComponent.tsx at line 37 [13.1555]

Deletion in frontend/src/components/PixiWrapperComponent.tsx at line 41 [13.1555]

Insertion in frontend/src/components/PixiWrapperComponent.tsx at line 42 [13.1555]

Replacement in frontend/src/contexts.ts at line 8 [23.1824]

Insertion in frontend/src/lib/util/misc.ts at line 260 [26.45665]

Insertion in frontend/src/pixi/Application.ts at line 342 [20.320]

Replacement in frontend/src/pixi/BaseApplication.ts at line 5 [28.158]

Insertion in frontend/src/pixi/BaseApplication.ts at line 7 [28.158]

Replacement in frontend/src/pixi/BaseApplication.ts at line 18 [28.158]

Deletion in frontend/src/pixi/BaseApplication.ts at line 28 [28.158]

Insertion in frontend/src/pixi/BaseApplication.ts at line 30 [28.158]

Replacement in frontend/src/pixi/BaseApplication.ts at line 34 [28.158]

Deletion in frontend/src/pixi/BaseApplication.ts at line 37 [28.158]

Replacement in frontend/src/pixi/BaseApplication.ts at line 38 [28.158]