ambersz/procgen-skill-tree - Change ANA23YLFENNJU3UZDZKIKGZJLM46AM2LQEQ7SPRUVRMOQGDG4DFAC

further cleanup

Created by Bowei Liu on December 24, 2020

ANA23YLFENNJU3UZDZKIKGZJLM46AM2LQEQ7SPRUVRMOQGDG4DFAC

Dependencies

In channels

main

Change contents

Insertion in frontend/src/lib/util/misc.ts at line 153 [6.45665]
[5.1292]
[5.1292]
```
// Twice, actually, because of react dev mode double-calling stuff
```

Insertion in frontend/src/lib/util/misc.ts at line 199 [6.45665]

[7.1429]

/**
 * 
 * @param fn an arbitrary callback which performs some operation with side effects.
 * @returns a tuple: [batchedFn, fireBatch]. 
 * batchedFn takes the same arguments as fn, but the side effects are delayed until fireBatch is called.
 * if batchedFn is called multiple times, those invocations are stored in order, and then popped off in order when fireBatch is called.
 */

Insertion in frontend/src/lib/util/misc.ts at line 211 [6.45665]
[7.1610]
[7.1610]
```
    console.log({ stack: new Error().stack, batchSize: batch.length });
```

File deletion: ZLevel.ts

BF:BFD[8.693] → [9.1240:1251]

BF:BFD[9.1251] → [9.1252:1252]

B:BD[9.1252] → [9.1253:1286]

B:BD[9.1286] → [10.2596:2646]

∅:D[10.2646] → [11.2609:2669]

B:BD[9.1286] → [11.2609:2669]

∅:D[11.2669] → [9.1286:1922]

B:BD[9.1286] → [9.1286:1922]

B:BD[9.1922] → [11.2670:2742]

∅:D[11.2742] → [9.1922:1923]

B:BD[9.1922] → [9.1922:1923]

∅:D[12.2137] → [9.1978:2399]

∅:D[10.2751] → [9.1978:2399]

B:BD[9.1978] → [9.1978:2399]

B:BD[9.2399] → [12.2138:2212]

∅:D[12.2212] → [11.2808:2915]

B:BD[11.2808] → [11.2808:2915]

∅:D[11.2915] → [9.2494:2505]

B:BD[9.2494] → [9.2494:2505]

B:BD[9.1923] → [10.2647:2751]

