boweiliu/procgen-skill-tree-pijul - Change 4TYJCGT4MTCAH7GSJJWFQPPHZNAUQZDEIZYT365EYTMXS7D2MTNAC

muck about with pivot, resize, and anchor

Created by Bowei Liu on December 19, 2020

4TYJCGT4MTCAH7GSJJWFQPPHZNAUQZDEIZYT365EYTMXS7D2MTNAC

Dependencies

In channels

main

alice-test

Change contents

Replacement in frontend/src/components/PixiComponent.tsx at line 20 [7.97253]

B:BD[4.257] → [4.257:296]

const application = new Application();

[4.257]

[8.495]

const application = new Application({ originalWidth: window.innerHeight * .75, originalHeight: window.innerHeight * .75 });

Insertion in frontend/src/components/PixiComponent.tsx at line 31 [7.97253]

[9.328]

[10.957]


  window.onresize = () => {
    application.resize(window.innerWidth, window.innerHeight);
  }

Replacement in frontend/src/components/PixiComponent.tsx at line 39 [7.97253]

B:BD[11.229] → [12.244:320]

      <button onClick={() => application.drawCircle()}>draw circle</button>

[11.229]

[12.320]

      <button onClick={() => { }}>draw circle</button>

File deletion: Highway.ts, Highway.ts
BFD:BFD[11.302] → [13.246532:246544]
BF:BFD[13.246544] → [13.246545:246545]
BF:BFD[6.693] → [6.711:723]
BF:BFD[6.723] → [13.246545:246545]
B:BD[13.246545] → [14.130312:130344]
∅:D[14.130344] → [13.246581:246582]
B:BD[13.246581] → [13.246581:246582]
B:BD[13.246582] → [14.130345:130386]
```
export type HighwayConfig = {};
const defaultConfig: HighwayConfig = {};
```

File deletion: RenderRects.ts, RenderRects.ts

BF:BFD[6.693] → [6.724:740]

BF:BFD[6.740] → [15.562:562]

BFD:BFD[11.302] → [15.545:561]

BF:BFD[15.561] → [15.562:562]

B:BD[15.562] → [15.563:633]

B:BD[15.633] → [16.107:280]

∅:D[17.849] → [15.761:910]

∅:D[16.280] → [15.761:910]

B:BD[15.761] → [15.761:910]

B:BD[15.910] → [18.3669:3698]

∅:D[18.3698] → [15.938:1091]

B:BD[15.938] → [15.938:1091]

∅:D[19.26] → [15.1091:1162]

∅:D[18.3795] → [15.1091:1162]

∅:D[20.124] → [15.1091:1162]

B:BD[15.1091] → [15.1091:1162]

B:BD[15.1162] → [21.0:36]

∅:D[20.162] → [15.1199:1222]

∅:D[21.36] → [15.1199:1222]

B:BD[15.1199] → [15.1199:1222]

B:BD[15.1222] → [2.0:23]

∅:D[2.23] → [20.163:238]

∅:D[21.60] → [20.163:238]

B:BD[15.1222] → [20.163:238]

B:BD[20.238] → [22.52:111]

∅:D[22.111] → [23.742:805]

B:BD[23.742] → [23.742:805]

B:BD[23.805] → [22.112:142]

B:BD[22.142] → [24.30:83]

∅:D[24.83] → [20.239:339]

∅:D[22.171] → [20.239:339]

B:BD[23.832] → [20.239:339]

B:BD[20.339] → [19.27:85]

∅:D[19.85] → [21.121:152]

B:BD[21.121] → [21.121:152]

B:BD[21.152] → [24.84:109]

∅:D[19.112] → [15.1416:1545]

∅:D[18.3858] → [15.1416:1545]

∅:D[20.426] → [15.1416:1545]

∅:D[21.152] → [15.1416:1545]

∅:D[24.109] → [15.1416:1545]

B:BD[15.1416] → [15.1416:1545]

B:BD[15.1545] → [18.3859:3890]

