ambersz/procgen-skill-tree - Change DFFMZSJOCLTBA3IGRYS2ZIJNO2MC3VLBBU42QL5DFY2SMCNFXPIAC

typescript compiles

Created by Bowei Liu on December 22, 2020

DFFMZSJOCLTBA3IGRYS2ZIJNO2MC3VLBBU42QL5DFY2SMCNFXPIAC

Dependencies

In channels

main

Change contents

Replacement in frontend/src/data/GameState.ts at line 1 [3.23]

B:BD[3.23] → [3.24:92]

import { HashMap, HashSet } from "../lib/util/data_structures/hash"

[3.23]

[3.92]

import { HashMap, HashSet, KeyedHashMap } from "../lib/util/data_structures/hash"

Replacement in frontend/src/data/GameState.ts at line 31 [3.23]
B:BD[3.351] → [3.351:388]
```
  chunks: HashMap<Vector2, ChunkGen>
```
[3.351]
[3.388]
```
  chunks: KeyedHashMap<Vector2, ChunkGen>
```
Replacement in frontend/src/data/GameState.ts at line 36 [3.23]
B:BD[3.430] → [4.0:45]
```
  pointNodes: HashMap<Vector2, PointNodeGen>
```
[3.430]
[5.0]
```
  pointNodes: KeyedHashMap<Vector2, PointNodeGen>
```

Replacement in frontend/src/data/GameState.ts at line 65 [3.23]

B:BD[4.278] → [4.278:396]

  public z!: number;
  public chunkCoord!: Vector2;
  public pointNodeCoord!: Vector2;
  public pointNodeId!: number;

[4.278]

[4.396]

  public z: number;
  public chunkCoord: Vector2;
  public pointNodeCoord: Vector2;
  public pointNodeId: number;

Insertion in frontend/src/data/GameState.ts at line 79 [3.23]

[4.664]

[3.947]

  }
}
export class ChunkRef {
  public z: number;
  public chunkCoord: Vector2;
  public chunkId: number;
  constructor(args: { z: number, chunkCoord: Vector2, chunkId: number }) {
    this.z = args.z;
    this.chunkCoord = args.chunkCoord;
    this.chunkId = args.chunkId;

Insertion in frontend/src/data/GameState.ts at line 92 [3.23]
[3.951]
[3.951]
```
  public hash(): string {
    return this.chunkId.toString();
  }
```
Insertion in frontend/src/lib/util/data_structures/hash.ts at line 24 [6.6072]
[6.6515]
[6.6515]
```
  contains(key: K): boolean {
    return this.contains(key);
  }
```
Insertion in frontend/src/lib/util/data_structures/hash.ts at line 30 [6.6072]
[6.6567]
[6.6567]
```
  }
  hash(): string {
    return this._values.hashKeyset();
```
Replacement in frontend/src/lib/util/data_structures/hash.ts at line 38 [6.6072]
B:BD[6.6630] → [6.6630:6676]
```
  private _values: { [key: string]: V } = {};
```
[6.6630]
[6.6676]
```
  protected _values: { [key: string]: V } = {};
```

Insertion in frontend/src/lib/util/data_structures/hash.ts at line 52 [6.6072]

[6.6874]

  contains(key: K): boolean {
    // V may be an undefined type
    return this.get(key) !== undefined && key.hash() in this._values;
  }

Insertion in frontend/src/lib/util/data_structures/hash.ts at line 58 [6.6072]

[6.6892]

    return Object.keys(this._values).map(key => this._values[key]);
  }
  // hashes only the keys - use HashableHashMap if you know that the value type here is also hashable
  hashKeyset(): string {
    const hashes: number[] = Object.keys(this._values).map(s => hashCode(s));
    let code: number = hashes.reduce((pv, cv) => pv + cv);
    return code.toString();
  }
}
// Hash a string to a number. source: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0
function hashCode(s: string): number {
  let h = 0;
  for (let i = 0; i < s.length; i++) {
    h = Math.imul(31, h) + s.charCodeAt(i) | 0;
  }
  return h;
}
export class HashableHashMap<K extends { hash(): string }, V extends { hash(): string }> extends HashMap<K, V> {
  hash(): string {
    const hashes: number[] = Object.entries(this._values).map(([s, v]) => hashCode(s) + hashCode(v.hash()));
    let code: number = hashes.reduce((pv, cv) => pv + cv);
    return code.toString();
  }
}
/**
 * Same as HashMap, but actually stores the keys used to key the hashmap, instead of just their hashes.
 * Allows iteration over the full key-value pair set.
 */