import * as Pixi from "pixi.js";
import { PointNodeRef } from "../data/GameState";
import { HashMap } from "../lib/util/data_structures/hash";
import { Vector2 } from "../lib/util/geometry/vector2";
import { squirrel3 } from "../lib/util/random";
import { Chunk, RenderedChunk } from "./Chunk";
export class ZLevel {
  private id: number;
  public z: number;
  public chunks: Chunk[] = []
  constructor(seed: number, zIndex: number) {
    this.z = zIndex;
    this.id = squirrel3(seed + this.z);
    // pregenerate stuff
    for (let i = -3; i <= 3; i++) {
      for (let j = -3; j <= 3; j++) {
        this.chunks.push(new Chunk(this.id, new Vector2(i, j)));
      }
    }
  }
}
export class RenderedZLevel {
  public zLevel!: ZLevel;
  public container: Pixi.Container;
  public renderedChunks: HashMap<Chunk, RenderedChunk> = new HashMap();
    this.zLevel = zLevel;
    this.container = new Pixi.Container();
    // this.actionStage.addChild(chunksContainer);
    // this.container.x = this.app.screen.width/2;
    // this.container.y = this.app.screen.height/2;
    // this.onResize.push(() => {
    //   chunksContainer.x = this.app.screen.width/2;
    //   chunksContainer.y = this.app.screen.height/2;
    // })
    for (let chunk of this.zLevel.chunks) {
      let renderedChunk = new RenderedChunk(chunk, onNodeFocus, texture);
      this.renderedChunks.put(chunk, renderedChunk)
      this.container.addChild(renderedChunk.container)
    }
  }
}
  constructor(zLevel: ZLevel, onNodeFocus: (selection: PointNodeRef) => void, texture?: Pixi.Texture) {

File deletion: Application.ts, Application.ts

BFD:BFD[13.302] → [13.303:319]

BF:BFD[13.319] → [13.320:320]

BF:BFD[8.693] → [8.694:710]

BF:BFD[8.710] → [13.320:320]

B:BD[13.320] → [13.321:354]

B:BD[14.516] → [15.840:894]

B:BD[15.894] → [16.1900:1953]

B:BD[16.1953] → [17.316:381]

B:BD[17.381] → [18.278:327]

B:BD[18.327] → [19.347:451]

∅:D[20.2943] → [21.0:60]

B:BD[22.128] → [21.0:60]

∅:D[23.2886] → [24.0:109]

B:BD[10.2172] → [24.0:109]

B:BD[24.109] → [20.2944:3016]

∅:D[5.2231] → [25.741:807]

B:BD[23.2936] → [25.741:807]

B:BD[20.3016] → [5.2160:2231]

B:BD[21.60] → [23.2825:2886]

B:BD[19.451] → [20.2857:2892]

∅:D[18.327] → [26.35:59]

∅:D[27.126] → [26.35:59]

∅:D[28.2479] → [26.35:59]

∅:D[22.128] → [26.35:59]

∅:D[29.32] → [26.35:59]

∅:D[24.109] → [26.35:59]

∅:D[17.381] → [26.35:59]

∅:D[25.807] → [26.35:59]

∅:D[21.60] → [26.35:59]

∅:D[20.3016] → [26.35:59]

∅:D[16.1953] → [26.35:59]

∅:D[30.20512] → [26.35:59]

∅:D[19.451] → [26.35:59]

∅:D[23.2936] → [26.35:59]

∅:D[10.2172] → [26.35:59]

∅:D[14.516] → [26.35:59]

∅:D[31.2046] → [26.35:59]

∅:D[15.894] → [26.35:59]

B:BD[13.354] → [26.35:59]

B:BD[26.59] → [32.525:588]

B:BD[32.588] → [10.2173:2231]

∅:D[18.379] → [26.149:185]

∅:D[33.1918] → [26.149:185]

∅:D[22.162] → [26.149:185]

∅:D[32.588] → [26.149:185]

∅:D[10.2231] → [26.149:185]

∅:D[34.87] → [26.149:185]

B:BD[26.149] → [26.149:185]

B:BD[26.185] → [32.589:646]

B:BD[32.646] → [22.163:196]

∅:D[35.65] → [26.263:266]

∅:D[18.425] → [26.263:266]

∅:D[36.41] → [26.263:266]

∅:D[22.196] → [26.263:266]

∅:D[37.91] → [26.263:266]

∅:D[38.41] → [26.263:266]

∅:D[32.646] → [26.263:266]

∅:D[39.479] → [26.263:266]

∅:D[34.221] → [26.263:266]

B:BD[26.263] → [26.263:266]

∅:D[26.297] → [40.220:281]

B:BD[13.354] → [40.220:281]

B:BD[40.281] → [26.298:299]

∅:D[15.1014] → [26.299:325]

B:BD[26.299] → [26.299:325]

B:BD[26.325] → [27.127:128]

B:BD[27.128] → [16.1954:1987]

∅:D[41.306] → [15.895:928]

B:BD[26.299] → [15.895:928]

B:BD[15.928] → [41.307:384]

∅:D[41.384] → [15.969:1013]

B:BD[15.969] → [15.969:1013]

∅:D[41.715] → [15.1013:1014]

∅:D[22.233] → [15.1013:1014]

B:BD[15.1013] → [15.1013:1014]

B:BD[15.1013] → [41.385:715]

B:BD[41.715] → [22.197:233]

B:BD[26.299] → [41.286:306]

∅:D[27.163] → [13.524:525]

∅:D[40.281] → [13.524:525]

∅:D[16.1987] → [13.524:525]

∅:D[26.325] → [13.524:525]

B:BD[13.524] → [13.524:525]

∅:D[18.460] → [39.480:546]

B:BD[13.525] → [39.480:546]

∅:D[42.158] → [26.359:419]

∅:D[43.803] → [26.359:419]

∅:D[5.2285] → [26.359:419]

B:BD[26.359] → [26.359:419]

∅:D[19.510] → [26.419:420]

B:BD[26.419] → [26.419:420]

B:BD[26.420] → [44.0:163]

∅:D[42.319] → [45.0:286]

∅:D[32.837] → [45.0:286]

B:BD[18.574] → [45.0:286]

∅:D[32.862] → [45.286:379]

B:BD[45.286] → [45.286:379]

∅:D[42.425] → [27.164:165]

∅:D[46.129285] → [27.164:165]

B:BD[40.402] → [27.164:165]

B:BD[15.1016] → [41.716:790]

∅:D[41.790] → [15.1182:1229]

B:BD[15.1182] → [15.1182:1229]

∅:D[41.880] → [15.1229:1277]

B:BD[15.1229] → [15.1229:1277]

B:BD[15.1277] → [16.2088:2089]

∅:D[16.2089] → [41.881:1045]

B:BD[15.1277] → [41.881:1045]

B:BD[41.1045] → [16.2090:2091]

∅:D[16.2091] → [41.1045:1218]

B:BD[41.1045] → [41.1045:1218]

∅:D[31.2274] → [15.1278:1279]

B:BD[15.1278] → [15.1278:1279]

B:BD[15.1279] → [22.234:344]

∅:D[22.344] → [16.2272:2442]

B:BD[16.2272] → [16.2272:2442]

∅:D[32.948] → [16.2442:2443]

B:BD[16.2442] → [16.2442:2443]

∅:D[47.696] → [39.547:587]

∅:D[27.370] → [39.547:587]

∅:D[16.2764] → [39.547:587]

∅:D[15.1543] → [39.547:587]

B:BD[40.402] → [39.547:587]

B:BD[39.587] → [15.1544:1672]

∅:D[15.1672] → [39.587:672]

B:BD[39.587] → [39.587:672]

∅:D[39.672] → [34.222:227]

B:BD[40.402] → [34.222:227]

B:BD[34.227] → [18.575:684]

B:BD[18.684] → [48.524:599]

B:BD[48.599] → [32.949:1047]

∅:D[48.666] → [18.756:968]

∅:D[32.1047] → [18.756:968]

B:BD[18.756] → [18.756:968]

B:BD[18.968] → [32.1048:1224]

∅:D[32.1224] → [18.1152:1222]

B:BD[18.1152] → [18.1152:1222]

∅:D[18.1222] → [30.20818:20822]

B:BD[30.20818] → [30.20818:20822]

∅:D[30.20822] → [39.763:764]

B:BD[39.763] → [39.763:764]

∅:D[47.721] → [18.1223:1336]

∅:D[5.2337] → [18.1223:1336]

B:BD[34.1310] → [18.1223:1336]

B:BD[18.1336] → [45.380:400]

∅:D[45.400] → [18.1336:1400]

B:BD[18.1336] → [18.1336:1400]

B:BD[18.1400] → [45.401:574]

∅:D[45.574] → [18.1509:1516]

B:BD[18.1509] → [18.1509:1516]

∅:D[49.1215] → [18.1631:1653]

B:BD[18.1631] → [18.1631:1653]

B:BD[18.1699] → [18.1699:1748]

B:BD[18.1748] → [22.345:696]

∅:D[22.696] → [31.2275:2397]

B:BD[29.122] → [31.2275:2397]

B:BD[31.2397] → [18.1749:1843]

∅:D[18.1843] → [31.2426:2459]

B:BD[31.2426] → [31.2426:2459]

B:BD[31.2459] → [18.1844:2302]

∅:D[18.2302] → [41.1638:1639]

∅:D[31.2961] → [41.1638:1639]

B:BD[29.823] → [41.1638:1639]

B:BD[41.1639] → [22.697:1134]

∅:D[22.1134] → [18.2303:2351]

B:BD[41.1639] → [18.2303:2351]

∅:D[24.309] → [18.2472:2503]

B:BD[18.2472] → [18.2472:2503]

∅:D[24.431] → [18.2590:2597]

B:BD[18.2590] → [18.2590:2597]

B:BD[46.129328] → [46.129328:129329]

∅:D[22.1147] → [19.511:654]

B:BD[46.129329] → [19.511:654]

∅:D[24.495] → [19.654:655]

∅:D[12.1] → [19.654:655]

∅:D[20.3089] → [19.654:655]

B:BD[19.654] → [19.654:655]

∅:D[24.509] → [12.640:641]

B:BD[12.640] → [12.640:641]

∅:D[18.2784] → [40.652:656]

∅:D[22.4182] → [40.652:656]

∅:D[46.130311] → [40.652:656]

∅:D[20.8345] → [40.652:656]

∅:D[19.1208] → [40.652:656]

B:BD[40.652] → [40.652:656]

∅:D[7.1740] → [26.1827:1829]

∅:D[23.3016] → [26.1827:1829]

B:BD[40.656] → [26.1827:1829]

B:BD[40.656] → [23.2937:2965]

∅:D[50.909] → [23.3004:3016]

∅:D[25.892] → [23.3004:3016]

B:BD[23.3004] → [23.3004:3016]

B:BD[23.3016] → [7.1710:1740]

B:BD[23.2965] → [25.808:892]

B:BD[25.892] → [50.887:909]

B:BD[12.641] → [20.3476:8345]

B:BD[19.655] → [4.521:936]

∅:D[4.936] → [24.496:509]

∅:D[20.3475] → [24.496:509]

B:BD[19.655] → [24.496:509]

B:BD[19.654] → [12.0:1]

B:BD[12.1] → [20.3017:3089]

B:BD[46.129329] → [22.1135:1147]

B:BD[18.2503] → [24.310:431]

B:BD[18.2351] → [24.110:309]

B:BD[18.1516] → [49.1023:1215]

B:BD[39.764] → [47.697:721]

B:BD[47.721] → [5.2286:2337]

B:BD[16.2443] → [47.674:696]

B:BD[16.2442] → [32.863:948]

B:BD[15.1229] → [41.791:880]

B:BD[45.379] → [42.320:425]

B:BD[45.286] → [32.838:862]

B:BD[44.163] → [42.159:319]

B:BD[26.419] → [19.476:510]

B:BD[39.546] → [42.92:158]

B:BD[42.158] → [5.2232:2285]

B:BD[13.525] → [18.426:459]

B:BD[18.459] → [32.647:717]

B:BD[32.717] → [19.452:475]

∅:D[32.717] → [18.459:460]

∅:D[19.475] → [18.459:460]

B:BD[18.459] → [18.459:460]

import * as Pixi from "pixi.js";
import { KeyboardState } from "../lib/pixi/keyboard";
import { FpsTracker } from "../lib/util/fpsTracker";
import { registerDraggable } from "../lib/pixi/DraggableHelper";
import createBunnyExample from "./BunnyExample";
import { Chunk, RenderedChunk } from "./Chunk";
import { Vector2 } from "../lib/util/geometry/vector2";
import { HashMap } from "../lib/util/data_structures/hash";
import { generatePointNodeTexture } from "./textures/PointNodeTexture";
import { Reticle } from "./Reticle";
import { ZLevelGenFactory } from "../dataFactory/WorldGenStateFactory";
import { PixiComponentState } from "../components/PixiComponent";
import { assertOnlyCalledOnce, DeepReadonly } from "../lib/util/misc";
import { GameState, PointNodeRef } from "../data/GameState";
import { ZLevel } from "./ZLevel";
export type Config = {
  originalWindowWidth: number;
  originalWindowHeight: number;
  onFocusedNodeChange: (selection: PointNodeRef) => void;
};
const defaultConfig: Config = {
  originalWindowWidth: 800,
  originalWindowHeight: 800,
  onFocusedNodeChange: () => { }
};
export class Application {
  public app!: Pixi.Application;
  public config!: Config;
  public fpsTracker: FpsTracker;
  public stage!: Pixi.Container;
  // Contains HUD, and other entities that don't move when game camera moves
  public fixedCameraStage!: Pixi.Container;
  // Contains game entities that move when game camera pans/zooms. Highly encouraged to have further subdivions.
  public actionStage!: Pixi.Container;
  // Contains a few entities that doesn't move when game camera moves, but located behind action stage entities, e.g. static backgrounds
  public backdropStage!: Pixi.Container;
  public keyboard!: KeyboardState;
  // root container
  /**
   * Need to provide config to set up the pixi canvas
   */
    this.config = Object.assign({}, defaultConfig, config);
    this.originalAppWidth = Math.min(1280, this.config.originalWindowWidth - 8);
    this.originalAppHeight = Math.min(720, this.config.originalWindowHeight - 8);
      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,
      autoDensity: true,
      powerPreference: "low-power", // the only valid one for webgl
    this.stage = this.app.stage;
    this.stage.sortableChildren = true;
    this.fixedCameraStage = new Pixi.Sprite();
    this.stage.addChild(this.fixedCameraStage);
    this.actionStage = new Pixi.Sprite();
    this.actionStage.zIndex = 0;
    this.actionStage.sortableChildren = true;
    this.stage.addChild(this.actionStage);
    this.backdropStage = new Pixi.Sprite();
    this.backdropStage.zIndex = -1;
    this.backdropStage.sortableChildren = true;
    this.stage.addChild(this.backdropStage);
    this.keyboard = new KeyboardState();
    this.app.ticker.add(() => {
      this.keyboard.update();
    })
    this.fpsTracker = new FpsTracker();
    this.app.ticker.add((delta) => {
      // delta should be approximately equal to 1
      this.fpsTracker.tick(delta);
    })
  }
  /**
   * Please only call once!!
   * Usage: const container = useRef<HTMLDivElement>(null); useEffect(() => { application.register(container.current!); }, []);
   */
  public register(curr: HTMLDivElement) {
    curr.appendChild(this.app.view);
  }
  public resize(windowWidth: number, windowHeight: number) {
    // we dont want to take up the whole window
    // this.app.renderer.resize(windowHeight * 0.75, windowHeight * 0.75);
    this.app.renderer.resize(Math.min(1280, windowWidth  - 8), Math.min(720, windowHeight  - 8));
    // causes the game to be rescaled when window is resized
    // this.app.stage.width = windowHeight * 0.75;
    // this.app.stage.height = windowHeight * 0.75;
    // this.app.stage.x = windowHeight * 0.375;
    this.actionStage.pivot.x = (this.app.screen.width - this.originalAppWidth) * -0.5;
    this.actionStage.pivot.y = (this.app.screen.height - this.originalAppHeight) * -0.5;
    this.onResize.map(fn => fn());
    // this.app.stage.pivot.x = 0;
  }
    // put a text thingy in the top right
    let textFpsHud = new Pixi.Text('', {
      fontFamily: 'PixelMix',
      fontSize: 12,
      // align: 'right'
    });
    this.app.ticker.add(() => {
      textFpsHud.text = this.fpsTracker.getFpsString() + " FPS\n" + this.fpsTracker.getUpsString() + " UPS\n" + 
      this.app.screen.width + "x" + this.app.screen.height;
    })
    textFpsHud.y = 0;
    this.fixedCameraStage.addChild(textFpsHud);
    // Register mouse drag to use for panning
    registerDraggable({
      source: this.backdropStage,
      // dragging backdrop stage should move action stage in the reverse direction -- we're dragging the backdrop, not an entity
      target: this.actionStage,
    });
    // populate the backdrop layer with something that captures mouse events
    const backdrop = new Pixi.Graphics();
    this.backdropStage.addChild(backdrop);
    backdrop.beginFill(0xabcdef, 1);
    // backdrop.alpha = 0.5; // if alpha == 0, Pixi does not register this as a hittable area
    backdrop.interactive = true;
    // backdrop.interactiveChildren = true; // not sure what this does
    // backdrop.buttonMode = true; // changes the mouse cursor on hover to pointer; not desirable for the entire backdrop
    backdrop.drawRect(0, 0, this.app.screen.width, this.app.screen.height);
    this.onResize.push(() => {
      backdrop.width = this.app.screen.width;
      backdrop.height = this.app.screen.height;
    });
    // backdrop.drawRect(-10000, -10000, 30000, 30000);
    // Register keyboard to use for panning
    this.app.ticker.add((delta) => {
      if (this.keyboard.down.Right) {
        this.actionStage.x -= 10 * delta;
      }
      if (this.keyboard.down.Left) {
        this.actionStage.x += 10 * delta;
      }
      if (this.keyboard.down.Up) {
        this.actionStage.y += 10 * delta;
      }
      if (this.keyboard.down.Down) {
        this.actionStage.y -= 10 * delta;
      }
    });
    // Add a reticle in the hud at the midpoint
    this.onResize.push(() => {
    })
    // createBunnyExample({ parent: this.actionStage, ticker: this.app.ticker, x: this.app.screen.width / 2, y: this.app.screen.height / 2 });
  }
}
  public rerender(props: {
  }) {
  }
  public update(t?: any) { }
    gameState: DeepReadonly<GameState>,
    pixiComponentState: PixiComponentState,
    [k: string]: any,