∅:D[18.3890] → [15.1575:1645]

B:BD[15.1575] → [15.1575:1645]

B:BD[15.1645] → [18.3891:3955]

∅:D[18.3955] → [15.1703:1708]

B:BD[15.1703] → [15.1703:1708]

∅:D[18.4059] → [15.1708:1731]

B:BD[15.1708] → [15.1708:1731]

∅:D[20.480] → [15.1731:1961]

∅:D[21.207] → [15.1731:1961]

B:BD[15.1731] → [15.1731:1961]

∅:D[18.5194] → [15.1961:1966]

∅:D[20.2323] → [15.1961:1966]

B:BD[15.1961] → [15.1961:1966]

B:BD[15.1966] → [18.5195:6936]

B:BD[18.6936] → [20.2324:2462]

B:BD[20.2462] → [21.208:221]

B:BD[21.221] → [14.130415:130507]

∅:D[25.80] → [21.302:338]

∅:D[14.130507] → [21.302:338]

B:BD[21.302] → [21.302:338]

B:BD[21.338] → [14.130508:130579]

∅:D[25.148] → [20.2636:2879]

∅:D[21.406] → [20.2636:2879]

∅:D[14.130579] → [20.2636:2879]

B:BD[20.2636] → [20.2636:2879]

∅:D[20.2879] → [15.2183:2184]

B:BD[15.2183] → [15.2183:2184]

∅:D[18.7228] → [15.2184:2225]

∅:D[20.3429] → [15.2184:2225]

B:BD[15.2184] → [15.2184:2225]

B:BD[15.2225] → [18.7229:7385]

∅:D[18.7385] → [15.2385:2390]

B:BD[15.2385] → [15.2385:2390]

B:BD[15.2390] → [20.3430:3478]

B:BD[20.3478] → [21.845:929]

B:BD[21.929] → [22.233:293]

B:BD[22.293] → [14.130699:130816]

∅:D[24.282] → [22.350:363]

∅:D[14.130816] → [22.350:363]

B:BD[22.350] → [22.350:363]

B:BD[22.363] → [14.130817:130935]

∅:D[24.369] → [22.421:427]

∅:D[14.130935] → [22.421:427]

B:BD[22.421] → [22.421:427]

∅:D[22.427] → [21.984:1085]

B:BD[21.984] → [21.984:1085]

∅:D[18.7632] → [15.2678:2683]

∅:D[20.3730] → [15.2678:2683]

∅:D[21.1085] → [15.2678:2683]

B:BD[15.2678] → [15.2678:2683]

B:BD[15.2683] → [20.3731:3782]

∅:D[23.874] → [15.2725:2768]

∅:D[20.3782] → [15.2725:2768]

B:BD[15.2725] → [15.2725:2768]

B:BD[15.2768] → [19.113:173]

∅:D[19.173] → [15.2799:3119]

B:BD[15.2799] → [15.2799:3119]

∅:D[20.3801] → [15.3119:3125]

B:BD[15.3119] → [15.3119:3125]

B:BD[15.3119] → [20.3783:3801]

B:BD[15.2184] → [18.6997:7062]

B:BD[18.7062] → [14.130580:130698]

∅:D[24.196] → [18.7119:7228]

∅:D[14.130698] → [18.7119:7228]

∅:D[22.232] → [18.7119:7228]

B:BD[18.7119] → [18.7119:7228]

B:BD[18.7228] → [21.407:844]

∅:D[21.844] → [20.3335:3429]

B:BD[20.3335] → [20.3335:3429]

B:BD[15.1961] → [20.481:557]

∅:D[20.557] → [18.4088:4288]

B:BD[18.4088] → [18.4088:4288]

B:BD[18.4288] → [20.558:837]

∅:D[20.837] → [18.4355:4385]

B:BD[18.4355] → [18.4355:4385]

B:BD[18.4385] → [20.838:2323]

B:BD[15.1731] → [21.153:207]

B:BD[15.1708] → [18.3956:4059]

