Use image sprite for trains

src/Line.ts

@@ -16,8 +16,13 @@ export default class Line {
   public stations: Station[];
   public color: tinycolorInstance;
 
-  constructor(stations: Station[], start: PIXI.Point, startDirection: Direction,
-              numStations: number, color: tinycolorInstance) {
+  constructor(
+    stations: Station[],
+    start: PIXI.Point,
+    startDirection: Direction,
+    numStations: number,
+    color: tinycolorInstance
+  ) {
     this.color = color;
     this.stations = [];
     let stationsLeft = stations.slice();

src/Station.ts

@@ -70,8 +70,12 @@ export default class Station {
   public label: PIXI.Text;
   public color: tinycolorInstance;
 
-  constructor(location: PIXI.Point, population: number, color: tinycolorInstance,
-              connections?: Station[]) {
+  constructor(
+    location: PIXI.Point,
+    population: number,
+    color: tinycolorInstance,
+    connections?: Station[],
+  ) {
     this.location = location;
     this.population = population;
     this.color = color;

src/Train.ts

@@ -13,9 +13,16 @@ export default class Train {
   public id: number;
   public label: PIXI.Text;
   public color: tinycolorInstance;
+  public sprite: PIXI.Sprite;
 
-  constructor(location: PIXI.Point, speed: number, passengers: number, origin: Station,
-              destination: Station, color: tinycolorInstance) {
+  constructor(
+    location: PIXI.Point,
+    speed: number,
+    passengers: number,
+    origin: Station,
+    destination: Station,
+    color: tinycolorInstance
+  ) {
     this.location = location;
     this.speed = speed;
     this.origin = origin;
@@ -23,6 +30,8 @@ export default class Train {
     this.passengers = passengers;
     this.color = color;
 
+    this.sprite = new PIXI.Sprite(PIXI.loader.resources.nodeImg.texture);
+
     // for debugging
     trainCount += 1;
     this.id = trainCount;

src/transport.ts

@@ -8,8 +8,11 @@ import Train from './Train';
 import { distance, pointsAlmostEqual, pointsEqual, randomInt, randomPoint,
          rangeMap, weightedRandom } from './utils';
 
+import * as imgNode from './node.png';
 import './style.css';
 
+const NODE_RES = 100;
+
 const MAX_SPEED = 10.0;
 const ACCELERATION = 0.025;
 const APPROACH_DISTANCE = 3.0;
@@ -124,12 +127,19 @@ const drawStations = (stations: Station[], graphics: PIXI.Graphics) => {
 
 const drawTrains = (trains: Train[], graphics: PIXI.Graphics) => {
   for (const train of trains) {
-    graphics.beginFill(parseInt(train.color.toHex(), 16), 0.8);
-    graphics.drawCircle(train.location.x, train.location.y,
-                        rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5));
-    graphics.endFill();
-    train.label.x = train.location.x + 1;
-    train.label.y = train.location.y + 1;
+    // graphics.beginFill(parseInt(train.color.toHex(), 16), 0.8);
+    // graphics.drawCircle(train.location.x, train.location.y,
+                        // rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5));
+    // graphics.endFill();
+    const trainSize = rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5);
+    const scale = trainSize / NODE_RES;
+    train.sprite.x = train.location.x;
+    train.sprite.y = train.location.y;
+    train.sprite.scale.x = scale;
+    train.sprite.scale.y = scale;
+    train.sprite.tint = parseInt(train.color.toHex(), 16);
+    train.label.x = train.location.x + scale + 1;
+    train.label.y = train.location.y + scale + 1;
   }
 };
 
@@ -198,6 +208,10 @@ const run = () => {
 
   app.stage.addChild(graphics);
   app.stage.addChild(fpsText);
+  // add train sprites
+  for (const train of trains) {
+    app.stage.addChild(train.sprite);
+  }
   // Add debug labels
   for (const train of trains) {
     app.stage.addChild(train.label);
@@ -212,4 +226,4 @@ const run = () => {
   });
 };
 
-run();
+PIXI.loader.add('nodeImg', imgNode).load(run);