//     // create the world
//     let zLevel = new RenderedZLevel(
//       new ZLevel(this.randomSeed, 0),
//       this.config.onFocusedNodeChange,
//       texture
//     );
//     let zLevelPersistence: { [i: number]: ZLevel } = {};
//     zLevelPersistence[0] = zLevel.zLevel;
//     // find the 0th square, and allocate it
//     for (let chunk of zLevel.zLevel.chunks) {
//       if (chunk.location.x === 0 && chunk.location.y === 0) {
//         chunk.allocatedNodes.put(new Vector2(0, 0));
//         zLevel.renderedChunks.get(chunk).renderedNodes.get(new Vector2(0, 0)).tint = 0x00AAFF;
//       }
//     }
//     let chunksContainer = zLevel.container;
//     this.actionStage.addChild(chunksContainer);
//     chunksContainer.x = this.app.screen.width/2;
//     chunksContainer.y = this.app.screen.height/2;
//     this.onResize.push(() => {
//       chunksContainer.x = this.app.screen.width / 2;
//       chunksContainer.y = this.app.screen.height / 2;
//     });
// 
//     
//     // let preloadedZLevelDown = new RenderedZLevel(
//     //   new ZLevel(this.randomSeed, -1),
//     //   this.config.onFocusedNodeChange,
//     //   texture
//     // )
//     let chunkOriginalWidth = chunksContainer.width;
//     let chunkOriginalHeight = chunksContainer.height;
// 
//     this.app.ticker.add((delta) => {
//       if (this.keyboard.justUp[">"] || this.keyboard.justUp["<"]) {
//         // reset
//         chunksContainer.alpha = 1;
//         chunksContainer.width = chunkOriginalWidth;
//         chunksContainer.height = chunkOriginalHeight;
//       }
// 
//       if (this.keyboard.down[">"]) {
//         // phase out the current z level and go to another one
//         chunksContainer.alpha -= 0.1;
//         chunksContainer.width *= 1.03;
//         chunksContainer.height *= 1.03;
//         // this.actionStage.removeChild(chunksContainer);
//         if (chunksContainer.alpha <= 0) {
//           chunksContainer.alpha = 1;
//           // start the process to render next z level
//           backdrop.tint = 0xDDAADD;
//           this.actionStage.removeChild(chunksContainer);
//           setTimeout(() => {
//             let newZIndex = zLevel.zLevel.z - 1;
//             // prefer cached persistence data if it is available
//             if (!zLevelPersistence[newZIndex]) {
//               zLevelPersistence[newZIndex] = new ZLevel(this.randomSeed, newZIndex);
//             }
//             zLevel = new RenderedZLevel(
//               zLevelPersistence[newZIndex],
//               this.config.onFocusedNodeChange,
//               texture
//             );
//             // zLevel = preloadedZLevelDown;
//             // preloadedZLevelDown = new RenderedZLevel(
//             //   new ZLevel(this.randomSeed, preloadedZLevelDown.zLevel.z - 1),
//             //   this.config.onFocusedNodeChange,
//             //   texture
//             // );
//             chunksContainer = zLevel.container;
//             this.actionStage.addChild(chunksContainer);
//             chunksContainer.x = this.app.screen.width / 2;
//             chunksContainer.y = this.app.screen.height / 2;
//             backdrop.tint = 0xFFFFFF;
//           });
//         }
//       }
//       if (this.keyboard.down["<"]) {
//         // phase out the current z level and go to another one
//         chunksContainer.alpha -= 0.1;
//         chunksContainer.width *= 1/1.03;
//         chunksContainer.height *= 1/1.03;
//         // this.actionStage.removeChild(chunksContainer);
//         if (chunksContainer.alpha <= 0) {
//           // start the process to render next z level
//           chunksContainer.alpha = 1;
//           backdrop.tint = 0xDDAADD;
//           this.actionStage.removeChild(chunksContainer);
//           setTimeout(() => {
//             let newZIndex = zLevel.zLevel.z + 1;
//             // prefer cached persistence data if it is available
//             if (!zLevelPersistence[newZIndex]) {
//               zLevelPersistence[newZIndex] = new ZLevel(this.randomSeed, newZIndex);
//             }
//             zLevel = new RenderedZLevel(
//               zLevelPersistence[newZIndex],
//               this.config.onFocusedNodeChange,
//               texture
//             );
//             // zLevel = preloadedZLevelDown;
//             // preloadedZLevelDown = new RenderedZLevel(
//             //   new ZLevel(this.randomSeed, preloadedZLevelDown.zLevel.z - 1),
//             //   this.config.onFocusedNodeChange,
//             //   texture
//             // );
//             chunksContainer = zLevel.container;
//             this.actionStage.addChild(chunksContainer);
//             chunksContainer.x = this.app.screen.width / 2;
//             chunksContainer.y = this.app.screen.height / 2;
//             backdrop.tint = 0xFFFFFF;
//           });
//         }
//       }
//     });
    // let zLevel = new RenderedZLevel({
    //   pointNodeTexture,
    //   z: 0,
    //   zLevelGen: (new ZLevelGenFactory({}).create({ seed: this.randomSeed, z: 0})),
    //   stateUpdaterQueue: [] as any,
    //   ticker: this.app.ticker
    // })
    // this.actionStage.addChild(zLevel.container);
    // zLevel.container.x = this.app.screen.width / 2;
    // zLevel.container.y = this.app.screen.height / 2;
    return;
    let pointNodeTexture = generatePointNodeTexture(this.app.renderer);
    // test
      reticle.rerender({
        width: this.app.screen.width / 2,
        height: this.app.screen.height / 2,
      });
    const reticle = new Reticle({});
    this.fixedCameraStage.addChild(reticle.container);
    reticle.container.x = this.app.screen.width / 2;
    reticle.container.y = this.app.screen.height / 2;
    // textFpsHud.x = this.app.screen.width;
    // this.onResize.push(() => { textFpsHud.x = this.app.screen.width; });
    // textFpsHud.anchor.x = 1; // right justify
    textFpsHud.x = 0;
  private drawStart() {
    assertOnlyCalledOnce("Application.drawStart");
    this.drawStart();
    this.resize(this.config.originalWindowWidth, this.config.originalWindowHeight);
    this.fixedCameraStage.zIndex = 1;
    this.fixedCameraStage.sortableChildren = true;
      backgroundColor: 0xffffff, // immaterial - we recommend setting color in backdrop graphics
    });
      // resolution: 2,
    this.app = app || new Pixi.Application({
      width: this.originalAppWidth, // both are ignored - see resize() below
      height: this.originalAppHeight,
    this.randomSeed = 0xcafebabe;
  constructor(config?: Partial<Config>, app?: Pixi.Application) {
    assertOnlyCalledOnce("Application constructor");
  onResize: (() => void)[] = [];
  originalAppWidth: number = 1280;
  originalAppHeight: number = 720;
  randomSeed!: number;

File deletion: Chunk.ts

BF:BFD[8.693] → [19.1209:1219]

BF:BFD[19.1219] → [19.1220:1220]

B:BD[19.1220] → [19.1221:1418]

B:BD[19.1418] → [11.315:384]

B:BD[11.384] → [10.2232:2282]

∅:D[9.60] → [19.1419:1441]

∅:D[11.384] → [19.1419:1441]

∅:D[10.2282] → [19.1419:1441]

B:BD[19.1419] → [19.1419:1441]

B:BD[19.1441] → [51.0:161]

B:BD[51.161] → [9.61:165]

∅:D[9.165] → [51.161:162]

B:BD[51.161] → [51.161:162]

B:BD[51.162] → [9.166:189]

∅:D[9.189] → [19.1463:1496]

B:BD[19.1463] → [19.1463:1496]

∅:D[11.503] → [19.1496:1745]

B:BD[19.1496] → [19.1496:1745]

B:BD[19.1745] → [9.190:333]

∅:D[9.333] → [51.217:367]

B:BD[19.1798] → [51.217:367]

B:BD[51.367] → [9.334:701]

∅:D[9.701] → [19.1913:1928]

B:BD[19.1913] → [19.1913:1928]

B:BD[19.1928] → [9.702:983]

∅:D[9.983] → [19.2140:2154]

B:BD[19.2140] → [19.2140:2154]

∅:D[11.566] → [19.2154:2190]

B:BD[19.2154] → [19.2154:2190]

B:BD[19.2190] → [33.2148:2172]

∅:D[33.2172] → [19.2213:2249]

B:BD[19.2213] → [19.2213:2249]

∅:D[11.640] → [19.2249:2250]

∅:D[12.1135] → [19.2249:2250]

B:BD[19.2249] → [19.2249:2250]

B:BD[19.2250] → [51.368:409]

B:BD[51.409] → [9.984:1079]

∅:D[9.1079] → [51.502:545]

B:BD[51.502] → [51.502:545]

B:BD[51.545] → [11.641:687]

∅:D[11.687] → [51.545:590]

B:BD[51.545] → [51.545:590]

∅:D[51.590] → [19.2408:2409]

B:BD[19.2408] → [19.2408:2409]

∅:D[33.2248] → [19.2460:2522]

∅:D[9.1134] → [19.2460:2522]

∅:D[12.1214] → [19.2460:2522]

∅:D[10.2385] → [19.2460:2522]

B:BD[19.2460] → [19.2460:2522]

B:BD[19.2522] → [33.2249:2250]

∅:D[33.2250] → [19.2527:2631]

B:BD[19.2527] → [19.2527:2631]

B:BD[19.2631] → [12.1215:1813]

∅:D[2.312] → [12.1813:2016]

B:BD[12.1813] → [12.1813:2016]

∅:D[2.539] → [12.2016:2057]

B:BD[12.2016] → [12.2016:2057]

∅:D[12.2057] → [19.2766:2774]

B:BD[19.2766] → [19.2766:2774]

∅:D[11.1010] → [52.264:292]

B:BD[19.2991] → [52.264:292]

B:BD[52.292] → [21.779:946]

∅:D[21.946] → [33.2362:2405]

B:BD[52.292] → [33.2362:2405]

∅:D[10.2595] → [11.1052:1201]

B:BD[11.1052] → [11.1052:1201]

∅:D[53.1157] → [11.1262:2546]

B:BD[11.1262] → [11.1262:2546]

∅:D[11.2546] → [33.2470:2480]

B:BD[52.461] → [33.2470:2480]

∅:D[33.2480] → [19.2991:3032]

∅:D[52.470] → [19.2991:3032]

B:BD[19.2991] → [19.2991:3032]

B:BD[19.3032] → [51.854:1012]

B:BD[51.1012] → [11.2547:2608]

∅:D[51.1012] → [19.3168:3173]

∅:D[11.2608] → [19.3168:3173]

B:BD[19.3168] → [19.3168:3173]

B:BD[11.1201] → [53.1095:1157]

B:BD[33.2405] → [10.2386:2595]

B:BD[12.2016] → [2.313:539]

B:BD[12.1813] → [2.0:312]

B:BD[19.2409] → [10.2283:2385]

B:BD[19.2249] → [12.1048:1135]

B:BD[19.2154] → [11.504:566]

B:BD[19.1496] → [11.385:503]

import { Line } from "../lib/util/geometry/line";
import { Vector2 } from "../lib/util/geometry/vector2";
import { INTMAX32, squirrel3 } from "../lib/util/random";
import * as Pixi from "pixi.js";
import { HashMap, HashSet } from "../lib/util/data_structures/hash";
import { PointNodeRef } from "../data/GameState";
export class Chunk {
  public static CHUNK_DIM = 9; // each chunk is a DIM x DIM grid of nodes, centered on a single node
  public static CHUNK_HALF_DIM = (Chunk.CHUNK_DIM - 1) / 2;
  public static DROP_NODES_CHANCE = 0.3; // before generating edges, how many of the nodes to throw out
  private id!: number;
  public nodes: Vector2[] = [];
  public edges: Line[] = [];
  public location: Vector2 = new Vector2(0, 0);
  constructor(seed: number, chunkIndex: Vector2) {
    this.location = chunkIndex;
    this.id = squirrel3(seed + squirrel3(seed + this.location.x) + this.location.y);
    // determine which nodes we want to throw out - also keep 4way rotational symmetry
    let droppedNodes: HashSet<Vector2> = new HashSet();
    for (let i = -Chunk.CHUNK_HALF_DIM; i <= Chunk.CHUNK_HALF_DIM; i++) {
      for (let j = -Chunk.CHUNK_HALF_DIM; j <= Chunk.CHUNK_HALF_DIM; j++) {
        if (i === 0 && j === 0) {
          continue;
        }
        if (squirrel3(this.id + i * Chunk.CHUNK_DIM + j) / INTMAX32 < Chunk.DROP_NODES_CHANCE / 4) {
          droppedNodes.put(new Vector2(i, j));
          droppedNodes.put(new Vector2(j, -i));
          droppedNodes.put(new Vector2(-i, -j));
          droppedNodes.put(new Vector2(-j, i));
        }
      }
    }
    for (let i = -Chunk.CHUNK_HALF_DIM; i <= Chunk.CHUNK_HALF_DIM; i++) {
      for (let j = -Chunk.CHUNK_HALF_DIM; j <= Chunk.CHUNK_HALF_DIM; j++) {
        let loc = new Vector2(i, j);
        if (!droppedNodes.get(loc)) {
          this.nodes.push(new Vector2(i, j));
        }
      }
    }
  }
}
export class RenderedChunk {
  public chunk!: Chunk;
  public container: Pixi.Container;
  public static SPACING_PX: number = 24;
  public static CHUNK_SPACING_PX: number = (Chunk.CHUNK_DIM + 0.5) * RenderedChunk.SPACING_PX;
  public static NODE_SIZE_PX: number = 14;
  public static NODE_HITAREA_PX: number = 18;
  public static NODE_ROUNDED_PX: number = 4;
    this.chunk = chunk;
    // this.parentContainer = parent;
    // render the thing
    this.container = new Pixi.Container();
    for (let node of chunk.nodes) {
      let g: Pixi.Graphics | Pixi.Sprite = new Pixi.Graphics();
      if (!texture) {
        // g.beginFill(0xff8080);
        // // if (node.x == 0 && node.y == 0) {
        // //   g.beginFill(0xff0000);
        // // }
        // g.drawRoundedRect(
        //   node.x * RenderedChunk.SPACING_PX - RenderedChunk.NODE_SIZE_PX / 2,
        //   node.y * RenderedChunk.SPACING_PX - RenderedChunk.NODE_SIZE_PX / 2,
        //   RenderedChunk.NODE_SIZE_PX,
        //   RenderedChunk.NODE_SIZE_PX,
        //   RenderedChunk.NODE_ROUNDED_PX
        // );
        // this.renderedNodes.put(node, g);
      } else {
        g = new Pixi.Sprite(texture);
        g.anchor.x = 0.5;
        g.anchor.y = 0.5;
        g.x = node.x * RenderedChunk.SPACING_PX;
        g.y = node.y * RenderedChunk.SPACING_PX;
        this.renderedNodes.put(node, g);
      }
      g.interactive = true;
      if (this.chunk.allocatedNodes.get(node)) {
        g.tint = 0x00aaff;
      } else if (this.chunk.selectedNodes.get(node)) {
        g.tint = 0xBBBBBB;
      }
      g.addListener("pointerdown", () => {
        console.log(`clicked chunk ${this.chunk.location.x} ${this.chunk.location.y} node ${node.x}, ${node.y}`);
        // if nothing is selected
          // select it
          this.chunk.selectedNodes.put(node);
          g.tint = 0xBBBBBB;
          // g.alpha = 0.5;
        } else if (this.chunk.selectedNodes.get(node)) {
          // i was already selected, let's allocate it
          this.chunk.selectedNodes.remove(node);
          // try to allocate, only allow if we are connected to something already allocated
          let neighbors = [node.addX(1), node.addY(1), node.addY(-1), node.addX(-1)];
          let allowed = false;
          for (let neighbor of neighbors) {
            if (this.chunk.allocatedNodes.get(neighbor)) {
              allowed = true;
              break;
            }
          }
          if (allowed) {
            this.chunk.allocatedNodes.put(node);
            g.tint = 0x00aaff;
          } else {
            g.tint = 0xFFFFFF;
            window.alert('not allowed to allocate that one!');
          }
          // g.alpha = 0.5;
        } else {
          // unselect what was previously selected
          for (let selected of this.chunk.selectedNodes.values()) {
            this.renderedNodes.get(selected).tint = 0xFFFFFF;
            this.chunk.selectedNodes.remove(selected);
          }
          this.chunk.selectedNodes.put(node);
          g.tint = 0xBBBBBB;
        }
      });
      this.container.addChild(g);
    }
    this.container.x = this.chunk.location.x * RenderedChunk.CHUNK_SPACING_PX;
    this.container.y = this.chunk.location.y * RenderedChunk.CHUNK_SPACING_PX;
  }
  public hash(): string {
    return this.chunk.hash();
  }
}
        if (this.chunk.selectedNodes.values().length === 0) {
        onNodeFocus(new PointNodeRef({
          z: 0, // TODO(bowei): fix
          chunkCoord: this.chunk.location,
          pointNodeCoord: node,
          pointNodeId: 0, // TODO(bowei): fix
        }));
        g.hitArea = new Pixi.Rectangle(
          - RenderedChunk.NODE_HITAREA_PX / 2,
          - RenderedChunk.NODE_HITAREA_PX / 2,
          RenderedChunk.NODE_HITAREA_PX,
          RenderedChunk.NODE_HITAREA_PX,
        )
        // g.hitArea = new Pixi.Rectangle(
        //   node.x * RenderedChunk.SPACING_PX - RenderedChunk.NODE_HITAREA_PX / 2,
        //   node.y * RenderedChunk.SPACING_PX - RenderedChunk.NODE_HITAREA_PX / 2,
        //   RenderedChunk.NODE_HITAREA_PX,
        //   RenderedChunk.NODE_HITAREA_PX,
        // )
  constructor(chunk: Chunk, onNodeFocus: (selection: PointNodeRef) => void, texture?: Pixi.Texture) {
  public renderedNodes: HashMap<Vector2, Pixi.Graphics | Pixi.Sprite> = new HashMap();
  }
  public hash(): string {
    return this.id.toString();
  public selectedNodes: HashSet<Vector2> = new HashSet();
  public allocatedNodes: HashSet<Vector2> = new HashSet();

Deletion in frontend/src/pixi/RootApplication.ts at line 152 [55.3626]
B:BD[54.1214] → [54.1214:1258]
```
      window.alert("generated the thing!");
```
Deletion in frontend/src/pixi/components/PointNodeComponent.ts at line 70 [56.9408]
B:BD[56.12099] → [57.1128:1168]
```
        console.log({ prevGameState });
```

Deletion in frontend/src/pixi/components/PointNodeComponent.ts at line 76 [56.9408]

B:BD[56.12319] → [3.2111:2283]

      let gameStateUpdater = updaters;
      let setGameState = gameStateUpdater.getUpdater();
      setGameState((prev: GameState, prevWholeGameState: GameState) => prev)

further cleanup

Dependencies

In channels

Change contents

Insertion in frontend/src/lib/util/misc.ts at line 153 [6.45665]

Insertion in frontend/src/lib/util/misc.ts at line 199 [6.45665]

Insertion in frontend/src/lib/util/misc.ts at line 211 [6.45665]

File deletion: ZLevel.ts

File deletion: Application.ts, Application.ts

File deletion: Chunk.ts

Deletion in frontend/src/pixi/RootApplication.ts at line 152 [55.3626]

Deletion in frontend/src/pixi/components/PointNodeComponent.ts at line 70 [56.9408]

Deletion in frontend/src/pixi/components/PointNodeComponent.ts at line 76 [56.9408]