B:BD[15.1091] → [22.0:51]

B:BD[22.51] → [14.130387:130414]

∅:D[24.29] → [18.3722:3795]

∅:D[14.130414] → [18.3722:3795]

∅:D[22.51] → [18.3722:3795]

B:BD[18.3722] → [18.3722:3795]

B:BD[18.3795] → [20.0:124]

B:BD[20.124] → [19.0:26]

import * as Pixi from "pixi.js";
import { Container } from "pixi.js";
import { Pair } from "../lib/util/data_structures/pair";
import { Rect } from "../lib/util/geometry/rect";
import { IVector2, Vector2 } from "../lib/util/geometry/vector2";
export type RenderRectsConfig = {
  containerHeightProportion: number;
  aspectRatio1: number;
  downscaleRatio12: number;
  aspectRatio2?: number;
  downscaleRatio23?: number;
  aspectRatio3?: number;
  circleSize: number;
  circleOffColor: number;
  circleOnColor: number;
  circleHoverColor: number;
  circleFillColor: number;
};
export class RenderRects {
  private config: RenderRectsConfig = {
    containerHeightProportion: 0.9,
    aspectRatio1: 1.6,
    aspectRatio3: 1.6,
    downscaleRatio12: 0.75,
    downscaleRatio23: 0.35,
    circleSize: 6,
    circleOnColor: 0x030303,
    circleOffColor: 0xcecece,
    circleHoverColor: 0x000000,
    circleFillColor: 0xd3d3d3,
    borderOffColor: 0xefefef,
    borderOnColor: 0xbcdebc,
    borderThickness: 2,
    centerToEdgeBorderRatio2: 1.2,
    centerToEdgeBorderRatio3: 1.0,
    cornerCompression1: 0.08,
    cornerCompression2: 0.2,
    cornerCompression3: 0.3,
    debugHasRectBorder: false,
    debugRandomOn: true,
  };
  private containerRect!: Rect;
  private stage!: Container;
  constructor(
    stage: Container,
    containerRect: Rect,
    config?: RenderRectsConfig
  ) {
    this.stage = stage;
    this.containerRect = containerRect;
    this.config = Object.assign({}, this.config, config || {});
  }
  public drawFirst() {
    const newHeight =
      this.containerRect.height * this.config.containerHeightProportion;
    const newRect = this.containerRect.withScale({
      height: newHeight,
      width: newHeight * this.config.aspectRatio1,
    });
  }
  private nestRectPair(
    original: Rect,
    downscaleRatio: number,
    newAspectRatio: number,
    centerToEdgeBorderRatio: number
  ): Pair<Rect, Rect> {
    const longSide = Math.min(original.height, original.width) * downscaleRatio;
    const shortSide = longSide / newAspectRatio;
    const remaining = Math.max(original.height, original.width) - 2 * shortSide;
    const middleGap =
      (remaining / (2 + centerToEdgeBorderRatio)) * centerToEdgeBorderRatio;
    const offset = middleGap / 2 + shortSide / 2;
    if (original.height < original.width) {
      const newHeight = longSide;
      const newWidth = shortSide;
      const leftCenter = new Vector2(
        original.centerX - offset,
        original.centerY
      );
      const rightCenter = new Vector2(
        original.centerX + offset,
        original.centerY
      );
      return new Pair<Rect, Rect>(
        Rect.FromCenter({
          center: leftCenter,
          dimensions: new Vector2(newWidth, newHeight),
        }),
        Rect.FromCenter({
          center: rightCenter,
          dimensions: new Vector2(newWidth, newHeight),
        })
      );
    } else {
      const newHeight = shortSide;
      const newWidth = longSide;
      const topCenter = new Vector2(
        original.centerX,
        original.centerY - offset
      );
      const bottomCenter = new Vector2(
        original.centerX,
        original.centerY + offset
      );
      return new Pair<Rect, Rect>(
        Rect.FromCenter({
          center: topCenter,
          dimensions: new Vector2(newWidth, newHeight),
        }),
        Rect.FromCenter({
          center: bottomCenter,
          dimensions: new Vector2(newWidth, newHeight),
        })
      );
    }
  }
  private drawRect(
    rect: Rect,
    hasBorder: boolean,
    cornerCompressionRatio: number
  ) {
    const corners = rect.withScale({
      width:
        rect.width -
        (cornerCompressionRatio * (3 * rect.width + rect.height)) / 4,
      height:
        rect.height -
        (cornerCompressionRatio * (rect.width + 3 * rect.height)) / 4,
    });
    const midpoints = {
      left: new Vector2(rect.left, rect.centerY),
      right: new Vector2(rect.right, rect.centerY),
      top: new Vector2(rect.centerX, rect.top),
      bottom: new Vector2(rect.centerX, rect.bottom),
    };
  }
  private drawCorners(rect: Rect) {
    this.drawCircleAt(rect.topLeft);
    this.drawCircleAt(rect.topRight);
    this.drawCircleAt(rect.bottomLeft);
    this.drawCircleAt(rect.bottomRight);
  }
  public drawLine(p1: IVector2, p2: IVector2) {
    const graphics = new Pixi.Graphics();
    // graphics.position.set(p1.x, p1.y);
    if (this.config.debugRandomOn && Math.random() < 0.5) {
      graphics.lineStyle(
        this.config.borderThickness,
        this.config.borderOnColor,
        1
      );
    } else {
      graphics.lineStyle(
        this.config.borderThickness,
        this.config.borderOffColor,
        1
      );
    }
    graphics.moveTo(p1.x, p1.y);
    graphics.lineTo(p2.x, p2.y);
    this.stage.addChild(graphics);
  }
  public drawCircleAt(point: IVector2): IVector2 {
    const graphics = new Pixi.Graphics();
    if (this.config.debugRandomOn && Math.random() < 0.5) {
      graphics.lineStyle(1, this.config.circleOnColor, 1);
    } else {
      graphics.lineStyle(1, this.config.circleOffColor, 1);
    }
    graphics.beginFill(this.config.circleFillColor, 1);
    graphics.drawCircle(point.x, point.y, this.config.circleSize);
    graphics.endFill();
    this.stage.addChild(graphics);
  }
}
    return point;
    if (hasBorder) {
      const graphics = new Pixi.Graphics();
      graphics.lineStyle(
        this.config.borderThickness,
        this.config.borderOffColor,
        1
      );
      graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
      this.stage.addChild(graphics);
    }
    this.drawLine(corners.topLeft, midpoints.left);
    this.drawLine(corners.topLeft, midpoints.top);
    this.drawLine(corners.topRight, midpoints.right);
    this.drawLine(corners.topRight, midpoints.top);
    this.drawLine(corners.bottomLeft, midpoints.left);
    this.drawLine(corners.bottomLeft, midpoints.bottom);
    this.drawLine(corners.bottomRight, midpoints.right);
    this.drawLine(corners.bottomRight, midpoints.bottom);
    this.drawCorners(corners);
    Object.values(midpoints).map((p) => this.drawCircleAt(p));
    this.drawRect(newRect, hasBorder, this.config.cornerCompression1 || 0);
    const layer2 = this.nestRectPair(
      newRect,
      this.config.downscaleRatio12,
      this.config.aspectRatio2 || this.config.aspectRatio1,
      this.config.centerToEdgeBorderRatio2
    );
    this.drawRect(
      layer2.first,
      hasBorder,
      this.config.cornerCompression2 || this.config.cornerCompression1 || 0
    );
    this.drawRect(
      layer2.second,
      hasBorder,
      this.config.cornerCompression2 || this.config.cornerCompression1 || 0
    );
    const layer3 = new Pair(
      this.nestRectPair(
        layer2.first,
        this.config.downscaleRatio23 || this.config.downscaleRatio12,
        this.config.aspectRatio3 ||
          this.config.aspectRatio2 ||
          this.config.aspectRatio1,
        this.config.centerToEdgeBorderRatio3 ||
          this.config.centerToEdgeBorderRatio2
      ),
      this.nestRectPair(
        layer2.second,
        this.config.downscaleRatio23 || this.config.downscaleRatio12,
        this.config.aspectRatio3 ||
          this.config.aspectRatio2 ||
          this.config.aspectRatio1,
        this.config.centerToEdgeBorderRatio3 ||
          this.config.centerToEdgeBorderRatio2
      )
    );
    this.drawRect(
      layer3.first.first,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    this.drawRect(
      layer3.second.first,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    this.drawRect(
      layer3.first.second,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    this.drawRect(
      layer3.second.second,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    const hasBorder = this.config.debugHasRectBorder;
  /**
   * Draws a '=' oriented rectangle, 2 'O' oriented nested, and then 4 '=' further-nested.
   */
  borderOffColor: number;
  borderOnColor: number;
  borderThickness: number;
  centerToEdgeBorderRatio2: number;
  centerToEdgeBorderRatio3?: number;
  cornerCompression1?: number;
  cornerCompression2?: number;
  cornerCompression3?: number;
  debugHasRectBorder: boolean;
  debugRandomOn: boolean;

File deletion: TopoLayer.ts, TopoLayer.ts

BF:BFD[6.693] → [6.741:755]

BF:BFD[6.755] → [26.20879:20879]

BFD:BFD[11.302] → [26.20864:20878]

BF:BFD[26.20878] → [26.20879:20879]

B:BD[26.20879] → [16.281:329]

∅:D[16.329] → [26.20960:21204]

B:BD[26.20960] → [26.20960:21204]

∅:D[27.16] → [26.21204:21399]

B:BD[26.21204] → [26.21204:21399]

B:BD[26.21399] → [27.17:536]

∅:D[27.536] → [26.21561:21562]

B:BD[26.21561] → [26.21561:21562]

B:BD[26.21562] → [27.537:722]

∅:D[27.723] → [26.22525:22531]

B:BD[26.22525] → [26.22525:22531]

∅:D[28.90] → [26.22531:22684]

B:BD[26.22531] → [26.22531:22684]

B:BD[26.22684] → [27.724:792]

∅:D[27.792] → [26.22764:22776]

B:BD[26.22764] → [26.22764:22776]

B:BD[26.22776] → [14.130936:130941]

∅:D[14.130941] → [27.799:954]

B:BD[27.799] → [27.799:954]

B:BD[27.954] → [14.130942:130947]

∅:D[14.130947] → [26.22827:22931]

∅:D[27.960] → [26.22827:22931]

B:BD[26.22827] → [26.22827:22931]

B:BD[26.22931] → [27.961:1101]

∅:D[27.1101] → [26.23087:23236]

B:BD[26.23087] → [26.23087:23236]

B:BD[26.22531] → [28.0:42]

B:BD[26.21204] → [27.0:16]

import { HashState } from "../lib/util/random";
export type Topo3Frames = {
  out: TopoFrame;
  in0: TopoFrame;
  in1: TopoFrame;
};
export class TopoTemplate {
  public id!: string;
  public orientation!: FrameOrientation;
  public frames!: Topo3Frames;
  public nodes: TopoNode[] = [];
  constructor(id: string, frames: Topo3Frames, random: HashState) {
    this.id = id;
    this.frames = frames;
    this.orientation = frames.out.orientation;
    // start constructing the guy
    // opposite corners
    connectCorner(this.frames.out.corners.I, this.frames.in0.corners.I);
    connectCorner(this.frames.out.corners.D, this.frames.in1.corners.D);
    // the other 2 outside corners
    connectCorner(this.frames.out.corners.S, this.frames.in0.corners.L);
    connectCorner(this.frames.out.corners.L, this.frames.in1.corners.S);
    // center corners
    connectCorner(this.frames.in0.corners.S, this.frames.in1.corners.I);
    connectCorner(this.frames.in0.corners.D, this.frames.in1.corners.L);
    // make some midpoints
    // connect some midpoints
    // out.IS , in0.IL
    // in0.SD, in1.IL
    // in1.SD, out.LD
    // out.IL, in0.IS, in1.IS
    // out.SD, in0.LD, in1.LD
  }
}
export type FrameOrientation = "=" | "0";
export class TopoFrame {
  public id!: string;
  public orientation!: FrameOrientation;
  public corners!: {
    I: TopoNode;
    L: TopoNode;
    S: TopoNode;
    D: TopoNode;
  };
  /**
   *
   * I -----   L       I  -  S
   * |         |       |     |
   * S  -----  D  or   |     |
   *                   |     |
   *                   L  -  D
   *
   */
  constructor(id: string, orientation: FrameOrientation) {
    this.id = id;
    this.corners = {
      I: new TopoNode(id + "-NI"),
      L: new TopoNode(id + "-NL"),
      S: new TopoNode(id + "-NS"),
      D: new TopoNode(id + "-ND"),
    };
    this.orientation = orientation;
  }
}
export class TopoNode {
  public id!: string;
  constructor(id: string) {
    this.id = id;
  }
}
function connectCorner(x: any, y: any) {}
  doStuff() {}

Deletion in frontend/src/pixi/Application.ts at line 2 [11.320]
B:BD[11.354] → [16.0:50]
```
import { Rect } from "../lib/util/geometry/rect";
```
Insertion in frontend/src/pixi/Application.ts at line 6 [11.320]
[5.381]
[29.35]
```
import createBunnyExample from "./BunnyExample";
```
Replacement in frontend/src/pixi/Application.ts at line 9 [11.320]
B:BD[29.59] → [29.59:106]
```
  canvasWidth: number;
  canvasHeight: number;
```
[29.59]
[29.149]
```
  originalWidth: number;
  originalHeight: number;
```
Replacement in frontend/src/pixi/Application.ts at line 14 [11.320]
B:BD[29.185] → [3.50:91]
```
  canvasWidth: 800,
  canvasHeight: 800,
```
[29.185]
[29.263]
```
  originalWidth: 800,
  originalHeight: 800,
```
Insertion in frontend/src/pixi/Application.ts at line 36 [11.320]
[11.525]
[12.480]
```
  onResize: (() => void)[] = [];
```

Replacement in frontend/src/pixi/Application.ts at line 46 [11.320]

B:BD[14.129104] → [14.129104:129215]

      new Pixi.Application({
        width: this.config.canvasWidth,
        height: this.config.canvasHeight,

[14.129104]

[14.129215]

    new Pixi.Application({
        width: this.config.originalWidth,
        height: this.config.originalHeight,

Deletion in frontend/src/pixi/Application.ts at line 99 [11.320]

B:BD[30.2443] → [30.2443:2666]

∅:D[30.2666] → [31.1536:1543]

B:BD[31.1536] → [31.1536:1543]

B:BD[31.1543] → [30.2667:2764]

    // put a text thingy in the top right
    let textFpsHud = new Pixi.Text('');
    this.app.ticker.add(() => {
      textFpsHud.text = this.fpsTracker.getFpsString() + " FPS\n" + this.fpsTracker.getUpsString() + " UPS";
    })
    textFpsHud.x = 600;
    textFpsHud.y = 200;
    this.fixedCameraStage.addChild(textFpsHud);

Replacement in frontend/src/pixi/Application.ts at line 109 [11.320]

B:BD[32.227] → [12.673:741]

B:BD[12.741] → [26.20513:20580]

B:BD[26.20581] → [26.20581:20667]

B:BD[26.20667] → [23.371:400]

∅:D[23.400] → [26.20699:20742]

B:BD[26.20699] → [26.20699:20742]

B:BD[26.20743] → [26.20743:20773]

B:BD[26.20774] → [26.20774:20817]

  /**
   * Draws a full skill tree at the default zoom level.
   */
  public drawAll() {
    // get the first 3 layers' configurations
    // render the top layer points
    // renderLayerPoints(layer[0], { rect: null })
    // render the next layer
    // render the intermediate connections
    // render the final layer
    // render the intermediate connections

[32.227]

[26.20818]

  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);
    // 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.config.originalWidth) * -0.5;
    this.actionStage.pivot.y = (this.app.screen.height - this.config.originalHeight) * -0.5;
    this.onResize.map(fn => fn());
    // this.app.stage.pivot.x = 0;

Deletion in frontend/src/pixi/Application.ts at line 122 [11.320]
B:BD[12.764] → [12.764:807]
B:BD[12.807] → [23.401:442]
∅:D[23.442] → [33.406:407]
B:BD[33.406] → [33.406:407]
```
  /**
   * Used for panning/zooming.
   */
  public moveViewport(viewport: Rect) {}
```

Replacement in frontend/src/pixi/Application.ts at line 123 [11.320]

B:BD[32.1310] → [14.129286:129323]

B:BD[14.129323] → [34.517:541]

    // this.renderRects.drawFirst();
    this.pixiExample();

[32.1310]

[35.33]

    // put a text thingy in the top right
    let textFpsHud = new Pixi.Text('', {
      fontFamily: 'PixelMix',
      // align: 'right'
    });
    this.app.ticker.add(() => {
      textFpsHud.text = this.fpsTracker.getFpsString() + " FPS\n" + this.fpsTracker.getUpsString() + " UPS";
    })
    textFpsHud.x = this.app.screen.width;
    this.onResize.push(() => { textFpsHud.x = this.app.screen.width; });
    textFpsHud.y = 0;
    textFpsHud.anchor.x = 1; // right justify
    this.fixedCameraStage.addChild(textFpsHud);

Replacement in frontend/src/pixi/Application.ts at line 142 [11.320]

B:BD[36.2397] → [36.2397:2426]

    // backdrop.alpha = 0.5;

[36.2397]

[36.2426]

    // backdrop.alpha = 0.5; // if alpha == 0, Pixi does not register this as a hittable area

Replacement in frontend/src/pixi/Application.ts at line 144 [11.320]

B:BD[36.2459] → [36.2459:2961]

    // backdrop.interactiveChildren = true;
    // backdrop.zIndex = 31;
    // backdrop.buttonMode = true;
    // backdrop.drawRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);
    backdrop.drawRect(-10000, -10000, 20000, 20000);
    // backdrop.addListener('pointerupoutside', e => {
    //   console.log('clickable hud', e)
    // })
    // backdrop.addListener('pointerup', (e) => {
    //   // window.alert('up from clickable hud');
    //   console.log('clickable hud', e)
    // })

[36.2459]

[37.1638]

    // 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);

Insertion in frontend/src/pixi/Application.ts at line 153 [11.320]
[37.1639]
[37.1639]
```
    // Add a reticle in the hud at the midpoint
```
Deletion in frontend/src/pixi/Application.ts at line 155 [11.320]
B:BD[37.1680] → [37.1680:1726]
```
    this.fixedCameraStage.addChild(reticle);
```

Replacement in frontend/src/pixi/Application.ts at line 156 [11.320]

B:BD[37.1762] → [37.1762:1849]

    reticle.drawCircle(this.config.canvasWidth / 2, this.config.canvasHeight / 2, 10);

[37.1762]

[37.1849]

    reticle.drawCircle(0, 0, 6);
    reticle.x = this.app.screen.width / 2;
    reticle.y = this.app.screen.height / 2;
    this.onResize.push(() => {
    reticle.x = this.app.screen.width / 2;
    reticle.y = this.app.screen.height / 2;
    })

Replacement in frontend/src/pixi/Application.ts at line 164 [11.320]
∅:D[23.477] → [32.2190:2194]
∅:D[37.1881] → [32.2190:2194]
∅:D[18.3604] → [32.2190:2194]
∅:D[35.823] → [32.2190:2194]
∅:D[14.129323] → [32.2190:2194]
∅:D[34.541] → [32.2190:2194]
B:BD[32.2190] → [32.2190:2194]
```
  }
```
[37.1881]
[32.2194]
```
    this.fixedCameraStage.addChild(reticle);
```
Deletion in frontend/src/pixi/Application.ts at line 166 [11.320]
B:BD[32.2195] → [23.478:502]
B:BD[29.918] → [14.129324:129328]
```
  public drawCircle() {
  }
```

Replacement in frontend/src/pixi/Application.ts at line 167 [11.320]

B:BD[14.129329] → [14.129329:129427]

B:BD[14.129427] → [34.542:587]

B:BD[34.587] → [37.1882:1924]

∅:D[37.1924] → [14.129471:129500]

∅:D[34.627] → [14.129471:129500]

∅:D[31.1717] → [14.129471:129500]

B:BD[14.129471] → [14.129471:129500]

B:BD[14.129500] → [34.628:713]

∅:D[34.713] → [14.129568:129640]

B:BD[14.129568] → [14.129568:129640]

B:BD[14.129640] → [34.714:760]

∅:D[34.760] → [14.129686:129818]

B:BD[14.129686] → [14.129686:129818]

B:BD[14.129818] → [35.824:856]

B:BD[35.856] → [37.1925:2036]

∅:D[37.2036] → [14.129818:130311]

∅:D[35.958] → [14.129818:130311]

B:BD[14.129818] → [14.129818:130311]

  public pixiExample() {
    // Taken from  https://pixijs.io/examples/#/demos-basic/container.js
    const container = new Pixi.Container();
    this.actionStage.addChild(container);
    // Create a new texture
    const texture = Pixi.Texture.from(bunny);
    window.alert("doing bunny stuff")
    // Create a 5x5 grid of bunnies
    for (let i = 0; i < 25; i++) {
      const bunny = new Pixi.Sprite(texture);
      bunny.anchor.set(0.5);
      bunny.x = (i % 5) * 40;
      bunny.y = Math.floor(i / 5) * 40;
      container.addChild(bunny);
      bunny.interactive = true;
      // bunny.addListener('pointerdown', () => {
      //   window.alert('clicked bunny #' + i);
      // });
    }
    // Move container to the center
    container.x = this.app.screen.width / 2;
    container.y = this.app.screen.height / 2;
    // Center bunny sprite in local container coordinates
    container.pivot.x = container.width / 2;
    container.pivot.y = container.height / 2;
    // Listen for animate update
    this.app.ticker.add((delta) => {
      // rotate the container!
      // use delta to create frame-independent transform
      container.rotation -= 0.01 * delta;
    });

[14.129329]

[33.652]

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

muck about with pivot, resize, and anchor

Dependencies

In channels

Change contents

Replacement in frontend/src/components/PixiComponent.tsx at line 20 [7.97253]

Insertion in frontend/src/components/PixiComponent.tsx at line 31 [7.97253]

Replacement in frontend/src/components/PixiComponent.tsx at line 39 [7.97253]

File deletion: Highway.ts, Highway.ts

File deletion: RenderRects.ts, RenderRects.ts

File deletion: TopoLayer.ts, TopoLayer.ts

Deletion in frontend/src/pixi/Application.ts at line 2 [11.320]

Insertion in frontend/src/pixi/Application.ts at line 6 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 9 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 14 [11.320]

Insertion in frontend/src/pixi/Application.ts at line 36 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 46 [11.320]

Deletion in frontend/src/pixi/Application.ts at line 99 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 109 [11.320]

Deletion in frontend/src/pixi/Application.ts at line 122 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 123 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 142 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 144 [11.320]

Insertion in frontend/src/pixi/Application.ts at line 153 [11.320]

Deletion in frontend/src/pixi/Application.ts at line 155 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 156 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 164 [11.320]

Deletion in frontend/src/pixi/Application.ts at line 166 [11.320]

Replacement in frontend/src/pixi/Application.ts at line 167 [11.320]