export class KeyedHashMap<K extends { hash(): string }, V>{
  private _values: { [key: string]: [K, V] } = {};
  put(key: K, value: V) {
    this._values[key.hash()] = [key, value];
  }
  remove(key: K): void {
    delete this._values[key.hash()];
  }
  get(key: K): V {
    return this._values[key.hash()][1];
  }
  contains(key: K): boolean {
    // V may be an undefined type
    return this.get(key) !== undefined && key.hash() in this._values;
  }
  keys(): K[] {
    return Object.keys(this._values).map(key => this._values[key][0]);
  }
  entries(): ([K, V])[] {

Insertion in frontend/src/lib/util/data_structures/hash.ts at line 117 [6.6072]

[6.6964]


  values(): V[] {
    return Object.keys(this._values).map(key => this._values[key][1]);
  }

Replacement in frontend/src/pixi/RenderedChunk.ts at line 5 [5.1406]

B:BD[5.1604] → [5.1604:1742]

import { HashMap, HashSet } from "../lib/util/data_structures/hash";
import { ChunkGenConstants, PointNodeRef } from "../data/GameState";

[5.1604]

[5.1742]

import { HashMap, HashSet, KeyedHashMap } from "../lib/util/data_structures/hash";
import { ChunkGen, ChunkGenConstants, ChunkRef, PointNodeRef } from "../data/GameState";
import { RenderedPointNode } from "./RenderedPointNode";

Deletion in frontend/src/pixi/RenderedChunk.ts at line 17 [5.1406]
B:BD[5.2075] → [5.2075:2076]

Replacement in frontend/src/pixi/RenderedChunk.ts at line 20 [5.1406]

B:BD[5.2168] → [5.2168:2255]

  public renderedNodes: HashMap<Vector2, Pixi.Graphics | Pixi.Sprite> = new HashMap();

[5.2168]

[5.2255]

  public selfChunkRef: ChunkRef;

Replacement in frontend/src/pixi/RenderedChunk.ts at line 22 [5.1406]

B:BD[5.2256] → [5.2256:2462]

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

[5.2256]

[5.2462]

  public renderedPointNodes: KeyedHashMap<PointNodeRef, RenderedPointNode>;
  // public renderedNodes: HashMap<Vector2, Pixi.Graphics | Pixi.Sprite> = new HashMap();

Replacement in frontend/src/pixi/RenderedChunk.ts at line 25 [5.1406]

B:BD[5.2463] → [5.2463:2487]

    // render the thing

[5.2463]

[5.2487]

  // args here will never change, and changing this will NOT force a rerender
  constructor(args: {
    pointNodeTexture: Pixi.Texture,
    selfChunkRef: ChunkRef, // where am i in parent
    chunkGen: ChunkGen, // what is in me
    stateUpdaterQueue: [Function],
    ticker: Pixi.Ticker
  }) {

Replacement in frontend/src/pixi/RenderedChunk.ts at line 34 [5.1406]

B:BD[5.2530] → [5.2530:3106]


    for (let node of chunk.nodes) {
      let g: Pixi.Sprite = new Pixi.Sprite(args.nodeTexture);
      g.anchor.x = 0.5;
      g.anchor.y = 0.5;
      g.x = node.x * RenderedChunkConstants.SPACING_PX;
      g.y = node.y * RenderedChunkConstants.SPACING_PX;
      g.hitArea = new Pixi.Rectangle(
        - RenderedChunkConstants.NODE_HITAREA_PX / 2,
        - RenderedChunkConstants.NODE_HITAREA_PX / 2,
        RenderedChunkConstants.NODE_HITAREA_PX,
        RenderedChunkConstants.NODE_HITAREA_PX,
      )
      this.renderedNodes.put(node, g);
      g.interactive = true;

[5.2530]

[5.3106]

    this.selfChunkRef = args.selfChunkRef;
    this.renderedPointNodes = new KeyedHashMap();

Replacement in frontend/src/pixi/RenderedChunk.ts at line 37 [5.1406]

B:BD[5.3107] → [5.3107:3639]

      if (this.chunk.allocatedNodes.get(node)) {
        g.tint = 0x00aaff;
      } else if (this.chunk.selectedNodes.get(node)) {
        g.tint = 0xBBBBBB;
      }
      g.addListener("pointerdown", () => {
        onNodeFocus(new PointNodeRef({
          z: 0, // TODO(bowei): fix
          chunkCoord: this.chunk.location,
          pointNodeCoord: node,
          pointNodeId: 0, // TODO(bowei): fix
        }));
        console.log(`clicked chunk ${this.chunk.location.x} ${this.chunk.location.y} node ${node.x}, ${node.y}`);

[5.3107]

[5.3639]

    // args.chunkGen.pointNodes
    for (let [pointNodeCoord, pointNodeGen] of args.chunkGen.pointNodes.entries()) {
      const pointNodeRef = new PointNodeRef({
        z: this.selfChunkRef.z,
        chunkCoord: this.selfChunkRef.chunkCoord,
        pointNodeCoord: pointNodeCoord,
        pointNodeId: pointNodeGen.id
      })

Replacement in frontend/src/pixi/RenderedChunk.ts at line 46 [5.1406]

B:BD[5.3640] → [5.3640:5063]

        // if nothing is selected
        if (this.chunk.selectedNodes.values().length == 0) {
          // 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);

[5.3640]

[5.5063]

      let renderedPointNode = new RenderedPointNode({
        selfPointNodeRef: pointNodeRef,
        ...args
      })
      this.renderedPointNodes.put(pointNodeRef, renderedPointNode);
      this.container.addChild(renderedPointNode.sprite);
      // renderedPointNode.setCoord(pointNodeRef); renderedPointNode.setCoord();
      renderedPointNode.sprite.x = pointNodeCoord.x * RenderedChunkConstants.SPACING_PX;
      renderedPointNode.sprite.y = pointNodeCoord.y * RenderedChunkConstants.SPACING_PX;

Insertion in frontend/src/pixi/RenderedChunk.ts at line 56 [5.1406]

[5.5069]

    // this.container.x = this.chunk.location.x * RenderedChunk.CHUNK_SPACING_PX;
    // this.container.y = this.chunk.location.y * RenderedChunk.CHUNK_SPACING_PX;
  }
  
  public setLocation(chunk: ChunkRef = this.selfChunkRef): this {
    this.container.x = chunk.chunkCoord.x * RenderedChunkConstants.CHUNK_SPACING_PX;
    this.container.y = chunk.chunkCoord.y * RenderedChunkConstants.CHUNK_SPACING_PX;
    return this
  }

Replacement in frontend/src/pixi/RenderedChunk.ts at line 66 [5.1406]

B:BD[5.5070] → [5.5070:5228]

    this.container.x = this.chunk.location.x * RenderedChunk.CHUNK_SPACING_PX;
    this.container.y = this.chunk.location.y * RenderedChunk.CHUNK_SPACING_PX;

[5.5070]

[5.5228]

  public animate(delta: number): this {
    return this;

Replacement in frontend/src/pixi/RenderedChunk.ts at line 70 [5.1406]

B:BD[5.5233] → [5.5233:5289]

  public hash(): string {
    return this.chunk.hash();

[5.5233]

[5.5289]

  public rerender(props: {
    selectedPointNode: PointNodeRef | undefined,
    allocatedPointNodeSubset: HashSet<PointNodeRef>,
  }) {
    for (let child of this.renderedPointNodes.values()) {
      child.rerender({
        isSelected: props.selectedPointNode?.pointNodeId == child.selfPointNodeRef.pointNodeId,
        isAllocated: props.allocatedPointNodeSubset.contains(child.selfPointNodeRef),
      })
    }

Insertion in frontend/src/pixi/RenderedChunk.ts at line 81 [5.1406]

[5.5293]


//     for (let node of chunk.nodes) {
//       let g: Pixi.Sprite = new Pixi.Sprite(args.nodeTexture);
//       g.anchor.x = 0.5;
//       g.anchor.y = 0.5;
//       g.x = node.x * RenderedChunkConstants.SPACING_PX;
//       g.y = node.y * RenderedChunkConstants.SPACING_PX;
//       g.hitArea = new Pixi.Rectangle(
//         - RenderedChunkConstants.NODE_HITAREA_PX / 2,
//         - RenderedChunkConstants.NODE_HITAREA_PX / 2,
//         RenderedChunkConstants.NODE_HITAREA_PX,
//         RenderedChunkConstants.NODE_HITAREA_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", () => {
//         onNodeFocus(new PointNodeRef({
//           z: 0, // TODO(bowei): fix
//           chunkCoord: this.chunk.location,
//           pointNodeCoord: node,
//           pointNodeId: 0, // TODO(bowei): fix
//         }));
//         console.log(`clicked chunk ${this.chunk.location.x} ${this.chunk.location.y} node ${node.x}, ${node.y}`);
// 
//         // if nothing is selected
//         if (this.chunk.selectedNodes.values().length == 0) {
//           // 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();
//   }

Replacement in frontend/src/pixi/RenderedPointNode.ts at line 30 [7.15]
B:BD[5.5899] → [5.5899:5938]
```
  public justClicked: boolean = false;
```
[5.5899]
[5.5938]
```
  // public justClicked: boolean = false;
```
Replacement in frontend/src/pixi/RenderedPointNode.ts at line 34 [7.15]
B:BD[2.640] → [2.640:667]
```
    texture: Pixi.Texture,
```
[2.640]
[2.667]
```
    pointNodeTexture: Pixi.Texture,
```
Replacement in frontend/src/pixi/RenderedPointNode.ts at line 40 [7.15]
B:BD[5.6071] → [5.6071:6120]
```
    this.sprite = new Pixi.Sprite(args.texture);
```
[5.6071]
[5.6120]
```
    this.sprite = new Pixi.Sprite(args.pointNodeTexture);
```

Replacement in frontend/src/pixi/RenderedPointNode.ts at line 65 [7.15]

B:BD[5.6698] → [2.1155:1195]

  public animate(delta: number) {

[5.6698]

[2.1195]

  public setLocation(node: PointNodeRef = this.selfPointNodeRef) : this {
    this.sprite.x = node.pointNodeCoord.x * RenderedChunkConstants.SPACING_PX;
    this.sprite.y = node.pointNodeCoord.y * RenderedChunkConstants.SPACING_PX;
    return this;
  }
  public animate(delta: number) : this {

Insertion in frontend/src/pixi/RenderedPointNode.ts at line 73 [7.15]
[2.1290]
[2.1290]
```
    return this;
```

Replacement in frontend/src/pixi/RenderedPointNode.ts at line 98 [7.15]

B:BD[5.7156] → [2.2265:2339]

  public rerender(props: { isSelected: boolean, isAllocated: boolean }) {

[5.7156]

[2.2339]

  public rerender(props: { isSelected: boolean, isAllocated: boolean }) : this {

Insertion in frontend/src/pixi/RenderedPointNode.ts at line 100 [7.15]
[2.2364]
[5.7306]
```
    return this;
```

Replacement in frontend/src/pixi/RenderedPointNode.ts at line 122 [7.15]

B:BD[5.9288] → [2.2827:3165]

//  public isSelected(gameState: DeepReadonly<GameState>): boolean {
//    return gameState.playerUI.selectedPointNode?.pointNodeId == this.selfPointNodeRef.pointNodeId;
//  }
//
//  public isAllocated(gameState: DeepReadonly<GameState>): boolean {
//    return gameState.playerSave.allocatedPointNodeSet.get(this.selfPointNodeRef)
//  }

[5.9288]

[2.3165]

 public isSelected(gameState: DeepReadonly<GameState>): boolean {
   return gameState.playerUI.selectedPointNode?.pointNodeId == this.selfPointNodeRef.pointNodeId;
 }
 public isAllocated(gameState: DeepReadonly<GameState>): boolean {
   return gameState.playerSave.allocatedPointNodeSet.get(this.selfPointNodeRef)
 }

File addition: RenderedZLevel.ts (-rw-r--r--)

[8.693]

import * as Pixi from "pixi.js";
import { ChunkRef, PointNodeRef, ZLevelGen } from "../data/GameState";
import { KeyedHashMap, HashSet } from "../lib/util/data_structures/hash";
import { Vector2 } from "../lib/util/geometry/vector2";
import { squirrel3 } from "../lib/util/random";
import { RenderedChunk, RenderedChunkConstants } from "./RenderedChunk";
export class RenderedZLevel {
  public container: Pixi.Container;
  public z: number;
  public renderedChunks: KeyedHashMap<ChunkRef, RenderedChunk> = new KeyedHashMap();
  constructor(args: {
    pointNodeTexture: Pixi.Texture,
    z: number,
    zLevelGen: ZLevelGen, // what is in me
    stateUpdaterQueue: [Function],
    ticker: Pixi.Ticker
  }) {
  // constructor(zLevel: ZLevel, onNodeFocus: (selection: PointNodeRef) => void, texture?: Pixi.Texture) {
    this.z = args.z;
    this.container = new Pixi.Container();
    for (let [chunkCoord, chunkGen] of args.zLevelGen.chunks.entries()) {
      const chunkRef = new ChunkRef({
        z: this.z,
        chunkCoord,
        chunkId: chunkGen.id,
      });
      const renderedChunk = new RenderedChunk({
        selfChunkRef: chunkRef,
        chunkGen,
        ...args
      });
      this.renderedChunks.put(chunkRef, renderedChunk);
      this.container.addChild(renderedChunk.container);
      renderedChunk.container.x = chunkCoord.x * RenderedChunkConstants.CHUNK_SPACING_PX;
      renderedChunk.container.y = chunkCoord.y * RenderedChunkConstants.CHUNK_SPACING_PX;
    }
  }
  public animate(delta: number): this {
    return this;
  }
  public rerender(props: {
    selectedPointNode: PointNodeRef | undefined,
    allocatedPointNodeSubset: HashSet<PointNodeRef>,
  }) {
    for (let [chunkRef, child] of this.renderedChunks.entries()) {
      let relevantToChunk = new HashSet(
        props.allocatedPointNodeSubset.values()
          .filter((pointNodeRef) => {
            return pointNodeRef.chunkCoord.x === chunkRef.chunkCoord.x &&
              pointNodeRef.chunkCoord.y === chunkRef.chunkCoord.y;
          })
      );
      child.rerender({
        selectedPointNode: props.selectedPointNode,
        allocatedPointNodeSubset: relevantToChunk
      })
    }
  }
}

typescript compiles

Dependencies

In channels

Change contents

Replacement in frontend/src/data/GameState.ts at line 1 [3.23]

Replacement in frontend/src/data/GameState.ts at line 31 [3.23]

Replacement in frontend/src/data/GameState.ts at line 36 [3.23]

Replacement in frontend/src/data/GameState.ts at line 65 [3.23]

Insertion in frontend/src/data/GameState.ts at line 79 [3.23]

Insertion in frontend/src/data/GameState.ts at line 92 [3.23]

Insertion in frontend/src/lib/util/data_structures/hash.ts at line 24 [6.6072]

Insertion in frontend/src/lib/util/data_structures/hash.ts at line 30 [6.6072]

Replacement in frontend/src/lib/util/data_structures/hash.ts at line 38 [6.6072]