Use image sprite for trains

package-lock.json

@@ -4753,6 +4753,16 @@
         "object-assign": "4.1.1"
       }
     },
+    "file-loader": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
+      "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.5"
+      }
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^2.1.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^3.1.0",
     "style-loader": "^0.20.3",

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,
+  constructor(
-              numStations: number, color: tinycolorInstance) {
+    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,
+  constructor(
-              connections?: Station[]) {
+    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,
+  constructor(
-              destination: Station, color: tinycolorInstance) {
+    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.beginFill(parseInt(train.color.toHex(), 16), 0.8);
-    graphics.drawCircle(train.location.x, train.location.y,
+    // graphics.drawCircle(train.location.x, train.location.y,
-                        rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5));
+                        // rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5));
-    graphics.endFill();
+    // graphics.endFill();
-    train.label.x = train.location.x + 1;
+    const trainSize = rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5);
-    train.label.y = train.location.y + 1;
+    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);

tsconfig.json

@@ -4,8 +4,11 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "es6",
-    "target": "es5",
+    "target": "es6",
     "jsx": "react",
     "allowJs": true
-  }
+  },
+  "include": [
+    "typings"
+  ]
 }

typings/custom.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

webpack.config.js

@@ -43,6 +43,10 @@ module.exports = {
           })
           : ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.png$/,
+        use: 'file-loader',
+      },
     ],
   },
   resolve: {